From 8a682e8ed22fc96c205a62e699afe6cf31699ffe Mon Sep 17 00:00:00 2001
From: TermiNexus <wyt18222152539wyt@163.com>
Date: Tue, 29 Sep 2026 13:33:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E7=BF=BB=E7=89=8C=E8=80=81?=
 =?UTF-8?q?=E8=99=8E=E6=9C=BA=E7=BF=BB=E9=A1=B5=E9=92=9F=E5=8A=A8=E6=95=88?=
 =?UTF-8?q?=20+=20footer=20=E5=90=8E=E5=93=81=E7=89=8C=E5=B9=95=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

首页统计翻牌：悬停某组时整组以随机节奏连续乱翻，最后逐个落回正确值；front 装旧值 / back 装新值，还原「上半先变新值、牌翻过来下半再变新值」的翻页钟时序，数字与动画之间用 nextTick 对齐，避免翻到一半数字跳变。

入场翻牌时长由原站内联的 26~35ms 统一到 0.45s，并摘掉模板里会被 Vue 写回的 --flipduration 绑定，改由 JS 独占控制。

footer 之后新增品牌幕布：贴视口下半屏的深色底 + 左侧灰色巨字 GVSDS，滚到底继续滑时整块露出。
---
 src/layouts/SiteLayout.vue |  58 +++++++++++++++-
 src/views/HomeView.vue     | 134 ++++++++++++++++++++++++++++++++-----
 2 files changed, 175 insertions(+), 17 deletions(-)

diff --git a/src/layouts/SiteLayout.vue b/src/layouts/SiteLayout.vue
index 3444607..0e0460a 100644
--- a/src/layouts/SiteLayout.vue
+++ b/src/layouts/SiteLayout.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="min-h-screen flex flex-col font-sans">
+  <!-- 内容层：relative + z-1 抬到幕布之上，bg-white 保证任何空隙都不透出幕布
+       （幕布在最底层，只有末尾的透明占位区才把它露出来） -->
+  <div class="relative z-[1] min-h-screen flex flex-col font-sans bg-white">
     <!-- ===== 顶部导航（对齐原站 _base） ===== -->
     <header
       id="header"
@@ -184,6 +186,16 @@
     <!-- Cookie 横幅 -->
     <CookieBanner />
   </div>
+
+  <!-- ===== 品牌幕布：滚到最底后继续滑，露出半屏深色底 + 灰色巨字 GVSDS =====
+       幕布固定贴住视口下半屏（z-0），平时被内容层（z-1 + 白底）完整盖住；
+       末尾留半屏透明占位，滚到底时占位区把幕布整块露出来（"抽盖子"式的翻页观感）。
+       用 z-0 / z-1 这对正数分层，而不是负 z-index：body 的不透明背景会吃掉负 z-index，
+       幕布就永远看不见了。两者放在内容层之外，否则会被内容层的层叠上下文与白底吃掉。 -->
+  <div class="brand-curtain" aria-hidden="true">
+    <span class="brand-curtain-word">GVSDS</span>
+  </div>
+  <div class="brand-curtain-spacer" aria-hidden="true"></div>
 </template>
 
 <script setup lang="ts">
@@ -538,4 +550,48 @@ watch(
 #header[data-nav-theme='light'].menu-open::before {
   opacity: 1;
 }
