mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-10 17:42:50 +08:00
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
// 控制回到顶部按钮的可见性
|
|
const showScrollToTop = ref(false)
|
|
const scrollThreshold = 200 // 滚动多少像素后显示按钮
|
|
|
|
// 滚动事件处理函数
|
|
const handleScroll = () => {
|
|
showScrollToTop.value = window.scrollY > scrollThreshold
|
|
}
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
|
|
onMounted(async () => {
|
|
// Add scroll event listener
|
|
window.addEventListener('scroll', handleScroll)
|
|
// Initial check for scroll-to-top
|
|
handleScroll()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
// Remove scroll event listener
|
|
window.removeEventListener('scroll', handleScroll)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="global-action-buttons d-none d-sm-block">
|
|
<Transition name="scroll-fade">
|
|
<button v-show="showScrollToTop" 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>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
/* Global Action Button Styles (FAB) */
|
|
.global-action-buttons {
|
|
position: fixed;
|
|
z-index: 100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
inset-block-end: 2rem;
|
|
inset-inline-end: 2rem;
|
|
}
|
|
|
|
.global-action-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
|
|
border-radius: 50%;
|
|
backdrop-filter: blur(10px);
|
|
background-color: rgba(var(--v-theme-background), 0.8);
|
|
block-size: 44px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 8%);
|
|
color: rgb(var(--v-theme-on-surface));
|
|
cursor: pointer;
|
|
inline-size: 44px;
|
|
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
|
|
&:hover {
|
|
background-color: rgba(var(--v-theme-background), 0.95);
|
|
color: rgb(var(--v-theme-primary));
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
svg {
|
|
block-size: 20px;
|
|
inline-size: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
</style>
|