mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 22:30:49 +08:00
b6295071b8
- 新增 useWrappedTheme：主题状态全局共享、localStorage 持久化，支持 F1-F4 快捷键与循环切换 - 新增主题切换器组件（Modern/Game Boy/DOS/VHS）与主题化年份选择器 - 年度总结页接入 themeClass/currentBg；CRT 叠加层支持 VHS 效果（REC/时间戳/跟踪线） - 补充主题全局样式与卡片/控制面板主题适配
157 lines
3.9 KiB
Vue
157 lines
3.9 KiB
Vue
<template>
|
||
<div v-if="variant === 'panel'" class="bg-white rounded-2xl border border-[#EDEDED] overflow-hidden">
|
||
<div class="px-6 py-5 border-b border-[#F3F3F3]">
|
||
<div class="flex items-start justify-between gap-4">
|
||
<div>
|
||
<h2 class="wrapped-title text-xl text-[#000000e6]">{{ title }}</h2>
|
||
<slot name="narrative">
|
||
<p v-if="narrative" class="mt-2 wrapped-body text-sm text-[#7F7F7F] whitespace-pre-wrap">
|
||
{{ narrative }}
|
||
</p>
|
||
</slot>
|
||
</div>
|
||
<slot name="badge" />
|
||
</div>
|
||
</div>
|
||
<div class="px-6 py-6">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Slide 模式：单张卡片占据全页面，背景由外层（年度总结）统一控制 -->
|
||
<section v-else class="relative h-full w-full overflow-hidden">
|
||
<div class="relative h-full max-w-5xl mx-auto px-6 py-10 sm:px-8 sm:py-12 flex flex-col">
|
||
<div class="flex items-start justify-between gap-4">
|
||
<div>
|
||
<h2 class="wrapped-title text-2xl sm:text-3xl text-[#000000e6]">{{ title }}</h2>
|
||
<slot name="narrative">
|
||
<p v-if="narrative" class="mt-3 wrapped-body text-sm sm:text-base text-[#7F7F7F] max-w-2xl whitespace-pre-wrap">
|
||
{{ narrative }}
|
||
</p>
|
||
</slot>
|
||
</div>
|
||
<slot name="badge" />
|
||
</div>
|
||
|
||
<div class="mt-6 sm:mt-8 flex-1 flex items-center">
|
||
<div class="w-full">
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup>
|
||
defineProps({
|
||
cardId: { type: Number, required: true },
|
||
title: { type: String, required: true },
|
||
narrative: { type: String, default: '' },
|
||
variant: { type: String, default: 'panel' } // 'panel' | 'slide'
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
/* ========== Game Boy 主题 ========== */
|
||
|
||
/* 卡片背景 */
|
||
.wrapped-theme-gameboy .bg-white {
|
||
background: #9bbc0f !important;
|
||
border-color: #306230 !important;
|
||
}
|
||
|
||
/* 标题 */
|
||
.wrapped-theme-gameboy .wrapped-title {
|
||
color: #0f380f !important;
|
||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||
}
|
||
|
||
/* 描述文字 */
|
||
.wrapped-theme-gameboy .wrapped-body {
|
||
color: #306230 !important;
|
||
}
|
||
|
||
/* 数字高亮 */
|
||
.wrapped-theme-gameboy .wrapped-number {
|
||
color: #0f380f !important;
|
||
font-family: var(--font-pixel-10), 'Courier New', monospace;
|
||
}
|
||
|
||
/* 边框 */
|
||
.wrapped-theme-gameboy .border-\[\#EDEDED\],
|
||
.wrapped-theme-gameboy .border-\[\#F3F3F3\] {
|
||
border-color: #306230 !important;
|
||
}
|
||
|
||
/* ========== DOS 主题 ========== */
|
||
|
||
/* 卡片背景 */
|
||
.wrapped-theme-dos .bg-white {
|
||
background: #0a0a0a !important;
|
||
border-color: #33ff33 !important;
|
||
box-shadow: 0 0 10px rgba(51, 255, 51, 0.3);
|
||
}
|
||
|
||
/* 标题 */
|
||
.wrapped-theme-dos .wrapped-title {
|
||
color: #33ff33 !important;
|
||
text-shadow: 0 0 5px #33ff33;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 描述文字 */
|
||
.wrapped-theme-dos .wrapped-body {
|
||
color: #22aa22 !important;
|
||
text-shadow: 0 0 3px #22aa22;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 数字高亮 */
|
||
.wrapped-theme-dos .wrapped-number {
|
||
color: #33ff33 !important;
|
||
text-shadow: 0 0 8px #33ff33;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
|
||
/* 边框 */
|
||
.wrapped-theme-dos .border-\[\#EDEDED\],
|
||
.wrapped-theme-dos .border-\[\#F3F3F3\] {
|
||
border-color: #33ff33 !important;
|
||
}
|
||
|
||
/* ========== VHS 主题 ========== */
|
||
|
||
/* 卡片背景 */
|
||
.wrapped-theme-vhs .bg-white {
|
||
background: #16213e !important;
|
||
border-color: #0f3460 !important;
|
||
}
|
||
|
||
/* 标题 */
|
||
.wrapped-theme-vhs .wrapped-title {
|
||
color: #eaeaea !important;
|
||
text-shadow:
|
||
-1px 0 rgba(0, 255, 247, 0.4),
|
||
1px 0 rgba(255, 0, 255, 0.4);
|
||
}
|
||
|
||
/* 描述文字 */
|
||
.wrapped-theme-vhs .wrapped-body {
|
||
color: #a0a0a0 !important;
|
||
}
|
||
|
||
/* 数字高亮 */
|
||
.wrapped-theme-vhs .wrapped-number {
|
||
color: #e94560 !important;
|
||
text-shadow:
|
||
-1px 0 rgba(0, 255, 247, 0.5),
|
||
1px 0 rgba(255, 0, 255, 0.5);
|
||
}
|
||
|
||
/* 边框 */
|
||
.wrapped-theme-vhs .border-\[\#EDEDED\],
|
||
.wrapped-theme-vhs .border-\[\#F3F3F3\] {
|
||
border-color: #0f3460 !important;
|
||
}
|
||
</style>
|