diff --git a/src/pages/Help/DownloadMethodList/DownloadMethodList.vue b/src/pages/Help/DownloadMethodList/DownloadMethodList.vue index 5b5fddc..1cab041 100644 --- a/src/pages/Help/DownloadMethodList/DownloadMethodList.vue +++ b/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 active:scale-[0.97] md:pb-6" + 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" >
- -
+ +
-
+
点击收起
- mobile guide - - -
+ + +
+ mobile guide +
-
- 点击收起 - -
-
+ v-for="(hz, hzIdx) in item.mobileHotzones" + :key="hzIdx" + class="absolute z-20 cursor-pointer" + :style="{ + left: hz.x + '%', + top: hz.y + '%', + width: hz.w + '%', + height: hz.h + '%', + }" + @click="handleHotzone(hz)" + >
+
+ + + + + +
+
@@ -73,13 +111,42 @@ import { ref } from 'vue' import ArrowIcon from './arrow-icon.svg?component' import StartIcon from './Star-1.svg?component' +import { toast } from 'vue-sonner' -import mobile1 from './mobile1.png' -import mobile2 from './mobile2.png' -import mobile3 from './mobile3.png' -import pc1 from './pc-1.png' -import pc2 from './pc-2.png' -import pc3 from './pc-3.png' +// Sliced WebP Images +// Method 1 +import m1_1 from './mobile1/row-1-column-1.webp' +import m1_2 from './mobile1/row-2-column-1.webp' +import m1_3 from './mobile1/row-3-column-1.webp' +import pc1_1 from './pc1/row-1-column-1.webp' +import pc1_2 from './pc1/row-2-column-1.webp' +import pc1_3 from './pc1/row-3-column-1.webp' + +// Method 2 +import m2_1 from './mobile2/row-1-column-1.webp' +import m2_2 from './mobile2/row-2-column-1.webp' +import m2_3 from './mobile2/row-3-column-1.webp' +import pc2_1 from './pc2/row-1-column-1.webp' +import pc2_2 from './pc2/row-2-column-1.webp' +import pc2_3 from './pc2/row-3-column-1.webp' + +// Method 3 +import m3_1 from './mobile3/row-1-column-1.webp' +import m3_2 from './mobile3/row-2-column-1.webp' +import m3_3 from './mobile3/row-3-column-1.webp' +import pc3_1 from './pc3/row-1-column-1.webp' +import pc3_2 from './pc3/row-2-column-1.webp' +import pc3_3 from './pc3/row-3-column-1.webp' + +interface Hotzone { + x: number // 百分比 + y: number // 百分比 + w: number // 百分比 + h: number // 百分比 + type: 'copy' | 'link' + payload: string + label?: string +} // 直接在内部定义数据 const downloadMethods = ref([ @@ -89,8 +156,10 @@ const downloadMethods = ref([ subtitle: '首推', isHot: true, highlight: '', - mobileSrc: mobile1, - pcSrc: pc1, + mobileImages: [m1_1, m1_2, m1_3], + pcImages: [pc1_1, pc1_2, pc1_3], + mobileHotzones: [] as Hotzone[], + pcHotzones: [] as Hotzone[], }, { id: 2, @@ -98,8 +167,10 @@ const downloadMethods = ref([ subtitle: '', isHot: false, highlight: '', - mobileSrc: mobile2, - pcSrc: pc2, + mobileImages: [m2_1, m2_2, m2_3], + pcImages: [pc2_1, pc2_2, pc2_3], + mobileHotzones: [] as Hotzone[], + pcHotzones: [] as Hotzone[], }, { id: 3, @@ -107,8 +178,10 @@ const downloadMethods = ref([ subtitle: '', isHot: false, highlight: '谨慎选择', - mobileSrc: mobile3, - pcSrc: pc3, + mobileImages: [m3_1, m3_2, m3_3], + pcImages: [pc3_1, pc3_2, pc3_3], + mobileHotzones: [] as Hotzone[], + pcHotzones: [] as Hotzone[], }, ]) @@ -117,6 +190,15 @@ const activeId = ref(null) const toggle = (id: number) => { activeId.value = activeId.value === id ? null : id } + +const handleHotzone = (hz: Hotzone) => { + if (hz.type === 'copy') { + navigator.clipboard.writeText(hz.payload) + toast.success(`${hz.label || '内容'}已复制`) + } else if (hz.type === 'link') { + window.open(hz.payload, '_blank') + } +}