GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-06 16:19:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化 HeaderTab 组件的模糊背景样式

Browse Source
This commit is contained in:
jxxghp
2025-07-05 20:47:18 +08:00
parent da57124d5e
commit bb59095bad
1 changed files with 14 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/layouts/components/HeaderTab.vue
View File

@@ -107,7 +107,7 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="tab-header rounded-lg" :class="{ 'blur-background': showBlurBackground }"> <div class="tab-header" :class="{ 'blur-background': showBlurBackground }">
<VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon> <VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon>
<VIcon icon="tabler-chevron-left" size="small" color="secondary" /> <VIcon icon="tabler-chevron-left" size="small" color="secondary" />
</VBtn> </VBtn>
@@ -141,38 +141,27 @@ onUnmounted(() => {
justify-content: space-between; justify-content: space-between;
padding-inline: 16px; padding-inline: 16px;
transition: all 0.3s ease; transition: all 0.3s ease;
// 透明模糊背景样式 // 透明模糊背景样式
&.blur-background { &.blur-background {
&::before { &::before {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
backdrop-filter: blur(20px); border-radius: 16px;
border-radius: 8px; backdrop-filter: blur(3px);
content: ""; background: linear-gradient(
to bottom,
rgba(var(--v-theme-background), 0) 0%,
rgba(var(--v-theme-background), 0.05) 25%,
rgba(var(--v-theme-background), 0.1) 50%,
rgba(var(--v-theme-background), 0.05) 75%,
rgba(var(--v-theme-background), 0) 100%
);
content: '';
inset: 0; inset: 0;
margin-block: -8px;
pointer-events: none; pointer-events: none;
transition: all 0.3s ease; transition: all 0.3s ease;
.v-theme--light & {
background: rgba(var(--v-theme-surface), 0.8);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.v-theme--dark & {
background: rgba(var(--v-theme-background), 0.7);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.v-theme--purple & {
background: rgba(var(--v-theme-background), 0.7);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
}
.v-theme--transparent & {
background: rgba(var(--v-theme-background), 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
}
} }
} }
} }
@@ -290,23 +279,4 @@ onUnmounted(() => {
color: rgba(var(--v-theme-on-background), 1); color: rgba(var(--v-theme-on-background), 1);
} }
} }
// 在模糊背景激活时，增强标签文字和图标的可见性
.tab-header.blur-background {
.header-tab {
text-shadow: 0 1px 3px rgba(0, 0, 0, 20%);
&.active {
text-shadow: 0 1px 4px rgba(0, 0, 0, 25%);
}
}
.header-tab-icon {
text-shadow: 0 1px 3px rgba(0, 0, 0, 20%);
&.active {
text-shadow: 0 1px 4px rgba(0, 0, 0, 25%);
}
}
}
</style> </style>