Fix：4288 【旅居商城小程序】套餐详情页的图片，交互应按效果图改为显示一行，左右轮播

pkg_product/views/groupBuyDetails.vue

@@ -81,11 +81,21 @@
                 <view class="v12-px-2 v12-py-1"><u-icon name="home"></u-icon></view>
                 <view class="v12-px-2 v12-py-1 v12-white v12-radius-100">{{ c.title }}</view>
               </view>
-              <view class="v12-justify-start v12-align-center" style="display: flex; flex-wrap: wrap;">
-                <view v-for="(img, idx) in c.images" :key="idx" class="v12-mr-2 v12-mb-2 v12-align-center" style="width: calc(33.33% - 16rpx);">
-                  <image :src="img" class="grid-img" mode="aspectFill" style="width: 100%; height: 200rpx;" />
-                </view>
-              </view>
+              <swiper 
+                class="package-swiper v12-mt-2" 
+                :indicator-dots="false"
+                circular 
+                next-margin="380rpx"
+                :autoplay="true" 
+                interval="3000" 
+                duration="10000">
+                <swiper-item v-for="(img, idx) in c.images" :key="idx">
+                  <image
+                    :src="img" 
+                    class="swiper-img" 
+                    mode="aspectFill" />
+                </swiper-item>
+              </swiper>
               <view v-if="c.description" class="v12-font-26 v12-mt-2">
                 <rich-text :nodes="c.description"></rich-text>
               </view>
@@ -566,4 +576,120 @@ export default {
 .table-cell:last-child {
   border-right: 0;
 }
+.package-swiper {
+  width: 100%;
+  height: 240rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+
+.swiper-img {
+  width: 240rpx;
+  height: 100%;
+  border-radius: 20rpx;
+}
+.grid-txt { 
+  width: fit-content;
+  font-size: 24rpx;
+  color: #333;
+  border: 1px solid #F9E49D;
+  background: #F9E49D;
+  border-radius: 100rpx;
+  margin-bottom: 12rpx;
+ }
+.bullets { }
+.bullet { display: flex; align-items: flex-start; margin-bottom: 12rpx; }
+.bullet-icon { width: 28rpx; text-align: center; color: #E53935; font-size: 28rpx; line-height: 32rpx; }
+.bullet-txt { flex: 1; font-size: 26rpx; color: #333; }
+.fee-table { margin-top: 12rpx; border: 1rpx solid #eee; border-radius: 12rpx; overflow: hidden; }
+.fee-row { display: flex; }
+.fee-row + .fee-row { border-top: 1rpx solid #f2f2f2; }
+.fee-col { flex: 1; padding: 16rpx; font-size: 26rpx; }
+.fee-head { background: #f8f8f8; font-weight: 600; }
+.name { color: #333; }
+.val { color: #666; text-align: right; }
+.gallery-img { width: 100%; margin-bottom: 16rpx; border-radius: 12rpx; overflow: hidden; }
+.bottom-space { height: 140rpx; }
+.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1rpx solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 16rpx 24rpx; }
+.total { font-size: 28rpx; color: #111; font-weight: 700; }
+.bar-actions { display: flex; gap: 16rpx; }
+.mini-btn { 
+  padding: 10rpx 22rpx; 
+  border: 1rpx solid #ccc; 
+  border-radius: 132rpx; 
+  font-size: 26rpx; 
+  color: #333; 
+  display: flex;
+  align-items: center;
+}
+.buy-btn { 
+  padding: 10rpx 28rpx; 
+  border-radius: 132rpx; 
+  background: #C52733; 
+  color: #fff; 
+  font-size: 26rpx; 
+  display: flex;
+  align-items: center;
+}
+.gift-wrap{
+  position: relative;
+}
+.intro-text{
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 44rpx;
+  letter-spacing: 4rpx;
+}
+.package-item{
+  margin-bottom: 24rpx;
+}
+.date-item{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(240,240,240,0.69);
+  border-radius: 40rpx;
+  font-size: 24rpx;
+  color: #333;
+  height: 160rpx;
+  padding: 0 4rpx;
+  
+  .selected-date {
+    background-color: #E9BABA;
+    font-weight: bold;
+    border-radius: 100rpx;
+  }
+}
+.simple-table {
+  margin-top: 12rpx;
+  border: 1rpx solid #FADE9F;
+  border-radius: 12rpx;
+  overflow: hidden;
+  border-radius: 60rpx 60rpx 0 0;
+}
+.table-row {
+  display: flex;
+  background: #fff;
+  &:first-child {
+    background: #FADE9F;
+    color: #333;
+  }
+}
+.table-row + .table-row {
+  border-top: 1rpx solid #FADE9F;
+}
+.table-cell {
+  flex: 1;
+  padding: 16rpx;
+  font-size: 26rpx;
+  color: #333;
+  border-right: 1rpx solid #FADE9F;
+  text-align: center;
+  font-weight: 500;
+}
+.table-cell:last-child {
+  border-right: 0;
+}
 </style>