首页处理
This commit is contained in:
parent
346ad0a4ec
commit
8d64f66cca
@ -1,17 +1,45 @@
|
||||
<template>
|
||||
<button
|
||||
class="flex h-[40px] w-[140px] items-center space-x-2 bg-[url('@/pages/Home/liquid-button-bg.png')]"
|
||||
>
|
||||
<component :is="icon" class="h-6 w-6" />
|
||||
<span class="text-sm font-medium">{{ label }}</span>
|
||||
</button>
|
||||
<div class="grid grid-cols-2 gap-4 md:flex md:flex-wrap">
|
||||
<a
|
||||
v-for="(item, index) in downloadLinks"
|
||||
:key="index"
|
||||
:href="item.link"
|
||||
target="_blank"
|
||||
class="flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform active:scale-95 md:h-[50px] md:w-[180px]"
|
||||
style="
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.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]" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Component } from 'vue'
|
||||
import Icon1 from './Group 105.svg?component'
|
||||
import Icon2 from './Group 106.svg?component'
|
||||
import Icon3 from './Group 107.svg?component'
|
||||
import Icon4 from './Group 108.svg?component'
|
||||
|
||||
defineProps<{
|
||||
icon: Component
|
||||
label: string
|
||||
}>()
|
||||
// 定义下载链接数据
|
||||
const downloadLinks = [
|
||||
{ icon: Icon1, link: 'https://apple.com/...' },
|
||||
{ icon: Icon2, link: 'https://down.hi.com/win' },
|
||||
{ icon: Icon3, link: 'https://down.hi.com/apk' },
|
||||
{ icon: Icon4, link: 'https://down.hi.com/mac' },
|
||||
]
|
||||
</script>
|
||||
|
||||
7
src/pages/Home/components/Group 105.svg
Normal file
7
src/pages/Home/components/Group 105.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.0 KiB |
5
src/pages/Home/components/Group 106.svg
Normal file
5
src/pages/Home/components/Group 106.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
6
src/pages/Home/components/Group 107.svg
Normal file
6
src/pages/Home/components/Group 107.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
14
src/pages/Home/components/Group 108.svg
Normal file
14
src/pages/Home/components/Group 108.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.0 KiB |
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-6 text-black">
|
||||
<div class="flex flex-col gap-6 text-base text-black md:text-2xl">
|
||||
<div class="overflow-hidden rounded-[20px] bg-[#78788029] px-4">
|
||||
<div class="relative">
|
||||
<Input
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0"
|
||||
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
|
||||
/>
|
||||
<div class="absolute bottom-0 left-0 h-[1px] w-full bg-gray-400/30"></div>
|
||||
</div>
|
||||
@ -17,14 +17,14 @@
|
||||
v-model="code"
|
||||
type="text"
|
||||
placeholder="验证码"
|
||||
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0"
|
||||
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
@click="handleGetCode"
|
||||
:disabled="countdown > 0"
|
||||
class="h-10 rounded-full bg-[#4B94E6] px-[32px] font-bold text-white hover:bg-[#4B94E6]/90"
|
||||
class="h-10 rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:px-[45px] md:text-[18px]"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}s` : '获取' }}
|
||||
</Button>
|
||||
|
||||
@ -3,12 +3,12 @@
|
||||
<DialogContent
|
||||
@pointer-down-outside="(event) => event.preventDefault()"
|
||||
@focus-outside="(event) => event.preventDefault()"
|
||||
class="max-w-[300px] rounded-4xl bg-[#DDDDDD] p-[14px]"
|
||||
class="max-w-[300px] rounded-4xl bg-[#DDDDDD] p-[14px] md:max-w-[390px]"
|
||||
:showCloseButton="false"
|
||||
>
|
||||
<DialogHeader class="py-2 pl-2">
|
||||
<DialogTitle class="text-left">登录Hi快帐户</DialogTitle>
|
||||
<DialogDescription class="text-left text-base text-black">
|
||||
<DialogTitle class="text-left text-base md:text-2xl">登录Hi快帐户</DialogTitle>
|
||||
<DialogDescription class="text-left text-base text-black md:text-2xl">
|
||||
如使用新邮箱地址，将自动为您创建Hi快帐户
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
@ -1,61 +1,60 @@
|
||||
<template>
|
||||
<div
|
||||
class="relative min-h-screen overflow-hidden bg-[#24963e] pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:pb-0"
|
||||
class="relative min-h-screen overflow-hidden bg-[#24963e] pb-[calc(1rem+env(safe-area-inset-bottom))] font-sans text-white md:flex md:flex-col md:pb-6"
|
||||
>
|
||||
<!-- Background Gradient Effects -->
|
||||
<div
|
||||
class="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-[#34d399] opacity-20 blur-[100px]"
|
||||
></div>
|
||||
|
||||
<!-- Full Width Header -->
|
||||
<div class="h-[88px]">
|
||||
<header
|
||||
class="fixed top-[20px] right-[18px] left-[18px] z-50 flex h-[68px] items-center justify-between rounded-[90px] pr-[10px] pl-6 transition-all duration-300"
|
||||
style="
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.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 gap-2">
|
||||
<!-- Desktop Logo -->
|
||||
<Logo alt="Hi快VPN" class="hidden h-10 w-auto md:block" />
|
||||
<!-- Mobile Logo -->
|
||||
<MobileLogo alt="Hi快VPN" class="block h-[28px] w-[67px] md:hidden" />
|
||||
<div class="fixed top-[20px] z-50 w-full">
|
||||
<div class="container">
|
||||
<header
|
||||
class="flex h-[68px] items-center justify-between rounded-[90px] pr-[10px] transition-all duration-300"
|
||||
style="
|
||||
backdrop-filter: blur(36px);
|
||||
box-shadow:
|
||||
0px 0px 33px 0px #f2f2f280 inset,
|
||||
-3px -4.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 gap-2">
|
||||
<!-- Desktop Logo -->
|
||||
<Logo alt="Hi快VPN" class="hidden h-[29px] w-auto md:ml-[62px] md:block" />
|
||||
<!-- Mobile Logo -->
|
||||
<MobileLogo alt="Hi快VPN" class="ml-6 block h-[28px] w-[67px] md:hidden" />
|
||||
</div>
|
||||
<button
|
||||
@click="openLoginModal"
|
||||
class="flex h-[48px] items-center rounded-full bg-[#70C877] px-6 text-sm font-bold backdrop-blur-md transition hover:bg-white/30 md:text-2xl"
|
||||
>
|
||||
登录 / 注册
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
<button
|
||||
@click="openLoginModal"
|
||||
class="flex h-[48px] items-center rounded-full bg-[#70C877] px-6 text-sm font-bold backdrop-blur-md transition hover:bg-white/30"
|
||||
>
|
||||
登录 / 注册
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Container -->
|
||||
<div class="container mx-auto flex flex-1 flex-col md:px-6">
|
||||
<main class="f pt-10">
|
||||
<div class="container mx-auto flex flex-1 flex-col">
|
||||
<main class="pt-10 md:grid md:flex-1 md:grid-cols-2 md:pt-0">
|
||||
<!-- Left Column: Text & Downloads -->
|
||||
<div class="md:w-1/2">
|
||||
<div class="mb-[20px] ml-[42px]">
|
||||
<h2 class="mb-2 text-5xl font-black italic md:text-7xl">
|
||||
<Logo />
|
||||
<div class="md:flex md:w-[432px] md:flex-col md:justify-center">
|
||||
<div class="mb-[20px] ml-[42px] md:ml-[17px]">
|
||||
<h2 class="mb-2 text-2xl font-black md:text-8xl">
|
||||
<Logo class="h-[66px]" />
|
||||
</h2>
|
||||
<p class="font-600 text-3xl md:text-4xl">网在我在, 网快我快</p>
|
||||
<p class="font-600 text-3xl md:text-[48px]">网在我在, 网快我快</p>
|
||||
</div>
|
||||
|
||||
<!-- Screenshot Image -->
|
||||
<div class="relative z-10 mx-auto mb-9 w-full max-w-[182px]">
|
||||
<div class="relative z-10 mx-auto mb-9 w-full max-w-[182px] md:hidden">
|
||||
<img
|
||||
:src="ScreenshotMobile"
|
||||
alt="App Screenshot"
|
||||
@ -64,25 +63,26 @@
|
||||
</div>
|
||||
|
||||
<!-- Download Buttons Grid -->
|
||||
<div class="mb-9 grid grid-cols-2 gap-4 px-[42px]">
|
||||
<DownloadButton :icon="AppleIcon" label="iPho版本下载" />
|
||||
<DownloadButton :icon="MonitorIcon" label="Wind下载" />
|
||||
<DownloadButton :icon="SmartphoneIcon" label="Andro本下载" />
|
||||
<DownloadButton :icon="MonitorIcon" label="Mac电脑下载" />
|
||||
<div
|
||||
class="mg:mb-[65px] mb-9 flex grid-cols-2 flex-wrap gap-[10px] px-[24px] md:mt-[124px] md:ml-[17px] md:px-0"
|
||||
>
|
||||
<DownloadButton />
|
||||
</div>
|
||||
|
||||
<!-- Features / Footer Info -->
|
||||
<div class="mb-5 w-full text-center text-xs leading-5 font-[300]">
|
||||
<div
|
||||
class="mb-5 w-full text-center text-xs leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
|
||||
>
|
||||
<p>最先进加密协议 - 安全有保障</p>
|
||||
<p>全真实IEPL专线 - IP纯净且稳定</p>
|
||||
<p>4K高清 / 不限流量 - 网速有多快, Hi快有多快</p>
|
||||
<p>极速闪连功能 - 连接永远快人一步</p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mb-1 h-[20px] w-[352px]">
|
||||
<div class="mx-auto mb-1 h-[20px] w-[352px] md:ml-[17px]">
|
||||
<img src="./image-1.png" alt="image" />
|
||||
</div>
|
||||
<div class="text-center text-[10px] leading-[14px] font-[300]">
|
||||
<div class="text-center text-[10px] leading-[14px] font-[300] md:ml-[17px] md:text-left">
|
||||
<span class="font-[600]">Hi快VPN™</span> © All rights reserved.<br />
|
||||
<a href="#" class="underline">Terms of Service</a>
|
||||
<a href="#" class="ml-2 underline">Privacy Policy</a>
|
||||
@ -90,11 +90,13 @@
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Phone Screenshot -->
|
||||
<div class="relative mt-12 flex hidden w-full justify-center md:mt-0 md:w-1/2">
|
||||
<div class="relative hidden w-full md:mt-0 md:block">
|
||||
<!-- Decorative elements behind phone -->
|
||||
<div
|
||||
class="absolute top-1/2 left-1/2 -z-0 h-[60%] w-[60%] -translate-x-1/2 -translate-y-1/2 rounded-full bg-[#a3e635] opacity-20 blur-[60px]"
|
||||
></div>
|
||||
<img
|
||||
:src="ScreenshotDesktop"
|
||||
alt="App Screenshot"
|
||||
class="absolute right-[52px] -bottom-[62px] w-[632px]"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@ -110,6 +112,7 @@ import DownloadButton from './components/DownloadButton.vue'
|
||||
import Logo from './logo.svg?component'
|
||||
import MobileLogo from './mobile-logo.svg?component'
|
||||
import ScreenshotMobile from './screenshot-mobile.png'
|
||||
import ScreenshotDesktop from './screenshot-desktop.png'
|
||||
import { AppleIcon, MonitorIcon, SmartphoneIcon, LocateFixedIcon } from 'lucide-vue-next'
|
||||
|
||||
const loginModalRef = ref<InstanceType<typeof LoginFormModal> | null>(null)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg width="103" height="29" viewBox="0 0 103 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 103 29" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.4016 11.4828H17.0339L19.3193 0H26.26L20.5763 28.7559H13.6144L15.8796 17.2933H9.24829L6.96193 28.7559H0L4.88123 4.20849L2.71884 0H12.6668L10.4016 11.4828Z" fill="currentColor"/>
|
||||
<path d="M29.5968 28.7559H22.6561L26.7156 8.2363H33.6708L29.5968 28.7559Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.8974 5.31659L47.9128 6.28534L48.4606 3.90191H52.8411L53.7012 0H60.0375L59.3081 3.90191H67.3656L65.775 13.4087H67.7568L66.9216 18.8301H58.1346L65.775 24.4081L61.4983 28.7559L53.3629 22.3658L44.1319 28.7559L41.9109 26.556L41.4977 28.7559H35.4228L37.8303 16.29L33.6237 15.7134L36.7327 5.46556H39.9206L40.9768 0H46.896L45.8974 5.31659ZM42.6336 22.706L48.9036 18.8301H43.3612L42.6336 22.706ZM46.896 12.7283L44.7086 11.6538L44.3789 13.4087H51.042L52.0069 9.11375H49.4774L46.896 12.7283ZM57.4561 13.4087H59.5945L60.3768 9.11375H58.3172L57.4561 13.4087Z" fill="currentColor"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
BIN
src/pages/Home/screenshot-desktop.png
Normal file
BIN
src/pages/Home/screenshot-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
@ -28,7 +28,30 @@
|
||||
0 0 33px 0 rgba(242, 242, 242, 0.50) inset;
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
/* 1. 移动端默认：左右 18px 边距 */
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
|
||||
/* 2. 桌面端逻辑：当屏幕达到 1440px 及以上 */
|
||||
@media (width >= 1440px) {
|
||||
/* 计算公式：
|
||||
内容区固定为 1268px
|
||||
侧边留白 = (1440 - 1268) / 2 = 86px
|
||||
*/
|
||||
max-width: 1268px;
|
||||
|
||||
/* 此时 padding 可以设为 0，因为 max-width 配合 margin: auto 已经产生了 86px 的留白 */
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user