更新页面效果

vite-tailwindcss/src/components/PhotoGallery.vue

@@ -38,9 +38,9 @@
 
     <!-- 九宫格 -->
     <div v-else-if="page.type === 'nine-grid'" class="grid grid-cols-3 gap-1.5 px-4 mt-6">
-      <div v-for="(img, imgIdx) in page.images" :key="imgIdx" v-reveal="{ variant: 'scale', delay: imgIdx * 60 }"
-           class="aspect-square relative" :class="frameClass">
-        <img :src="img" class="hover:scale-105 transition-transform duration-700" />
+      <div v-for="(img, imgIdx) in page.images" :key="imgIdx" v-reveal="{ variant: 'up', delay: imgIdx * 24 }"
+           class="nine-grid-reveal aspect-square relative" :class="frameClass">
+        <img :src="img" loading="lazy" decoding="async" class="nine-grid-img" />
       </div>
     </div>
 
@@ -144,6 +144,26 @@ function polaroidTransform(i) {
 .gallery-subtitle { font-family: var(--font-display); }
 .gallery-desc { font-family: var(--font-kai); }
 
+.nine-grid-reveal.reveal {
+  transform: translate3d(0, 12px, 0);
+  transition:
+    opacity 420ms ease-out,
+    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform;
+}
+.nine-grid-reveal.reveal--in {
+  transform: translate3d(0, 0, 0);
+}
+.nine-grid-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: translateZ(0);
+  transition: transform 420ms ease-out;
+  backface-visibility: hidden;
+}
+.nine-grid-img:hover { transform: translateZ(0) scale(1.03); }
+
 /* 错落双图：高度随视口缩放并封顶，保证标题+图片总高始终落在页高预算内 */
 .overlap-wrap { height: clamp(320px, 54vh, 460px); }