1

src/views/homepage/index.vue

@@ -1,44 +1,72 @@
 <script setup>
 import Swiper from '@/components/Swiper/index.vue'
-
 import {ref, onMounted} from 'vue'
+import {cryptoEncrypt} from '@/utils/cryptojs'
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
+const swiperWidth = ref(400)
+const swiperHeight = ref(400)
 const currentPage = ref(1)
+const videoLoaded = ref(true)
+const list = [...window.softwareSystemList, ...window.hardwareSystemList]
+
 onMounted(() => {})
+
+function onVideoLoaded() {
+  videoLoaded.value = false
+}
+
+function toUrl(item) {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
 </script>
 
 <template>
-  <div class="page">
+  <div class="page" v-loading="videoLoaded">
     <div class="banner">
-      <video autoplay muted loop>
-        <source src="/static/images/main/display.mp4" type="video/mp4" />
+      <video autoplay muted loop @loadeddata="onVideoLoaded">
+        <source src="/static/video/display.mp4" type="video/mp4" />
       </video>
       <div class="banner-link"><span>进入演示系统</span></div>
     </div>
-    <div class="swiper">
-      <Swiper
-        id="home_swiper"
-        title="产品体系"
-        v-model="currentPage"
-        :data="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
-        :page-size="4"
-        :show-pagination="true"
-        :auto-play="true"
-      >
-        <template #default="{item, index, isActive}">
-          <div class="my-card" :class="{active: isActive}">
-            <h2>{{ item }}</h2>
+    <Swiper
+      id="home_swiper"
+      title="产品体系"
+      v-model="currentPage"
+      :data="list"
+      :page-size="3"
+      :show-pagination="true"
+      :source-width="swiperWidth"
+      :source-height="swiperHeight"
+      :auto-play="true"
+    >
+      <template #default="{item, index, isActive}">
+        <div class="list" @click="toUrl(item)">
+          <div class="top">
+            <div class="title">{{ item.title }}</div>
           </div>
-        </template>
-      </Swiper>
-    </div>
+          <div class="card flex column a-c j-c" :class="{active: isActive}">
+            <img :class="item.type === 'hardwareSystem' ? 'm-img' : 'r-img'" :src="`./static/images/${item.imgUrl}`" />
+          </div>
+        </div>
+      </template>
+    </Swiper>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .page {
-  .banner {
+  .placeholder {
     width: 100%;
     height: 100%;
+  }
+  .banner {
+    width: 100%;
+    height: 800px;
     position: relative;
     background-color: #333333;
     &-link {
@@ -68,16 +96,31 @@ onMounted(() => {})
     video {
       padding: 3px;
       width: 100%;
-      height: 100%;
+      height: auto;
       border-radius: 8px;
     }
   }
-  .swiper {
-    width: 100%;
-    height: 800px;
-    .my-card {
-      background: #d9d9d9;
-      height: 100%;
+
+  .list {
+    height: 100%;
+    border: 1px solid #eee;
+    .top {
+      height: 50px;
+      border-radius: 8px 8px 0 0;
+      background-color: #0389ff;
+      color: #fff;
+      padding: 15px 0;
+    }
+    .card {
+      height: calc(100% - 50px - 30px);
+    }
+    .r-img {
+      width: 90%;
+      height: auto;
+    }
+    .m-img {
+      width: 70%;
+      height: auto;
     }
   }
 }