样式修改

src/pages/Home/components/DownloadButton.vue

@@ -4,22 +4,7 @@
       <router-link
         v-if="item.isInternal"
         :to="item.link"
-        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
+        class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full border border-white/20 transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
-        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">
           <component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
@@ -29,22 +14,7 @@
         v-else
         :href="item.link"
         target="_blank"
-        class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
+        class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
-        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">
           <component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />

src/pages/Home/index.vue

@@ -7,22 +7,7 @@
       <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
         <div class="container">
           <header
-            class="flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
+            class="lucid-glass-bar flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
-            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;
-            "
           >
             <router-link to="/" class="flex items-center gap-2">
               <!-- Desktop Logo -->
@@ -101,22 +86,7 @@
               <a
                 href="https://x.com/hifasttech"
                 target="_blank"
-                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]"
+                class="lucid-glass-bar 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:
-                    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]" />

src/styles/index.css

@@ -8,6 +8,38 @@
 html, body {
   background: #000;
 }
+.lucid-glass-bar {
+  /* 基础背景：Figma 中通常是叠加的，这里取中值确保通透度 */
+  background: rgb(255 255 255 / 6%);
+
+  /* 核心模糊 */
+  backdrop-filter: blur(36px);
+  -webkit-backdrop-filter: blur(36px);
+
+  /* 圆角：由于你有 border-image，建议使用这种方式保留圆角 */
+  border-radius: 999px;
+
+  /* 边框：Figma 的 border-image 在 CSS 圆角容器上会有兼容问题
+     建议改用单纯的 border 配合 rgba 以达到线性渐变的效果 */
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  /* 阴影叠加：按照 Figma 从上到下的顺序转换 */
+  box-shadow:
+    /* 1. 这里的 #F2F2F280 33px 扩散是导致发白的主因，建议将其放在最底层并调低不透明度 */
+    inset 0px 0px 33px 0px rgba(242, 242, 242, 0.15),
+
+      /* 2. 右下角的反向高光 (原本的 -3px -4.5px) */
+    inset -3px -4.5px 1.5px -3px rgba(179, 179, 179, 0.5),
+
+      /* 3. 左上角的微弱亮边 */
+    inset 3px 4.5px 1.5px -3px rgba(179, 179, 179, 0.2),
+
+      /* 4. 核心受光面 (Figma: 4.5px 4.5px #FFFFFF80) */
+    inset 4.5px 4.5px 1.5px -5.25px rgba(255, 255, 255, 0.4),
+
+      /* 5. 核心背光面 (Figma: -4.5px -4.5px #FFFFFF80) */
+    inset -4.5px -4.5px 1.5px -5.25px rgba(255, 255, 255, 0.3);
+}
 
 @import "tailwindcss";
 @import "tw-animate-css";