Feat:旅居团购产品详情
This commit is contained in:
@@ -75,6 +75,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 套餐详情(模拟) -->
|
||||
<view class="v12-px-3 v12-mt-3" v-if="detail.packageDetails && detail.packageDetails.length > 0">
|
||||
@@ -115,7 +116,30 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="v12-mt-3 v12-px-3" v-if="detail.experienceCouponRule">
|
||||
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3 experience-card">
|
||||
<view class="v12-mt-2 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
|
||||
<text class="v12-mr-1">{{ detail.experienceCouponRule.ruleTitle1 }}</text>
|
||||
</view>
|
||||
<view class="v12-mt-2">
|
||||
<view class="grid-txt v12-justify-between v12-align-center">
|
||||
<view class="v12-px-2 v12-py-1"><u-icon :name="webUrl + '/icon/gift.png'" size="18"></u-icon></view>
|
||||
<text class="v12-px-2 v12-py-1 v12-white v12-radius-100">{{ detail.experienceCouponRule.ruleSubTitle1 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-mt-3 image-grid">
|
||||
<view class="image-item" v-for="(img, idx) in detail.experienceCouponRule.ruleImages" :key="idx">
|
||||
<image :src="img" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-mt-3 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
|
||||
<text class="v12-mr-1">{{ detail.experienceCouponRule.ruleTitle2 }}</text>
|
||||
</view>
|
||||
<view class="v12-mt-2 v12-font-26">
|
||||
<rich-text :nodes="detail.experienceCouponRule.ruleContent"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-px-3 v12-mt-3">
|
||||
<view class="section v12-radius-60 v12-white v12-px-3 v12-pt-3">
|
||||
<view class="v12-mt-2 v12-pl-2 v12-font-bold v12-font-36 v12-align-center title-wrap">
|
||||
@@ -566,6 +590,34 @@ export default {
|
||||
height: 34rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
.experience-card .benefit-chip{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: #FADE9F;
|
||||
border: 1rpx solid #FADE9F;
|
||||
color: #333;
|
||||
border-radius: 100rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.experience-card .image-grid{
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 8rpx;
|
||||
}
|
||||
.experience-card .image-item{
|
||||
flex: 0 0 auto;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.experience-card .image-item image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page-scroll { height: calc(100vh - 120rpx); }
|
||||
.hero-swiper {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user