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

桌面端样式

Browse Source
This commit is contained in:
speakeloudest 2026-01-03 23:56:40 -08:00
parent f9262b3754
commit acd0c94e60
5 changed files with 150 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/Help/index.vue
View File

@ -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 -->
<div v-show="activeIndex === 0">
<div
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
>
Hi快提供三种下载方式
<Transition name="fade" mode="out-in">
<!-- tab1 -->
<div v-if="activeIndex === 0" key="tab1">
<div
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
>
Hi快提供三种下载方式
</div>
<DownloadMethodList />
</div>
<DownloadMethodList />
</div>
<div v-show="activeIndex === 1">
<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"
>
<ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
<!-- tab2 -->
<div v-else-if="activeIndex === 1" key="tab2">
<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"
>
<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]">
<img src="./Group%20100.png" class="h-full w-full" alt="下载" />
</div>
</div>
<!-- tab2 -->
</Transition>
</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>

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

@ -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 },
]

BIN
src/pages/Home/connected-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

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

@ -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">
<!-- Decorative elements behind phone -->
<img
:src="ScreenshotDesktop"
alt="App Screenshot"
class="absolute right-[52px] -bottom-[62px] w-[632px]"
/>
<div class="relative hidden w-full max-w-[632px] md:mt-0 md:block">
<!-- Screenshot with Ripple Effect -->
<div class="absolute right-[9%] bottom-0 z-50 aspect-square w-[58%] overflow-hidden">
<!-- Ripple Animation (Background) -->
<div class="ripple-container absolute inset-0">
<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>

BIN
src/pages/Home/x-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB