细节优化

2026-01-02 19:34:12 -08:00 · 2026-01-02 19:34:12 -08:00 · ed3b96158f
commit ed3b96158f
parent f9d55161e6
12 changed files with 100 additions and 35 deletions
--- a/src/components/user-center/DeviceList.vue
+++ b/src/components/user-center/DeviceList.vue
@ -1,25 +1,27 @@
 <template>
-  <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
-  <div class="grid min-h-[76px] grid-cols-2 gap-3">
-    <div
-      v-for="device in devices"
-      :key="device.id"
-      @click="delDevice(device)"
-      class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
-    >
-      <div class="flex h-full items-center justify-center gap-3">
-        <component
-          :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
-          class="h-6 w-6 text-white"
-        />
-        <div class="flex flex-col overflow-hidden">
-          <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
-          <span class="font-mono text-[11px] tracking-tighter uppercase"
-            >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
-          </span>
+  <div class="device-list-container">
+    <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
+    <div v-else class="grid min-h-[76px] grid-cols-2 gap-3">
+      <div
+        v-for="device in devices"
+        :key="device.id"
+        @click="delDevice(device)"
+        class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
+      >
+        <div class="flex h-full items-center justify-center gap-3">
+          <component
+            :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
+            class="h-6 w-6 text-white"
+          />
+          <div class="flex flex-col overflow-hidden">
+            <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
+            <span class="font-mono text-[11px] tracking-tighter uppercase"
+              >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
+            </span>
+          </div>
        </div>
+        <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
      </div>
-      <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
    </div>
  </div>
 </template>
--- a/src/pages/Help/DownloadMethodList/DownloadMethodList.vue
+++ b/src/pages/Help/DownloadMethodList/DownloadMethodList.vue
@ -34,19 +34,23 @@

        <div v-if="activeId === item.id" class="px-2 md:pt-8">
          <div
-            class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed text-gray-300 duration-200 md:pt-[20px]"
+            class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed duration-200 md:pt-[20px]"
          >
-            <!--  收起按钮           -->
-            <div class="px-2">
-              <div
-                class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-2xl"
-              >
-                <div class="flex items-center gap-[10px]">
-                  <span class="tracking-tight">点击收起</span>
-                  <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
+            <!--  收起按钮 (仅保留底部悬浮或单一按钮，此处移除上方重复项) -->
+            <div class="relative px-2">
+              <img :src="item.mobileSrc" class="-mt-10 w-full md:hidden" alt="mobile guide" />
+              <img :src="item.pcSrc" class="-mt-10 hidden w-full md:block" alt="pc guide" />
+              <!-- 底部收起按钮 -->
+              <div class="absolute right-4 bottom-4">
+                <div
+                  class="flex items-center justify-end gap-1.5 text-sm font-bold group-hover:opacity-100 md:text-2xl"
+                >
+                  <div class="flex items-center gap-[10px] rounded-full bg-black/40 px-3 py-1 backdrop-blur-sm transition-all hover:bg-black/60">
+                    <span class="tracking-tight">收起详情</span>
+                    <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
+                  </div>
                </div>
              </div>
-              <p class="whitespace-pre-line">{{ item.details }}</p>
            </div>
          </div>
        </div>
@ -60,6 +64,13 @@ import { ref } from 'vue'
 import ArrowIcon from './arrow-icon.svg?component'
 import StartIcon from './Star-1.svg?component'

