Files
WeChatDataAnalysis/frontend/components/wrapped/shared/WrappedCRTOverlay.vue
2977094657 e9c81caa12 improvement(wrapped-ui): 下线 DOS 主题并优化 Wrapped 多主题体验
- 移除 DOS 主题入口、切换器组件与相关样式逻辑,统一主题为 Modern / GameBoy / Win98。

- 新增 WrappedGameboyDither 组件,并在背景与 CRT 叠加层中引入 GameBoy 噪点效果。

- 优化 wrapped 页面视口高度与背景同步逻辑(含 ResizeObserver 与 100dvh 适配),提升桌面容器显示稳定性。

- 调整封面标题与预览位移、回复速度卡片滚动行为等细节,提升主题下视觉与交互一致性。
2026-02-07 20:59:03 +08:00

28 lines
898 B
Vue

<template>
<!-- CRT 滤镜叠加层 - 复古主题使用 -->
<div class="absolute inset-0 pointer-events-none select-none z-30" aria-hidden="true">
<!-- Game Boy: noise 作为最前景层统一覆盖整个画面 -->
<WrappedGameboyDither
v-if="theme === 'gameboy'"
class="opacity-[0.3]"
style="filter: contrast(1.16)"
:pattern-refresh-interval="1"
:pattern-alpha="56"
mix-blend-mode="overlay"
:pattern-size="256"
/>
<!-- 扫描线 / RGB 子像素 / 闪烁 / 暗角 / 曲率 -->
<div class="absolute inset-0 crt-scanlines"></div>
<div class="absolute inset-0 crt-rgb-pixels"></div>
<div class="absolute inset-0 crt-flicker"></div>
<div class="absolute inset-0 crt-vignette"></div>
<div class="absolute inset-0 crt-curvature"></div>
</div>
</template>
<script setup>
const { theme } = useWrappedTheme()
</script>