<template>
|
<div class="key-box">
|
<div class="header">
|
<div class="title">
|
<div style="width: 300px;text-align: center">
|
自然灾害综合风险预警发布及响应联动系统
|
</div>
|
<div class="center"></div>
|
<span style="color: #96aec5;">驱动下载</span>
|
</div>
|
</div>
|
<div class="box-center">
|
<div style="width: 1200px;margin: 30px auto 0;padding: 0 20px 0;" v-for="(item,index) in state.keyTypes" :key="index">
|
<div class="title">{{item.name}}</div>
|
<a-card style="width: 250px;margin:20px 80px;" hoverable title="">
|
<template #extra>
|
<span style="cursor: pointer;color: #1890ff" @click="downLoad(item)">立即下载</span>
|
</template>
|
<template #cover>
|
<img
|
style="width: 120px;height: 120px;margin: 1px auto"
|
alt="example"
|
:src= keyPic
|
/>
|
</template>
|
<template #actions>
|
<span>{{item.name}}驱动</span>
|
</template>
|
</a-card>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {reactive} from "vue";
|
import { message } from 'ant-design-vue';
|
import keyPic from '@/assets/img/key.png'
|
|
const state = reactive({
|
keyTypes: [
|
{
|
name: 'Windows 版',
|
url: 'http://oss.bestong8.com/xinjiang/SetUp.exe'
|
},
|
{
|
name: 'Linux 版',
|
url: 'http://oss.bestong8.com/xinjiang/linux.zip'
|
},
|
{
|
name: 'Mac 版',
|
url: ''
|
},
|
]
|
})
|
|
const downLoad = (item) => {
|
if(item.url === ''){
|
message.warning( "暂未开放苹果系统应用该加密工具。");
|
}else{
|
const link = document.createElement('a')
|
link.href =item.url
|
link.target = '_blank'
|
link.download = item.name + '.exe'
|
link.click()
|
}
|
|
|
}
|
|
</script>
|
|
|
<style scoped lang="less">
|
.key-box{
|
margin: 0 auto;
|
.header{
|
text-align: left;
|
width: 1200px;
|
margin: 30px auto;
|
.title{
|
display: flex;
|
align-items: center;
|
vertical-align: top;
|
font-size: 24px;
|
|
padding-left: 20px;
|
.center{
|
margin: 0 10px;
|
content: "";
|
height: 54px;
|
border-left: 2px solid #c7cddc;
|
}
|
|
}
|
}
|
.box-center{
|
padding-top: 20px;
|
padding-bottom: 20px;
|
min-width: 1200px;
|
.title{
|
font-size: 18px;
|
font-weight: 600;
|
border-bottom: 1px solid #d1d7e8;
|
padding: 10px 0;
|
margin-bottom: 6px;
|
}
|
}
|
}
|
</style>
|
