update

src/components/XSquareCarouselImage.vue

@@ -1,22 +1,33 @@
 <script setup>
 import testIcon from '../static/images/test.png';
+import XImage from "./XImage.vue";
+import ICON from "../static/icons/水印_素材案例.png";
 
-const {list} = defineProps({
+const {list, showSY} = defineProps({
     list: {
         type: Array,
         default: [
             testIcon, testIcon, testIcon, testIcon
         ],
     },
+    showSY: {
+        type: Boolean,
+        default: false,
+    }
 });
 </script>
 
 <template>
-    <swiper class="!w-[160rpx] !h-[160rpx] !aspect-square" indicator-dots>
-        <swiper-item v-for="v in list">
-            <image class="!w-full !h-full" mode="aspectFill" :src="v"></image>
-        </swiper-item>
-    </swiper>
+    <view class="relative">
+        <x-image class="!w-[160rpx] !h-[160rpx]" mode="aspectFill" :src="list[0]" :list="list"></x-image>
+
+        <image v-if="showSY" class="!size-full !absolute left-0 top-0" :src="ICON" mode="aspectFill"></image>
+
+        <view class="!flex absolute left-1/2 -translate-x-1/2 bottom-[20rpx] z-10 gap-[8rpx]">
+            <view v-for="(_v, index) in list"
+                  :class="[`rounded-[50%] !size-[12rpx] ${index === 0 ? 'bg-[rgba(255,255,255,1)]' : 'bg-[rgba(255,255,255,.67)]'}`]"></view>
+        </view>
+    </view>
 </template>
 
 <style scoped lang="scss">