Skip to content

飞
飞鹤小程序
Commit e7af6a61 authored by 王炽's avatar 王炽
Browse files
Options

66666

parent ec720591
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 40 deletions
views/Integral.less
View file @ e7af6a61
...@@ -854,12 +854,14 @@ ...@@ -854,12 +854,14 @@
} }
.yiyequan_card { .yiyequan_card {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.3);
height: 452rpx; height: 472rpx;
border-radius: 24rpx; border-radius: 30rpx;
padding-left: 30rpx; padding-left: 24rpx;
padding-right: 30rpx; padding-right: 24rpx;
margin-top: 36rpx; margin-top: 36rpx;
margin-left: 32rpx;
margin-right: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
.yiyequan_card_header { .yiyequan_card_header {
...@@ -884,10 +886,110 @@ ...@@ -884,10 +886,110 @@
.benefits_list { .benefits_list {
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
height: 360rpx;
.benefits_container { .benefits_container {
display: flex; display: flex;
gap: 20rpx; gap: 12rpx;
margin-top: 0;
// 当商品数量小于等于2时，调整gap并居中
&.few-items {
gap: 66rpx;
justify-content: center;
margin-top: 0;
}
// 单个商品时的横向布局
&.single-item {
margin-top: 40rpx;
.benefit_item {
width: 610rpx;
height: 260rpx;
flex-direction: row;
align-items: center;
// background: #FFFFFF;
border-radius: 20rpx;
// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
padding: 20rpx 0rpx 20rpx 0;
box-sizing: border-box;
.benefit_image {
width: 260rpx;
height: 260rpx;
background: #F5F5F5;
border-radius: 12rpx;
margin-bottom: 0;
margin-right: 40rpx;
flex-shrink: 0;
overflow: hidden;
.benefit_img {
width: 100%;
height: 100%;
}
}
.benefit_content {
position: relative;
width: 100%;
height: 100%;
padding: 20rpx 0;
.benefit_name {
position: absolute;
top: 20rpx;
left: 0;
right: 0;
text-align: left;
font-size: 28rpx;
// line-height: 1.4;
white-space: normal;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
color: #333333;
font-weight: normal;
height: 80rpx;
}
.benefit_points_container {
position: absolute;
top: 100rpx;
left: 0;
right: 0;
height: 40rpx;
line-height: 40rpx;
.benefit_points {
display: inline-block;
margin-top: 17rpx;
font-size: 32rpx;
color: #D3A458;
}
}
.exchange_button {
position: absolute;
bottom: 20rpx;
width: 250rpx;
height: 62rpx;
background: linear-gradient(90deg, #D3A458 0%, #B8941F 100%);
border-radius: 30rpx;
text-align: center;
line-height: 62rpx;
.exchange_text {
font-size: 24rpx;
color: #FFFFFF;
font-weight: 500;
}
}
}
}
}
} }
.benefit_item { .benefit_item {
...@@ -896,14 +998,13 @@ ...@@ -896,14 +998,13 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #FFFFFF;
border-radius: 16rpx; border-radius: 16rpx;
padding: 20rpx; // padding: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.benefit_image { .benefit_image {
width: 120rpx; width: 192rpx;
height: 120rpx; height: 192rpx;
background: #F5F5F5; background: #F5F5F5;
border-radius: 12rpx; border-radius: 12rpx;
margin-bottom: 16rpx; margin-bottom: 16rpx;
...@@ -918,8 +1019,7 @@ ...@@ -918,8 +1019,7 @@
.benefit_name { .benefit_name {
font-size: 24rpx; font-size: 24rpx;
color: #333333; color: #333333;
text-align: center; text-align: left;
margin-bottom: 8rpx;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -927,8 +1027,10 @@ ...@@ -927,8 +1027,10 @@
} }
.benefit_points { .benefit_points {
text-align: left;
font-size: 22rpx; font-size: 22rpx;
color: #333333; color: #333333;
width: 100%;
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
......
views/Integral.vue
View file @ e7af6a61
...@@ -355,7 +355,7 @@ ...@@ -355,7 +355,7 @@
<!-- 权益列表 --> <!-- 权益列表 -->
<scroll-view class="benefits_list" scroll-x="true" show-scrollbar="false"> <scroll-view class="benefits_list" scroll-x="true" show-scrollbar="false">
<view class="benefits_container"> <view class="benefits_container" :class="{ 'few-items': benefitList.length <= 2, 'single-item': benefitList.length === 1 }">
<view <view
class="benefit_item" class="benefit_item"
v-for="(benefit, index) in benefitList" v-for="(benefit, index) in benefitList"
...@@ -370,16 +370,35 @@ ...@@ -370,16 +370,35 @@
/> />
</view> </view>
<!-- 权益名称 --> <!-- 单个商品时的内容区域 -->
<text class="benefit_name">{{ benefit.name }}</text> <view class="benefit_content" v-if="benefitList.length === 1">
<!-- 权益名称 -->
<!-- 积分价格 --> <text class="benefit_name">{{ benefit.name }}</text>
<text class="benefit_points">{{ benefit.points }}积分</text>
<!-- 积分价格容器 -->
<!-- 兑换按钮 --> <view class="benefit_points_container">
<view class="exchange_button" @click="handleExchangeClick(benefit, index)"> <text class="benefit_points">{{ benefit.points }}积分</text>
<text class="exchange_text">兑换</text> </view>
<!-- 兑换按钮 -->
<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
<text class="exchange_text">兑换</text>
</view>
</view> </view>
<!-- 多个商品时的内容区域 -->
<template v-else>
<!-- 权益名称 -->
<text class="benefit_name">{{ benefit.name }}</text>
<!-- 积分价格 -->
<text class="benefit_points">{{ benefit.points }}积分</text>
<!-- 兑换按钮 -->
<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
<text class="exchange_text">兑换</text>
</view>
</template>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
...@@ -1537,30 +1556,31 @@ const gongzhonghaoDescription = ref('长按关注星妈会公众号,了解更多 ...@@ -1537,30 +1556,31 @@ const gongzhonghaoDescription = ref('长按关注星妈会公众号,了解更多
const gongzhonghaoQrCodeUrl = ref('https://course.feihe.com/momclub-picture/homepage/qrcode_gzh.png'); const gongzhonghaoQrCodeUrl = ref('https://course.feihe.com/momclub-picture/homepage/qrcode_gzh.png');
// 异业券权益相关数据 // 异业券权益相关数据
const availableBenefits = ref(3); // 可兑换权益数量 const availableBenefits = ref(1); // 可兑换权益数量
const benefitList = ref([ const benefitList = ref([
{ {
id: 1, id: 1,
name: '权益名称文案占位...', name: '商品名称商品名称称商品名品名品名品名品...',
points: 100, points: 100,
originalPoints: 500,
image: '' image: ''
}, },{
{ id: 1,
id: 2, name: '商品名称商品名称称商品名品名品名品名品...',
name: '权益名称文案占位...', points: 100,
points: 150, originalPoints: 500,
image: '' image: ''
}, },{
{ id: 1,
id: 3, name: '商品名称商品名称称商品名品名品名品名品...',
name: '权益名称文案占位...', points: 100,
points: 200, originalPoints: 500,
image: '' image: ''
}, },{
{ id: 1,
id: 4, name: '商品名称商品名称称商品名品名品名品名品...',
name: '权益名称文案占位...', points: 100,
points: 250, originalPoints: 500,
image: '' image: ''
} }
]); ]);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment