113 lines
4.1 KiB
Vue
113 lines
4.1 KiB
Vue
<template>
|
||
<div class="min-h-screen bg-black text-white">
|
||
<!-- Full Width Header -->
|
||
<div class="h-[88px] 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-full bg-[#ADFF5B] pr-[30px] pl-6 md:h-[80px]"
|
||
>
|
||
<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]"
|
||
/>
|
||
</router-link>
|
||
<div class="text-xl font-[600] text-black md:text-3xl">Hi快iOS版本下载教程</div>
|
||
</header>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container md:px-[252px]">
|
||
<div
|
||
class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[110px] md:pb-[30px] md:text-3xl"
|
||
>
|
||
请选择适用您情形的选项
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div
|
||
class="w-1/2 rounded-full border-5 p-[6px]"
|
||
:class="[activeIndex === 0 ? 'border-white' : 'border-black']"
|
||
@click="activeIndex = 0"
|
||
>
|
||
<Button
|
||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||
>
|
||
我只有中国大陆Apple ID
|
||
</Button>
|
||
</div>
|
||
<div
|
||
class="w-1/2 rounded-full border-5 p-[6px]"
|
||
:class="[activeIndex === 1 ? 'border-white' : 'border-black']"
|
||
@click="activeIndex = 1"
|
||
>
|
||
<Button
|
||
class="w-full cursor-pointer rounded-full bg-[#ADFF5B] text-black hover:bg-[#ADFF5B]/90 md:h-[60px] md:text-2xl"
|
||
>
|
||
我有海外Apple ID
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- tab1 -->
|
||
<div v-show="activeIndex === 0">
|
||
<div class="pt-[34px] pb-[15px] text-center text-xl font-[900] md:pt-[100px] md:text-3xl">
|
||
Hi快提供三种下载方式
|
||
</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 后再点击下方下载按钮
|
||
</div>
|
||
<div class="mx-auto h-[101px] w-[247px] md:h-[202px] md:w-[594px]">
|
||
<img src="./Group%20100.png" class="h-full w-full" alt="下载" />
|
||
</div>
|
||
</div>
|
||
<!-- tab2 -->
|
||
</div>
|
||
|
||
<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>
|
||
<div class="px-[24px]">
|
||
<FAQAccordion />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container px-[92px] pt-[34px]">
|
||
<div class="mx-auto w-[240px] text-center font-black text-[#757575] md:w-full md:text-xl">
|
||
若您在下载过程中遇到任何问题，
|
||
<br class="md:hidden" />
|
||
点击右下角在线客服按钮，
|
||
<br class="md:hidden" />
|
||
会有专业客服帮您解决问题
|
||
</div>
|
||
</div>
|
||
|
||
<div class="px-[18px] pt-[34px] pb-[calc(50px+env(safe-area-inset-bottom))]">
|
||
<div class="pb-[15px] text-center text-xl font-[900] md:text-xl">其他客户端下载</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
// Help page logic
|
||
import Logo from '@/pages/Home/logo.svg?component'
|
||
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'
|
||
import ChatIcon from './Vector.svg?component'
|
||
import DownloadMethodList from './DownloadMethodList/DownloadMethodList.vue'
|
||
import FAQAccordion from './FAQAccordion/index.vue'
|
||
import { Button } from '@/components/ui/button'
|
||
|
||
const activeIndex = ref(0)
|
||
</script>
|