桌面端样式

src/pages/Help/index.vue

@@ -28,7 +28,7 @@
           </div>
           <div class="flex items-center justify-between">
             <div
-              class="w-1/2 rounded-full border-5 p-[6px]"
+              class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
               :class="[activeIndex === 0 ? 'border-white' : 'border-black']"
               @click="activeIndex = 0"
             >
@@ -39,7 +39,7 @@
               </Button>
             </div>
             <div
-              class="w-1/2 rounded-full border-5 p-[6px]"
+              class="w-1/2 rounded-full border-5 p-[6px] p-[10px] md:border-[10px]"
               :class="[activeIndex === 1 ? 'border-white' : 'border-black']"
               @click="activeIndex = 1"
             >
@@ -55,26 +55,34 @@
     </div>
 
     <div class="container md:px-[12vw]">
-      <!--  tab1    -->
+      <Transition name="fade" mode="out-in">
-      <div v-show="activeIndex === 0">
+        <!--  tab1    -->
-        <div
+        <div v-if="activeIndex === 0" key="tab1">
-          class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] 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快提供三种下载方式
+          >
+            Hi快提供三种下载方式
+          </div>
+          <DownloadMethodList />
         </div>
-        <DownloadMethodList />
+        <!--  tab2    -->
-      </div>
+        <div v-else-if="activeIndex === 1" key="tab2">
-      <div v-show="activeIndex === 1">
+          <div
-        <div
+            class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
-          class="mx-auto flex w-[237px] items-center justify-center pt-[34px] pb-[15px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:pt-[100px] md:text-3xl"
+          >
-        >
+            <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
-          <ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
+          </div>
+          <div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[494px]">
+            <a
+              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>
         </div>
-        <div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[494px]">
+      </Transition>
-          <img src="./Group%20100.png" class="h-full w-full" alt="下载" />
-        </div>
-      </div>
-      <!--  tab2    -->
     </div>
 
     <div class="container md:px-[92px]">
@@ -137,3 +145,15 @@ const otherClients = [
   { icon: AndroidIcon, link: downLoadAndroid, type: 'android' },
 ]
 </script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/pages/Home/components/DownloadButton.vue

@@ -9,7 +9,7 @@
           backdrop-filter: blur(36px);
           box-shadow:
             0px 0px 33px 0px #f2f2f280 inset,
-            -3px -4.5px 1.5px -3px #b3b3b3 inset,
+            -1px -1.5px 1.5px -3px #b3b3b3 inset,
             3px 4.5px 1.5px -3px #b3b3b333 inset,
             4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
             -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
@@ -34,7 +34,7 @@
           backdrop-filter: blur(36px);
           box-shadow:
             0px 0px 33px 0px #f2f2f280 inset,
-            -3px -4.5px 1.5px -3px #b3b3b3 inset,
+            -1px -1.5px 1.5px -3px #b3b3b3 inset,
             3px 4.5px 1.5px -3px #b3b3b333 inset,
             4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
             -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
