Henry_Du
8b0934f6f4
- 恢复 variables.css 完整的 ClassicDark/ModernDark 等主题定义 - 恢复 nuxt.config.ts 的主题系统逻辑（默认改为 ClassicLight，保留切换能力） - 修复 BackupManager / VotersModal / ProfileForm / LyricsModal / RequestForm / SongList / ScheduleList / StatsSlide / ArtistSlide 等数十处组件内部硬编码深色（#1a1a1a / #040e15 等）绕过主题的问题，全部改为使用 CSS 变量 (var(--bg-primary) 等) - 这样实现了：在浅色模式下，所有页面均正确显示浅色；在深色模式下，又能正常呈现深色设计，且恢复了右上角的深浅色切换能力
160 lines
3.0 KiB
Vue
160 lines
3.0 KiB
Vue
<template>
|
||
<div class="slide-container">
|
||
<div class="bg-gradient" />
|
||
|
||
<Transition name="entry" appear>
|
||
<div v-show="active" class="content">
|
||
<div class="label">音乐足迹</div>
|
||
|
||
<p class="text-intro">这一年，你一共发起了</p>
|
||
|
||
<div class="number-container">
|
||
<span class="big-number">{{ data.totalRequests.toLocaleString() }}</span>
|
||
<span class="suffix">次点歌</span>
|
||
</div>
|
||
|
||
<div class="sub-stats">
|
||
<div v-if="data.playedRequests > 0" class="sub-content">
|
||
<p class="text-base">
|
||
其中，<span class="highlight-green">{{ data.playedRequests }}</span> 首
|
||
</p>
|
||
<p class="text-sub">在广播站被播出，传递给了更多人</p>
|
||
</div>
|
||
<p v-else class="text-sub">期待你的歌曲早日被播出</p>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
data: Object,
|
||
active: Boolean
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.slide-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background-color: var(--surface-primary, var(--bg-primary, #030712));
|
||
}
|
||
|
||
.bg-gradient {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(
|
||
ellipse at top right,
|
||
rgba(30, 58, 138, 0.4),
|
||
transparent,
|
||
transparent
|
||
);
|
||
}
|
||
|
||
.content {
|
||
z-index: 10;
|
||
max-width: 42rem;
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.label {
|
||
margin-bottom: 1rem;
|
||
color: #3b82f6; /* brand-blue */
|
||
font-weight: 700;
|
||
letter-spacing: 0.05em;
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.text-intro {
|
||
font-size: 1.5rem;
|
||
color: #9ca3af;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.number-container {
|
||
position: relative;
|
||
padding: 1rem 0;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 10rem;
|
||
font-weight: 900;
|
||
line-height: 1;
|
||
background-image: linear-gradient(to bottom, #60a5fa, #1d4ed8);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 0 30px rgba(37, 99, 235, 0.5));
|
||
}
|
||
|
||
.suffix {
|
||
font-size: 1.5rem;
|
||
color: #6b7280;
|
||
font-weight: 500;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.sub-stats {
|
||
margin-top: 3rem;
|
||
padding: 1.5rem;
|
||
border-radius: 1rem;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.sub-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.text-base {
|
||
font-size: 1.125rem;
|
||
color: #d1d5db;
|
||
}
|
||
|
||
.highlight-green {
|
||
font-size: 1.875rem;
|
||
font-weight: 700;
|
||
color: #4ade80;
|
||
margin: 0 0.25rem;
|
||
}
|
||
|
||
.text-sub {
|
||
font-size: 1rem;
|
||
color: #9ca3af;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.number-container {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0;
|
||
}
|
||
|
||
.big-number {
|
||
font-size: 7rem;
|
||
}
|
||
.text-intro {
|
||
font-size: 1.25rem;
|
||
}
|
||
.suffix {
|
||
font-size: 1.25rem;
|
||
margin-top: 0.5rem;
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
</style>
|