+
+/* ===== 品牌幕布（footer 之后那半屏） ===== */
+.brand-curtain {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  /* 高度必须与下面的占位一致：占位多高，滚到底时露出的幕布就有多高。
+     只占视口下半屏，与 footer 的深灰接成一片，不是整屏吞掉画面 */
+  height: 50vh;
+  height: 50svh;
+  /* z-0 站住"内容之下、根背景之上"这一层：内容层是 relative + z-1，白底会把幕布盖住；
+     末端透明占位不带背景，就把幕布让出来 */
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  /* 巨字靠左：字号已经接近顶满宽度，左对齐让品牌字从左侧起笔 */
+  justify-content: flex-start;
+  padding-left: 2vw;
+  overflow: hidden;
+  background: #0a0f16;
+  pointer-events: none;
+}
+
+.brand-curtain-word {
+  font-family: var(--font-sans);
+  /* 字号同时受两个方向的约束：横向 5 个字母约 3.6em 不能超出视口，纵向要撑满这半屏幕布。
+     取两者较小值 → 宽屏时高度顶满、窄屏时宽度顶满（vh 那行是 svh 不支持时的回退） */
+  font-size: min(26vw, 40vh);
+  font-size: min(26vw, 40svh);
+  font-weight: 900;
+  /* 不用 line-height < 1：字形会超出内容盒（配 background-clip 时会被裁掉一截） */
+  line-height: 1;
+  letter-spacing: -0.015em;
+  white-space: nowrap;
+  /* 就用纯灰：background-clip: text 在部分环境下会把文字整段吃成透明，得不偿失 */
+  color: #4b5563;
+}
+
+/* 末尾占位：与幕布等高（半屏，svh 避开移动端地址栏收缩导致的跳动），透明 → 露出幕布 */
+.brand-curtain-spacer {
+  height: 50vh;
+  height: 50svh;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e954c75..c2172de 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -49,18 +49,18 @@
             </a>
           </div>
         </div>
-        <!-- 底部统计翻牌 -->
+        <!-- 底部统计翻牌（鼠标悬停某一组：老虎机式乱翻，最后逐个落回正常值） -->
         <div class="hero-stats 2xl:h-[198px] h-[100px] sm:h-[120px] pr-[16px] sm:pr-[30px] 2xl:pr-[174px] xl:pr-[100px] flex justify-between 2xl:justify-start md:justify-start md:gap-[80px] lg:gap-[160px] 2xl:gap-[267px] items-start hidden md:flex">
           <div>
             <div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Total Code Size (characters)</div>
-            <div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left">
-              <div v-for="d in codeDigits" :key="'c' + d.idx" class="M-FlipCard down flip-win bg-bg-primary" :style="{ '--flipduration': d.dur + 's' }"><div class="digital front" :class="'number' + d.val"></div><div class="digital back" :class="'number' + d.val"></div></div>
+            <div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left" data-flip-group="code" @mouseenter="spinGroup('code')">
+              <div v-for="(d, i) in codeDigits" :key="'c' + d.idx" class="M-FlipCard down flip-win bg-bg-primary"><div class="digital front" :class="'number' + codeFront[i]"></div><div class="digital back" :class="'number' + codeBack[i]"></div></div>
             </div>
           </div>
           <div>
             <div class="font-['DIN_Condensed'] font-bold leading-none tracking-normal uppercase mb-[8px] md:mb-[4px] 2xl:mb-[12px] text-[24px] sm:text-[23px] md:text-[24px] text-[#FFF] opacity-80 [text-shadow:0_2px_8px_rgba(0,0,0,0.6)]">Maximum Insurance Amount (CNY)</div>
-            <div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left">
-              <div v-for="d in insuranceDigits" :key="'i' + d.idx" class="M-FlipCard down flip-win bg-bg-primary" :style="{ '--flipduration': d.dur + 's' }"><div class="digital front" :class="'number' + d.val"></div><div class="digital back" :class="'number' + d.val"></div></div>
+            <div class="flex gap-[3px] sm:gap-1 scale-[0.65] sm:scale-[0.8] 2xl:scale-[1] origin-left" data-flip-group="insurance" @mouseenter="spinGroup('insurance')">
+              <div v-for="(d, i) in insuranceDigits" :key="'i' + d.idx" class="M-FlipCard down flip-win bg-bg-primary"><div class="digital front" :class="'number' + insuranceFront[i]"></div><div class="digital back" :class="'number' + insuranceBack[i]"></div></div>
             </div>
           </div>
         </div>
@@ -379,7 +379,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -389,17 +389,19 @@ function go(path: string): void {
 }
 
 // ==== 翻牌数字（对齐 index.html 硬编码） ====
+// 逐位拆开渲染；每位原本自带一个 26~35ms 的翻牌时长（dur），太快看不出翻动，
+// 已改为统一由 JS 控制 --flipduration（见 FLIP_ANIM_DURATION），故这里不再带 dur
 const codeDigits = [
-  { idx: 0, val: 1, dur: 0.026242368233221722 }, { idx: 1, val: 2, dur: 0.029718667678514322 },
-  { idx: 2, val: 4, dur: 0.025401492287061424 }, { idx: 3, val: 9, dur: 0.03088231871236644 },
-  { idx: 4, val: 0, dur: 0.031675451149336446 }, { idx: 5, val: 7, dur: 0.03497610376846389 },
-  { idx: 6, val: 8, dur: 0.030530656690159304 }, { idx: 7, val: 1, dur: 0.02840509640985139 },
+  { idx: 0, val: 1 }, { idx: 1, val: 2 },
+  { idx: 2, val: 4 }, { idx: 3, val: 9 },
+  { idx: 4, val: 0 }, { idx: 5, val: 7 },
+  { idx: 6, val: 8 }, { idx: 7, val: 1 },
 ]
 const insuranceDigits = [
-  { idx: 0, val: 0, dur: 0.02627530204186018 }, { idx: 1, val: 0, dur: 0.03200964712168997 },
-  { idx: 2, val: 0, dur: 0.03464767830776408 }, { idx: 3, val: 0, dur: 0.030824110890535515 },
-  { idx: 4, val: 3, dur: 0.02593196506159544 }, { idx: 5, val: 8, dur: 0.03374560321012195 },
-  { idx: 6, val: 9, dur: 0.03213503227905559 }, { idx: 7, val: 9, dur: 0.03463823789640608 },
+  { idx: 0, val: 0 }, { idx: 1, val: 0 },
+  { idx: 2, val: 0 }, { idx: 3, val: 0 },
+  { idx: 4, val: 3 }, { idx: 5, val: 8 },
+  { idx: 6, val: 9 }, { idx: 7, val: 9 },
 ]
 
 // ==== 理念 ====
@@ -575,12 +577,110 @@ function startCarousel(): void {
   animate()
 }
 
+// ==== 翻牌鼠标动效：悬停时整组老虎机式乱翻，最后逐个落回正常值 ====
+type FlipGroup = 'code' | 'insurance'
+
+/** 老虎机节奏
+ *  单次翻转 0.45s：原站内联的 26~35ms 一闪而过、初版 0.2s 也偏快，0.45s 才看得清翻动过程；
+ *  翻完再停 100~250ms 才翻下一下 —— 跳动间隔 = 动画时长 + 停顿，
+ *  间隔必须不小于动画时长，否则每次翻转都会被下一次重播打断，永远只看到半程。 */
+const FLIP_ANIM_MS = 450
+const FLIP_ANIM_DURATION = '0.45s'
+const FLIP_GAP_MIN_MS = 100
+const FLIP_GAP_MAX_MS = 250
+/** 每位起跳/停止时刻都带随机 → 乱序滚，最后前后错开地落定 */
+const FLIP_START_MAX_MS = 500
+const FLIP_TOTAL_MIN_MS = 2500
+const FLIP_TOTAL_MAX_MS = 3500
+
+/**
+ * 每位两张页面，各自的数字必须分开管：
+ *   front = 当前值（静止时露在外面的那张）
+ *   back  = 即将翻出来的新值
+ * 翻牌组件正是"front 的上半页先翻落 → 露出 back 的上半页（上半先变新值），
+ * 随后 back 的下半页翻下来盖住 front 的下半页（下半后变新值）"，
+ * 也就是经典翻页钟的机制 —— 前提是 front 放旧值、back 放新值。
+ * 原站两层用同一个数字，所以只像"抖一下"。
+ */
+const codeFront = ref(codeDigits.map((d) => d.val))
+const codeBack = ref(codeDigits.map((d) => d.val))
+const insuranceFront = ref(insuranceDigits.map((d) => d.val))
+const insuranceBack = ref(insuranceDigits.map((d) => d.val))
+
+/** 每组的定时器：重入同一组时先清掉上一轮，避免两轮叠在一起 */
+const flipTimers: Record<FlipGroup, number[]> = { code: [], insurance: [] }
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')
+
+function randomBetween(min: number, max: number): number {
+  return min + Math.random() * (max - min)
+}
+
+function clearFlipTimers(group: FlipGroup): void {
+  flipTimers[group].forEach((id) => window.clearTimeout(id))
+  flipTimers[group] = []
+}
+
+/**
+ * 把某一位翻到新值。四步的顺序是硬约束，每一步之间都要等 DOM 落地：
+ *   ① front 更新为"当前值"（= 上一轮的 back 值），先让新类进 DOM
+ *   ② 摘掉 .go 回到静止画面 —— 上一步已把 front 对齐，所以这一帧画面完全不变
+ *   ③ back 装入新值（此时 back 的两个半页都停在 180° 不可见位，改了也不会跳变）
+ *   ④ 加 .go 起翻
+ * 若省略 ①②的先后、或先起翻再改数字，就会出现"翻到一半数字跳变"。
+ */
+async function flipCard(
+  card: HTMLElement,
+  front: Ref<number[]>,
+  back: Ref<number[]>,
+  index: number,
+  nextVal: number
+): Promise<void> {
+  front.value[index] = back.value[index]
+  await nextTick()
+  card.classList.remove('go')
+  void card.offsetWidth // 强制回流：让"静止显示 front"这一帧立刻成立
+  back.value[index] = nextVal
+  await nextTick()
+  card.classList.add('go')
+}
+
+/**
+ * 悬停某一组 → 该组每位数字以随机节奏连续乱翻，最后逐个落回正确值（老虎机）。
+ * 鼠标离开不打断：必须让它跑完落定，否则会停在随机数字上。
+ */
+function spinGroup(group: FlipGroup): void {
+  if (prefersReducedMotion.matches) return
+  const cards = Array.from(
+    document.querySelectorAll<HTMLElement>(`[data-flip-group="${group}"] .M-FlipCard`)
+  )
+  if (cards.length === 0) return
+  clearFlipTimers(group)
+  const front: Ref<number[]> = group === 'code' ? codeFront : insuranceFront
+  const back: Ref<number[]> = group === 'code' ? codeBack : insuranceBack
+  const answers: number[] =
+    group === 'code' ? codeDigits.map((d) => d.val) : insuranceDigits.map((d) => d.val)
+  const timers = flipTimers[group]
+
+  cards.forEach((card, i) => {
+    const stopAt = performance.now() + randomBetween(FLIP_TOTAL_MIN_MS, FLIP_TOTAL_MAX_MS)
+    const roll = async (): Promise<void> => {
+      const settled = performance.now() >= stopAt
+      await flipCard(card, front, back, i, settled ? answers[i] : Math.floor(Math.random() * 10))
+      if (settled) return // 落定后停手，数字停在正确值上
+      timers.push(window.setTimeout(roll, FLIP_ANIM_MS + randomBetween(FLIP_GAP_MIN_MS, FLIP_GAP_MAX_MS)))
+    }
+    timers.push(window.setTimeout(roll, randomBetween(0, FLIP_START_MAX_MS)))
+  })
+}
+
 onMounted(() => {
   initReveal()
   startCarousel()
-  // 触发翻牌动画：为 M-FlipCard 添加 .go 类（对齐原站 flip-win 翻牌效果）
-  const cards = document.querySelectorAll('.M-FlipCard.down')
+  // 入场翻牌：逐位错开依次翻开（对齐原站 flip-win 效果）。
+  // 时长同样提到 0.45s：原站内联的 26~35ms 一闪而过，根本看不出是"翻"出来的
+  const cards = document.querySelectorAll<HTMLElement>('.M-FlipCard.down')
   cards.forEach((card, index) => {
+    card.style.setProperty('--flipduration', FLIP_ANIM_DURATION)
     setTimeout(() => {
       card.classList.add('go')
     }, index * 60)
@@ -590,5 +690,7 @@ onMounted(() => {
 onBeforeUnmount(() => {
   cancelAnimationFrame(rafId)
   revealObserver?.disconnect()
+  clearFlipTimers('code')
+  clearFlipTimers('insurance')
 })
 </script>