更新代码

src/pages/Help/DownloadMethodList/DownloadMethodList.vue

@@ -35,7 +35,7 @@
           </div>
         </div>
 
-        <div v-if="activeId === item.id" class="px-2 md:pt-8">
+        <div v-if="activeId === item.id" class="px-2 pt-4 md:pt-8">
           <div
             class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed duration-200 md:pt-[20px]"
           >
@@ -71,7 +71,11 @@
                     height: hz.h + 'px',
                   }"
                   @click="handleHotzone(hz)"
-                ></div>
+                >
+                  <span class="text-xs font-bold text-black" v-if="hz.type === 'text'">{{
+                    hz.payload
+                  }}</span>
+                </div>
               </div>
 
               <!-- PC Image Stack -->
@@ -104,7 +108,14 @@
 
               <!-- 底部收起按钮 -->
               <div class="absolute right-4 bottom-4 z-10">
-                <div @click="toggle(item.id)" class="h-[30px] w-[200px]"></div>
+                <div @click="toggle(item.id)" class="h-[30px] w-[200px]">
+                  <div
+                    class="flex items-center justify-end gap-[10px] rounded-full bg-black/40 px-3 py-1 text-xl 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>
             </div>
           </div>
@@ -150,7 +161,7 @@ interface Hotzone {
   y: number
   w: number
   h: number
-  type: 'copy' | 'link'
+  type: 'copy' | 'link' | 'text'
   payload: string
   label?: string
 }
@@ -170,7 +181,16 @@ const downloadMethods = computed(() => {
       highlight: '',
       mobileImages: [m1_1, m1_2, m1_3],
       pcImages: [pc1_1, pc1_2, pc1_3],
-      mobileHotzones: [] as Hotzone[],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 130,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com/account',
+        },
+      ] as Hotzone[],
       pcHotzones: [
         {
           x: 410,
@@ -190,7 +210,16 @@ const downloadMethods = computed(() => {
       highlight: '',
       mobileImages: [m2_1, m2_2, m2_3],
       pcImages: [pc2_1, pc2_2, pc2_3],
-      mobileHotzones: [] as Hotzone[],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 130,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: 'https://account.apple.com',
+        },
+      ] as Hotzone[],
       pcHotzones: [
         {
           x: 410,
@@ -210,7 +239,42 @@ const downloadMethods = computed(() => {
       highlight: '谨慎选择',
       mobileImages: [m3_1, m3_2, m3_3],
       pcImages: [pc3_1, pc3_2, pc3_3],
-      mobileHotzones: [] as Hotzone[],
+      mobileHotzones: [
+        {
+          x: 62,
+          y: 1950,
+          w: 170,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.account,
+        },
+        {
+          x: 62,
+          y: 1985,
+          w: 170,
+          h: 20,
+          type: 'text', // 展示账号文字
+          payload: account.password,
+        },
+        {
+          x: 53,
+          y: 1941,
+          w: 200,
+          h: 32,
+          type: 'copy', // 展示账号文字
+          payload: account.account,
+          label: '账号', // account
+        },
+        {
+          x: 53,
+          y: 1976,
+          w: 200,
+          h: 32,
+          type: 'copy', // 展示账号文字
+          payload: account.password,
+          label: '密码', // 复制提示
+        },
+      ] as Hotzone[],
       pcHotzones: [
         {
           x: 103,

src/pages/Home/components/DownloadButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto grid grid-cols-2 gap-4 md:flex md:flex-wrap">
+  <div class="mx-auto grid grid-cols-2 gap-[10px] md:flex md:flex-wrap">
     <template v-for="(item, index) in downloadLinks" :key="index">
       <router-link
         v-if="item.isInternal"

src/pages/Home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative min-h-screen overflow-hidden bg-[#24963e] bg-[url('@/pages/Home/bg-mobile.jpg')] bg-cover bg-center bg-no-repeat pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:bg-[url('@/pages/Home/bg-desktop.webp')] md:pb-0"
+    class="relative min-h-screen overflow-hidden bg-black bg-[url('@/pages/Home/bg-mobile.webp')] bg-cover bg-center bg-no-repeat pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:bg-[url('@/pages/Home/bg-desktop.webp')] md:pb-0"
   >
     <!-- Full Width Header -->
     <div class="h-[88px] md:h-[125px]">
@@ -75,7 +75,7 @@
                 <div class="ripple ripple-outer-3"></div>
                 <div class="ripple ripple-outer-2"></div>
                 <div class="ripple ripple-outer-1"></div>
-                <div class="ripple ripple-core"></div>
+                <div class="ripple ripple-core size-[80%]!"></div>
               </div>
               <!-- Center Image (Foreground/Top Layer) -->
               <div
@@ -86,14 +86,14 @@
 
           <!-- Download Buttons Grid -->
           <div
-            class="mg:mb-[65px] mb-9 flex grid-cols-2 flex-wrap gap-[10px] px-[24px] md:mt-[124px] md:ml-[17px] md:px-0"
+            class="mb-6 flex grid-cols-2 flex-wrap gap-[10px] px-[24px] md:mt-[124px] md:mb-[65px] md:ml-[17px] md:px-0"
           >
             <DownloadButton />
           </div>
 
           <!-- Features / Footer Info -->
           <div
-            class="mb-5 w-full text-center text-xs leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
+            class="mb-5 w-full text-center text-[10px] leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
           >
             <p>最新加密协议-安全有保障</p>
             <p>IEPL专线-纯净、稳定</p>
@@ -103,7 +103,7 @@
               <a
                 href="https://x.com/hifasttech"
                 target="_blank"
-                class="mt-[12px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform hover:brightness-110 md:mt-[16px]"
+                class="mt-[8px] flex h-[30px] w-[100px] shrink-0 items-center justify-center space-x-2 rounded-full transition-transform hover:brightness-110 md:mt-[16px]"
                 style="
                   backdrop-filter: blur(36px);
                   box-shadow:
@@ -140,7 +140,7 @@
         <!-- Right Column: Phone Screenshot -->
         <div class="relative hidden w-full max-w-[632px] md:mt-0 md:block">
           <!-- Screenshot with Ripple Effect -->
-          <div class="absolute right-[9%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
+          <div class="absolute right-[10%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
             <!-- Ripple Animation (Background) -->
             <div class="ripple-container absolute inset-0">
               <div class="ripple ripple-outer-3"></div>
@@ -252,8 +252,8 @@ const openLoginModal = () => {
 
 /* Core: Fixed minimum diameter (~57% of max) */
 .ripple-core {
-  width: 57%;
+  width: 70%;
-  height: 57%;
+  height: 70%;
   opacity: 1;
   z-index: 4;
 }