diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css index 8f5b90a..84a4645 100644 --- a/frontend/assets/css/tailwind.css +++ b/frontend/assets/css/tailwind.css @@ -264,8 +264,8 @@ /* CRT 闪烁 - 亮度波动 */ .crt-flicker { - background-color: rgba(255, 255, 255, 0.015); - animation: crt-flicker 0.08s infinite alternate; + background-color: rgba(255, 255, 255, 0.01); + animation: crt-flicker 0.15s infinite alternate; } /* CRT 暗角 - 边缘渐暗(更强) */ @@ -1113,7 +1113,7 @@ opacity: 1; } 50% { - opacity: 0.98; + opacity: 0.985; } } @@ -1149,7 +1149,7 @@ } /* ============================================ - Wrapped 三主题系统 - Game Boy / DOS / VHS + Wrapped 主题系统 - Game Boy / DOS ============================================ */ /* 复古模式共享基础样式 */ @@ -1225,7 +1225,10 @@ --wrapped-warning: #ffaa00; /* 琥珀警告色 */ background-color: #000000 !important; - font-family: 'Courier New', 'Consolas', monospace !important; + /* 使用现有 Fusion Pixel 10px 字体 */ + font-family: var(--font-pixel-10), 'Courier New', monospace !important; + -webkit-font-smoothing: none; + image-rendering: pixelated; } /* DOS 文字发光效果 */ @@ -1234,34 +1237,14 @@ .wrapped-theme-dos .wrapped-label, .wrapped-theme-dos .wrapped-number { color: #33ff33 !important; + /* 从 4 层减少到 2 层,降低发光强度 */ text-shadow: - 0 0 5px #33ff33, - 0 0 10px #33ff33, - 0 0 20px #33ff33, - 0 0 40px #22aa22; - font-family: 'Courier New', 'Consolas', monospace !important; + 0 0 4px rgba(51, 255, 51, 0.8), + 0 0 8px rgba(34, 170, 34, 0.4); + font-family: var(--font-pixel-10), 'Courier New', monospace !important; -webkit-font-smoothing: none; } -/* DOS 闪烁光标 */ -.wrapped-theme-dos::after { - content: '█'; - color: #33ff33; - animation: dos-cursor-blink 530ms steps(1) infinite; - position: fixed; - bottom: 20px; - right: 20px; - font-size: 1.5rem; - text-shadow: 0 0 10px #33ff33; - z-index: 100; - pointer-events: none; -} - -@keyframes dos-cursor-blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - /* DOS ASCII 边框 */ .wrapped-theme-dos .wrapped-card-shell, .wrapped-theme-dos [class*="border"] { @@ -1277,16 +1260,16 @@ transition: text-shadow 0.1s ease-out !important; } -/* DOS 扫描线(更明显) */ +/* DOS 扫描线(细化) */ .wrapped-theme-dos .crt-scanlines { background: repeating-linear-gradient( to bottom, transparent 0px, - transparent 2px, - rgba(0, 0, 0, 0.4) 2px, - rgba(0, 0, 0, 0.4) 4px + transparent 1px, + rgba(0, 0, 0, 0.15) 1px, + rgba(0, 0, 0, 0.15) 2px ) !important; - opacity: 0.8; + opacity: 0.5; } /* DOS 按钮样式 */ @@ -1304,205 +1287,3 @@ color: #000000 !important; text-shadow: none; } - -/* ============================================ - Theme 3: VHS Tape - 色彩溢出与信号干扰 - ============================================ */ -.wrapped-theme-vhs { - --wrapped-bg: #1a1a2e; - --wrapped-card-bg: #16213e; - --wrapped-text: #eaeaea; - --wrapped-text-secondary: #a0a0a0; - --wrapped-accent: #e94560; - --wrapped-border: #0f3460; - --wrapped-warning: #f39c12; - - background-color: #1a1a2e !important; -} - -/* VHS 色彩溢出(Chromatic Aberration) */ -.wrapped-theme-vhs .wrapped-title, -.wrapped-theme-vhs .wrapped-number { - position: relative; - color: #eaeaea !important; -} - -.wrapped-theme-vhs .wrapped-title::before, -.wrapped-theme-vhs .wrapped-number::before { - content: attr(data-text); - position: absolute; - left: -2px; - top: 0; - color: #00fff7; - opacity: 0.7; - z-index: -1; - pointer-events: none; -} - -.wrapped-theme-vhs .wrapped-title::after, -.wrapped-theme-vhs .wrapped-number::after { - content: attr(data-text); - position: absolute; - left: 2px; - top: 0; - color: #ff00ff; - opacity: 0.7; - z-index: -1; - pointer-events: none; -} - -/* VHS 水平条纹滚动 */ -.wrapped-theme-vhs::before { - content: ''; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: repeating-linear-gradient( - to bottom, - transparent 0px, - transparent 4px, - rgba(255, 255, 255, 0.03) 4px, - rgba(255, 255, 255, 0.03) 8px - ); - animation: vhs-scanlines 8s linear infinite; - pointer-events: none; - z-index: 50; -} - -@keyframes vhs-scanlines { - 0% { transform: translateY(0); } - 100% { transform: translateY(100px); } -} - -/* VHS 信号干扰/故障动画 */ -.wrapped-theme-vhs .wrapped-card-shell { - animation: vhs-glitch 3s infinite; -} - -@keyframes vhs-glitch { - 0%, 95%, 100% { - transform: translate(0); - filter: none; - } - 96% { - transform: translate(-2px, 1px); - filter: hue-rotate(90deg); - } - 97% { - transform: translate(2px, -1px); - filter: hue-rotate(-90deg) saturate(1.5); - } - 98% { - transform: translate(-1px, 2px); - filter: brightness(1.2); - } - 99% { - transform: translate(1px, -2px); - filter: contrast(1.2); - } -} - -/* VHS 降低对比度和饱和度 */ -.wrapped-theme-vhs img, -.wrapped-theme-vhs svg { - filter: saturate(0.8) contrast(0.9); -} - -/* VHS 时间戳样式 */ -.wrapped-theme-vhs .vhs-timestamp { - position: fixed; - bottom: 20px; - right: 20px; - font-family: 'VCR OSD Mono', 'Courier New', monospace; - font-size: 1rem; - color: #ffffff; - background: rgba(0, 0, 0, 0.6); - padding: 4px 8px; - text-shadow: 2px 2px 0 #ff0000, -2px -2px 0 #00ffff; - z-index: 100; - pointer-events: none; -} - -/* VHS 跟踪线效果 */ -.wrapped-theme-vhs .vhs-tracking { - position: fixed; - left: 0; - right: 0; - height: 3px; - background: linear-gradient( - to right, - transparent 0%, - rgba(255, 255, 255, 0.8) 50%, - transparent 100% - ); - animation: vhs-tracking 2s ease-in-out infinite; - pointer-events: none; - z-index: 60; -} - -@keyframes vhs-tracking { - 0%, 100% { - top: -10px; - opacity: 0; - } - 10% { - opacity: 1; - } - 90% { - opacity: 1; - } - 95% { - top: calc(100vh + 10px); - opacity: 0; - } -} - -/* VHS 边框样式 */ -.wrapped-theme-vhs [class*="border"] { - border-color: #0f3460 !important; -} - -.wrapped-theme-vhs [class*="rounded"] { - border-radius: 2px !important; -} - -/* VHS 按钮样式 */ -.wrapped-theme-vhs button { - background: linear-gradient(135deg, #e94560 0%, #0f3460 100%) !important; - border: none !important; - color: #ffffff !important; - text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); - box-shadow: 0 2px 10px rgba(233, 69, 96, 0.3); -} - -.wrapped-theme-vhs button:hover { - filter: brightness(1.1); - box-shadow: 0 4px 15px rgba(233, 69, 96, 0.5); -} - -/* VHS REC 指示器 */ -.wrapped-theme-vhs .vhs-rec { - position: fixed; - top: 20px; - left: 20px; - display: flex; - align-items: center; - gap: 8px; - font-family: 'VCR OSD Mono', 'Courier New', monospace; - font-size: 0.875rem; - color: #ff0000; - z-index: 100; - pointer-events: none; -} - -.wrapped-theme-vhs .vhs-rec::before { - content: '●'; - animation: vhs-rec-blink 1s steps(1) infinite; -} - -@keyframes vhs-rec-blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} diff --git a/frontend/components/wrapped/shared/WrappedCRTOverlay.vue b/frontend/components/wrapped/shared/WrappedCRTOverlay.vue index 7d43dae..40af685 100644 --- a/frontend/components/wrapped/shared/WrappedCRTOverlay.vue +++ b/frontend/components/wrapped/shared/WrappedCRTOverlay.vue @@ -1,62 +1,38 @@ - + -// VHS 时间戳(实时更新) -const vhsTimestamp = ref('') - -const updateTimestamp = () => { - const now = new Date() - const month = String(now.getMonth() + 1).padStart(2, '0') - const day = String(now.getDate()).padStart(2, '0') - const year = now.getFullYear() - const hours = String(now.getHours()).padStart(2, '0') - const minutes = String(now.getMinutes()).padStart(2, '0') - const seconds = String(now.getSeconds()).padStart(2, '0') - vhsTimestamp.value = `${month}/${day}/${year} ${hours}:${minutes}:${seconds}` + diff --git a/frontend/components/wrapped/shared/WrappedCardShell.vue b/frontend/components/wrapped/shared/WrappedCardShell.vue index 3e48474..d86256a 100644 --- a/frontend/components/wrapped/shared/WrappedCardShell.vue +++ b/frontend/components/wrapped/shared/WrappedCardShell.vue @@ -118,39 +118,4 @@ defineProps({ .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; -} diff --git a/frontend/components/wrapped/shared/WrappedControls.vue b/frontend/components/wrapped/shared/WrappedControls.vue index f62c58c..2dc4dbb 100644 --- a/frontend/components/wrapped/shared/WrappedControls.vue +++ b/frontend/components/wrapped/shared/WrappedControls.vue @@ -154,28 +154,4 @@ const yearOptions = computed(() => { .wrapped-theme-dos .controls-btn:hover:not(:disabled) { background-color: #44ff44; } - -/* VHS 特殊样式 */ -.wrapped-theme-vhs .controls-panel { - border-radius: 4px; - background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%); - border-color: #0f3460; -} - -.wrapped-theme-vhs .controls-select { - border-radius: 2px; - background: #1a1a2e; - border-color: #0f3460; - color: #eaeaea; -} - -.wrapped-theme-vhs .controls-btn { - border-radius: 4px; - background: linear-gradient(135deg, #e94560 0%, #0f3460 100%); - color: #ffffff; -} - -.wrapped-theme-vhs .controls-btn:hover:not(:disabled) { - box-shadow: 0 4px 15px rgba(233, 69, 96, 0.5); -} diff --git a/frontend/components/wrapped/shared/WrappedThemeSwitcher.vue b/frontend/components/wrapped/shared/WrappedThemeSwitcher.vue index bf31e6d..a142fcb 100644 --- a/frontend/components/wrapped/shared/WrappedThemeSwitcher.vue +++ b/frontend/components/wrapped/shared/WrappedThemeSwitcher.vue @@ -10,8 +10,7 @@ const themeSwitcherComponent = computed(() => { const map = { off: resolveComponent('WrappedThemeSwitcherModern'), gameboy: resolveComponent('WrappedThemeSwitcherGameboy'), - dos: resolveComponent('WrappedThemeSwitcherDos'), - vhs: resolveComponent('WrappedThemeSwitcherVhs') + dos: resolveComponent('WrappedThemeSwitcherDos') } return map[theme.value] || map.off }) diff --git a/frontend/components/wrapped/shared/WrappedThemeSwitcherDos.vue b/frontend/components/wrapped/shared/WrappedThemeSwitcherDos.vue index 9166ce4..545a93a 100644 --- a/frontend/components/wrapped/shared/WrappedThemeSwitcherDos.vue +++ b/frontend/components/wrapped/shared/WrappedThemeSwitcherDos.vue @@ -15,7 +15,7 @@