样式处理

src/pages/Home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative min-h-screen overflow-hidden bg-black 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:pb-0"
+    class="relative min-h-screen overflow-hidden bg-black bg-cover bg-center bg-no-repeat pb-[calc(4rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col"
   >
     <!-- Full Width Header -->
     <div class="h-[60px] md:h-[125px]">
@@ -37,13 +37,41 @@
     <!-- Main Content Container -->
     <div class="container mx-auto flex flex-col">
       <main class="pt-10">
-        <!-- Left Column: Text & Downloads -->
+        <!--    module1    -->
-        <div class="md:flex md:w-[432px] md:flex-col md:justify-center">
+        <div class="mb-[80px] flex">
+          <div class="flex flex-col items-center">
             <div class="mb-[20px] ml-[42px] md:ml-[17px]">
               <h2 class="mb-2 text-2xl font-black md:text-8xl">
-              <Logo class="h-[34px] md:h-[66px]" />
+                <Logo class="h-[34px] md:h-[43px]" />
               </h2>
-            <p class="font-600 text-3xl md:text-[48px]">网在我在, 网快我快</p>
+              <p class="font-600 text-3xl">网在我在, 网快我快</p>
+            </div>
+            <img src="./Group%20133.png" alt="" class="mt-[52px] h-[287px] w-[182px]" />
+          </div>
+          <!-- video           -->
+        </div>
+        <!-- modules2       -->
+        <div class="mb-[80px] w-full rounded-[40px] bg-[#ADFF5B] p-8 pb-2 text-black">
+          <div class="text-center text-4xl font-black">“超强产品力，全面秒杀同级app”</div>
+          <div class="mt-2 text-center">为高能合伙人提供强力的的产品背书，每个点拿出去都能打。</div>
+          <div class="el-style-scrollbar mt-8 flex gap-2 overflow-x-auto pb-4">
+            <img
+              :src="image"
+              alt=""
+              v-for="(image, index) in modules2Image"
+              class="h-[432px] w-[200px] shrink-0 rounded-[30px] md:h-[600px] md:w-[277.5px]"
+              :key="index"
+            />
+          </div>
+        </div>
+        <!-- modules3       -->
+        <div class="mb-[40px] w-full rounded-[40px] pb-2 text-black">
+          <div class="text-center text-4xl font-black">
+            <Group215Icon class="mx-auto" />
+          </div>
+          <div class="text-center text-[#999999]">给您的客户提供专业视角的建议</div>
+          <div class="mt-[20px] flex justify-center">
+            <div class="size-[600px] rounded-[40px] border-8 border-[#ADFF5B]"></div>
           </div>
         </div>
       </main>
@@ -68,7 +96,16 @@ import { useRouter, useRoute } from 'vue-router'
 import { useLocalStorage } from '@vueuse/core'
 import LoginFormModal from './components/LoginFormModal.vue'
 import Logo from './logo.svg?component'
+import Group215Icon from './modules3/Group 215.svg?component'
 import request from '@/utils/request'
+import Frame98 from './modules2/Frame 98.png'
+import Frame99 from './modules2/Frame 99.png'
+import Frame100 from './modules2/Frame 100.png'
+import Frame101 from './modules2/Frame 101.png'
+import Frame104 from './modules2/Frame 104.png'
+import Frame105 from './modules2/Frame 105.png'
+
+const modules2Image = [Frame98, Frame99, Frame100, Frame101, Frame104, Frame105]
 
 const route = useRoute()
 const router = useRouter()
@@ -124,62 +161,4 @@ const openLoginModal = () => {
 }
 </script>
 
-<style scoped>
+<style scoped></style>
-.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: 70%;
-  height: 70%;
-  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>

src/pages/UserCenter/components/DownloadStats/Group 231.svg

