1. 迎宾海报

vite-tailwindcss/src/components/PhotoGallery.vue

@@ -216,6 +216,7 @@
             :src="displayAt(imgIdx)"
             class="preview-img g-heart-img"
             decoding="async"
+            :style="{ objectPosition: heartFocusCssAt(page, imgIdx) }"
             @click.stop="previewImage(originalAt(imgIdx))"
           />
         </div>
@@ -230,6 +231,7 @@
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { borderClass } from '@/composables/borderStyles'
 import { createSequentialMount } from '@/composables/useSequentialMount'
+import { HEART_SLOTS, heartSlotStyle, heartFocusCssAt } from '@/composables/heartCollage'
 
 const NINE_STEP_MS = 300
 const NINE_SETTLE_MS = 400
@@ -264,23 +266,6 @@ const SEQUENTIAL_SELF_TYPES = new Set([
   'heart-collage',
 ])
 
-/** 爱心拼接槽位：百分比绝对定位，轮廓接近 ♥（顶开叉、中最宽、底收尖） */
-const HEART_SLOTS = [
-  { l: 10, t: 0,  w: 32, h: 13 },     // 0 左上叶
-  { l: 58, t: 0,  w: 32, h: 13 },     // 1 右上叶（中间约 16% 开叉）
-  { l: 0,  t: 14, w: 14, h: 15.5 },   // 2 左外上
-  { l: 0,  t: 30.5, w: 14, h: 15.5 }, // 3 左外下
-  { l: 15, t: 14, w: 26, h: 32 },     // 4 左大图
-  { l: 42, t: 14, w: 16, h: 32 },     // 5 中轴
-  { l: 59, t: 14, w: 26, h: 32 },     // 6 右大图
-  { l: 86, t: 14, w: 14, h: 15.5 },   // 7 右外上
-  { l: 86, t: 30.5, w: 14, h: 15.5 }, // 8 右外下
-  { l: 10, t: 47, w: 13, h: 16 },     // 9 左下收腰
-  { l: 24, t: 47, w: 52, h: 16 },     // 10 中下横
-  { l: 77, t: 47, w: 13, h: 16 },     // 11 右下收腰
-  { l: 38, t: 64, w: 24, h: 14 },     // 12 心尖
-]
-
 const props = defineProps({
   page: { type: Object, required: true },
   /** 九宫格：开启串行 v-reveal；关闭则一次展示 */
@@ -659,15 +644,6 @@ function heartReveal(i) {
   return 'up'
 }
 
-function heartSlotStyle(slot) {
-  return {
-    left: `${slot.l}%`,
-    top: `${slot.t}%`,
-    width: `${slot.w}%`,
-    height: `${slot.h}%`,
-  }
-}
-
 </script>
 
 <style scoped>