feat: 轮播组件优化

components/ImageSwiper/index.vue

@@ -1,13 +1,32 @@
 <template>
   <view class="image-swiper">
-    <swiper class="swiper-box" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000">
-      <swiper-item v-for="(item, index) in mainImages" :key="index">
+    <swiper
+      class="swiper-box"
+      :autoplay="false"
+      :interval="3000"
+      :duration="1000"
+      :current="active"
+    >
+      <swiper-item
+        class="swiper-item"
+        v-for="(item, index) in thumbnails"
+        :key="index"
+      >
         <image :src="item.url" mode="aspectFill"></image>
       </swiper-item>
     </swiper>
 
+    <view class="custom-indicator">
+      图片{{ active + 1 }}/{{ thumbnails.length }}
+    </view>
+
     <view class="thumbnail-box">
-      <view v-for="(thumb, index) in thumbnails" :key="index" class="thumbnail-item">
+      <view
+        v-for="(thumb, index) in thumbnails"
+        :key="index"
+        class="thumbnail-item"
+        @click="handleThumbnailClick(index)"
+      >
         <image :src="thumb.url" mode="aspectFill"></image>
         <text>{{ thumb.description }}</text>
       </view>
@@ -16,21 +35,38 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 
-const mainImages = ref([
-  { url: 'https://example.com/main-image-1.jpg' },
-]);
+const active = ref(0);
 
 const thumbnails = ref([
-  { url: 'https://example.com/thumbnail-1.jpg', description: '瑶山古寨' },
-  { url: 'https://example.com/thumbnail-2.jpg', description: '民俗表演' },
-  { url: 'https://example.com/thumbnail-3.jpg', description: '特色美食' },
-  { url: 'https://example.com/thumbnail-4.jpg', description: '传统服饰' },
-  { url: 'https://example.com/thumbnail-5.jpg', description: '其他' },
+  {
+    url: "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
+    description: "瑶山古寨",
+  },
+  {
+    url: "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
+    description: "民俗表演",
+  },
+  {
+    url: "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
+    description: "特色美食",
+  },
+  {
+    url: "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
+    description: "传统服饰",
+  },
+  {
+    url: "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
+    description: "其他",
+  },
 ]);
+
+const handleThumbnailClick = (index) => {
+  active.value = index;
+};
 </script>
 
 <style scoped lang="scss">
-@import './styles/index.scss';
-</style>
+@import "./styles/index.scss";
+</style>

components/ImageSwiper/styles/index.scss

@@ -4,13 +4,35 @@
 }
 
 .swiper-box {
-  height: 167px;
+  border-radius: 8px;
+  height: 200px;
+  overflow: hidden;
+}
+
+.swiper-item image {
+  width: 100%;
+  height: 100%;
+}
+
+.custom-indicator {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50px;
+  padding: 3px 8px;
+  font-size: 8px;
+  color: #fff;
 }
 
 .thumbnail-box {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  bottom: 36px;
   display: flex;
-  justify-content: space-around;
-  margin-top: 10px;
+  gap: 5px;
 }
 
 .thumbnail-item {
@@ -18,12 +40,14 @@
 }
 
 .thumbnail-item image {
-  width: 100px;
-  height: 100px;
-  border-radius: 8px;
+  width: 48px;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px solid #fff;
 }
 
 .thumbnail-item text {
+  color: #fff;
+  font-size: 8px;
   display: block;
-  margin-top: 5px;
-}
+}