hi-landing-hero/src/pages/Help/index.vue

<template>
  <div class="min-h-screen bg-black text-white">
    <!-- 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="container">
          <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]"
          >
            <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-[50px]" />
            </router-link>
            <RightText class="block h-[15px] text-black md:h-[31px]" />
          </header>
        </div>
      </div>
    </div>
    <div class="h-[145px] md:h-[262px]">
      <div class="fixed z-50 w-full bg-black">
        <div class="container pb-[10px] md:px-[12vw]">
          <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>
        </div>
      </div>
    </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快提供三种下载方式
        </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-[494px]">
          <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:pb-[30px] md:text-3xl">
        其他客户端下载
      </div>
      <div class="flex justify-center gap-4">
        <template v-for="client in otherClients" :key="client.link">
          <a :href="client.link" target="_blank">
            <MacosIcon v-if="client.type === 'mac'" />
            <WindowsIcon v-if="client.type === 'window'" />
            <AndroidIcon v-if="client.type === 'android'" />
          </a>
        </template>
      </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 RightText from './right-text.svg?component'
import ChatIcon from './Vector.svg?component'
import MacosIcon from './macos.svg?component'
import WindowsIcon from './windows.svg?component'
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'

const activeIndex = ref(0)

const otherClients = [
  { icon: WindowsIcon, link: downLoadWin, type: 'window' },
  { icon: MacosIcon, link: downLoadMac, type: 'mac' },
  { icon: AndroidIcon, link: downLoadAndroid, type: 'android' },
]
</script>