42 lines
5.8 KiB
Vue
42 lines
5.8 KiB
Vue
<template>
|
|
<div class="mt-10 flex flex-wrap gap-x-6 gap-y-3 justify-center">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<div
|
|
class="hidden-sm-and-down flex flex-col justify-center cursor-pointer text-white items-center bg-gray-400 hover:bg-green-600 w-[66px] h-[66px] sm:w-[100px] sm:h-[100px] rounded-full"
|
|
@click="openUrl(`https://dl.wsdns.cn/soft/WebSoft-window.zip`)">
|
|
<el-image alt="Windows" class="w-[25px] h-[25px] sm:w-[44px] sm:h-[44px]"
|
|
src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E %3Cg fill='%23FFF' fill-rule='evenodd'%3E %3Cpath d='M6.316 21.826v9.025l10.99 1.539V21.826zm12.045 0v10.712l14.463 2.026V21.826zM6.316 11.767v9.004h10.99V10.205zM32.824 8l-14.463 2.055v10.716h14.463z' opacity='1'/%3E %3Cpath fill='none' d='M0 0h40v40H0z'/%3E %3C/g%3E%3C/svg%3E" />
|
|
<span class="text-xs sm:text-sm">Windows</span>
|
|
</div>
|
|
<div
|
|
class="hidden-sm-and-down flex flex-col justify-center cursor-pointer text-white items-center bg-gray-400 hover:bg-green-600 w-[60px] h-[60px] sm:w-[100px] sm:h-[100px] rounded-full"
|
|
@click="openUrl(`https://dl.wsdns.cn/soft/WebSoft-3.0.0-arm64.dmg`)">
|
|
<el-image alt="macOs" class="w-[25px] h-[25px] sm:w-[44px] sm:h-[44px]"
|
|
src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' viewBox='0 0 40 40'%3E %3Cdefs%3E %3Cpath id='47f1323c-993c-4d45-aab1-bebb1206c2bb-a' d='M.001.592h26.926v24.039H.001z'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M0 0h40v40H0z'/%3E %3Cg opacity='1' transform='translate(6.316 2.737)'%3E %3Cg transform='translate(0 7.045)'%3E %3Cmask id='47f1323c-993c-4d45-aab1-bebb1206c2bb-b' fill='%23fff'%3E %3Cuse xlink:href='%2347f1323c-993c-4d45-aab1-bebb1206c2bb-a'/%3E %3C/mask%3E %3Cpath fill='%23FFF' d='M20.005.608c-2.722-.193-5.031 1.456-6.32 1.456-1.308 0-3.324-1.415-5.461-1.376-2.806.04-5.393 1.564-6.84 3.972C-1.531 9.506.64 16.687 3.479 20.62c1.389 1.922 3.045 4.088 5.221 4.009 2.094-.08 2.887-1.298 5.418-1.298 2.53 0 3.243 1.298 5.458 1.259 2.254-.04 3.683-1.962 5.061-3.894 1.596-2.23 2.251-4.39 2.29-4.505-.05-.018-4.394-1.614-4.437-6.408-.04-4.008 3.415-5.935 3.573-6.028C24.102.989 21.073.684 20.005.608' mask='url(%2347f1323c-993c-4d45-aab1-bebb1206c2bb-b)'/%3E %3C/g%3E %3Cpath fill='%23FFF' d='M18.325 5.057C19.482 3.718 20.26 1.854 20.045 0c-1.663.063-3.676 1.062-4.87 2.4-1.07 1.185-2.008 3.083-1.753 4.899 1.855.137 3.748-.902 4.903-2.242'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E" />
|
|
<span class="text-xs sm:text-sm">macOs</span>
|
|
</div>
|
|
<div
|
|
class="flex flex-col justify-center cursor-pointer text-white items-center bg-gray-400 hover:bg-gray-500 w-[90px] h-[90px] sm:w-[100px] sm:h-[100px] rounded-full">
|
|
<el-image alt="iOS"
|
|
src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' viewBox='0 0 40 40'%3E %3Cdefs%3E %3Cpath id='f46e5a6d-7d66-4f5f-8628-7f4ceb95844a-a' d='M0 0h27v24.104H0z'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd' transform='translate(7 4)'%3E %3Cg transform='translate(0 7.658)'%3E %3Cmask id='f46e5a6d-7d66-4f5f-8628-7f4ceb95844a-b' fill='%23fff'%3E %3Cuse xlink:href='%23f46e5a6d-7d66-4f5f-8628-7f4ceb95844a-a'/%3E %3C/mask%3E %3Cpath fill='%23FFF' d='M20.06.016c-2.73-.194-5.046 1.46-6.339 1.46-1.311 0-3.332-1.418-5.475-1.38-2.814.04-5.408 1.57-6.86 3.983-2.922 4.86-.745 12.06 2.102 16.004 1.392 1.927 3.053 4.098 5.235 4.02 2.1-.08 2.895-1.302 5.433-1.302 2.536 0 3.252 1.301 5.473 1.262 2.26-.04 3.692-1.967 5.075-3.904 1.6-2.237 2.257-4.403 2.296-4.517-.05-.018-4.406-1.619-4.45-6.426-.039-4.019 3.425-5.951 3.583-6.044C24.167.398 21.129.092 20.059.016z' mask='url(%23f46e5a6d-7d66-4f5f-8628-7f4ceb95844a-b)'/%3E %3C/g%3E %3Cpath fill='%23FFF' d='M18.375 5.07c1.16-1.342 1.94-3.21 1.725-5.07-1.669.063-3.687 1.065-4.884 2.406-1.072 1.188-2.013 3.091-1.757 4.912 1.86.138 3.758-.904 4.916-2.247z'/%3E %3C/g%3E%3C/svg%3E" />
|
|
<span class="text-sm">iOS</span>
|
|
</div>
|
|
<div
|
|
class="flex flex-col justify-center cursor-pointer text-white items-center bg-gray-400 hover:bg-gray-500 w-[90px] h-[90px] sm:w-[100px] sm:h-[100px] rounded-full">
|
|
<el-image alt="Android"
|
|
src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40' height='40' viewBox='0 0 40 40'%3E %3Cdefs%3E %3Cpath id='a688108f-309f-4e18-a0dc-ed026741fa12-a' d='M0 0h33.684v18.947H0z'/%3E %3C/defs%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M0 0h40v40H0z'/%3E %3Cg opacity='1' transform='translate(3.158 11.158)'%3E %3Cmask id='a688108f-309f-4e18-a0dc-ed026741fa12-b' fill='%23fff'%3E %3Cuse xlink:href='%23a688108f-309f-4e18-a0dc-ed026741fa12-a'/%3E %3C/mask%3E %3Cpath fill='%23FFF' d='M24.594 14.156a1.402 1.402 0 1 1-.003-2.803 1.402 1.402 0 0 1 .003 2.803m-15.504 0a1.402 1.402 0 1 1-.002-2.803 1.402 1.402 0 0 1 .002 2.803M25.097 5.72L27.9.874a.584.584 0 0 0-1.01-.583L24.05 5.2c-2.17-.989-4.608-1.54-7.21-1.54-2.6 0-5.038.552-7.209 1.54L6.794.291a.584.584 0 0 0-1.01.582l2.803 4.848C3.774 8.335.482 13.2 0 18.947h33.684C33.202 13.2 29.91 8.335 25.097 5.721' mask='url(%23a688108f-309f-4e18-a0dc-ed026741fa12-b)'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E" />
|
|
<span class="text-sm">Android</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {openUrl} from "~/utils/common";
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|