From d8e29af1dcf21a36287b6a7cceaf7ae46eb4afcd Mon Sep 17 00:00:00 2001 From: speakeloudest Date: Sun, 4 Jan 2026 01:38:25 -0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=95=99=E7=A8=8B=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DownloadMethodList/DownloadMethodList.vue | 140 ++++++++++++++---- src/pages/Help/DownloadMethodList/mobile1.png | Bin 235559 -> 0 bytes .../mobile1/row-1-column-1.webp | Bin 0 -> 105288 bytes .../mobile1/row-2-column-1.webp | Bin 0 -> 103376 bytes .../mobile1/row-3-column-1.webp | Bin 0 -> 138952 bytes src/pages/Help/DownloadMethodList/mobile2.png | Bin 283116 -> 0 bytes .../mobile2/row-1-column-1.webp | Bin 0 -> 162250 bytes .../mobile2/row-2-column-1.webp | Bin 0 -> 135160 bytes .../mobile2/row-3-column-1.webp | Bin 0 -> 162810 bytes src/pages/Help/DownloadMethodList/mobile3.png | Bin 318273 -> 0 bytes .../mobile3/row-1-column-1.webp | Bin 0 -> 164106 bytes .../mobile3/row-2-column-1.webp | Bin 0 -> 171932 bytes .../mobile3/row-3-column-1.webp | Bin 0 -> 158766 bytes src/pages/Help/DownloadMethodList/pc-1.png | Bin 312499 -> 0 bytes src/pages/Help/DownloadMethodList/pc-2.png | Bin 366091 -> 0 bytes src/pages/Help/DownloadMethodList/pc-3.png | Bin 427642 -> 0 bytes .../pc1/row-1-column-1.webp | Bin 0 -> 135478 bytes .../pc1/row-2-column-1.webp | Bin 0 -> 124072 bytes .../pc1/row-3-column-1.webp | Bin 0 -> 177418 bytes .../pc2/row-1-column-1.webp | Bin 0 -> 183336 bytes .../pc2/row-2-column-1.webp | Bin 0 -> 155984 bytes .../pc2/row-3-column-1.webp | Bin 0 -> 230894 bytes .../pc3/row-1-column-1.webp | Bin 0 -> 190844 bytes .../pc3/row-2-column-1.webp | Bin 0 -> 230350 bytes .../pc3/row-3-column-1.webp | Bin 0 -> 196640 bytes src/pages/Help/index.vue | 4 +- 26 files changed, 113 insertions(+), 31 deletions(-) delete mode 100644 src/pages/Help/DownloadMethodList/mobile1.png create mode 100644 src/pages/Help/DownloadMethodList/mobile1/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile1/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile1/row-3-column-1.webp delete mode 100644 src/pages/Help/DownloadMethodList/mobile2.png create mode 100644 src/pages/Help/DownloadMethodList/mobile2/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile2/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile2/row-3-column-1.webp delete mode 100644 src/pages/Help/DownloadMethodList/mobile3.png create mode 100644 src/pages/Help/DownloadMethodList/mobile3/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile3/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/mobile3/row-3-column-1.webp delete mode 100644 src/pages/Help/DownloadMethodList/pc-1.png delete mode 100644 src/pages/Help/DownloadMethodList/pc-2.png delete mode 100644 src/pages/Help/DownloadMethodList/pc-3.png create mode 100644 src/pages/Help/DownloadMethodList/pc1/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc1/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc1/row-3-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc2/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc2/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc2/row-3-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc3/row-1-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc3/row-2-column-1.webp create mode 100644 src/pages/Help/DownloadMethodList/pc3/row-3-column-1.webp 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') + } +}