提交代码

src/views/product/monitorSystem.vue

@@ -1,11 +1,43 @@
 <script setup>
-import {ref, onMounted} from 'vue'
+import {ref, onMounted, computed} from 'vue'
 import Swiper from '@/components/Swiper/index.vue'
 import Banner from '@/components/Banner/index.vue'
+import Project from './project.vue'
+
+import {findLabelByUrl} from '@/utils'
+
+import {useNavStore} from '@/store/nav'
+const navStore = useNavStore()
+
+import {useRouter} from 'vue-router'
+const router = useRouter()
+
+const title = computed(() => findLabelByUrl(window.nav.header, navStore.navIndex))
+
+onMounted(() => {})
 
 const currentPage = ref(1)
 
-onMounted(() => {})
+const swiperItem = ref([
+  {id: 1, title: 'RGRID-Lite', subTitle: '无人机Remote ID远程识别设备', imgUrl: 'product/detail/6.png'},
+  {id: 2, title: 'RGRID-Ped', subTitle: '无人机Remote ID远程识别模块', imgUrl: 'product/detail/1.png'},
+  {id: 3, title: 'RGRID-Mob', subTitle: '无人机Remote ID远程识别手持设备', imgUrl: 'product/detail/4.png'},
+])
+
+// 点击标题跳转详情页
+function titleClick(item) {
+  console.log('title clicked:', item)
+  router.push({
+    path: '/product/detail',
+    query: {
+      type: 'monitorSystem',
+      id: item.id,
+      title: item.title,
+      subTitle: item.subTitle,
+      imgUrl: item.imgUrl,
+    },
+  })
+}
 </script>
 
 <template>
@@ -13,55 +45,46 @@ onMounted(() => {})
     <Banner class="banner" img="banner/product.png" />
     <Swiper
       id="one"
-      title="产品体系"
+      :title="title"
       v-model="currentPage"
-      :data="[1, 2, 3, 4]"
-      :page-size="2"
+      :data="swiperItem"
+      :page-size="3"
       :show-pagination="false"
       :auto-play="false"
+      :sourceHeight="400"
+      :source-gap="80"
     >
       <template #default="{item, index, isActive}">
-        <div class="my-card" :class="{active: isActive}">
-          <h2>{{ item }}</h2>
-        </div>
-      </template>
-    </Swiper>
-    <Swiper
-      id="two"
-      title="软件产品"
-      v-model="currentPage"
-      :data="[1, 2, 3, 4]"
-      :page-size="2"
-      :show-pagination="false"
-      :auto-play="false"
-    >
-      <template #default="{item, index, isActive}">
-        <div class="my-card" :class="{active: isActive}">
-          <h2>{{ item }}</h2>
-        </div>
-      </template>
-    </Swiper>
-    <Swiper
-      id="three"
-      title="硬件产品"
-      v-model="currentPage"
-      :data="[1, 2, 3, 4]"
-      :page-size="2"
-      :show-pagination="false"
-      :auto-play="false"
-    >
-      <template #default="{item, index, isActive}">
-        <div class="my-card" :class="{active: isActive}">
-          <h2>{{ item }}</h2>
+        <div class="content" @click="titleClick(item)">
+          <div class="top">
+            <div class="title">{{ item.title }}</div>
+            <div class="sub-title">{{ item.subTitle }}</div>
+          </div>
+          <div class="line"></div>
+          <img :src="`./static/images/${item.imgUrl}`" class="img" :class="{active: isActive}" />
         </div>
       </template>
     </Swiper>
+
+    <Project />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.my-card {
-  background: #d9d9d9;
+.content {
   height: 100%;
+  .top {
+    background-color: #eee;
+    padding: 10px 0;
+  }
+  .line {
+    width: 100%;
+    height: 2px;
+    background-color: $black;
+  }
+  .img {
+    width: 300px;
+    height: 300px;
+  }
 }
 </style>