+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'
+
 // 直接在内部定义数据
 const downloadMethods = ref([
  {
@ -68,8 +79,8 @@ const downloadMethods = ref([
    subtitle: '首推',
    isHot: true,
    highlight: '',
-    details:
-      '这是最稳定的方式。步骤：1. 访问 Apple 官网... 2. 注册地区选择香港... 3. 无需绑定卡片即可下载。',
+    mobileSrc: mobile1,
+    pcSrc: pc1,
  },
  {
    id: 2,
@ -77,7 +88,8 @@ const downloadMethods = ref([
    subtitle: '',
    isHot: false,
    highlight: '',
-    details: '1. 打开 App Store 个人中心... 2. 点击国家/地区... 3. 更改为香港并填写虚拟地址。',
+    mobileSrc: mobile2,
+    pcSrc: pc2,
  },
  {
    id: 3,
@ -85,7 +97,8 @@ const downloadMethods = ref([
    subtitle: '',
    isHot: false,
    highlight: '谨慎选择',
-    details: '注意：千万不要在设置(Settings)中登录公用账号！仅在 App Store 中登录，否则可能锁机。',
+    mobileSrc: mobile3,
+    pcSrc: pc3,
  },
 ])

--- a/src/pages/Help/DownloadMethodList/mobile1.png
+++ b/src/pages/Help/DownloadMethodList/mobile1.png
--- a/src/pages/Help/DownloadMethodList/mobile2.png
+++ b/src/pages/Help/DownloadMethodList/mobile2.png
--- a/src/pages/Help/DownloadMethodList/mobile3.png
+++ b/src/pages/Help/DownloadMethodList/mobile3.png
--- a/src/pages/Help/DownloadMethodList/pc-1.png
+++ b/src/pages/Help/DownloadMethodList/pc-1.png
--- a/src/pages/Help/DownloadMethodList/pc-2.png
+++ b/src/pages/Help/DownloadMethodList/pc-2.png
--- a/src/pages/Help/DownloadMethodList/pc-3.png
+++ b/src/pages/Help/DownloadMethodList/pc-3.png
--- a/src/pages/Help/android.svg
+++ b/src/pages/Help/android.svg
@ -0,0 +1,9 @@
+<svg width="49" height="73" viewBox="0 0 49 73" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="49" height="73" fill="url(#pattern0_9152_869)"/>
+<defs>
+<pattern id="pattern0_9152_869" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_9152_869" transform="scale(0.0204082 0.0136986)"/>
+</pattern>
+<image id="image0_9152_869" width="49" height="73" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAABJCAYAAACU7c6wAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMpSURBVHgB7ZqNldowDIDFvQ7ABk0nKBvUGzQbQCc4OgF0AugE0AmgE5CbAG6C0AmuG6jWRSaKLwETh5L3Tt97fsGWfyT8E9sRQCSIOLThxYbZleVmNuRUHiL5AJEMBoO/VpHf9ufcPin+gxVLbUhE1gMFKz+ywXMbflF56AtWsTUW7PE8O36uoW9YpQwPq1AM9Amr0BjbMYY+YBVJvB6g4ZQ3KE35dl48gXvjKbXitLTBCMPypUjbQSQPEAH/i0YkueXyY0ORrzVyg/ecH7bxOXbDHCKI6gnLZ+iGEUQQ+7L7Y0MG8eTw3hmEZMJiG/EIxSSmrcKa0xcQORQY2o585zonUCwAtE352dm2hJZObyJOOH2H3bBzBnjpmxD9Qid26sW/wG0wF+K1hBoRvV1uSVC7sUtsL1Aj+oIa0RfUiL6gRvSFUCPudTcU1G6oEZkXf4LbkHnxLQQQeij6ZsMzFCe5J7cV7xqq1+5c6Sdd5dAftYRbg92dsW+v7AVDDIdNjXJGBJ+M07s4VHUDlnexJzy5zwo6Qt8TfUGN6AtdGnH04gcvnnnxZ+gbWHy7cyvUDr0reyw+AbivSLQc3+vyQVEURVEURVEURbkIFh/vV21Pb1g6guUN8hHXv6gTdHKxJepJoAVCl5e6PwLLG8VXI+VFQdrw+79jL5bpkuEThat8O/gQT5Y71zYjZDkf/h+x9PebCXmCpZ+HvJNNOORcrys/53IzUd/G9Zwok4s2xl5elHJXCFkR5ySyFHJJLpUURrrur8hF3bI8+QguRJm9kA1lGU8/xKqjZMUIp/iUK3mtvMaI1FNa3nifPCvPGDFl+VCkjbw6JzVGuNGx5XgqjXBzYiyezj2HGjJQpW58Jvw8kgs1nMHKXe8ORZq7ZDt69Ulc/kOdHg9YzH7D8RFU3XMMhJNckfekBL5dfY5n8tf6HFJPuJUoGzBQfN4iQvyattwI9RxNuIt+rrziZBylMU69b6AwIGtog0g5b/UVgOVMn4q0oTeuHYbluRefiDwk29fNCa/dBKsrWS7mx5syWHUIpnKNL8PWsOEJXMk15dq2oSiKorxv/gHGudupLz/9HwAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
--- a/src/pages/Help/index.vue
+++ b/src/pages/Help/index.vue
@ -55,7 +55,9 @@

      <!--  tab1    -->
      <div v-show="activeIndex === 0">
-        <div class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:text-3xl">
+        <div
+          class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
+        >
          Hi快提供三种下载方式
        </div>
        <DownloadMethodList />
@ -93,7 +95,18 @@
    </div>

    <div class="px-[18px] pt-[34px] pb-[calc(50px+env(safe-area-inset-bottom))]">
-      <div class="pb-[15px] text-center text-xl font-[900] md:text-xl">其他客户端下载</div>
+      <div class="pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-3xl">
+        其他客户端下载
+      </div>
+      <div class="flex justify-center gap-2">
+        <template v-for="client in otherClients" :key="client.link">
+          <a :href="client.link" target="_blank">
+            <MacosIcon v-if="client.type === 'mac'" />
+            <WindowsIcon v-if="client.type === 'window'" />
+            <AndroidIcon v-if="client.type === 'android'" />
+          </a>
+        </template>
+      </div>
    </div>
  </div>
 </template>
@ -104,9 +117,19 @@ import { ref } from 'vue'
 import Logo from '@/pages/Home/logo.svg?component'
 import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
 import ChatIcon from './Vector.svg?component'
+import MacosIcon from './macos.svg?component'
+import WindowsIcon from './windows.svg?component'
+import AndroidIcon from './android.svg?component'
+
 import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
 import FAQAccordion from './FAQAccordion/index.vue'
 import { Button } from '@/components/ui/button'

 const activeIndex = ref(0)
+
+const otherClients = [
+  { icon: WindowsIcon, link: 'https://down.hi.com/win', type: 'window' },
+  { icon: MacosIcon, link: 'https://down.hi.com/mac', type: 'mac' },
+  { icon: AndroidIcon, link: 'https://down.hi.com/apk', type: 'android' },
+]
 </script>
--- a/src/pages/Help/macos.svg
+++ b/src/pages/Help/macos.svg
@ -0,0 +1,9 @@
+<svg width="43" height="72" viewBox="0 0 43 72" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="43" height="72" fill="url(#pattern0_9152_868)"/>
+<defs>
+<pattern id="pattern0_9152_868" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_9152_868" transform="scale(0.0232558 0.0138889)"/>
+</pattern>
+<image id="image0_9152_868" width="43" height="72" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAABICAYAAABvPQw0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARrSURBVHgB7VrhldMwDFbv8Z8wwZkJLkxAmIAyAWGCKxO0TECZoL0JekyQMkGPCZINekwgpLPcKiZ2cm0o/PD3np4bS3E+y7Li2J3AiUDEgor3JIYkl9KhEXkg+UGynUwmj3BJEMGMZE6yx+djRWLgb+NMkpcjzQ2T7HBccKdLGBPUYI7jeDOEOYyBCxAdhzDaob8EUYfZEF6TANka2qnoEnhD6e0hZvDCr5BhMQF7zpX3JL9IMpK3JHckNyRT0d9J+VHaaaTOSF0IKyYc0cOVR9RQsYjYM4kvJNckW/nNhD+L3hF/KXVs/0nqeLSWkbZ5jpQR/R+eHRLsBqwXf8rvQulu4OhZFh7WTOynA9q+JVmHlFfedQHngb35FY6dNmBJM5oYEQF7twgpD54VIwP9yKR8KQLqvoLkA9gwyaSew+S16DfQDx6BbdSCyC7x/0Ad4qjD4Ab+D3COz7oUmqyBfjRg45JTDA/tO7ATqumwdZnjg2c7ZKlootoBw7NGu/piKUkWJFO511/s7KVO25bKtu/tWJxDthabrvVCLQQ0iZXY7zpsMyEfQ9nF8QqG4QvaOOLZ7MeTIVnRq7Kh8pvUfUf7gsk7bIesA5qoVnrdCdGXPd54ypHyeyH3rPE0FF0ctWcfe3qZQxysdwuRW/YsebsEO7HY41sYjs4FjSb7A+LIevSgPgrZtkKJXaqfkbwj4VUerxViGaEJfVxqsluIoy/lPGI7PxqSEixpBpclEVmDTWch/IQ+oJ2loZSSqXgMwQywYbh0F0IZ4njwrLj+LmDHw7iFQCwRvkk2cOtVjtPPAVsDYTTi+X5EPOOSPEvl6Zbi+VzVLaQ9f71RSRuhzLKA5wDD6aZG+d6XBzK5THVy73WuULaFujfH7jR5aD+ESQdZJsBvrNDsvwebOThsDNglYBGw3YptI+29j9h+GhwCGjhsooyJJZwD7H9/j4UKxsAFCFcYWLueSphn7t/Y8Dhv6COEeUafuijxUWPfenUk0jzxKjwNPDocVuMN+0DS7OmZEI+FCC++l2N5cgIjAG0yN3L5tMEhr9+EhISEhISEhISEhIRnAHu2ilAOW+BfQb7dNuq7jcuVJoV/bv7VOPZfVAaSrRVJTahSNrsOm53fCCtuxYhl7l3PxNb9E6lWPZ97pObKexUez8OcvRE7vU1aSJ1/bVCHDLaxD1xzmanOuQ76jX/Ftmd2Uu/2au+9jrk2Zp73uVyhH9v6geKF0HWuvMsy1Q8TLzgY7xluR2cRq8fu/dunkfMP7fyTEv/aTQS+eQ/2EC9XOuMMO/YNXDvXXv211vP/ZEj4rJdPdVwbvJNTDD1hPADtAQYPGZ8vvCL5rtSNsjPerVspp6h20OG4ufwgdexZPkNbC2nXZuYabg1d5JrDQk8Ujs+9N4yV0q/Qzm4X6zul0yls48jjMQQqbM8JcwrZDLtT0EI90D8hz5Vug21ssJ1nF9iOWb5/CudAHpxF9BkG3lJO13O/wUv8KzQhISEh4YDfxLK9FlLT6PIAAAAASUVORK5CYII="/>
+</defs>
+</svg>
--- a/src/pages/Help/windows.svg
+++ b/src/pages/Help/windows.svg
@ -0,0 +1,9 @@
+<svg width="56" height="70" viewBox="0 0 56 70" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="56" height="70" fill="url(#pattern0_9152_867)"/>
+<defs>
+<pattern id="pattern0_9152_867" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_9152_867" transform="scale(0.0178571 0.0142857)"/>
+</pattern>
+<image id="image0_9152_867" width="56" height="70" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAABGCAYAAACZrlevAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKQSURBVHgB7ZqLcdswDIZhXwfgCM4EUSeoMkHjCSpPUG9gZ4NuoHQCpRNYG1idwMoE8gYp4PyQENVNa/rqKxt8dzgRBB8AH/KZ4oQieWIojgVLy7KhOK4mk0n7p4Wn9J/jAaaOB5g6HmDqeICp4wGmjgeYOu8onjuKo2HZn1F/f0rhcwKsKY49pKYLMKFI/P/gP4IHmDoeYOp4gKnjAaaOB5g6HmDqnPN36YbiaM6pf8o/CcdxHMdxHMdxHMdxHCcR+Mt1wdKxLCkCrrdiKVlyugBTOCzsjBMd8gL0CvotqzMWyb+mOHKWAu38deTYsEZag8k0DWcejN7ysd0Dl5G8lhJginNGudYR2PEZvRzZHE8JWs4kGyzNimUteax/kdmX2WXZYKYrM/sBeodVEqwDsK/MqinhB6G9HQbd6mrfQj/4bvrv0E4gU1DI4HCHihtUFrYou1ZHoN8/DexMegl7aTrdGHtxxK71d6O2lwigr2v0rQleqJA+XFPRo/vvZqZkbzWQTGePeaTXuecZvuLnV+i6Rws852y/oeFkmzATan+P+rKaxPmchu1zbfwQ+wcaVpq2Z3W5izO3AdpCOT0HLAEF03Dv2C/QAWhHAdAo317F6u3mSF77kX5rk85hq5HOYfuGp14wWrPICvgsmeMAP+JZm8Y/jcqcwtFgDK0m+v0ylGvN+0HyZBYfIar3fnHZmp6/dyxQR7ZSNg4wMx0fyzsJ7tTeSSuxb3Njb41d9k0F522+zFBAvdrki66DQNhzK9h0YPdT40irmfK2NKOnzsTMoKBLZ8ZySz9fwlsgL4Ndys7hk2D7bejlz9rh3YHZl5ktWErY7i76JQpvvfCKPYz2bEwf4Xf9OI7jOM5b4gd1/xBMm0xO7QAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>