1

src/views/product/softwareSystem.vue

@@ -0,0 +1,96 @@
+<script setup>
+import {ref, onMounted, computed} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+import {findLabelByUrl} from '@/utils'
+
+import {cryptoEncrypt} from '@/utils/cryptojs'
+
+import {useNavStore} from '@/store/nav'
+
+const softwareSystemList = window.softwareSystemList
+
+const navStore = useNavStore()
+
+import {useRouter} from 'vue-router'
+const router = useRouter()
+
+const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
+
+const swiperWidth = ref(1300)
+const swiperHeight = ref(800)
+
+onMounted(() => {})
+
+const currentPage = ref(1)
+
+// 点击标题跳转详情页
+function titleClick(item) {
+  router.push({
+    path: '/product/detail',
+    query: {type: cryptoEncrypt(JSON.stringify(item))},
+  })
+}
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      :title="title"
+      v-model="currentPage"
+      :show-pagination="false"
+      :auto-play="false"
+      :source-width="swiperWidth"
+      :source-height="swiperHeight"
+      :showHover="false"
+    >
+      <template #default="{isActive}">
+        <div class="content flex j-c a-c wrap">
+          <div v-for="list in softwareSystemList" :key="list.id" class="list" @click="titleClick(list)">
+            <div class="top">
+              <div class="title">{{ list.title }}</div>
+            </div>
+            <div class="line"></div>
+            <img class="img" :src="`./static/images/${list.imgUrl}`" :class="{active: isActive}" />
+          </div>
+        </div>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  .list {
+    margin-top: 60px;
+    margin: 0 15px;
+    width: 400px;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+    cursor: pointer;
+    &:hover {
+      transform: translateY(-50px);
+      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    }
+  }
+  .top {
+    border-radius: 8px 8px 0 0;
+    background-color: #0389ff;
+    color: #fff;
+    padding: 15px 0;
+  }
+
+  .line {
+    width: 100%;
+    height: 2px;
+    background-color: $black;
+  }
+  .img {
+    width: 100%;
+    height: auto;
+  }
+}
+</style>