<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>