@@ -0,0 +1,7 @@
+<svg width="69" height="16" viewBox="0 0 69 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="2" width="4.76405" height="4.78265" fill="white"/>
+<rect x="5.19727" y="2" width="4.76405" height="4.78265" fill="white"/>
+<rect y="7.21735" width="4.76405" height="4.78265" fill="white"/>
+<rect x="5.19727" y="7.21735" width="4.76405" height="4.78265" fill="white"/>
+<path d="M17.06 3.432H18.644L20.252 9.948H20.3L21.992 3.432H23.444L25.136 9.948H25.184L26.792 3.432H28.376L25.904 12H24.416L22.748 5.556H22.7L21.02 12H19.52L17.06 3.432ZM30.0815 3.264C30.3455 3.264 30.5735 3.348 30.7535 3.516C30.9215 3.684 31.0175 3.9 31.0175 4.164C31.0175 4.428 30.9215 4.656 30.7415 4.824C30.5615 4.992 30.3455 5.076 30.0815 5.076C29.8175 5.076 29.6015 4.992 29.4215 4.824C29.2415 4.644 29.1575 4.428 29.1575 4.164C29.1575 3.9 29.2415 3.684 29.4215 3.516C29.6015 3.348 29.8175 3.264 30.0815 3.264ZM29.3975 5.796H30.7655V12H29.3975V5.796ZM35.6662 5.628C37.2142 5.628 37.9942 6.468 37.9942 8.172V12H36.6262V8.292C36.6262 7.272 36.1582 6.768 35.2222 6.768C34.8862 6.768 34.5862 6.888 34.3342 7.128C34.0462 7.392 33.8782 7.776 33.8302 8.268V12H32.4622V5.796H33.8302V6.516C34.0702 6.228 34.3462 6 34.6462 5.856C34.9582 5.7 35.2942 5.628 35.6662 5.628ZM43.8508 3.264H45.2188V12H43.9468V11.34C43.5148 11.892 42.8908 12.168 42.0748 12.168C41.1508 12.168 40.4308 11.844 39.9148 11.196C39.4348 10.596 39.1948 9.816 39.1948 8.868C39.1948 7.956 39.4228 7.2 39.9028 6.6C40.4068 5.952 41.1148 5.628 42.0028 5.628C42.7228 5.628 43.3348 5.964 43.8508 6.648V3.264ZM42.3268 6.732C41.7028 6.732 41.2588 6.936 40.9708 7.344C40.7188 7.692 40.5988 8.196 40.5988 8.868C40.5988 9.54 40.7068 10.056 40.9468 10.416C41.2228 10.848 41.6668 11.064 42.2788 11.064C42.8068 11.064 43.2268 10.848 43.5148 10.428C43.7668 10.044 43.8988 9.54 43.8988 8.94V8.844C43.8988 8.184 43.7308 7.656 43.4188 7.272C43.1308 6.912 42.7588 6.732 42.3268 6.732ZM49.5336 5.628C50.4696 5.628 51.2256 5.928 51.8016 6.552C52.3656 7.164 52.6536 7.944 52.6536 8.904C52.6536 9.852 52.3656 10.632 51.8136 11.232C51.2376 11.856 50.4696 12.168 49.5336 12.168C48.5856 12.168 47.8296 11.856 47.2536 11.232C46.6896 10.632 46.4136 9.852 46.4136 8.904C46.4136 7.944 46.6896 7.164 47.2656 6.552C47.8296 5.928 48.5856 5.628 49.5336 5.628ZM49.5336 6.744C48.9576 6.744 48.5256 6.96 48.2136 7.416C47.9496 7.8 47.8176 8.304 47.8176 8.904C47.8176 9.504 47.9496 9.996 48.2136 10.38C48.5256 10.824 48.9576 11.052 49.5336 11.052C50.0976 11.052 50.5416 10.824 50.8536 10.38C51.1176 9.984 51.2616 9.492 51.2616 8.904C51.2616 8.304 51.1176 7.8 50.8536 7.416C50.5416 6.96 50.0976 6.744 49.5336 6.744ZM53.1889 5.796H54.7009L55.9369 10.38L57.1609 5.796H58.4209L59.6449 10.38L60.8809 5.796H62.3929L60.3049 12H59.0329L57.7969 7.464L56.5489 12H55.2769L53.1889 5.796ZM65.517 5.628C67.149 5.628 68.049 6.276 68.193 7.596H66.861C66.765 7.284 66.621 7.056 66.429 6.936C66.225 6.804 65.913 6.744 65.493 6.744C65.133 6.744 64.857 6.792 64.677 6.9C64.461 7.008 64.365 7.176 64.365 7.416C64.365 7.608 64.521 7.788 64.857 7.932C65.061 8.016 65.469 8.136 66.093 8.292C66.789 8.46 67.317 8.652 67.653 8.88C68.145 9.192 68.397 9.636 68.397 10.188C68.397 11.508 67.461 12.168 65.601 12.168C63.873 12.168 62.949 11.436 62.817 9.984H64.149C64.221 10.38 64.365 10.656 64.569 10.824C64.773 10.968 65.097 11.052 65.553 11.052C66.513 11.052 66.993 10.788 66.993 10.284C66.993 9.996 66.813 9.768 66.453 9.6C66.261 9.504 65.853 9.396 65.229 9.252C64.497 9.084 63.981 8.904 63.681 8.712C63.201 8.412 62.961 7.992 62.961 7.452C62.961 6.876 63.189 6.432 63.669 6.12C64.137 5.784 64.749 5.628 65.517 5.628Z" fill="white"/>
+</svg>

src/pages/UserCenter/components/DownloadStats/Group 232.svg

