speakeloudest
dc40c24b73
All checks were successful
site-dist-deploy / build-and-deploy (push) Successful in 1m6s
71 lines
2.6 KiB
Vue
71 lines
2.6 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"
|
|
class="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]"
|
|
style="
|
|
backdrop-filter: blur(36px);
|
|
box-shadow:
|
|
0px 0px 33px 0px #f2f2f280 inset,
|
|
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
|
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
|
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
|
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
|
border-image-source: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0) 30%
|
|
);
|
|
border-image-slice: 1;
|
|
"
|
|
>
|
|
<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"
|
|
class="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]"
|
|
style="
|
|
backdrop-filter: blur(36px);
|
|
box-shadow:
|
|
0px 0px 33px 0px #f2f2f280 inset,
|
|
-1px -1.5px 1.5px -3px #b3b3b3 inset,
|
|
3px 4.5px 1.5px -3px #b3b3b333 inset,
|
|
4.5px 4.5px 1.5px -5.25px #ffffff80 inset,
|
|
-4.5px -4.5px 1.5px -5.25px #ffffff80 inset;
|
|
border-image-source: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0) 30%
|
|
);
|
|
border-image-slice: 1;
|
|
"
|
|
>
|
|
<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 { downLoadAndroid, downLoadWin, downLoadMac } from '@/utils/constant.ts'
|
|
// 定义下载链接数据
|
|
const downloadLinks = [
|
|
{ icon: Icon2, link: '/help', isInternal: true },
|
|
{ icon: Icon1, link: downLoadWin },
|
|
{ icon: Icon3, link: downLoadMac },
|
|
{ icon: Icon4, link: downLoadAndroid },
|
|
]
|
|
</script>
|