桌面端样式

src/pages/Help/DownloadMethodList/DownloadMethodList.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import ArrowIcon from './arrow-icon.svg?component'
 import StartIcon from './Star-1.svg?component'
 import { toast } from 'vue-sonner'
@@ -154,103 +154,117 @@ interface Hotzone {
   payload: string
   label?: string
 }
-const account = [
+const accounts = [
   { account: 'prla08741@gmx.com', password: 'Qw990088' },
   { account: 'guazhexing721@gmx.com', password: 'Qw990088' },
 ]
-
-// 直接在内部定义数据
-const downloadMethods = ref([
-  {
-    id: 1,
-    title: '创建新“香港Apple ID”',
-    subtitle: '首推',
-    isHot: true,
-    highlight: '',
-    mobileImages: [m1_1, m1_2, m1_3],
-    pcImages: [pc1_1, pc1_2, pc1_3],
-    mobileHotzones: [] as Hotzone[],
-    pcHotzones: [
-      {
-        x: 410,
-        y: 224,
-        w: 140,
-        h: 20,
-        type: 'link',
-        payload: 'https://account.apple.com/account',
-      },
-    ] as Hotzone[],
-  },
-  {
-    id: 2,
-    title: '修改已有 Apple ID 至 <香港>',
-    subtitle: '',
-    isHot: false,
-    highlight: '',
-    mobileImages: [m2_1, m2_2, m2_3],
-    pcImages: [pc2_1, pc2_2, pc2_3],
-    mobileHotzones: [] as Hotzone[],
-    pcHotzones: [
-      {
-        x: 410,
-        y: 224,
-        w: 140,
-        h: 20,
-        type: 'link',
-        payload: 'https://account.apple.com',
-      },
-    ] as Hotzone[],
-  },
-  {
-    id: 3,
-    title: '使用Hi快提供的公用账号',
-    subtitle: '',
-    isHot: false,
-    highlight: '谨慎选择',
-    mobileImages: [m3_1, m3_2, m3_3],
-    pcImages: [pc3_1, pc3_2, pc3_3],
-    mobileHotzones: [] as Hotzone[],
-    pcHotzones: [
-      {
-        x: 103,
-        y: 1426,
-        w: 140,
-        h: 20,
-        type: 'text',
-        payload: 'https://account.apple.com',
-      },
-      {
-        x: 103,
-        y: 1463,
-        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[],
-  },
-])
+const selectedIndex = ref(0) // 直接在内部定义数据
+const downloadMethods = computed(() => {
+  const account = accounts[selectedIndex.value]
+  return [
+    {
+      id: 1,
+      title: '创建新“香港Apple ID”',
+      subtitle: '首推',
+      isHot: true,
+      highlight: '',
+      mobileImages: [m1_1, m1_2, m1_3],
+      pcImages: [pc1_1, pc1_2, pc1_3],
+      mobileHotzones: [] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 410,
+          y: 224,
+          w: 140,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com/account',
+        },
+      ] as Hotzone[],
+    },
+    {
+      id: 2,
+      title: '修改已有 Apple ID 至 <香港>',
+      subtitle: '',
+      isHot: false,
+      highlight: '',
+      mobileImages: [m2_1, m2_2, m2_3],
+      pcImages: [pc2_1, pc2_2, pc2_3],
+      mobileHotzones: [] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 410,
+          y: 224,
+          w: 140,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com',
+        },
+      ] as Hotzone[],
+    },
+    {
+      id: 3,
+      title: '使用Hi快提供的公用账号',
+      subtitle: '',
+      isHot: false,
+      highlight: '谨慎选择',
+      mobileImages: [m3_1, m3_2, m3_3],
+      pcImages: [pc3_1, pc3_2, pc3_3],
+      mobileHotzones: [] as Hotzone[],
+      pcHotzones: [
+        {
+          x: 103,
+          y: 1426,
+          w: 140,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.account,
+        },
+        {
+          x: 103,
+          y: 1463,
+          w: 140,
+          h: 20,
+          type: 'text', // 展示密码文字
+          payload: account.password,
+        },
+        {
+          x: 103,
+          y: 1414,
+          w: 194,
+          h: 34,
+          type: 'copy',
+          payload: account.account,
+          label: '账号', // account
+        },
+        {
+          x: 103,
+          y: 1451,
+          w: 194,
+          h: 34,
+          type: 'copy',
+          payload: account.password,
+          label: '密码', // 复制提示
+        },
+      ] as Hotzone[],
+    },
+  ]
+})
 
 const activeId = ref<number | null>(null)
 
 const toggle = (id: number) => {
-  activeId.value = activeId.value === id ? null : id
+  if (activeId.value === id) {
+    activeId.value = null
+  } else {
+    activeId.value = id
+
+    // 重点：当点开 ID 为 3 的面板时，随机切换账号索引
+    if (id === 3) {
+      // 生成一个与当前不同的随机数，或者纯随机
+      selectedIndex.value = selectedIndex.value === 0 ? 1 : 0
+    }
+  }
 }
 
 const handleHotzone = (hz: Hotzone) => {