GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-15 20:39:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add ScrollToTopBtn component and integrate it into multiple pages

Browse Source 
- 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:
jxxghp
2025-04-08 17:43:20 +08:00
parent 204719caf8
commit 89e4a68a03
9 changed files with 351 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/@core/components/ScrollToTopBtn.vue Normal file
View 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>

16
src/components/cards/MediaCard.vue
View File

@@ -431,7 +431,7 @@ function onRemoveSubscribe() {
:width="props.width"
class="outline-none shadow ring-gray-500 media-card"
:class="{
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
'ring-1': isImageLoaded,
}"
@click.stop="goMediaDetail(hover.isHovering ?? false)"
@@ -450,7 +450,7 @@ function onRemoveSubscribe() {
</div>
</template>
</VImg>
<!-- 详情 -->
<VCardText
v-show="hover.isHovering || imageLoadError || searchMenuShow"
@@ -533,15 +533,3 @@ function onRemoveSubscribe() {
@close="chooseSiteDialog = false"
/>
</template>
<style lang="scss" scoped>
.media-card {
position: relative;
transition: transform 0.2s ease;
&:hover {
transform: scale(1.03);
z-index: 2;
}
}
</style>

153
src/components/slide/SlideView.vue
View File

@@ -1,9 +1,5 @@
<script lang="ts" setup>
import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
import { useDisplay } from 'vuetify'
// 显示器宽度
const display = useDisplay()
// 元素
const slideview_content = ref()
@@ -85,11 +81,6 @@ function handleMouseLeave() {
isHovering.value = false
}
// 检测是否有足够内容可显示
const hasEnoughContent = computed(() => {
return slide_card_length > card_max
})
// 组件加载完成
onMounted(() => {
// 初次获取元素参数
@@ -111,44 +102,30 @@ onActivated(() => {
</script>
<template>
<div
ref="sliderContainer"
class="slider-container"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
<div ref="sliderContainer" class="slider-container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<div class="slider-header">
<slot name="title">
<SlideViewTitle />
</slot>
<!-- 查看全部按钮 -->
<RouterLink
v-if="props.linkurl"
:to="props.linkurl"
class="view-all-button"
>
<RouterLink v-if="props.linkurl" :to="props.linkurl" class="view-all-button">
<span>全部</span>
<svg width="16" height="16" viewBox="0 0 24 24" class="arrow-svg">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</RouterLink>
</div>
<div class="slider-content-wrapper">
<div class="slider-content-container">
<div
ref="slideview_content"
class="slider-content"
tabindex="0"
@scroll="countDisabled"
>
<div ref="slideview_content" class="slider-content" tabindex="0" @scroll="countDisabled">
<slot name="content" />
</div>
</div>
<!-- 左侧导航按钮 -->
<button
<button
class="nav-button nav-button-left"
@click.stop="slideNext(false)"
v-show="isHovering && disabled !== 0 && disabled !== 3"
@@ -157,9 +134,9 @@ onActivated(() => {
<path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
</svg>
</button>
<!-- 右侧导航按钮 -->
<button
<button
class="nav-button nav-button-right"
@click.stop="slideNext(true)"
v-show="isHovering && disabled !== 2 && disabled !== 3"
@@ -175,104 +152,103 @@ onActivated(() => {
<style lang="scss" scoped>
.slider-container {
position: relative;
margin-bottom: 24px;
// 移除padding，按钮放置在外部
margin-block-end: 24px;
}
.slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 0 8px;
justify-content: space-between;
gap: 16px;
margin-block-end: 12px;
padding-block: 0;
padding-inline: 8px;
& > :first-child {
flex-grow: 1;
min-width: 0;
min-inline-size: 0;
}
}
.view-all-button {
.arrow-svg {
fill: currentcolor;
transition: transform 0.3s ease;
}
display: inline-flex;
flex-shrink: 0;
align-items: center;
text-decoration: none;
border-radius: 16px;
background-color: rgba(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-primary));
font-size: 0.85rem;
font-weight: 500;
color: rgb(var(--v-theme-primary));
background-color: rgba(var(--v-theme-primary), 0.1);
padding: 4px 10px;
border-radius: 16px;
padding-block: 4px;
padding-inline: 10px;
text-decoration: none;
transition: all 0.25s ease;
flex-shrink: 0;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.15);
box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.1);
transform: translateY(-1px);
.arrow-svg {
transform: translateX(2px);
}
}
span {
margin-right: 4px;
}
.arrow-svg {
transition: transform 0.3s ease;
fill: currentColor;
margin-inline-end: 4px;
}
}
.slider-content-wrapper {
position: relative;
width: 100%;
inline-size: 100%;
}
.slider-content-container {
position: relative;
width: 100%;
overflow: hidden;
inline-size: 100%;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background-color: rgba(var(--v-theme-surface), 0.9);
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, box-shadow 0.3s ease;
padding: 0;
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
border-radius: 50%;
backdrop-filter: blur(5px);
background-color: rgba(var(--v-theme-surface), 0.9);
block-size: 38px;
cursor: pointer;
inline-size: 38px;
inset-block-start: 50%;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
box-shadow 0.3s ease;
svg {
block-size: 22px;
fill: rgb(var(--v-theme-on-surface));
inline-size: 22px;
opacity: 0.8;
transition: all 0.3s ease;
width: 22px;
height: 22px;
}
&:hover {
transform: translateY(-50%) scale(1.1);
background-color: rgba(var(--v-theme-surface), 1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
border-color: rgba(var(--v-theme-on-surface), 0.15);
background-color: rgba(var(--v-theme-surface), 1);
transform: translateY(-50%) scale(1.1);
svg {
opacity: 1;
}
@@ -280,38 +256,39 @@ onActivated(() => {
}
.nav-button-left {
left: -19px; // 半径
inset-inline-start: -14px; // 半径
}
.nav-button-right {
right: -19px; // 半径
inset-inline-end: -14px; // 半径
}
.slider-content {
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: column;
overflow: scroll hidden !important;
justify-content: start;
gap: 16px;
padding: 8px 12px;
overflow: scroll hidden !important;
grid-auto-flow: column;
grid-template-rows: 1fr;
-ms-overflow-style: none !important;
overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
padding-block: 8px;
padding-inline: 12px;
scroll-behavior: smooth;
scrollbar-width: none !important;
&::-webkit-scrollbar {
display: none;
}
}
.slider-container:hover .nav-button[style*="display: none;"] ~ .nav-button,
.slider-container:hover .nav-button {
.slider-container:hover .nav-button,
.slider-container:hover .nav-button[style*='display: none;'] ~ .nav-button {
opacity: 1;
pointer-events: auto;
}
.nav-button[style*="display: none;"] {
.nav-button[style*='display: none;'] {
opacity: 0 !important;
pointer-events: none !important;
}

2
src/main.ts
View File

@@ -27,6 +27,7 @@ import VueApexCharts from 'vue3-apexcharts'
// 6. 注册自定义组件
import DialogCloseBtn from '@/@core/components/DialogCloseBtn.vue'
import ScrollToTopBtn from '@/@core/components/ScrollToTopBtn.vue'
import MediaCard from './components/cards/MediaCard.vue'
import PosterCard from './components/cards/PosterCard.vue'
import BackdropCard from './components/cards/BackdropCard.vue'
@@ -82,6 +83,7 @@ initializeApp().then(() => {
.component('VApexChart', VueApexCharts)
.component('VCronVuetify', CronVuetify)
.component('VDialogCloseBtn', DialogCloseBtn)
.component('VScrollToTopBtn', ScrollToTopBtn)
.component('VMediaCard', MediaCard)
.component('VPosterCard', PosterCard)
.component('VBackdropCard', BackdropCard)

1
src/pages/browse.vue
View File

@@ -39,5 +39,6 @@ function getApiPath(paths: string[] | string) {
</div>
<PersonCardListView v-if="type === 'person'" :apipath="getApiPath(props.paths || '')" :params="route.query" />
<MediaCardListView v-else :apipath="getApiPath(props.paths || '')" :params="route.query" />
<VScrollToTopBtn />
</div>
</template>

3
src/pages/discover.vue
View File

@@ -114,6 +114,7 @@ onActivated(async () => {
await loadExtraDiscoverSources()
sortSubscribeOrder()
})
</script>
<template>
@@ -158,5 +159,7 @@ onActivated(async () => {
</transition>
</VWindowItem>
</VWindow>
<!-- 快速滚动到顶部按钮 -->
<VScrollToTopBtn />
</div>
</template>

392
src/pages/recommend.vue
View File

@@ -2,25 +2,21 @@
import api from '@/api'
import { RecommendSource } from '@/api/types'
import MediaCardSlideView from '@/views/discover/MediaCardSlideView.vue'
import { useDisplay } from 'vuetify'
// APP
const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value
// 当前选择的分类
const currentCategory = ref('电影')
const currentCategory = ref('全部')
// 定义分类类型
type CategoryType = '电影' | '电视剧' | '动漫' | '榜单'
type CategoryMap = Record<CategoryType, Array<{apipath: string; linkurl: string; title: string}>>
type CategoryType = '全部' | '电影' | '电视剧' | '动漫' | '榜单'
type CategoryMap = Record<CategoryType, Array<{ apipath: string; linkurl: string; title: string }>>
// 预处理的分类视图数据
const categoryViewsMap = reactive<CategoryMap>({
全部: [],
电影: [],
电视剧: [],
动漫: [],
榜单: []
榜单: [],
})
// 按分类过滤视图的映射
@@ -107,6 +103,9 @@ const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>
// 计算当前分类下显示的视图
const filteredViews = computed(() => {
if (currentCategory.value === '全部') {
return viewList.filter(item => enableConfig.value[item.title])
}
return categoryViewsMap[currentCategory.value as CategoryType]
})
@@ -124,10 +123,10 @@ const extraRecommendSources = ref<RecommendSource[]>([])
// 分类视图
function updateCategoryViews() {
// 清空所有分类
(Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
;(Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
categoryViewsMap[category] = []
})
// 先把所有启用的视图按照分类归类
const enabledViews = viewList.filter(item => enableConfig.value[item.title])
enabledViews.forEach(view => {
@@ -186,21 +185,18 @@ async function saveConfig() {
console.error(error)
}
dialog.value = false
// 保存后更新分类
updateCategoryViews()
}
const scrollToTop = () => {
window.scrollTo({top: 0, behavior: 'smooth'})
}
// 标签图标映射
const categoryIcons: Record<CategoryType, string> = {
全部: 'mdi-filmstrip-box-multiple',
电影: 'mdi-movie',
电视剧: 'mdi-television-classic',
动漫: 'mdi-animation',
榜单: 'mdi-trophy'
榜单: 'mdi-trophy',
}
onBeforeMount(async () => {
@@ -230,26 +226,19 @@ watch(currentCategory, () => {
<!-- 页面顶部控制栏 -->
<div class="recommend-header">
<div class="header-tabs">
<div
v-for="(category, idx) in ['电影', '电视剧', '动漫', '榜单']"
<div
v-for="(category, idx) in ['全部', '电影', '电视剧', '动漫', '榜单']"
:key="idx"
class="header-tab"
:class="{ 'active': currentCategory === category }"
@click="currentCategory = category"
>
<VIcon
:icon="categoryIcons[category as CategoryType]"
size="small"
class="header-tab-icon"
/>
<VIcon :icon="categoryIcons[category as CategoryType]" size="small" class="header-tab-icon" />
<span>{{ category }}</span>
</div>
</div>
<button
class="tune-button"
@click="dialog = true"
>
<button class="tune-button" @click="dialog = true">
<div class="tune-icon">
<span></span>
<span></span>
@@ -258,34 +247,22 @@ watch(currentCategory, () => {
<span class="tune-text">显示设置</span>
</button>
</div>
<!-- 滚动内容区域 -->
<div class="recommend-content">
<TransitionGroup name="fade">
<MediaCardSlideView
v-for="item in filteredViews"
:key="item.title"
v-bind="item"
class="content-group"
/>
<MediaCardSlideView v-for="item in filteredViews" :key="item.title" v-bind="item" class="content-group" />
</TransitionGroup>
<div v-if="filteredViews.length === 0" class="empty-category">
<VIcon icon="mdi-alert-circle-outline" size="large" class="empty-icon" />
<p class="empty-text">当前分类下没有可显示的内容</p>
<VBtn
color="primary"
variant="tonal"
size="small"
@click="dialog = true"
>
设置显示内容
</VBtn>
<VBtn color="primary" variant="tonal" size="small" @click="dialog = true"> 设置显示内容 </VBtn>
</div>
</div>
<!-- 设置面板 -->
<VDialog v-model="dialog" width="500" class="settings-dialog" scrollable>
<VDialog v-model="dialog" width="40rem" class="settings-dialog" scrollable>
<VCard class="settings-card">
<VCardItem class="settings-card-header">
<VCardTitle>
@@ -296,26 +273,23 @@ watch(currentCategory, () => {
<VBtn icon="mdi-close" variant="text" @click="dialog = false" />
</template>
</VCardItem>
<VDivider />
<VCardText>
<p class="settings-hint">选择您想在页面显示的内容</p>
<div class="settings-grid">
<div
v-for="(item, index) in viewList"
:key="index"
class="setting-item"
:class="{
:class="{
'enabled': enableConfig[item.title],
[getCategoryForView(item.title)]: true
[getCategoryForView(item.title)]: true,
}"
@click="enableConfig[item.title] = !enableConfig[item.title]"
>
<div class="setting-item-inner">
<div class="setting-check">
<VIcon
<VIcon
:icon="enableConfig[item.title] ? 'mdi-check-circle' : 'mdi-circle-outline'"
:color="enableConfig[item.title] ? 'primary' : undefined"
size="small"
@@ -326,46 +300,23 @@ watch(currentCategory, () => {
</div>
</div>
</VCardText>
<VDivider />
<VCardActions>
<VBtn
variant="text"
@click="Object.keys(enableConfig).forEach(key => enableConfig[key] = true)"
>
<VCardActions class="mt-3">
<VBtn variant="text" @click="Object.keys(enableConfig).forEach(key => (enableConfig[key] = true))">
全选
</VBtn>
<VBtn
variant="text"
@click="Object.keys(enableConfig).forEach(key => enableConfig[key] = false)"
>
<VBtn variant="text" @click="Object.keys(enableConfig).forEach(key => (enableConfig[key] = false))">
全不选
</VBtn>
<VSpacer />
<VBtn variant="text" @click="dialog = false">取消</VBtn>
<VBtn
color="primary"
variant="tonal"
@click="saveConfig"
>
保存设置
</VBtn>
<VBtn color="primary" variant="tonal" class="px-3" @click="saveConfig"> 保存设置 </VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 快速滚动到顶部按钮 -->
<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>
<VScrollToTopBtn />
</div>
</template>
@@ -373,97 +324,99 @@ watch(currentCategory, () => {
.mp-recommend {
position: relative;
padding: 0;
max-width: 100%;
max-inline-size: 100%;
}
.recommend-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
margin-bottom: 16px;
background-color: rgba(var(--v-theme-primary), 0.02);
justify-content: space-between;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(var(--v-theme-primary), 0.1);
background-color: rgba(var(--v-theme-primary), 0.02);
border-block-end: 1px solid rgba(var(--v-theme-primary), 0.1);
inset-block-start: 0;
margin-block-end: 16px;
padding-block: 12px;
padding-inline: 16px;
}
.header-tabs {
display: flex;
padding: 4px;
gap: 12px;
overflow-x: auto;
scrollbar-width: none;
padding: 4px;
&::-webkit-scrollbar {
display: none;
}
}
.header-tab-icon {
color: rgba(var(--v-theme-on-background), 0.6);
margin-inline-end: 6px;
transition: color 0.2s ease;
}
.header-tab {
position: relative;
display: flex;
align-items: center;
padding: 6px 14px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
background-color: transparent;
position: relative;
color: rgba(var(--v-theme-on-background), 0.7);
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
padding-block: 6px;
padding-inline: 14px;
transition: all 0.2s ease;
white-space: nowrap;
&::after {
content: '';
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 70%;
height: 3px;
background-color: rgb(var(--v-theme-primary));
border-radius: 3px;
background-color: rgb(var(--v-theme-primary));
block-size: 3px;
content: '';
inline-size: 70%;
inset-block-end: -4px;
inset-inline-start: 50%;
transform: translateX(-50%) scaleX(0);
transition: transform 0.2s ease;
}
&.active {
color: rgb(var(--v-theme-primary));
&::after {
transform: translateX(-50%) scaleX(1);
}
.header-tab-icon {
color: rgb(var(--v-theme-primary));
}
}
&:hover:not(.active) {
color: rgba(var(--v-theme-on-background), 1);
background-color: rgba(var(--v-theme-primary), 0.05);
color: rgba(var(--v-theme-on-background), 1);
}
}
.header-tab-icon {
margin-right: 6px;
transition: color 0.2s ease;
color: rgba(var(--v-theme-on-background), 0.6);
}
.settings-btn {
min-width: auto;
width: 48px;
height: 48px;
border-radius: 50%;
block-size: 48px;
inline-size: 48px;
min-inline-size: auto;
}
.recommend-content {
padding: 0 8px;
min-height: 300px;
min-block-size: 300px;
padding-block: 0;
padding-inline: 8px;
}
.empty-category {
@@ -471,30 +424,31 @@ watch(currentCategory, () => {
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
background-color: rgba(var(--v-theme-surface), 0.5);
border-radius: 12px;
margin: 20px 0;
border: 1px dashed rgba(var(--v-theme-on-surface), 0.1);
border-radius: 12px;
background-color: rgba(var(--v-theme-surface), 0.5);
block-size: 300px;
margin-block: 20px;
margin-inline: 0;
}
.empty-icon {
margin-block-end: 12px;
opacity: 0.5;
margin-bottom: 12px;
}
.empty-text {
color: rgba(var(--v-theme-on-surface), 0.6);
margin-bottom: 16px;
margin-block-end: 16px;
}
.content-group {
margin-bottom: 24px;
margin-block-end: 24px;
}
.settings-card {
border-radius: 12px;
overflow: hidden;
border-radius: 12px;
}
.settings-card-header {
@@ -502,111 +456,69 @@ watch(currentCategory, () => {
}
.settings-hint {
font-size: 0.9rem;
color: rgba(var(--v-theme-on-surface), 0.6);
margin-bottom: 16px;
font-size: 0.9rem;
margin-block-end: 16px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.setting-item {
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
&.enabled {
.setting-item-inner {
background-color: rgba(var(--v-theme-primary), 0.08);
border-color: rgba(var(--v-theme-primary), 0.2);
}
}
&.电影 .setting-item-inner {
border-left: 3px solid #3b82f6;
}
&.电视剧 .setting-item-inner {
border-left: 3px solid #6366f1;
}
&.动漫 .setting-item-inner {
border-left: 3px solid #a855f7;
}
&.榜单 .setting-item-inner {
border-left: 3px solid #f59e0b;
}
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.setting-item-inner {
display: flex;
align-items: center;
padding: 10px 12px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
border-radius: 8px;
background-color: rgba(var(--v-theme-surface), 1);
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
padding-block: 10px;
padding-inline: 12px;
transition: all 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.08);
}
}
.setting-item {
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
&.enabled {
.setting-item-inner {
border-color: rgba(var(--v-theme-primary), 0.2);
background-color: rgba(var(--v-theme-primary), 0.08);
}
}
&.电影 .setting-item-inner {
border-inline-start: 3px solid #3b82f6;
}
&.电视剧 .setting-item-inner {
border-inline-start: 3px solid #6366f1;
}
&.动漫 .setting-item-inner {
border-inline-start: 3px solid #a855f7;
}
&.榜单 .setting-item-inner {
border-inline-start: 3px solid #f59e0b;
}
}
.setting-check {
margin-right: 8px;
margin-inline-end: 8px;
}
.setting-label {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
font-size: 0.9rem;
text-overflow: ellipsis;
}
.global-action-buttons {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 100;
display: flex;
flex-direction: column;
gap: 16px;
}
.global-action-button {
width: 44px;
height: 44px;
background-color: rgba(var(--v-theme-surface), 0.8);
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
border-radius: 50%;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
color: rgb(var(--v-theme-on-surface));
opacity: 0.7;
&:hover {
background-color: rgba(var(--v-theme-surface), 0.95);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
opacity: 1;
color: rgb(var(--v-theme-primary));
}
svg {
transition: all 0.3s ease;
width: 20px;
height: 20px;
}
white-space: nowrap;
}
.fade-enter-active,
@@ -628,11 +540,12 @@ watch(currentCategory, () => {
animation: fadeInOut 0.5s ease;
}
@keyframes fadeInOut {
@keyframes fadeinout {
0% {
opacity: 0.5;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
@@ -642,67 +555,66 @@ watch(currentCategory, () => {
.tune-button {
display: flex;
align-items: center;
background: rgba(var(--v-theme-primary), 0.1);
border: none;
border-radius: 30px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-primary));
cursor: pointer;
padding-block: 8px;
padding-inline: 16px;
transition: all 0.3s ease;
&:hover {
background: rgba(var(--v-theme-primary), 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(var(--v-theme-primary), 0.2);
}
.tune-icon {
display: flex;
flex-direction: column;
width: 16px;
height: 16px;
justify-content: space-between;
margin-right: 8px;
block-size: 16px;
inline-size: 16px;
margin-inline-end: 8px;
span {
display: block;
height: 2px;
background-color: rgb(var(--v-theme-primary));
border-radius: 2px;
background-color: rgb(var(--v-theme-primary));
block-size: 2px;
transition: all 0.3s ease;
&:nth-child(1) {
width: 60%;
inline-size: 60%;
}
&:nth-child(2) {
width: 80%;
inline-size: 80%;
}
&:nth-child(3) {
width: 40%;
inline-size: 40%;
}
}
}
.tune-text {
font-weight: 500;
font-size: 0.9rem;
font-weight: 500;
}
&:hover .tune-icon span {
&:nth-child(1) {
width: 100%;
inline-size: 100%;
}
&:nth-child(2) {
width: 60%;
inline-size: 60%;
}
&:nth-child(3) {
width: 80%;
inline-size: 80%;
}
}
}
</style>

124
src/pages/resource.vue
View File

@@ -270,42 +270,43 @@ onUnmounted(() => {
<div class="initial-loading-text">搜索中</div>
</div>
</div>
<!-- 滚动到顶部按钮 -->
<VScrollToTopBtn />
</div>
</template>
<style scoped>
.search-progress-container {
position: fixed;
top: env(safe-area-inset-top);
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: center;
padding-top: 4rem;
inset-block-start: env(safe-area-inset-top);
inset-inline: 0;
padding-block-start: 4rem;
}
.search-progress-card {
max-width: 400px;
width: 90%;
background-color: rgb(var(--v-theme-surface));
border-radius: 12px;
padding: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border: 1px solid rgba(var(--v-theme-primary), 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
background-color: rgb(var(--v-theme-surface));
box-shadow: 0 8px 24px rgba(0, 0, 0, 12%);
inline-size: 90%;
max-inline-size: 400px;
}
.progress-header {
display: flex;
align-items: center;
margin-bottom: 12px;
margin-block-end: 12px;
}
.progress-title {
color: rgb(var(--v-theme-on-surface));
font-size: 0.9rem;
font-weight: 500;
color: rgb(var(--v-theme-on-surface));
}
.progress-bar-container {
@@ -315,39 +316,40 @@ onUnmounted(() => {
}
.progress-bar-wrapper {
flex: 1;
height: 4px;
background-color: rgba(var(--v-theme-on-surface), 0.08);
border-radius: 4px;
overflow: hidden;
flex: 1;
border-radius: 4px;
background-color: rgba(var(--v-theme-on-surface), 0.08);
block-size: 4px;
}
.progress-bar {
height: 100%;
border-radius: 4px;
background: linear-gradient(
90deg,
rgb(var(--v-theme-primary)) 0%,
rgb(var(--v-theme-primary)) 70%,
rgba(var(--v-theme-primary), 0.8) 100%
);
border-radius: 4px;
transition: width 0.3s ease;
block-size: 100%;
transition: inline-size 0.3s ease;
}
.progress-percentage {
color: rgb(var(--v-theme-primary));
font-size: 0.8rem;
font-weight: 600;
color: rgb(var(--v-theme-primary));
min-width: 36px;
text-align: right;
min-inline-size: 36px;
text-align: end;
}
/* 精简标题栏样式 */
.search-header {
padding: 12px 16px;
background-color: rgb(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
background-color: rgb(var(--v-theme-surface));
box-shadow: 0 2px 8px rgba(0, 0, 0, 5%);
padding-block: 12px;
padding-inline: 16px;
}
.search-info-container {
@@ -374,27 +376,27 @@ onUnmounted(() => {
.view-toggle-buttons {
display: flex;
background-color: rgba(var(--v-theme-surface-variant), 0.1);
border-radius: 8px;
padding: 4px;
border-radius: 8px;
background-color: rgba(var(--v-theme-surface-variant), 0.1);
}
.view-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 36px;
border: none;
background: transparent;
cursor: pointer;
border-radius: 6px;
background: transparent;
block-size: 36px;
cursor: pointer;
inline-size: 40px;
transition: all 0.2s ease;
}
.view-toggle-btn.active {
background-color: rgb(var(--v-theme-surface));
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);
}
.view-toggle-btn:hover:not(.active) {
@@ -404,16 +406,13 @@ onUnmounted(() => {
/* 视图切换加载状态 */
.view-changing-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(var(--v-theme-background), 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
background-color: rgba(var(--v-theme-background), 0.7);
inset: 0;
}
.view-changing-content {
@@ -429,11 +428,11 @@ onUnmounted(() => {
}
.pulse-circle {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgb(var(--v-theme-primary));
animation: pulse 1.2s ease-in-out infinite;
background-color: rgb(var(--v-theme-primary));
block-size: 12px;
inline-size: 12px;
}
.pulse-circle:nth-child(2) {
@@ -447,28 +446,29 @@ onUnmounted(() => {
@keyframes pulse {
0%,
100% {
transform: scale(0.8);
opacity: 0.5;
transform: scale(0.8);
}
50% {
transform: scale(1.2);
opacity: 1;
transform: scale(1.2);
}
}
.view-changing-text {
color: rgb(var(--v-theme-primary));
font-size: 0.9rem;
font-weight: 500;
color: rgb(var(--v-theme-primary));
letter-spacing: 1px;
}
/* 初始的加载状态 */
.initial-loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
justify-content: center;
min-block-size: 50vh;
}
.initial-loading-content {
@@ -481,16 +481,16 @@ onUnmounted(() => {
.wave-loader {
display: flex;
align-items: center;
block-size: 40px;
gap: 6px;
height: 40px;
}
.wave-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgb(var(--v-theme-primary));
animation: wave 1.5s ease-in-out infinite;
background-color: rgb(var(--v-theme-primary));
block-size: 8px;
inline-size: 8px;
}
.wave-dot:nth-child(1) {
@@ -514,26 +514,28 @@ onUnmounted(() => {
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.initial-loading-text {
color: rgb(var(--v-theme-primary));
font-size: 0.9rem;
font-weight: 500;
color: rgb(var(--v-theme-primary));
letter-spacing: 1px;
}
.search-results-container {
min-height: 50vh;
position: relative;
min-block-size: 50vh;
}
@media (max-width: 600px) {
@media (width <= 600px) {
.search-header {
padding: 8px 12px;
padding-block: 8px;
padding-inline: 12px;
}
.search-title {
@@ -542,17 +544,17 @@ onUnmounted(() => {
}
.search-info-container {
overflow: hidden;
flex: 1;
gap: 8px;
min-width: 0;
overflow: hidden;
min-inline-size: 0;
}
.search-tags {
overflow-x: auto;
flex-wrap: nowrap;
margin-inline-end: 8px;
overflow-x: auto;
scrollbar-width: none;
margin-right: 8px;
}
.search-tags::-webkit-scrollbar {
@@ -568,8 +570,8 @@ onUnmounted(() => {
}
.view-toggle-btn {
width: 36px;
height: 32px;
block-size: 32px;
inline-size: 36px;
}
}
</style>