mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 22:30:49 +08:00
feat(wrapped-ui): 引入多主题系统与切换器(Modern/Game Boy/DOS/VHS)
- 新增 useWrappedTheme:主题状态全局共享、localStorage 持久化,支持 F1-F4 快捷键与循环切换 - 新增主题切换器组件(Modern/Game Boy/DOS/VHS)与主题化年份选择器 - 年度总结页接入 themeClass/currentBg;CRT 叠加层支持 VHS 效果(REC/时间戳/跟踪线) - 补充主题全局样式与卡片/控制面板主题适配
This commit is contained in:
@@ -50,3 +50,107 @@ defineProps({
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user