产品详情页导航栏，图片自适应，尺码大小，去掉单位

pages.json

@@ -20,6 +20,7 @@
 			"path": "pages/product-detail/product-detail",
 			"style": {
 				"navigationBarTitleText": "产品详情",
+				"navigationStyle": "custom",
 				"usingComponents": {}
 			}
 		}

pages/product-detail/components/DetailSwiper.vue

@@ -1,5 +1,6 @@
 <template>
-  <!-- 产品图片轮播 + 自定义指示点 -->
+  <!-- 产品图片轮播 + 自定义指示点
+       UI 尺寸固定：宽100% × 高500rpx，仅通过 mode 控制图片完整显示 -->
   <view class="detail-swiper">
     <swiper
       class="swiper"
@@ -10,7 +11,10 @@
     >
       <swiper-item v-for="(item, index) in images" :key="index">
         <view class="swiper-item">
-          <image class="swiper-image" :src="item" mode="aspectFill"></image>
+          <!-- aspectFit：图片保持原始比例完整显示；
+               图片宽高 100% 保证以容器为基准缩放；
+               比例不匹配时短边留白，容器背景灰 -->
+          <image class="swiper-image" :src="item" mode="aspectFit"></image>
         </view>
       </swiper-item>
     </swiper>
@@ -63,12 +67,18 @@ export default {
 }
 .swiper {
   width: 100%;
-  height: 500rpx; /* 260px */
+  height: 500rpx; /* UI 定死：260px，不再改动 */
 }
 .swiper-item {
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f2f2f2;
 }
+/* 图片：完整显示，保持比例，自动缩放适应容器
+   aspectFit + 100% 宽高 = 图片自动等比缩放到能完整放入 100%*500rpx 的容器 */
 .swiper-image {
   width: 100%;
   height: 100%;
@@ -77,22 +87,22 @@ export default {
 /* 指示点：覆盖在图片底部 */
 .dots {
   position: absolute;
-  bottom: 20rpx; /* 距图片底部 10px */
+  bottom: 20rpx;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
-  gap: 12rpx; /* 6px */
+  gap: 12rpx;
 }
 .dot {
-  width: 16rpx; /* 8px */
+  width: 16rpx;
   height: 16rpx;
   background: rgba(0, 0, 0, 0.2);
-  border-radius: 8rpx; /* 4px */
+  border-radius: 8rpx;
 }
 .dot.active {
-  width: 32rpx; /* 16px */
+  width: 32rpx;
-  height: 16rpx; /* 8px */
+  height: 16rpx;
   background: #ff6800;
 }
 </style>

pages/product-detail/components/PackagingSpec.vue

@@ -6,7 +6,6 @@
   <view class="pack-wrap">
     <view class="header-row">
       <text class="title">包装规格</text>
-      <text class="unit">单位：{{ data.unit }}</text>
     </view>
 
     <view class="table">
@@ -83,14 +82,6 @@ export default {
   color: #000000;
   line-height: 33rpx;
 }
-.unit {
-  margin-left: 16rpx;
-  font-size: 21rpx; /* 11px Medium */
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.5);
-  line-height: 33rpx;
-}
-
 /* 表格：列间距 4px（gap 8rpx） */
 .table {
   display: flex;

pages/product-detail/components/SizeChart.vue

@@ -3,7 +3,6 @@
   <view class="chart-wrap">
     <view class="header-row">
       <text class="title">产品尺码</text>
-      <text class="unit">单位：{{ data.unit }}</text>
     </view>
 
     <view class="table">
@@ -62,13 +61,6 @@ export default {
   color: #000000;
   line-height: 33rpx;
 }
-.unit {
-  margin-left: 16rpx; /* 8px */
-  font-size: 21rpx; /* 11px */
-  color: rgba(0, 0, 0, 0.5);
-  line-height: 33rpx;
-}
-
 /* 表格 */
 .table {
   display: flex;

pages/product-detail/product-detail.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 产品详情页 - 接入 /public/goods/{goodId} 接口 -->
-  <view class="detail-page">
+  <view class="detail-page" :style="{ paddingTop: statusBarHeight + 'px' }">
     <!-- 产品图片轮播 + 指示点 -->
     <DetailSwiper :images="productImages" />
 
@@ -72,6 +72,7 @@ export default {
   },
   data() {
     return {
+      statusBarHeight: 20,
       productId: null,
       loading: false,
       product: {
@@ -98,6 +99,12 @@ export default {
     }
   },
   onLoad(options) {
+    try {
+      const sysInfo = uni.getSystemInfoSync()
+      this.statusBarHeight = sysInfo.statusBarHeight || 20
+    } catch (e) {
+      this.statusBarHeight = 20
+    }
     if (options && options.id) {
       this.productId = options.id
       this.loadDetail(options.id)