97 lines
2.4 KiB
Vue
97 lines
2.4 KiB
Vue
<script setup>
|
|
import {ref, onMounted} from 'vue'
|
|
import Swiper from '@/components/swiper/index.vue'
|
|
|
|
const currentPage = ref(1)
|
|
|
|
onMounted(() => {})
|
|
|
|
const list = ref([
|
|
{id: 1, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
{id: 2, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
{id: 3, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
{id: 4, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
{id: 5, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
{id: 6, imgUrl: 'main/1.png', label: 'XXX平台', subLabel: '具有XXX功能'},
|
|
])
|
|
|
|
const downloadFile = (id) => {
|
|
console.log('id===>', id)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page">
|
|
<div class="placeholder"></div>
|
|
<Swiper
|
|
id="download"
|
|
title="软件下载"
|
|
v-model="currentPage"
|
|
:sourceWidth="1600"
|
|
:sourceHeight="800"
|
|
:show-pagination="false"
|
|
:auto-play="false"
|
|
:showHover="false"
|
|
>
|
|
<template #default>
|
|
<div class="my-card flex j-s wrap">
|
|
<div class="card flex j-s" v-for="item in list" :key="item.id">
|
|
<div class="img">
|
|
<img :src="`./static/main/${item.imgUrl}`" alt="" />
|
|
</div>
|
|
<div class="content">
|
|
<div class="label">{{ item.label }}</div>
|
|
<div class="sub-label">{{ item.subLabel }}</div>
|
|
<div class="download" @click="downloadFile(item.id)">
|
|
点击下载
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Swiper>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.my-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
.card {
|
|
width: 48%;
|
|
height: 170px;
|
|
box-sizing: border-box;
|
|
.img {
|
|
width: 550px;
|
|
height: 100%;
|
|
background: #d9d9d9;
|
|
}
|
|
.content {
|
|
margin-top: 20px;
|
|
text-align: left;
|
|
.label {
|
|
font-family: 'PingFang SC';
|
|
font-weight: 600;
|
|
font-size: 26px;
|
|
color: $black;
|
|
margin-bottom: 20px;
|
|
}
|
|
.sub-label {
|
|
font-family: 'PingFang SC';
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #999999;
|
|
margin-bottom: 30px;
|
|
}
|
|
.download {
|
|
font-family: 'PingFang SC';
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
color: #0389ff;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|