@@ -62,8 +62,8 @@ import Icon4 from './Group 108.svg?component'
 import { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
 // 定义下载链接数据
 const downloadLinks = [
-  { icon: Icon1, link: downLoadWin },
   { icon: Icon2, link: '/help', isInternal: true },
+  { icon: Icon1, link: downLoadWin },
   { icon: Icon3, link: downLoadMac },
   { icon: Icon4, link: downLoadAndroid },
 ]

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-6"
+    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"
   >
     <!-- Full Width Header -->
     <div class="h-[88px] md:h-[125px]">
@@ -12,7 +12,7 @@
               backdrop-filter: blur(36px);
               box-shadow:
                 0px 0px 33px 0px #f2f2f280 inset,
-                -3px -4.5px 1.5px -3px #b3b3b3 inset,
+                -1px -1.5px 1.5px -3px #b3b3b3 inset,
                 3px 4.5px 1.5px -3px #b3b3b333 inset,
                 4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
                 -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
@@ -41,7 +41,7 @@
             <button
               v-else
               @click="openLoginModal"
-              class="flex h-[48px] items-center rounded-full bg-[#70C877] px-6 text-sm font-bold backdrop-blur-md transition hover:scale-[0.97] hover:bg-white/30 md:text-2xl"
+              class="flex h-[48px] items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:scale-[0.97] hover:bg-white/30 md:h-[60px] md:w-[220px] md:text-2xl"
             >
               登录 / 注册
             </button>
@@ -86,6 +86,32 @@
             <p>EPL专线-纯净、稳定</p>
             <p>不限速/不限流-网速多快，Hi快多快</p>
             <p>极速闪连-永远快人一步</p>
+            <div class="flex justify-center md:justify-start">
+              <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 active:scale-95 md:mt-[16px]"
+                style="
+                  backdrop-filter: blur(36px);
+                  box-shadow:
+                    0px 0px 33px 0px #f2f2f280 inset,
+                    -1px -1.5px 1.5px -3px #b3b3b3 inset,
+                    3px 4.5px 1.5px -3px #b3b3b333 inset,
+                    4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
+                    -4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
+                  border-image-source: linear-gradient(
+                    135deg,
+                    rgba(255, 255, 255, 0.4) 0%,
+                    rgba(255, 255, 255, 0) 30%
+                  );
+                  border-image-slice: 1;
+                "
+              >
+                <div class="flex items-center justify-center">
+                  <img src="./x-logo.png" class="h-[16px] w-[77px]" />
+                </div>
+              </a>
+            </div>
           </div>
 
           <div class="mx-auto mb-1 h-[20px] w-[352px] md:ml-[17px]">
@@ -99,13 +125,24 @@
         </div>
 
         <!-- Right Column: Phone Screenshot -->
-        <div class="relative hidden w-full md:mt-0 md:block">
+        <div class="relative hidden w-full max-w-[632px] md:mt-0 md:block">
-          <!-- Decorative elements behind phone -->
+          <!-- Screenshot with Ripple Effect -->
-          <img
+          <div class="absolute right-[9%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
-            :src="ScreenshotDesktop"
+            <!-- Ripple Animation (Background) -->
-            alt="App Screenshot"
+            <div class="ripple-container absolute inset-0">
-            class="absolute right-[52px] -bottom-[62px] w-[632px]"
+              <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>
+            <!-- Center Image (Foreground/Top Layer) -->
+            <div
+              class="absolute inset-0 bottom-[36px] z-100 bg-[url('@/pages/Home/connected-bg.png')] bg-cover bg-center bg-no-repeat"
+            ></div>
+          </div>
+          <div class="absolute right-[2vw] bottom-0 max-w-[632px]">
+            <img :src="ScreenshotDesktop" alt="App Screenshot" class="relative z-10 w-full" />
+          </div>
         </div>
       </main>
     </div>
@@ -180,3 +217,63 @@ const openLoginModal = () => {
   loginModalRef.value?.show()
 }
 </script>
+
+<style scoped>
+.ripple-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.ripple {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background: #a8ff53; /* Brand neon green */
+  will-change: width, height, opacity;
+}
+
+/* Core: Fixed minimum diameter (~57% of max) */
+.ripple-core {
+  width: 57%;
+  height: 57%;
+  opacity: 1;
+  z-index: 4;
+}
+
+/* Outer Layer 1: Opacity 0.8, 5.4s */
+.ripple-outer-1 {
+  animation: breathe 5.4s ease-in-out infinite alternate;
+  opacity: 0.8;
+  z-index: 3;
+}
+
+/* Outer Layer 2: Opacity 0.6, 4.2s */
+.ripple-outer-2 {
+  animation: breathe 4.2s ease-in-out infinite alternate;
+  opacity: 0.6;
+  z-index: 2;
+}
+
+/* Outer Layer 3 (Outer-most): Opacity 0.4, 3s */
+.ripple-outer-3 {
+  animation: breathe 3s ease-in-out infinite alternate;
+  opacity: 0.4;
+  z-index: 1;
+}
+
+@keyframes breathe {
+  0% {
+    width: 57%;
+    height: 57%;
+  }
+  100% {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>