From 7964b78225fac0aff7c8d53e5134b72dcd51463c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= <liqiworkers@gmail.com>
Date: Sat, 1 Aug 2026 10:34:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PhotoGallery.vue           | 31 ++++++++++++++++++-
 vite-tailwindcss/src/views/index/index.vue    | 13 +++++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/vite-tailwindcss/src/components/PhotoGallery.vue b/vite-tailwindcss/src/components/PhotoGallery.vue
index 7bee8a1..c18d7f8 100644
--- a/vite-tailwindcss/src/components/PhotoGallery.vue
+++ b/vite-tailwindcss/src/components/PhotoGallery.vue
@@ -40,8 +40,9 @@
 <!--    <div v-else-if="page.type === 'nine-grid'" v-reveal="{ variant: 'up', delay: 80 }" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">-->
     <div v-else-if="page.type === 'nine-grid'" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
       <div v-for="(img, imgIdx) in page.images" :key="imgIdx"
+           v-reveal="getRevealConfig(imgIdx)"
            class="aspect-square relative" :class="frameClass">
-        <img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
+        <img :src="img" class="nine-grid-img" />
       </div>
     </div>
 
@@ -137,6 +138,34 @@ function polaroidTransform(i) {
   const s = polaroidShift[i % polaroidShift.length]
   return `rotate(${a}deg) translateY(${s}px)`
 }
+
+
+function getRevealConfig(imgIdx) {
+  const row = Math.floor(imgIdx / 3)
+  const col = imgIdx % 3
+
+  // 正中心
+  if (imgIdx === 4) {
+    return {
+      variant: 'blur',
+      delay: 200,
+    }
+  }
+
+  // 中间列：上 → down，下 → up
+  if (col === 1) {
+    return {
+      variant: row === 0 ? 'down' : 'up',
+      delay: 80 + imgIdx * 50,
+    }
+  }
+
+  // 左右列
+  return {
+    variant: col === 0 ? 'left' : 'right',
+    delay: 80 + ((imgIdx +80) * 12) ,
+  }
+}
 </script>
 
 <style scoped>
diff --git a/vite-tailwindcss/src/views/index/index.vue b/vite-tailwindcss/src/views/index/index.vue
index 8fb00cd..a078723 100644
--- a/vite-tailwindcss/src/views/index/index.vue
+++ b/vite-tailwindcss/src/views/index/index.vue
@@ -70,7 +70,7 @@
 
     <!-- 主滚动区域（注意：不要加 scroll-smooth，它会劫持 JS 滚动赋值导致卡顿） -->
     <div ref="scrollContainerRef"
-         class="w-full h-full overflow-y-auto no-scrollbar relative"
+         class="w-full h-full overflow-y-auto no-scrollbar relative scrollable-area-body"
          :class="data.scrollMode === 'snap' ? 'snap-y snap-mandatory' : ''"
          @scroll="handleScroll"
          @touchstart="handleUserInteraction" @touchmove="handleUserInteraction"
@@ -637,6 +637,17 @@ watch(freeScrollSignature, restartAutoScroll)
   font-variant-numeric: lining-nums;
   text-rendering: geometricPrecision;
 }
+.wrapper .scrollable-area-body {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1024px) {
+  .wrapper .scrollable-area-body {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
 .wrapper .font-serif { font-family: var(--font-serif); }
 .wrapper .font-sans { font-family: var(--font-sans); }
 .control-btn {