hi-landing-hero/src/pages/Home/components/DownloadButton.vue
speakeloudest 0ed394ea67
All checks were successful
site-dist-deploy / build-and-deploy (push) Successful in 1m51s
修改下载链接
2026-03-20 08:27:33 +02:00

82 lines
2.9 KiB
Vue

<template>
<div class="mx-auto grid grid-cols-2 gap-[10px] md:flex md:flex-wrap">
<template v-for="(item, index) in downloadLinks" :key="index">
<router-link
v-if="item.isInternal"
:to="item.link"
:aria-label="item.label"
class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full border border-white/20 transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
>
<div class="flex items-center justify-center">
<component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
</div>
</router-link>
<a
v-else
:href="item.link"
target="_blank"
:aria-label="item.label"
class="lucid-glass-bar flex h-[40px] w-[140px] shrink-0 items-center space-x-2 rounded-full transition-transform hover:brightness-110 active:scale-95 md:h-[50px] md:w-[180px]"
>
<div class="flex items-center justify-center">
<component :is="item.icon" class="h-[40px] w-[140px] md:h-[50px] md:w-[180px]" />
</div>
</a>
</template>
</div>
</template>
<script setup lang="ts">
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'
import { ref, computed } from 'vue'
import request from '@/utils/request'
import { getAllQueryString } from '@/utils/url-utils.ts'
const downLoadWin = ref(
'https://api.hifast.biz/v1/common/client/download/file/Hi快VPN-windows-1.0.0.exe',
)
const downLoadMac = ref('https://apps.apple.com/us/app/hi%E5%BF%ABvpn/id6755683167')
const downLoadAndroid = ref(
'https://hifastvpn.go.link/?adj_t=1xf6e7ru&&adj_label=uuDvxXMU&adj_deep_link=hifastvpn%3A%2F%2F%3FinviteCode%3DuuDvxXMU',
)
// request
// .get('/api/v1/common/client/download', {
// // invite_code: getAllQueryString('ic'),
// platform: 'mac',
// })
// .then((res) => {
// downLoadMac.value = res.url
// })
//
// request
// .get('/api/v1/common/client/download', {
// // invite_code: getAllQueryString('ic'),
// platform: 'windows',
// })
// .then((res) => {
// downLoadWin.value = res.url
// })
//
// request
// .get('/api/v1/common/client/download', {
// // invite_code: getAllQueryString('ic'),
// platform: 'android',
// })
// .then((res) => {
// downLoadAndroid.value = res.url
// // console.log(downLoadAndroid.value)
// })
// 定义下载链接数据
const downloadLinks = computed(() => {
return [
{ icon: Icon2, link: '/help', isInternal: true, label: '查看帮助中心' },
{ icon: Icon1, link: downLoadWin.value, label: '下载 Windows 版客户端' },
{ icon: Icon4, link: downLoadAndroid.value, label: '下载 Android 版客户端' },
{ icon: Icon3, link: downLoadMac.value, label: '下载 macOS 版客户端' },
]
})
</script>