feat: image标签替换成class名称

src/components/ImageSwiper/index.vue

@@ -14,7 +14,11 @@
         v-for="(item, index) in thumbnails"
         :key="index"
       >
-        <image :src="item.photoUrl" mode="aspectFill"></image>
+        <image
+          class="swiper-item-image"
+          :src="item.photoUrl"
+          mode="aspectFill"
+        ></image>
       </swiper-item>
     </swiper>
 
@@ -43,7 +47,7 @@
             :id="`thumbnail-${index}`"
             @click="handleThumbnailClick(index)"
           >
-            <image :src="thumb.photoUrl" mode="aspectFill"></image>
+            <image class="thumbnail-image" :src="thumb.photoUrl" mode="aspectFill"></image>
             <text>{{ thumb.photoName }}</text>
           </view>
         </view>

src/components/ImageSwiper/styles/index.scss

@@ -1,80 +1,80 @@
 .image-swiper {
-    position: relative;
-    width: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .swiper-box {
-    overflow: hidden;
-    // 高度和圆角通过内联样式动态设置
+  overflow: hidden;
+  // 高度和圆角通过内联样式动态设置
 }
 
-.swiper-item image {
-    width: 100%;
-    height: 100%;
+.swiper-item .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;
+  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;
-    height: 60px;
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  height: 60px;
 }
 
 .thumbnail-scroll {
-    width: 100%;
-    height: 100%;
-    white-space: nowrap;
+  width: 100%;
+  height: 100%;
+  white-space: nowrap;
 }
 
 .thumbnail-list {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 0 5px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 5px;
 }
 
 .thumbnail-item {
-    flex-shrink: 0;
-    text-align: center;
-    transition: all 0.3s ease;
+  flex-shrink: 0;
+  text-align: center;
+  transition: all 0.3s ease;
 
-    &.active {
-        image {
-            border: 1px solid #fff;
-        }
+  &.active {
+    .thumbnail-image {
+      border: 1px solid #fff;
     }
+  }
 }
 
-.thumbnail-item image {
-    width: 48px;
-    height: 38px;
-    border-radius: 4px;
-    box-sizing: border-box;
-    border: 1px solid transparent;
-    transition: all 0.3s ease;
-    display: block;
+.thumbnail-item .thumbnail-image {
+  width: 48px;
+  height: 38px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  display: block;
 }
 
 .thumbnail-item text {
-    color: #fff;
-    font-size: 8px;
-    display: block;
-    margin-top: 4px;
-    transition: all 0.3s ease;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 48px;
+  color: #fff;
+  font-size: 8px;
+  display: block;
+  margin-top: 4px;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 48px;
 }