mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-20 06:40:49 +08:00
7ce6abecca
- 主题系统收敛为 Modern/Game Boy/DOS（快捷键改为 F1-F3） - 删除 VHS 切换器与相关样式（卡片/控件/年份选择/图表等） - DOS 主题统一使用像素字体，减弱发光强度并细化扫描线/闪烁参数 - DOS 闪烁光标改由 WrappedCRTOverlay 渲染，避免全局样式副作用 - 移除热力图 vhs 配色分支
122 lines
3.2 KiB
Vue
122 lines
3.2 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;
|
||
}
|
||
</style>
|