@@ -0,0 +1,14 @@
+<svg width="62" height="16" viewBox="0 0 62 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_12632_490)">
+<path d="M6.04419 12C6.37855 12 6.67013 11.7084 6.67013 11.3741V9.91224H7.08808C7.33888 9.91224 7.50602 9.74503 7.50602 9.49429V5.31909H2.49463V9.49433C2.49463 9.74509 2.66181 9.91227 2.91258 9.91227H3.33056V11.3741C3.33056 11.7085 3.62207 12 3.95649 12C4.29082 12 4.58236 11.7085 4.58236 11.3741V9.91227H5.41829V11.3741C5.41826 11.7084 5.70984 12 6.04419 12Z" fill="white"/>
+<path d="M8.54976 9.49433C8.88412 9.49433 9.17563 9.20278 9.17563 8.86839V5.94476C9.17563 5.61217 8.88412 5.31909 8.54976 5.31909C8.21537 5.31909 7.92383 5.61217 7.92383 5.94476V8.86839C7.92383 9.20275 8.21534 9.49433 8.54976 9.49433Z" fill="white"/>
+<path d="M1.45058 9.49433C1.78497 9.49433 2.07651 9.20278 2.07651 8.86839V5.94476C2.07651 5.61217 1.785 5.31909 1.45058 5.31909C1.11622 5.31909 0.824707 5.61217 0.824707 5.94476V8.86839C0.824707 9.20275 1.11622 9.49433 1.45058 9.49433Z" fill="white"/>
+<path d="M7.00445 2.06307C6.9209 1.97898 6.7965 1.97898 6.71294 2.06307L6.15238 2.62177L6.12651 2.64759C5.79413 2.48115 5.42146 2.39803 5.00645 2.39723C5.00441 2.39723 5.00241 2.39716 5.00038 2.39716H5.00031C4.99821 2.39716 4.99627 2.39723 4.99417 2.39723C4.57919 2.39803 4.20653 2.48115 3.87417 2.64759L3.84824 2.62177L3.28771 2.06307C3.20409 1.97898 3.07975 1.97898 2.9962 2.06307C2.91258 2.14669 2.91258 2.27079 2.9962 2.35435L3.53845 2.89669C3.36373 3.01335 3.20529 3.1561 3.06751 3.31938C2.73766 3.71036 2.52726 4.21921 2.49833 4.77053C2.49807 4.77627 2.4975 4.78194 2.49723 4.78768C2.49546 4.82522 2.49463 4.86296 2.49463 4.90084H7.50602C7.50602 4.86296 7.50512 4.82522 7.50342 4.78768C7.50315 4.78194 7.50259 4.77627 7.50225 4.77053C7.47339 4.21921 7.26293 3.71033 6.93308 3.31941C6.79536 3.15614 6.63686 3.01338 6.46214 2.89673L7.00445 2.35438C7.08808 2.27079 7.08808 2.14669 7.00445 2.06307ZM3.95569 4.17109C3.78277 4.17109 3.64259 4.03091 3.64259 3.85799C3.64259 3.68507 3.78277 3.54489 3.95569 3.54489C4.12861 3.54489 4.26879 3.68507 4.26879 3.85799C4.26879 4.03091 4.12861 4.17109 3.95569 4.17109ZM6.04496 4.17109C5.87204 4.17109 5.73186 4.03091 5.73186 3.85799C5.73186 3.68507 5.87204 3.54489 6.04496 3.54489C6.21788 3.54489 6.35806 3.68507 6.35806 3.85799C6.35806 4.03091 6.21788 4.17109 6.04496 4.17109Z" fill="white"/>
+</g>
+<path d="M20.276 3.432H21.872L25.148 12H23.648L22.868 9.852H19.28L18.5 12H17L20.276 3.432ZM19.7 8.7H22.448L21.104 4.944H21.056L19.7 8.7ZM29.0685 5.628C30.6165 5.628 31.3965 6.468 31.3965 8.172V12H30.0285V8.292C30.0285 7.272 29.5605 6.768 28.6245 6.768C28.2885 6.768 27.9885 6.888 27.7365 7.128C27.4485 7.392 27.2805 7.776 27.2325 8.268V12H25.8645V5.796H27.2325V6.516C27.4725 6.228 27.7485 6 28.0485 5.856C28.3605 5.7 28.6965 5.628 29.0685 5.628ZM37.2532 3.264H38.6212V12H37.3492V11.34C36.9172 11.892 36.2932 12.168 35.4772 12.168C34.5532 12.168 33.8332 11.844 33.3172 11.196C32.8372 10.596 32.5972 9.816 32.5972 8.868C32.5972 7.956 32.8252 7.2 33.3052 6.6C33.8092 5.952 34.5172 5.628 35.4052 5.628C36.1252 5.628 36.7372 5.964 37.2532 6.648V3.264ZM35.7292 6.732C35.1052 6.732 34.6612 6.936 34.3732 7.344C34.1212 7.692 34.0012 8.196 34.0012 8.868C34.0012 9.54 34.1092 10.056 34.3492 10.416C34.6252 10.848 35.0692 11.064 35.6812 11.064C36.2092 11.064 36.6292 10.848 36.9172 10.428C37.1692 10.044 37.3012 9.54 37.3012 8.94V8.844C37.3012 8.184 37.1332 7.656 36.8212 7.272C36.5332 6.912 36.1612 6.732 35.7292 6.732ZM42.9839 5.628C43.2839 5.628 43.5479 5.676 43.7639 5.784V7.152C43.4519 7.056 43.1639 7.02 42.8759 7.02C42.5159 7.02 42.1919 7.152 41.9039 7.44C41.5679 7.764 41.4119 8.184 41.4119 8.712V12H40.0559V5.796H41.4119V6.684C41.5799 6.372 41.7719 6.132 41.9999 5.964C42.2759 5.736 42.5999 5.628 42.9839 5.628ZM47.4242 5.628C48.3602 5.628 49.1162 5.928 49.6922 6.552C50.2562 7.164 50.5442 7.944 50.5442 8.904C50.5442 9.852 50.2562 10.632 49.7042 11.232C49.1282 11.856 48.3602 12.168 47.4242 12.168C46.4762 12.168 45.7202 11.856 45.1442 11.232C44.5802 10.632 44.3042 9.852 44.3042 8.904C44.3042 7.944 44.5802 7.164 45.1562 6.552C45.7202 5.928 46.4762 5.628 47.4242 5.628ZM47.4242 6.744C46.8482 6.744 46.4162 6.96 46.1042 7.416C45.8402 7.8 45.7082 8.304 45.7082 8.904C45.7082 9.504 45.8402 9.996 46.1042 10.38C46.4162 10.824 46.8482 11.052 47.4242 11.052C47.9882 11.052 48.4322 10.824 48.7442 10.38C49.0082 9.984 49.1522 9.492 49.1522 8.904C49.1522 8.304 49.0082 7.8 48.7442 7.416C48.4322 6.96 47.9882 6.744 47.4242 6.744ZM52.6635 3.264C52.9275 3.264 53.1555 3.348 53.3355 3.516C53.5035 3.684 53.5995 3.9 53.5995 4.164C53.5995 4.428 53.5035 4.656 53.3235 4.824C53.1435 4.992 52.9275 5.076 52.6635 5.076C52.3995 5.076 52.1835 4.992 52.0035 4.824C51.8235 4.644 51.7395 4.428 51.7395 4.164C51.7395 3.9 51.8235 3.684 52.0035 3.516C52.1835 3.348 52.3995 3.264 52.6635 3.264ZM51.9795 5.796H53.3475V12H51.9795V5.796ZM59.4602 3.264H60.8282V12H59.5562V11.34C59.1242 11.892 58.5002 12.168 57.6842 12.168C56.7602 12.168 56.0402 11.844 55.5242 11.196C55.0442 10.596 54.8042 9.816 54.8042 8.868C54.8042 7.956 55.0322 7.2 55.5122 6.6C56.0162 5.952 56.7242 5.628 57.6122 5.628C58.3322 5.628 58.9442 5.964 59.4602 6.648V3.264ZM57.9362 6.732C57.3122 6.732 56.8682 6.936 56.5802 7.344C56.3282 7.692 56.2082 8.196 56.2082 8.868C56.2082 9.54 56.3162 10.056 56.5562 10.416C56.8322 10.848 57.2762 11.064 57.8882 11.064C58.4162 11.064 58.8362 10.848 59.1242 10.428C59.3762 10.044 59.5082 9.54 59.5082 8.94V8.844C59.5082 8.184 59.3402 7.656 59.0282 7.272C58.7402 6.912 58.3682 6.732 57.9362 6.732Z" fill="white"/>
+<defs>
+<clipPath id="clip0_12632_490">
+<rect width="10" height="10" fill="white" transform="translate(0 2)"/>
+</clipPath>
+</defs>
+</svg>

