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

This commit is contained in:
LinCyJang
2026-03-30 21:03:45 +08:00
parent 9234581c6e
commit 24796348cc
+34 -16
View File
@@ -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">
<image
v-if="item.projectImage"
:src="item.projectImage"
class="experience-image"
mode="aspectFill"
/>
<view class="experience-info">
<view class="experience-title-wrap">
<view class="experience-title">
{{ item.themeName || item.projectName }}
<swiper
v-if="projectList.length > 0"
class="experience-swiper"
circular
:autoplay="true"
:interval="3000"
:indicator-dots="false"
indicator-color="rgba(255, 255, 255, .4)"
indicator-active-color="#ffffff"
>
<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">
{{ item.projectIntro || item.detail }}
</view>
</view>
</view>
</swiper-item>
</swiper>
</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;