feat: 图片浏览器的样式调整

src/components/ImageSwiper/index.vue

@@ -22,10 +22,6 @@
       </swiper-item>
     </swiper>
 
-    <view class="custom-indicator">
-      图片{{ active + 1 }}/{{ thumbnails.length }}
-    </view>
-
     <!-- 缩略图部分 -->
     <view
       v-if="showThumbnails"
@@ -52,16 +48,26 @@
               :src="thumb.photoUrl"
               mode="aspectFill"
             ></image>
-            <text>{{ thumb.photoName }}</text>
           </view>
         </view>
       </scroll-view>
+
+      <view class="custom-indicator">
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-camera"]
+        }}</uni-icons>
+        <text class="custom-indicator-text">{{ thumbnails.length }}</text>
+        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+          zniconsMap["zn-nav-arrow-right"]
+        }}</uni-icons>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup>
 import { ref, computed, nextTick } from "vue";
+import { zniconsMap } from "@/static/fonts/znicons.js";
 
 // Props定义
 const props = defineProps({

src/components/ImageSwiper/styles/index.scss

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: znicons;
+  src: url("@/static/fonts/znicons.ttf");
+}
+
 .image-swiper {
   position: relative;
   width: 100%;
@@ -13,27 +18,32 @@
   height: 100%;
 }
 
-.custom-indicator {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: $uni-border-radius-50px;
-  padding: 3px 8px;
-  font-size: 8px;
-  color: #fff;
-}
-
 .thumbnail-box {
   position: absolute;
   left: 12px;
   right: 12px;
-  height: 60px;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+}
+
+.custom-indicator {
+  margin-left: 12px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: $uni-border-radius-50px;
+  padding: 0 6px 4px 8px;
+}
+
+.custom-indicator-text {
+  margin: 0 4px;
+  font-size: 10px;
+  text-align: center;
+  align-items: center;
+  color: #fff;
 }
 
 .thumbnail-scroll {
-  width: 100%;
+  flex: 1;
   height: 100%;
   white-space: nowrap;
 }
@@ -42,7 +52,6 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 5px;
 }
 
 .thumbnail-item {
@@ -52,29 +61,17 @@
 
   &.active {
     .thumbnail-image {
-      border: 1px solid #fff;
+      border: 2px solid #fff;
     }
   }
 }
 
 .thumbnail-item .thumbnail-image {
-  width: 48px;
-  height: 38px;
-  border-radius: 4px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   box-sizing: border-box;
-  border: 1px solid transparent;
+  border: 2px 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;
-}

src/pages/goods/index.vue

@@ -8,7 +8,7 @@
         :border-radius="0"
         :height="300"
         :images="goodsData.commodityPhotoList"
-        thumbnailBottom="36px"
+        thumbnailBottom="42px"
       />
 
       <view class="goods-content">

src/pages/goods/styles/index.scss

@@ -63,7 +63,7 @@ $button-color: #00a6ff;
   }
 
   .goods-content {
-    border-radius: 12px 12px 0 0;
+    border-radius: 28px 28px 0 0;
     background-color: #fff;
     padding: 12px;
     position: relative;