样式修改

src/pages/Help/DownloadMethodList/DownloadMethodList.vue

@@ -155,6 +155,7 @@ 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'
+import { downLoadIos } from '@/utils/constant.ts'
 
 interface Hotzone {
   x: number
@@ -190,6 +191,14 @@ const downloadMethods = computed(() => {
           type: 'link',
           payload: 'https://account.apple.com/account',
         },
+        {
+          x: 142,
+          y: 1952,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
       pcHotzones: [
         {
@@ -200,6 +209,14 @@ const downloadMethods = computed(() => {
           type: 'link',
           payload: 'https://account.apple.com/account',
         },
+        {
+          x: 580,
+          y: 1689,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
     },
     {
@@ -219,6 +236,14 @@ const downloadMethods = computed(() => {
           type: 'link',
           payload: 'https://account.apple.com',
         },
+        {
+          x: 142,
+          y: 2510,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
       pcHotzones: [
         {
@@ -229,6 +254,14 @@ const downloadMethods = computed(() => {
           type: 'link',
           payload: 'https://account.apple.com',
         },
+        {
+          x: 580,
+          y: 2106,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
     },
     {
@@ -274,6 +307,14 @@ const downloadMethods = computed(() => {
           payload: account.password,
           label: '密码', // 复制提示
         },
+        {
+          x: 142,
+          y: 3006,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
       pcHotzones: [
         {
@@ -310,6 +351,14 @@ const downloadMethods = computed(() => {
           payload: account.password,
           label: '密码', // 复制提示
         },
+        {
+          x: 580,
+          y: 2386,
+          w: 88,
+          h: 20,
+          type: 'link',
+          payload: downLoadIos,
+        },
       ] as Hotzone[],
     },
   ]
@@ -320,6 +369,7 @@ const activeId = ref<number | null>(null)
 const toggle = (id: number) => {
   if (activeId.value === id) {
     activeId.value = null
+    window.scrollTo(0, 0)
   } else {
     activeId.value = id
 

src/pages/Help/index.vue

@@ -1,34 +1,36 @@
 <template>
   <div class="min-h-screen bg-black text-white">
     <!-- Full Width Header -->
-    <div class="h-[88px] md:h-[94px]">
+    <div class="h-[80px] md:h-[114px]">
-      <div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[34px]">
+      <div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
         <div class="container">
           <header
-            class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[60px] md:pr-[58px] md:pl-[41px]"
+            class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
           >
             <router-link to="/" class="flex items-center gap-2">
               <!-- Desktop Logo -->
               <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
               <!-- Mobile Logo -->
-              <MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[36px]" />
+              <MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
             </router-link>
-            <RightText class="block h-[15px] text-black md:h-[24px]" />
+            <RightText class="block h-[12px] text-black md:h-[24px]" />
           </header>
         </div>
       </div>
     </div>
-    <div class="h-[125px] md:h-[180px]">
+    <div class="">
-      <div class="fixed z-50 w-full bg-black">
+      <div class="w-full bg-black">
         <div class="m-auto w-[340px] pb-[10px] md:w-[760px]">
-          <div class="pt-[30px] pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-2xl">
+          <div
+            class="pb-[15px] text-center text-xl font-[900] md:pt-[20px] md:pb-[30px] md:text-2xl"
+          >
             请选择适用您情形的选项
           </div>
           <div class="flex items-center justify-between">
             <div
               class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
               :class="[activeIndex === 0 ? 'border-white' : 'border-black']"
-              @click="activeIndex = 0"
+              @click="changeActiveIndex(0)"
             >
               <Button
                 class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
@@ -39,7 +41,7 @@
             <div
               class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
               :class="[activeIndex === 1 ? 'border-white' : 'border-black']"
-              @click="activeIndex = 1"
+              @click="changeActiveIndex(1)"
             >
               <Button
                 class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
@@ -69,11 +71,7 @@
             <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
           </div>
           <div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[494px]">
-            <a
+            <a :href="downLoadIos" target="_blank" class="block h-full w-full">
-              href="https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167"
-              target="_blank"
-              class="block h-full w-full"
-            >
               <img src="./Group%20100.png" class="h-full w-full" alt="下载" />
             </a>
           </div>
@@ -131,7 +129,7 @@ import AndroidIcon from './android.svg?component'
 import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
 import FAQAccordion from './FAQAccordion/index.vue'
 import { Button } from '@/components/ui/button'
-import { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
+import { downLoadAndroid, downLoadWin, downLoadMac, downLoadIos } from '@/utils/constant.ts'
 
 const activeIndex = ref(0)
 
@@ -140,6 +138,11 @@ const otherClients = [
   { icon: MacosIcon, link: downLoadMac, type: 'mac' },
   { icon: AndroidIcon, link: downLoadAndroid, type: 'android' },
 ]
+
+function changeActiveIndex(index) {
+  activeIndex.value = index
+  window.scrollTo(0, 0)
+}
 </script>
 
 <style scoped>

src/pages/Home/index.vue

@@ -3,11 +3,11 @@
     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]">
+    <div class="h-[60px] md:h-[125px]">
       <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
         <div class="container">
           <header
-            class="flex h-[68px] items-center justify-between rounded-[90px] pr-[10px] transition-all duration-300 md:h-[80px]"
+            class="flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[80px] md:pr-[10px]"
             style="
               backdrop-filter: blur(36px);
               box-shadow:
@@ -26,14 +26,12 @@
           >
             <router-link to="/" class="flex items-center gap-2">
               <!-- Desktop Logo -->
-              <Logo alt="Hi快VPN" class="hidden h-[29px] w-auto md:ml-[62px] md:block" />
+              <Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-[62px] md:h-[29px]" />
-              <!-- Mobile Logo -->
-              <MobileLogo alt="Hi快VPN" class="ml-6 block h-[28px] w-[67px] md:hidden" />
             </router-link>
             <div v-if="isLoggedIn" class="flex items-center">
               <router-link
                 to="/user-center"
-                class="flex size-[48px] items-center justify-center rounded-full bg-[#2E3427] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[60px] md:text-3xl"
+                class="flex size-[30px] items-center justify-center rounded-full bg-[#2E3427] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:size-[60px] md:text-3xl"
               >
                 {{ userLetter }}
               </router-link>
@@ -41,7 +39,7 @@
             <button
               v-else
               @click="openLoginModal"
-              class="flex h-[48px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[60px] md:w-[220px] md:text-2xl"
+              class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[60px] md:w-[220px] md:text-2xl"
             >
               登录 / 注册
             </button>
@@ -57,7 +55,7 @@
         <div class="md:flex md:w-[432px] md:flex-col md:justify-center">
           <div class="mb-[20px] ml-[42px] md:ml-[17px]">
             <h2 class="mb-2 text-2xl font-black md:text-8xl">
-              <Logo class="h-[66px]" />
+              <Logo class="h-[34px] md:h-[66px]" />
             </h2>
             <p class="font-600 text-3xl md:text-[48px]">网在我在, 网快我快</p>
           </div>

src/pages/UserCenter/MobileLayout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Main Neon Green Card -->
-  <div class="pt-[35px]">
+  <div class="pt-[15px]">
     <div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
       <Transition name="fade" mode="out-in">
         <UserCenterSkeleton v-if="isUserLoading" type="header" layout="mobile" />

src/pages/UserCenter/index.vue

@@ -1,23 +1,18 @@
 <template>
   <div class="flex min-h-screen flex-col bg-black text-black">
     <!-- Full Width Header -->
-    <div class="h-[88px] md:h-[125px]">
+    <div class="h-[80px] md:h-[94px]">
-      <div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
+      <div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
         <div class="container">
           <header
-            class="flex min-h-[66px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
+            class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
           >
             <router-link to="/" class="flex items-center gap-2">
               <!-- Desktop Logo -->
               <!--              <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
               <!-- Mobile Logo -->
-              <MobileLogo
+              <MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
-                :src="MobileLogo"
-                alt="Hi快VPN"
-                class="block h-[28px] text-black md:h-[50px]"
-              />
             </router-link>
-            <div class="text-xl font-[600] text-black md:text-3xl">个人账户</div>
           </header>
         </div>
       </div>

src/utils/constant.ts

@@ -1,3 +1,4 @@
 export const downLoadAndroid = 'https://h.hifastapp.com/download/app-arm64-v8a-release.apk'
 export const downLoadMac = 'https://h.hifastapp.com/download/HiFastVPN-1.0.0+100-macos.dmg'
 export const downLoadWin = 'https://h.hifastapp.com/download/HiFastVPN-0.0.2-windows-setup.exe'
+export const downLoadIos = 'https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167'

vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
       '/api/v1': {
         target: 'https://h.hifastapp.com',
         changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ''),
+        // rewrite: (path) => path.replace(/^\/api/, ''),
         autoRewrite: true,
         // 3. 关键：将路径重写，在前面补上 /api/v1
         // 验证请求是否进入代理，可以在终端看到打印