HI-VPN/hi-landing-hero
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式修改
All checks were successful
site-dist-deploy / build-and-deploy (push) Successful in 1m14s
Details

Browse Source
This commit is contained in:
speakeloudest 2026-01-05 03:50:22 -08:00
parent e86cfd0881
commit 7a03955aac
3 changed files with 36 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/Home/components/DownloadButton.vue
View File

@ -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]"
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;
"
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]"
>
<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]"
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;
"
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]"
>
<div class="flex items-center justify-center">
<component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />

34
src/pages/Home/index.vue
View File

@ -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]"
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;
"
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]"
>
<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]"
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;
"
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]"
>
<div class="flex items-center justify-center">
<img src="./x-logo.png" class="h-[16px] w-[77px]" />

32
src/styles/index.css
View File

@ -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";