更新页面效果

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>

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 {