更新页面效果

vite-tailwindcss/src/components/PhotoGallery.vue

@@ -13,12 +13,14 @@
       <div :class="singleFrameClass"><img :src="page.img1" /></div>
     </div>
 
-    <!-- 错落双图（高度 clamp 封顶，图片贴容器边缘，任何页高下不溢出） -->
+    <!-- 错落双图（交错拼贴：左上大图 + 右下压角叠放，微旋转；clamp 封顶不溢出） -->
     <div v-else-if="page.type === 'overlap'" class="overlap-wrap relative w-full mt-2">
-      <div v-reveal="{ variant: 'left', delay: 100 }" class="absolute top-0 right-0 w-[68%] h-[72%] z-10" :class="frameClass">
+      <div v-reveal="{ variant: 'left', delay: 100 }"
+           class="absolute left-0 top-0 w-[72%] h-[78%] z-10 -rotate-2" :class="frameClass">
         <img :src="page.img1" />
       </div>
-      <div v-reveal="{ variant: 'right', delay: 300 }" class="absolute bottom-0 left-0 w-[60%] h-[60%] z-20" :class="frameClass">
+      <div v-reveal="{ variant: 'right', delay: 300 }"
+           class="absolute right-0 bottom-0 w-[56%] h-[62%] z-20 rotate-3" :class="frameClass">
         <img :src="page.img2" />
       </div>
     </div>
@@ -96,8 +98,10 @@ const singleWrapClass = computed(() =>
 )
 const singleWrapStyle = computed(() => {
   if (props.page.singleWidth === 'full') {
-    // 铺满 + 保持原始比例 → 高度由图片自然撑开；铺满 + 不保持 → 固定 4:5 裁切
-    return props.page.singleKeepRatio ? {} : { aspectRatio: '4 / 5' }
+    // 沾满宽度：负边距抵消 page-section 的 p-6（24px×2），图片贴到屏幕两缘
+    const bleed = { width: 'calc(100% + 48px)', marginLeft: '-24px', marginRight: '-24px' }
+    // 保持原始比例 → 高度由图片自然撑开；否则固定 4:5 裁切
+    return props.page.singleKeepRatio ? bleed : { ...bleed, aspectRatio: '4 / 5' }
   }
   return { aspectRatio: '4 / 5' }
 })