From 58aabe517a034c944176feb164cd2dd758bd0606 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 15:09:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D=E6=BB=9A=E5=8A=A8=E6=96=B9?=
 =?UTF-8?q?=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite-tailwindcss/src/components/PhotoGallery.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/vite-tailwindcss/src/components/PhotoGallery.vue b/vite-tailwindcss/src/components/PhotoGallery.vue
index 951a12c..db085c4 100644
--- a/vite-tailwindcss/src/components/PhotoGallery.vue
+++ b/vite-tailwindcss/src/components/PhotoGallery.vue
@@ -38,7 +38,7 @@
       </div>
     </div>
 
-    <!-- 九宫格：全入视口 activate 后再挂载/加载，播方向性 v-reveal -->
+    <!-- 九宫格：未 activate 用透明占位撑布局；全入后再挂载真图 + 方向性 v-reveal -->
     <div v-else-if="page.type === 'nine-grid'" ref="nineGridRef" class="nine-grid grid grid-cols-3 gap-1.5 px-4 mt-6">
       <template v-if="activate">
         <div v-for="(img, imgIdx) in page.images" :key="imgIdx"
@@ -221,8 +221,13 @@ function getRevealConfig(imgIdx) {
   backface-visibility: hidden;
 }
 .nine-grid-img:hover { transform: translateZ(0) scale(1.03); }
+/* 透明占位：占满格子尺寸但不露灰底，避免 activate 时布局跳动 */
 .nine-grid-placeholder {
-  background: rgba(247, 246, 242, 0.85);
+  visibility: hidden;
+  pointer-events: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;
 }
 
 .overlap-wrap { height: clamp(320px, 54vh, 460px); }