feat: swiper组件

src/views/dashboard/AppearanceMonitor.vue

@@ -6,13 +6,11 @@
       </div>
       <div class="monitor-left-bottom">
         <swiper
+          ref="swiperRef"
           :modules="modules"
           :slides-per-view="4"
           :space-between="10"
           navigation
-          :pagination="{  type: 'custom',
-            el: '.swiper-pagination',
-            renderCustom: (swiper, current, total) => '' }"
           :scrollbar="{ draggable: false }"
           :centered-slides="false"
           :observer="true"
@@ -20,20 +18,13 @@
           @swiper="onSwiper"
           @slideChange="onSlideChange"
         >
-          <swiper-slide>
+          <swiper-slide
-            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
+            v-for="(image, index) in images"
-          </swiper-slide>
+            :key="index"
-          <swiper-slide>
+            @click="handleSlideClick(index)"
-            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
+            :class="{ 'active-slide': activeIndex === index }"
-          </swiper-slide>
+          >
-          <swiper-slide>
+            <img :src="image" alt="Slide" />
-            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
-          </swiper-slide>
-          <swiper-slide>
-            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
-          </swiper-slide>
-          <swiper-slide>
-            <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
           </swiper-slide>
         </swiper>
       </div>
@@ -100,14 +91,13 @@
 </template>
 <script lang="ts" setup>
 import ContentHeader from "@/components/ContentHeader.vue";
-import { ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Navigation, Pagination, Scrollbar } from "swiper/modules";
+import { Navigation, Scrollbar } from "swiper/modules";
 import "swiper/css";
 import 'swiper/scss';
 import 'swiper/scss/navigation';
-import 'swiper/scss/pagination';
+const modules = [Navigation, Scrollbar];
-const modules = [Navigation, Pagination, Scrollbar];
 
 // 搜索表单
 const searchForm = ref({
@@ -161,17 +151,44 @@ const handleReset = () => {
 const handlePageChange = (page) => {
   console.log("当前页码", page);
 };
+const images = ref([
+  'https://picsum.photos/300/200?random=1',
+  'https://picsum.photos/300/200?random=2',
+  'https://picsum.photos/300/200?random=3',
+  'https://picsum.photos/300/200?random=4',
+  'https://picsum.photos/300/200?random=5'
+]);
+const activeIndex = ref(-1);
+
+const handleSlideClick = (index) => {
+  console.log(index);
+  activeIndex.value = index;
+};
+const swiperRef = ref(null);
+console.log(swiperRef.value);
 const onSwiper = (swiper) => {
-  console.log(swiper);
+  swiperRef.value = swiper;
+  console.log('Swiper 实例已获取:', swiper);
 };
 const onSlideChange = () => {
   console.log("slide change");
 };
-onMounted(() => {
+// // 窗口大小改变时更新 Swiper
-  onSwiper();
+// const handleResize = () => {
-});
+//   if (swiperRef.value) {
+//     swiperRef.value.update();
+//   }
+// };
+
+// onMounted(() => {
+//   window.addEventListener('resize', handleResize);
+// });
+
+// onUnmounted(() => {
+//   window.removeEventListener('resize', handleResize);
+// });
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 .appearance-monitor-warp {
   height: 100%;
   display: flex;
@@ -210,6 +227,8 @@ onMounted(() => {
   }
   .appearance-monitor-left {
     .monitor-left-top {
+      box-sizing: border-box;
+      padding: 32px 16px;
       min-height: 600px;
       img {
         width: 100%;
@@ -221,14 +240,40 @@ onMounted(() => {
       overflow: visible;
       .swiper {
         width: 100%;
-      height: 100%;
+        height: 100%;
-      .swiper-slide {
+        .swiper-slide {
-        width: 20%;
+          width: 20%;
-        img {
+          border-radius:4px;
-            width: 100%;
+          img {
-      height: 100%;
+              width: 100%;
+              height: 100%;
+              border-radius:4px;
+          }
+        }
+        .active-slide img {
+          border-radius:4px;
+          border: 2px solid #2ECCE0;
+        }
+        .swiper-button-prev,
+        .swiper-button-next {
+          background-color: rgba(0, 0, 0, 0.5);
+          color: white;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+        }
+
+        .swiper-button-prev::after,
+        .swiper-button-next::after {
+          font-size: 12px ;
+          color: #FFF;
+        }
+
+        /* 修改按钮悬停样式 */
+        .swiper-button-prev:hover,
+        .swiper-button-next:hover {
+          background-color: rgba(0, 0, 0, 0.8);
         }
-      }
       }
     }
   }