src/pages/UserCenter/components/DownloadStats/Group 233.svg

@@ -0,0 +1,6 @@
+<svg width="42" height="16" viewBox="0 0 42 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.74444 2.00554C7.94396 1.86195 10.3967 4.52742 9.97965 7.69669C9.694 9.86757 7.99129 11.5987 5.82534 11.9356C2.39999 12.4683 -0.456708 9.6197 0.0608746 6.20514C0.413361 3.87969 2.38543 2.11141 4.74444 2.00554ZM3.04634 4.61804V4.41686L2.80624 4.42645V5.67186H3.05595V4.8336C3.05595 4.80766 3.11486 4.7098 3.13619 4.68852C3.23119 4.59383 3.4241 4.58692 3.51131 4.69556C3.52193 4.7088 3.55542 4.76374 3.55542 4.77611V5.67186H3.80513V4.81447C3.80513 4.78891 3.85611 4.70568 3.87725 4.68521C3.97306 4.59253 4.19332 4.58395 4.27053 4.70472C4.27639 4.71383 4.3046 4.78134 4.3046 4.7857V5.67186H4.55431V4.71862C4.55431 4.69691 4.5175 4.59967 4.50458 4.57661C4.37854 4.35151 4.02303 4.34336 3.84808 4.51237C3.82252 4.53706 3.78082 4.61526 3.76208 4.61828C3.74415 4.62192 3.74968 4.61334 3.74512 4.60581C3.732 4.58404 3.72585 4.55907 3.70908 4.53658C3.56806 4.34749 3.24488 4.34845 3.104 4.53658C3.08728 4.55892 3.08118 4.58505 3.06792 4.60562C3.06181 4.61511 3.06902 4.62259 3.04639 4.61799L3.04634 4.61804ZM5.88939 5.67186V4.74739C5.88939 4.72941 5.85975 4.64503 5.8498 4.62403C5.68614 4.27969 4.94043 4.33018 4.88089 4.7426H5.11619C5.18562 4.57417 5.51591 4.55796 5.60931 4.70103C5.61479 4.70942 5.63968 4.76235 5.63968 4.76657V4.92464C5.39103 4.95839 4.9411 4.90048 4.84904 5.21379C4.72267 5.64386 5.29455 5.84091 5.57621 5.56552C5.59855 5.54365 5.61643 5.49513 5.64924 5.48986V5.67186H5.88934H5.88939ZM7.30126 4.81921C7.24158 4.3298 6.51278 4.25649 6.27546 4.64388C6.10686 4.91913 6.1404 5.4213 6.43181 5.60502C6.73966 5.7991 7.26402 5.67814 7.30131 5.26951H7.06601C7.02344 5.39824 6.93638 5.47241 6.79747 5.48056C6.33634 5.50769 6.32947 4.73579 6.65265 4.62724C6.82841 4.56822 7.0047 4.6433 7.06601 4.81921H7.30131H7.30126ZM3.36135 6.30698C2.57066 6.36101 2.07143 6.93299 1.96241 7.68984C1.81898 8.68536 2.22567 9.74114 3.349 9.8295C4.58208 9.92649 5.191 8.98367 5.09207 7.84182C5.00683 6.85752 4.37403 6.23779 3.36135 6.30693V6.30698ZM7.89678 7.29089C7.84522 6.41332 6.85066 6.12833 6.12695 6.40219C5.32266 6.70654 5.23814 7.71875 6.053 8.08092C6.49673 8.27816 7.71265 8.26805 7.49821 9.01531C7.39226 9.38453 6.88794 9.47797 6.55818 9.44518C6.2191 9.41147 5.88214 9.22511 5.83178 8.86203H5.40919C5.43038 9.39493 5.86253 9.7222 6.3583 9.80745C7.12958 9.94001 8.03429 9.61965 7.95323 8.69562C7.88111 7.87346 6.85383 7.94485 6.30261 7.71707C5.80271 7.51048 5.79546 6.95212 6.29031 6.75669C6.7436 6.57772 7.41965 6.72309 7.46462 7.29089H7.89682H7.89678Z" fill="white"/>
+<path d="M3.40923 6.69982C4.07528 6.64718 4.51993 7.0665 4.62794 7.70109C4.77584 8.5698 4.42469 9.51253 3.39688 9.43673C2.83548 9.39536 2.49183 8.94602 2.40568 8.42314C2.2833 7.68043 2.53181 6.76915 3.40923 6.69982Z" fill="white"/>
+<path d="M5.63961 5.10657C5.67243 5.34432 5.51098 5.51371 5.27098 5.48864C5.12914 5.47377 5.01517 5.33579 5.11121 5.20715C5.19689 5.09238 5.50704 5.12018 5.63961 5.10662V5.10657Z" fill="white"/>
+<path d="M17.84 3.432H19.484L22.4 10.152H22.448L25.352 3.432H26.996V12H25.592V6.096H25.544L23.024 12H21.812L19.292 6.096H19.244V12H17.84V3.432ZM31.3798 5.628C32.2918 5.628 32.9758 5.856 33.4078 6.312C33.7918 6.708 33.9838 7.284 33.9838 8.04V12H32.7118V11.184C32.4718 11.496 32.1718 11.724 31.8238 11.892C31.4278 12.072 30.9598 12.168 30.4198 12.168C29.7718 12.168 29.2678 12 28.8958 11.676C28.5118 11.34 28.3198 10.92 28.3198 10.404C28.3198 9.708 28.5838 9.168 29.1358 8.796C29.6398 8.436 30.3478 8.244 31.2598 8.22L32.6158 8.184V7.944C32.6158 7.128 32.1718 6.732 31.2838 6.732C30.8998 6.732 30.5998 6.792 30.3718 6.936C30.1078 7.092 29.9278 7.332 29.8558 7.656L28.4998 7.548C28.6318 6.864 28.9678 6.36 29.5078 6.048C29.9638 5.76 30.5878 5.628 31.3798 5.628ZM32.6158 9.168L31.3558 9.204C30.2638 9.228 29.7238 9.612 29.7238 10.356C29.7238 10.572 29.8078 10.752 29.9998 10.896C30.1918 11.04 30.4318 11.124 30.7318 11.124C31.2598 11.124 31.7038 10.968 32.0638 10.668C32.4238 10.356 32.6158 9.96 32.6158 9.48V9.168ZM38.211 5.628C39.015 5.628 39.651 5.808 40.131 6.168C40.623 6.552 40.935 7.128 41.055 7.908H39.699C39.615 7.512 39.447 7.224 39.207 7.032C38.955 6.84 38.619 6.744 38.211 6.744C37.707 6.744 37.311 6.924 37.023 7.308C36.735 7.68 36.591 8.208 36.591 8.88C36.591 9.564 36.723 10.104 37.011 10.488C37.275 10.86 37.671 11.052 38.199 11.052C39.111 11.052 39.615 10.596 39.723 9.696H41.079C40.935 10.536 40.611 11.16 40.119 11.568C39.639 11.964 38.991 12.168 38.187 12.168C37.227 12.168 36.483 11.856 35.955 11.232C35.439 10.632 35.187 9.852 35.187 8.892C35.187 7.956 35.439 7.188 35.943 6.6C36.483 5.952 37.239 5.628 38.211 5.628Z" fill="white"/>
+</svg>

