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;
+  width: 36px;
-  height: 38px;
+  height: 36px;
-  border-radius: 4px;
+  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

@@ -1,14 +1,19 @@
 <template>
   <view class="goods-container bg-gray">
-    <TopNavBar title="商品详情" />
+    <TopNavBar
+      title="商品详情"
+      :backgroundColor="`rgba(217, 238, 255, ${navOpacity})`"
+      :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
+    />
 
     <!-- 滚动区域 -->
-    <scroll-view class="content-wrapper" scroll-y>
+    <scroll-view class="content-wrapper" scroll-y @scroll="handleScroll">
       <ImageSwiper
         :border-radius="0"
         :height="300"
         :images="goodsData.commodityPhotoList"
-        thumbnailBottom="36px"
+        thumbnailBottom="42px"
       />
 
       <view class="goods-content">
@@ -76,6 +81,9 @@ import {
 import { ThrottleUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ImageSwiper from "@/components/ImageSwiper/index.vue";
+
+// 导航栏透明度 - 默认透明，随滚动变为不透明
+const navOpacity = ref(0);
 import GoodInfo from "./components/GoodInfo/index.vue";
 import GoodConfirm from "./components/GoodConfirm/index.vue";
 import Calender from "@/components/Calender/index.vue";
@@ -88,6 +96,15 @@ const calendarVisible = ref(false);
 const goodsData = ref({});
 const goodConfirmRef = ref(null);
 
+// 处理滚动事件
+const handleScroll = (e) => {
+  const scrollTop = e.detail.scrollTop;
+  // 设置一个阈值，当滚动超过200px时，导航栏完全不透明
+  const threshold = 200;
+  // 计算透明度，范围从0到1
+  navOpacity.value = Math.min(scrollTop / threshold, 1);
+};
+
 // 格式化日期为 yyyy-mm-dd 格式
 const formatDate = (date) => {
   const year = date.getFullYear();

src/pages/goods/styles/index.scss

@@ -8,10 +8,13 @@ $button-color: #00a6ff;
 
   // 顶部导航栏固定样式
   :deep(.top-nav-bar) {
-    position: sticky;
+    position: fixed;
     top: 0;
+    left: 0;
+    right: 0;
     z-index: 100;
     flex-shrink: 0;
+    transition: background-color 0.3s ease;
   }
 
   // 使用须知样式
@@ -63,7 +66,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;