初始化代码

src/views/download/index.vue

@@ -0,0 +1,96 @@
+<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>