mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-31 05:10:45 +08:00
feat: add ScrollToTopBtn component and integrate it into multiple pages
- Added ScrollToTopBtn component for smooth scrolling to the top of the page. - Registered ScrollToTopBtn in main.ts. - Integrated ScrollToTopBtn into browse.vue, discover.vue, recommend.vue, resource.vue pages. - Updated components.d.ts to include ScrollToTopBtn type definition. - Refactored MediaCard.vue and SlideView.vue for improved hover effects and styling. - Cleaned up unused styles and optimized existing styles for better performance and readability.
This commit is contained in:
62
src/@core/components/ScrollToTopBtn.vue
Normal file
62
src/@core/components/ScrollToTopBtn.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script lang="ts" setup>
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="global-action-buttons">
|
||||
<button class="global-action-button" @click="scrollToTop">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7 14L12 9L17 14"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.global-action-buttons {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
inset-block-end: 30px;
|
||||
inset-inline-end: 30px;
|
||||
}
|
||||
|
||||
.global-action-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(6px);
|
||||
background-color: rgba(var(--v-theme-surface), 0.8);
|
||||
block-size: 44px;
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
cursor: pointer;
|
||||
inline-size: 44px;
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--v-theme-surface), 0.95);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
opacity: 1;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
svg {
|
||||
block-size: 20px;
|
||||
inline-size: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user