Fix：5038 【商城小程序】配置多个体验项目时，应整体轮播显示

pkg_product/views/experienceProjectDetail.vue

@@ -83,24 +83,37 @@
         </view>
         <view class="section">
           <view class="section-title">体验项目</view>
-          <view class="experience-card" v-for="(item, index) in projectList" :key="index">
+          <swiper
-            <image
+            v-if="projectList.length > 0"
-              v-if="item.projectImage"
+            class="experience-swiper"
-              :src="item.projectImage"
+            circular
-              class="experience-image"
+            :autoplay="true"
-              mode="aspectFill"
+            :interval="3000"
-            />
+            :indicator-dots="false"
-            <view class="experience-info">
+            indicator-color="rgba(255, 255, 255, .4)"
-              <view class="experience-title-wrap">
+            indicator-active-color="#ffffff"
-                <view class="experience-title">
+          >
-                  {{ item.themeName || item.projectName }}
+            <swiper-item v-for="(item, index) in projectList" :key="index">
+              <view class="experience-card">
+                <image
+                  v-if="item.projectImage"
+                  :src="item.projectImage"
+                  class="experience-image"
+                  mode="widthFix|heightFix"
+                />
+                <view class="experience-info">
+                  <view class="experience-title-wrap">
+                    <view class="experience-title">
+                      {{ item.themeName || item.projectName }}
+                    </view>
+                  </view>
+                  <view class="experience-subtitle">
+                    {{ item.projectIntro || item.detail }}
+                  </view>
                 </view>
               </view>
-              <view class="experience-subtitle">
+            </swiper-item>
-                {{ item.projectIntro || item.detail }}
+          </swiper>
-              </view>
-            </view>
-          </view>
         </view>
 
         <view class="section" v-if="project.detailText || project.remark">
@@ -533,6 +546,11 @@ export default {
   box-shadow: 0 8rpx 24rpx rgba(197, 39, 51, 0.15);
   margin-bottom: 24rpx;
 }
+.experience-swiper {
+  margin-top: 16rpx;
+  width: 100%;
+  height: 520rpx;
+}
 .experience-image {
   width: 100%;
   height: 360rpx;