From bd6f7a378e4dab04f4c2e8adc6c8a7e996fd9d07 Mon Sep 17 00:00:00 2001
From: RyRh <3123294924@qq.com>
Date: Tue, 25 Aug 2026 11:37:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=EF=BC=8C=E5=9B=BE=E7=89=87=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=EF=BC=8C=E5=B0=BA=E7=A0=81=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=8E=BB=E6=8E=89=E5=8D=95=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  1 +
 .../components/DetailSwiper.vue               | 28 +++++++++++++------
 .../components/PackagingSpec.vue              |  9 ------
 pages/product-detail/components/SizeChart.vue |  8 ------
 pages/product-detail/product-detail.vue       |  9 +++++-
 5 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/pages.json b/pages.json
index 7bb26a0..33ec5ed 100644
--- a/pages.json
+++ b/pages.json
@@ -20,6 +20,7 @@
 			"path": "pages/product-detail/product-detail",
 			"style": {
 				"navigationBarTitleText": "产品详情",
+				"navigationStyle": "custom",
 				"usingComponents": {}
 			}
 		}
diff --git a/pages/product-detail/components/DetailSwiper.vue b/pages/product-detail/components/DetailSwiper.vue
index 659547b..761e21f 100644
--- a/pages/product-detail/components/DetailSwiper.vue
+++ b/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 */
-  height: 16rpx; /* 8px */
+  width: 32rpx;
+  height: 16rpx;
   background: #ff6800;
 }
 </style>
diff --git a/pages/product-detail/components/PackagingSpec.vue b/pages/product-detail/components/PackagingSpec.vue
index 1056bc9..274b265 100644
--- a/pages/product-detail/components/PackagingSpec.vue
+++ b/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;
diff --git a/pages/product-detail/components/SizeChart.vue b/pages/product-detail/components/SizeChart.vue
index 6e81c6c..8b4a1fe 100644
--- a/pages/product-detail/components/SizeChart.vue
+++ b/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;
diff --git a/pages/product-detail/product-detail.vue b/pages/product-detail/product-detail.vue
index b967ead..cacde54 100644
--- a/pages/product-detail/product-detail.vue
+++ b/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)