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

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>