提交热区点击

src/pages/Help/DownloadMethodList/DownloadMethodList.vue

@@ -5,7 +5,7 @@
         v-for="item in downloadMethods"
         :key="item.id"
         @click="toggle(item.id)"
-        class="group relative flex cursor-pointer flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
+        class="group relative flex flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
       >
         <div class="px-4 md:pl-[42px]">
           <div
@@ -65,10 +65,10 @@
                   :key="hzIdx"
                   class="absolute z-20 cursor-pointer"
                   :style="{
-                    left: hz.x + '%',
+                    left: hz.x + 'px',
-                    top: hz.y + '%',
+                    top: hz.y + 'px',
-                    width: hz.w + '%',
+                    width: hz.w + 'px',
-                    height: hz.h + '%',
+                    height: hz.h + 'px',
                   }"
                   @click="handleHotzone(hz)"
                 ></div>
@@ -89,10 +89,10 @@
                   :key="hzIdx"
                   class="absolute z-20 cursor-pointer"
                   :style="{
-                    left: hz.x + '%',
+                    left: hz.x + 'px',
-                    top: hz.y + '%',
+                    top: hz.y + 'px',
-                    width: hz.w + '%',
+                    width: hz.w + 'px',
-                    height: hz.h + '%',
+                    height: hz.h + 'px',
                   }"
                   @click="handleHotzone(hz)"
                 ></div>
@@ -142,10 +142,10 @@ import pc3_2 from './pc3/row-2-column-1.webp'
 import pc3_3 from './pc3/row-3-column-1.webp'
 
 interface Hotzone {
-  x: number // 百分比
+  x: number
-  y: number // 百分比
+  y: number
-  w: number // 百分比
+  w: number
-  h: number // 百分比
+  h: number
   type: 'copy' | 'link'
   payload: string
   label?: string
@@ -162,7 +162,16 @@ const downloadMethods = ref([
     mobileImages: [m1_1, m1_2, m1_3],
     pcImages: [pc1_1, pc1_2, pc1_3],
     mobileHotzones: [] as Hotzone[],
-    pcHotzones: [] as Hotzone[],
+    pcHotzones: [
+      {
+        x: 410,
+        y: 224,
+        w: 140,
+        h: 20,
+        type: 'link',
+        payload: 'https://account.apple.com/account',
+      },
+    ] as Hotzone[],
   },
   {
     id: 2,
@@ -173,7 +182,16 @@ const downloadMethods = ref([
     mobileImages: [m2_1, m2_2, m2_3],
     pcImages: [pc2_1, pc2_2, pc2_3],
     mobileHotzones: [] as Hotzone[],
-    pcHotzones: [] as Hotzone[],
+    pcHotzones: [
+      {
+        x: 410,
+        y: 224,
+        w: 140,
+        h: 20,
+        type: 'link',
+        payload: 'https://account.apple.com',
+      },
+    ] as Hotzone[],
   },
   {
     id: 3,
@@ -184,7 +202,40 @@ const downloadMethods = ref([
     mobileImages: [m3_1, m3_2, m3_3],
     pcImages: [pc3_1, pc3_2, pc3_3],
     mobileHotzones: [] as Hotzone[],
-    pcHotzones: [] as Hotzone[],
+    pcHotzones: [
+      {
+        x: 103,
+        y: 1430,
+        w: 140,
+        h: 20,
+        type: 'text',
+        payload: 'https://account.apple.com',
+      },
+      {
+        x: 103,
+        y: 1470,
+        w: 140,
+        h: 20,
+        type: 'text',
+        payload: 'https://account.apple.com',
+      },
+      {
+        x: 103,
+        y: 1414,
+        w: 194,
+        h: 34,
+        type: 'copy',
+        payload: 'https://account.apple.com',
+      },
+      {
+        x: 103,
+        y: 1451,
+        w: 194,
+        h: 34,
+        type: 'copy',
+        payload: 'https://account.apple.com',
+      },
+    ] as Hotzone[],
   },
 ])