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 1m12s
Details

Browse Source
This commit is contained in:
speakeloudest 2026-01-05 01:15:16 -08:00
parent 3578d3fb4a
commit 27ebf5adc5
7 changed files with 82 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages/Help/DownloadMethodList/DownloadMethodList.vue
View File

@ -155,6 +155,7 @@ import m3_3 from './mobile3/row-3-column-1.webp'
import pc3_1 from './pc3/row-1-column-1.webp'
import pc3_2 from './pc3/row-2-column-1.webp'
import pc3_3 from './pc3/row-3-column-1.webp'
import { downLoadIos } from '@/utils/constant.ts'
interface Hotzone {
x: number
@ -190,6 +191,14 @@ const downloadMethods = computed(() => {
type: 'link',
payload: 'https://account.apple.com/account',
},
{
x: 142,
y: 1952,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
pcHotzones: [
{
@ -200,6 +209,14 @@ const downloadMethods = computed(() => {
type: 'link',
payload: 'https://account.apple.com/account',
},
{
x: 580,
y: 1689,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
},
{
@ -219,6 +236,14 @@ const downloadMethods = computed(() => {
type: 'link',
payload: 'https://account.apple.com',
},
{
x: 142,
y: 2510,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
pcHotzones: [
{
@ -229,6 +254,14 @@ const downloadMethods = computed(() => {
type: 'link',
payload: 'https://account.apple.com',
},
{
x: 580,
y: 2106,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
},
{
@ -274,6 +307,14 @@ const downloadMethods = computed(() => {
payload: account.password,
label: '密码', // 复制提示
},
{
x: 142,
y: 3006,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
pcHotzones: [
{
@ -310,6 +351,14 @@ const downloadMethods = computed(() => {
payload: account.password,
label: '密码', // 复制提示
},
{
x: 580,
y: 2386,
w: 88,
h: 20,
type: 'link',
payload: downLoadIos,
},
] as Hotzone[],
},
]
@ -320,6 +369,7 @@ const activeId = ref<number | null>(null)
const toggle = (id: number) => {
if (activeId.value === id) {
activeId.value = null
window.scrollTo(0, 0)
} else {
activeId.value = id

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

@ -1,34 +1,36 @@
<template>
<div class="min-h-screen bg-black text-white">
<!-- Full Width Header -->
<div class="h-[88px] md:h-[94px]">
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[34px]">
<div class="h-[80px] md:h-[114px]">
<div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
<div class="container">
<header
class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[60px] md:pr-[58px] md:pl-[41px]"
class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
>
<router-link to="/" class="flex items-center gap-2">
<!-- Desktop Logo -->
<!-- <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
<!-- Mobile Logo -->
<MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[36px]" />
<MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
</router-link>
<RightText class="block h-[15px] text-black md:h-[24px]" />
<RightText class="block h-[12px] text-black md:h-[24px]" />
</header>
</div>
</div>
</div>
<div class="h-[125px] md:h-[180px]">
<div class="fixed z-50 w-full bg-black">
<div class="">
<div class="w-full bg-black">
<div class="m-auto w-[340px] pb-[10px] md:w-[760px]">
<div class="pt-[30px] pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-2xl">
<div
class="pb-[15px] text-center text-xl font-[900] md:pt-[20px] md:pb-[30px] md:text-2xl"
>
请选择适用您情形的选项
</div>
<div class="flex items-center justify-between">
<div
class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
:class="[activeIndex === 0 ? 'border-white' : 'border-black']"
@click="activeIndex = 0"
@click="changeActiveIndex(0)"
>
<Button
class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
@ -39,7 +41,7 @@
<div
class="w-1/2 rounded-full border-5 p-[6px] md:border-[10px] md:p-[10px]"
:class="[activeIndex === 1 ? 'border-white' : 'border-black']"
@click="activeIndex = 1"
@click="changeActiveIndex(1)"
>
<Button
class="h-[30px] w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
@ -69,11 +71,7 @@
<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"
>
<a :href="downLoadIos" target="_blank" class="block h-full w-full">
<img src="./Group%20100.png" class="h-full w-full" alt="下载" />
</a>
</div>
@ -131,7 +129,7 @@ import AndroidIcon from './android.svg?component'
import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
import FAQAccordion from './FAQAccordion/index.vue'
import { Button } from '@/components/ui/button'
import { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
import { downLoadAndroid, downLoadWin, downLoadMac, downLoadIos } from '@/utils/constant.ts'
const activeIndex = ref(0)
@ -140,6 +138,11 @@ const otherClients = [
{ icon: MacosIcon, link: downLoadMac, type: 'mac' },
{ icon: AndroidIcon, link: downLoadAndroid, type: 'android' },
]
function changeActiveIndex(index) {
activeIndex.value = index
window.scrollTo(0, 0)
}
</script>
<style scoped>

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

@ -3,11 +3,11 @@
class="relative min-h-screen overflow-hidden bg-black bg-[url('@/pages/Home/bg-mobile.webp')] 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]">
<div class="h-[60px] md:h-[125px]">
<div class="fixed top-[20px] z-50 w-full md:top-[45px]">
<div class="container">
<header
class="flex h-[68px] items-center justify-between rounded-[90px] pr-[10px] transition-all duration-300 md:h-[80px]"
class="flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[80px] md:pr-[10px]"
style="
backdrop-filter: blur(36px);
box-shadow:
@ -26,14 +26,12 @@
>
<router-link to="/" 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" />
<Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-[62px] md:h-[29px]" />
</router-link>
<div v-if="isLoggedIn" class="flex items-center">
<router-link
to="/user-center"
class="flex size-[48px] items-center justify-center rounded-full bg-[#2E3427] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[60px] md:text-3xl"
class="flex size-[30px] items-center justify-center rounded-full bg-[#2E3427] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:size-[60px] md:text-3xl"
>
{{ userLetter }}
</router-link>
@ -41,7 +39,7 @@
<button
v-else
@click="openLoginModal"
class="flex h-[48px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[60px] md:w-[220px] md:text-2xl"
class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[60px] md:w-[220px] md:text-2xl"
>
登录 / 注册
</button>
@ -57,7 +55,7 @@
<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]" />
<Logo class="h-[34px] md:h-[66px]" />
</h2>
<p class="font-600 text-3xl md:text-[48px]">网在我在, 网快我快</p>
</div>

2
src/pages/UserCenter/MobileLayout/index.vue
View File

@ -1,6 +1,6 @@
<template>
<!-- Main Neon Green Card -->
<div class="pt-[35px]">
<div class="pt-[15px]">
<div class="mb-3 ml-[31px] flex h-[60px] items-center gap-3">
<Transition name="fade" mode="out-in">
<UserCenterSkeleton v-if="isUserLoading" type="header" layout="mobile" />

13
src/pages/UserCenter/index.vue
View File

@ -1,23 +1,18 @@
<template>
<div class="flex min-h-screen flex-col bg-black text-black">
<!-- Full Width Header -->
<div class="h-[88px] md:h-[125px]">
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
<div class="h-[80px] md:h-[94px]">
<div class="fixed z-50 w-full bg-black pt-[20px] pb-[20px] md:pt-[34px]">
<div class="container">
<header
class="flex min-h-[66px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
class="flex h-[40px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-5 md:h-[60px] md:pr-[58px] md:pl-[41px]"
>
<router-link to="/" class="flex items-center gap-2">
<!-- Desktop Logo -->
<!-- <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
<!-- Mobile Logo -->
<MobileLogo
:src="MobileLogo"
alt="Hi快VPN"
class="block h-[28px] text-black md:h-[50px]"
/>
<MobileLogo alt="Hi快VPN" class="block h-[22px] text-black md:h-[36px]" />
</router-link>
<div class="text-xl font-[600] text-black md:text-3xl">个人账户</div>
</header>
</div>
</div>

1
src/utils/constant.ts
View File

@ -1,3 +1,4 @@
export const downLoadAndroid = 'https://h.hifastapp.com/download/app-arm64-v8a-release.apk'
export const downLoadMac = 'https://h.hifastapp.com/download/HiFastVPN-1.0.0+100-macos.dmg'
export const downLoadWin = 'https://h.hifastapp.com/download/HiFastVPN-0.0.2-windows-setup.exe'
export const downLoadIos = 'https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167'

2
vite.config.ts
View File

@ -21,7 +21,7 @@ export default defineConfig({
'/api/v1': {
target: 'https://h.hifastapp.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
// rewrite: (path) => path.replace(/^\/api/, ''),
autoRewrite: true,
// 3. 关键：将路径重写，在前面补上 /api/v1
// 验证请求是否进入代理，可以在终端看到打印