src/pages/UserCenter/components/DownloadStats/index.vue

@@ -1,19 +1,71 @@
+<template>
+  <div
+    class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-7"
+  >
+    <div class="mb-2 flex items-center justify-between border-b-1 border-dashed pb-3">
+      <div class="relative ml-1 text-base font-bold text-white">各端下载量</div>
+      <div class="mr-1 text-2xl font-bold text-white tabular-nums">{{ totalDownloads }}</div>
+    </div>
+
+    <div class="flex min-h-[100px] flex-col gap-3">
+      <div
+        v-for="item in displayStats"
+        :key="item.platform"
+        class="flex items-center justify-between text-white/90"
+      >
+        <div class="flex items-center gap-3">
+          <component :is="item.icon" class="text-white" />
+        </div>
+        <div class="mr-1 text-base font-semibold tabular-nums">
+          <span v-if="loading" class="inline-block h-4 w-8 animate-pulse rounded bg-white/20"></span>
+          <span v-else>{{ item.visits }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-2 text-xs text-white/40">相比前一个月 --</div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import request from '@/utils/request'
+import IosIcon from './Group 230.svg?component'
+import WinIcon from './Group 231.svg?component'
+import AndroidIcon from './Group 232.svg?component'
+import MacIcon from './Group 233.svg?component'
 
-const statsList = ref<any[]>([])
 const loading = ref(false)
+const rawStats = ref<any[]>([])
+
+const platformList = [
+  { platform: 'iOS', icon: IosIcon, match: ['ios', 'iphone', 'ipad'] },
+  { platform: 'Windows', icon: WinIcon, match: ['win'] },
+  { platform: 'Android', icon: AndroidIcon, match: ['android'] },
+  { platform: 'Mac', icon: MacIcon, match: ['mac'] },
+]
+
+const displayStats = computed(() => {
+  return platformList.map((p) => {
+    const data = rawStats.value.find((item) =>
+      p.match.some((m) => item.platform.toLowerCase().includes(m))
+    )
+    return {
+      ...p,
+      visits: data?.visits || 0,
+    }
+  })
+})
 
 const totalDownloads = computed(() => {
-  return statsList.value.reduce((acc, item) => acc + (item.visits || 0), 0)
+  return displayStats.value.reduce((acc, item) => acc + (item.visits || 0), 0)
 })
 
 async function fetchDownloads() {
   loading.value = true
   try {
     const res: any = await request.get('/api/v1/public/user/agent/downloads')
-    statsList.value = res.list || []
+    rawStats.value = res.list || []
   } catch (error) {
     console.error('Fetch downloads error:', error)
   } finally {
@@ -25,32 +77,3 @@ onMounted(() => {
   fetchDownloads()
 })
 </script>
-
-<template>
-  <div
-    class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-7"
-  >
-    <div class="mb-2 flex items-center justify-between border-b-1 border-dashed pb-3">
-      <div class="relative ml-1 text-base font-bold text-white">各端下载量</div>
-      <div class="mr-1 text-2xl font-bold text-white tabular-nums">{{ totalDownloads }}</div>
-    </div>
-
-    <div class="flex flex-col gap-3 min-h-[100px]">
-      <div v-if="loading && statsList.length === 0" class="flex h-20 items-center justify-center">
-         <div class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B] border-t-transparent"></div>
-      </div>
-      <div
-        v-for="item in statsList"
-        :key="item.platform"
-        class="flex items-center justify-between text-white/90"
-      >
-        <div class="flex items-center gap-3">
-          <span class="ml-1 text-xs font-medium">{{ item.platform }}</span>
-        </div>
-        <div class="mr-1 text-base font-semibold tabular-nums">{{ item.visits }}</div>
-      </div>
-    </div>
-
-    <div class="mt-2 text-xs text-white/40">实时下载统计数据</div>
-  </div>
-</template>

src/pages/UserCenter/components/OrderDetails/OrderList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-1 flex-col overflow-hidden">
     <!-- List Container -->
-    <div class="h-[470px] overflow-y-auto pr-1">
+    <div class="h-[430px] overflow-y-auto pr-1">
       <div v-if="loading && list.length === 0" class="flex h-40 items-center justify-center">
         <div
           class="h-8 w-8 animate-spin rounded-full border-4 border-[#ADFF5B] border-t-transparent"
@@ -22,24 +22,24 @@
           <div class="grid grid-cols-2 gap-y-1">
             <!-- User Info -->
             <div class="col-span-2 pl-4">
-              <div class="text-xs text-gray-500">用户</div>
+              <div class="text-xs text-gray-500">用户ID</div>
-              <div class="break-all font-medium">{{ order.user_email }}</div>
+              <div class="font-medium break-all">{{ order.user_hash }}</div>
             </div>
 
             <!-- ID and Amount -->
             <div class="pl-4">
-              <div class="text-xs text-gray-500">用户 ID</div>
+              <div class="text-xs text-gray-500">名称</div>
               <div>{{ order.user_id }}</div>
             </div>
             <div class="">
-              <div class="text-xs text-gray-500">成交金额</div>
+              <div class="text-xs text-gray-500">支付金额</div>
               <div class="font-bold text-[#222]">${{ order.amount }}</div>
             </div>
 
             <!-- Time -->
             <div class="col-span-2 pl-4">
-              <div class="text-xs text-gray-500">成交时间</div>
+              <div class="text-xs text-gray-500">支付时间</div>
-              <div class="whitespace-nowrap">{{ formatTime(order.created_at) }}</div>
+              <div class="whitespace-nowrap">{{ formatTime(order.updated_at) }}</div>
             </div>
           </div>
         </div>
@@ -106,10 +106,9 @@ const totalPages = computed(() => Math.ceil(total.value / size.value) || 1)
 async function fetchOrders() {
   loading.value = true
   try {
-    const res: any = await request.get('/api/v1/public/order/list', {
+    const res: any = await request.get('/api/v1/public/user/invite/sales', {
       page: page.value,
       size: size.value,
-      status: 5,
     })
     list.value = res.list || []
     total.value = res.total || 0

src/pages/UserCenter/components/OrderDetails/index.vue

@@ -4,7 +4,7 @@
       class="top-[94px] flex h-[calc(100vh-94px-50px)] w-[386px] translate-y-0 flex-col items-center justify-center border-none bg-transparent p-0 shadow-none outline-none focus:ring-0"
       :showCloseButton="false"
     >
-      <div class="relative flex h-[678px] w-full flex-col rounded-[32px] bg-[#DDDDDD] px-4 py-6">
+      <div class="relative flex h-[628px] w-full flex-col rounded-[32px] bg-[#DDDDDD] px-4 py-6">
         <!-- Close Button -->
         <button
           @click="hide"

src/pages/UserCenter/components/ProxyData/index.vue

@@ -1,33 +1,3 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import request from '@/utils/request'
-
-const data = ref([
-  { label: '点击量', value: 0, key: 'clicks' },
-  { label: '浏览量', value: 0, key: 'views' },
-  { label: '付费数量', value: 0, key: 'paid_count' },
-])
-
-const growthRate = ref('N/A')
-
-async function fetchStats() {
-  try {
-    const res: any = await request.get('/api/v1/public/user/agent/realtime')
-    data.value = data.value.map((item) => ({
-      ...item,
-      value: res[item.key] || 0,
-    }))
-    growthRate.value = res.growth_rate || 'N/A'
-  } catch (error) {
-    console.error('Fetch proxy data error:', error)
-  }
-}
-
-onMounted(() => {
-  fetchStats()
-})
-</script>
-
 <template>
   <div
     class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-7"
@@ -50,3 +20,33 @@ onMounted(() => {
     <div class="mt-2 text-xs text-white/40">相比前一个月 {{ growthRate }}</div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import request from '@/utils/request'
+
+const data = ref([
+  { label: '点击量', value: 0, key: 'clicks' },
+  { label: '浏览量', value: 0, key: 'views' },
+  { label: '付费数量', value: 0, key: 'paid_count' },
+])
+
+const growthRate = ref('N/A')
+
+async function fetchStats() {
+  try {
+    const res: any = await request.get('/api/v1/public/user/agent/realtime')
+    data.value = data.value.map((item) => ({
+      ...item,
+      value: res[item.key] || 0,
+    }))
+    growthRate.value = res.paid_growth_rate || 'N/A'
+  } catch (error) {
+    console.error('Fetch proxy data error:', error)
+  }
+}
+
+onMounted(() => {
+  fetchStats()
+})
+</script>

src/pages/UserCenter/components/QuickTools/index.vue

@@ -26,9 +26,9 @@ import { toast } from 'vue-sonner'
 
 const tools = [
   { label: 'iOS外区账号教程', url: 'http://getsapp.net/F6Lmev' },
-  { label: 'app视频使用教程', url: 'hifastvpn.com/tutorialvids' },
+  { label: '官方邮箱', url: 'hifastvpn1@gmail.com' },
-  { label: '软件防丢名片', url: 'hifastvpn.com/alwaysfindus' },
+  { label: '软件防丢名片', url: 'https://getsapp.net/PTHZVp' },
-  { label: '官方Telegram群', url: 't.me/hifastvpnofficial' },
+  { label: '官方X账号', url: 'https://x.com/hifasttech' },
 ]
 
 function copy(text: string) {

src/pages/UserCenter/components/SalesData/index.vue

@@ -1,3 +1,47 @@
+<template>
+  <div
+    class="lucid-glass-bar flex h-full w-full flex-col rounded-4xl! border-1 border-white px-6 py-7"
+  >
+    <div class="mb-[20px] flex justify-between border-b-1 border-dashed pb-4">
+      <div>
+        <div class="mb-1 text-xl font-bold text-white">最近销售数据</div>
+        <div class="text-sm text-white/40">累计成交订单{{ salesPage.total }}人/次</div>
+      </div>
+      <Button
+        variant="link"
+        class="h-auto p-0 text-sm font-medium text-white/60 underline hover:text-white"
+        @click="$emit('show-history')"
+      >
+        历史数据
+      </Button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto pr-1">
+      <div
+        v-if="loading && salesPage.list.length === 0"
+        class="flex h-20 items-center justify-center"
+      >
+        <div
+          class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B] border-t-transparent"
+        ></div>
+      </div>
+      <div v-else class="">
+        <div
+          v-for="(item, index) in salesPage.list"
+          :key="index"
+          class="mb-5 flex items-center justify-between last:mb-0"
+        >
+          <div class="flex flex-col">
+            <span class="text-sm font-semibold text-white">{{ item.user_hash }}</span>
+            <span class="text-[10px] text-white/40">{{ formatTime(item.updated_at) }}</span>
+          </div>
+          <div class="text-lg font-bold text-white tabular-nums">$ {{ item.amount }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { Button } from '@/components/ui/button'
@@ -44,42 +88,3 @@ onMounted(() => {
   fetchSales()
 })
 </script>
-
-<template>
-  <div
-    class="lucid-glass-bar flex h-full w-full flex-col rounded-4xl! border-1 border-white px-6 py-7"
-  >
-    <div class="mb-[20px] flex justify-between border-b-1 border-dashed pb-4">
-      <div>
-        <div class="mb-1 text-xl font-bold text-white">最近销售数据</div>
-        <div class="text-sm text-white/40">累计成交订单{{ salesPage.total }}人/次</div>
-      </div>
-      <Button
-        variant="link"
-        class="h-auto p-0 text-sm font-medium text-white/60 underline hover:text-white"
-        @click="$emit('show-history')"
-      >
-        历史数据
-      </Button>
-    </div>
-
-    <div class="flex-1 overflow-y-auto pr-1">
-      <div v-if="loading && salesPage.list.length === 0" class="flex h-20 items-center justify-center">
-         <div class="h-6 w-6 animate-spin rounded-full border-2 border-[#ADFF5B] border-t-transparent"></div>
-      </div>
-      <div v-else class="border-t border-dashed border-white/20 pt-4">
-        <div
-          v-for="(item, index) in salesPage.list"
-          :key="index"
-          class="mb-5 flex items-center justify-between last:mb-0"
-        >
-          <div class="flex flex-col">
-            <span class="text-sm font-semibold text-white">{{ item.user_email }}</span>
-            <span class="text-[10px] text-white/40">{{ formatTime(item.created_at) }}</span>
-          </div>
-          <div class="text-lg font-bold text-white tabular-nums">$ {{ item.amount }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

src/styles/index.css

@@ -184,3 +184,49 @@ html, body {
     @apply bg-background text-foreground;
   }
 }
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .el-style-scrollbar {
+    scrollbar-width: thin; /* Firefox: keep space */
+    scrollbar-color: transparent transparent; /* Firefox: hidden by default */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  /* 核心：为 Webkit 浏览器始终保留滚动条空间，但默认透明 */
+  .el-style-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .el-style-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .el-style-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 10px;
+    transition: background-color 0.3s;
+  }
+
+  /* 鼠标悬停显示滑块 */
+  .el-style-scrollbar:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(144, 147, 153, 0.3);
+  }
+
+  /* 悬停在滑块上加深 */
+  .el-style-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.5) !important;
+  }
+
+  /* Firefox 兼容：仅在悬停时改变颜色，不改变宽度 */
+  .el-style-scrollbar:hover {
+    scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
+  }
+}