下载
This commit is contained in:
parent
530df9ce09
commit
9d43162830
@ -7,9 +7,9 @@
|
|||||||
@click="toggle(item.id)"
|
@click="toggle(item.id)"
|
||||||
class="group relative flex cursor-pointer flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
|
class="group relative flex cursor-pointer flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
|
||||||
>
|
>
|
||||||
<div class="px-4 md:px-[42px]">
|
<div class="px-4 md:pl-[42px]">
|
||||||
<div
|
<div
|
||||||
class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-4xl"
|
class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-2xl"
|
||||||
>
|
>
|
||||||
<StartIcon v-if="item.isHot" class="size-[20px] md:size-[30px]" />
|
<StartIcon v-if="item.isHot" class="size-[20px] md:size-[30px]" />
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
@ -25,9 +25,12 @@
|
|||||||
<div
|
<div
|
||||||
class="mt-2 flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
|
class="mt-2 flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
|
||||||
>
|
>
|
||||||
<div v-show="activeId !== item.id" class="flex items-center gap-[10px] md:text-2xl">
|
<div
|
||||||
|
v-show="activeId !== item.id"
|
||||||
|
class="flex items-center gap-[10px] md:mt-[50px] md:text-xl"
|
||||||
|
>
|
||||||
<span class="tracking-tight">点击展开详情</span>
|
<span class="tracking-tight">点击展开详情</span>
|
||||||
<ArrowIcon class="size-[12px] md:size-[22px]" />
|
<ArrowIcon class="size-[12px] md:size-[18px]" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -39,7 +42,7 @@
|
|||||||
<!-- 内容区域 (点击图片不收起,只有特定的关闭按钮收起) -->
|
<!-- 内容区域 (点击图片不收起,只有特定的关闭按钮收起) -->
|
||||||
<div class="relative px-2" @click.stop>
|
<div class="relative px-2" @click.stop>
|
||||||
<div
|
<div
|
||||||
class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-2xl"
|
class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-xl"
|
||||||
>
|
>
|
||||||
<div class="relative z-10 flex items-center gap-[10px]" @click="toggle(item.id)">
|
<div class="relative z-10 flex items-center gap-[10px]" @click="toggle(item.id)">
|
||||||
<span class="tracking-tight">点击收起</span>
|
<span class="tracking-tight">点击收起</span>
|
||||||
|
|||||||
@ -1,29 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen bg-black text-white">
|
<div class="min-h-screen bg-black text-white">
|
||||||
<!-- Full Width Header -->
|
<!-- Full Width Header -->
|
||||||
<div class="h-[88px] md:h-[125px]">
|
<div class="h-[88px] md:h-[94px]">
|
||||||
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[45px]">
|
<div class="fixed z-50 w-full bg-black pt-[20px] md:pt-[34px]">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header
|
<header
|
||||||
class="flex h-[68px] items-center justify-between rounded-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px] md:pr-[58px] md:pl-[41px]"
|
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]"
|
||||||
>
|
>
|
||||||
<router-link to="/" class="flex items-center gap-2">
|
<router-link to="/" class="flex items-center gap-2">
|
||||||
<!-- Desktop Logo -->
|
<!-- Desktop Logo -->
|
||||||
<!-- <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
|
<!-- <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />-->
|
||||||
<!-- Mobile Logo -->
|
<!-- Mobile Logo -->
|
||||||
<MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[50px]" />
|
<MobileLogo alt="Hi快VPN" class="block h-[28px] text-black md:h-[36px]" />
|
||||||
</router-link>
|
</router-link>
|
||||||
<RightText class="block h-[15px] text-black md:h-[31px]" />
|
<RightText class="block h-[15px] text-black md:h-[24px]" />
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="h-[145px] md:h-[262px]">
|
<div class="h-[145px] md:h-[180px]">
|
||||||
<div class="fixed z-50 w-full bg-black">
|
<div class="fixed z-50 w-full bg-black">
|
||||||
<div class="container pb-[10px] md:px-[12vw]">
|
<div class="container pb-[10px] md:px-[12vw]">
|
||||||
<div
|
<div class="pt-[30px] pb-[15px] text-center text-xl font-[900] md:pb-[30px] md:text-2xl">
|
||||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
|
|
||||||
>
|
|
||||||
请选择适用您情形的选项
|
请选择适用您情形的选项
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
@ -33,7 +31,7 @@
|
|||||||
@click="activeIndex = 0"
|
@click="activeIndex = 0"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
|
||||||
>
|
>
|
||||||
我只有中国大陆Apple ID
|
我只有中国大陆Apple ID
|
||||||
</Button>
|
</Button>
|
||||||
@ -44,7 +42,7 @@
|
|||||||
@click="activeIndex = 1"
|
@click="activeIndex = 1"
|
||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-xs text-black hover:bg-[#ADFF5B]/90 md:h-[40px] md:text-xl"
|
||||||
>
|
>
|
||||||
我有海外Apple ID
|
我有海外Apple ID
|
||||||
</Button>
|
</Button>
|
||||||
@ -58,9 +56,7 @@
|
|||||||
<Transition name="fade" mode="out-in">
|
<Transition name="fade" mode="out-in">
|
||||||
<!-- tab1 -->
|
<!-- tab1 -->
|
||||||
<div v-if="activeIndex === 0" key="tab1">
|
<div v-if="activeIndex === 0" key="tab1">
|
||||||
<div
|
<div class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pb-[39px] md:text-2xl">
|
||||||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:pb-[39px] md:text-3xl"
|
|
||||||
>
|
|
||||||
Hi快提供三种下载方式
|
Hi快提供三种下载方式
|
||||||
</div>
|
</div>
|
||||||
<DownloadMethodList />
|
<DownloadMethodList />
|
||||||
@ -68,7 +64,7 @@
|
|||||||
<!-- tab2 -->
|
<!-- tab2 -->
|
||||||
<div v-else-if="activeIndex === 1" key="tab2">
|
<div v-else-if="activeIndex === 1" key="tab2">
|
||||||
<div
|
<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"
|
class="mx-auto flex w-[237px] items-center justify-center pt-[34px] text-center text-xl font-[900] md:w-full md:gap-[18px] md:text-2xl"
|
||||||
>
|
>
|
||||||
<ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
|
<ChatIcon class="h-[60px] w-[50px]" />登录海外 Apple ID 后再点击下方下载按钮
|
||||||
</div>
|
</div>
|
||||||
@ -86,7 +82,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container md:px-[92px]">
|
<div class="container md:px-[92px]">
|
||||||
<div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:pb-[69px] md:text-3xl">
|
<div class="pt-[56px] pb-[15px] text-center text-xl font-[900] md:text-2xl">
|
||||||
常见问题与解答
|
常见问题与解答
|
||||||
</div>
|
</div>
|
||||||
<div class="px-[24px]">
|
<div class="px-[24px]">
|
||||||
|
|||||||
@ -96,7 +96,7 @@
|
|||||||
class="mb-5 w-full text-center text-xs leading-5 font-[300] md:ml-[17px] md:text-left md:text-sm"
|
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>最新加密协议-安全有保障</p>
|
||||||
<p>EPL专线-纯净、稳定</p>
|
<p>IEPL专线-纯净、稳定</p>
|
||||||
<p>不限速/不限流-网速多快,Hi快多快</p>
|
<p>不限速/不限流-网速多快,Hi快多快</p>
|
||||||
<p>极速闪连-永远快人一步</p>
|
<p>极速闪连-永远快人一步</p>
|
||||||
<div class="flex justify-center md:justify-start">
|
<div class="flex justify-center md:justify-start">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user