更新代码

src/views/product/monitorSystem.vue

@@ -0,0 +1,67 @@
+<script setup>
+import {ref, onMounted} from 'vue'
+import Swiper from '@/components/Swiper/index.vue'
+import Banner from '@/components/Banner/index.vue'
+
+const currentPage = ref(1)
+
+onMounted(() => {})
+</script>
+
+<template>
+  <div class="page">
+    <Banner class="banner" img="banner/product.png" />
+    <Swiper
+      id="one"
+      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="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>
+      </template>
+    </Swiper>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  background: #d9d9d9;
+  height: 100%;
+}
+</style>