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 @@
}
.yiyequan_card {
background: rgba(255, 255, 255, 0.5);
height: 452rpx;
border-radius: 24rpx;
padding-left: 30rpx;
padding-right: 30rpx;
background: rgba(255, 255, 255, 0.3);
height: 472rpx;
border-radius: 30rpx;
padding-left: 24rpx;
padding-right: 24rpx;
margin-top: 36rpx;
margin-left: 32rpx;
margin-right: 32rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
.yiyequan_card_header {
......@@ -884,10 +886,110 @@
.benefits_list {
width: 100%;
white-space: nowrap;
height: 360rpx;
.benefits_container {
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 {
......@@ -896,14 +998,13 @@
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
border-radius: 16rpx;
padding: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
// padding: 20rpx;
// box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
.benefit_image {
width: 120rpx;
height: 120rpx;
width: 192rpx;
height: 192rpx;
background: #F5F5F5;
border-radius: 12rpx;
margin-bottom: 16rpx;
......@@ -918,8 +1019,7 @@
.benefit_name {
font-size: 24rpx;
color: #333333;
text-align: center;
margin-bottom: 8rpx;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -927,8 +1027,10 @@
}
.benefit_points {
text-align: left;
font-size: 22rpx;
color: #333333;
width: 100%;
margin-bottom: 16rpx;
}
......
views/Integral.vue
View file @ e7af6a61
......@@ -355,7 +355,7 @@
<!-- 权益列表 -->
<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
class="benefit_item"
v-for="(benefit, index) in benefitList"
......@@ -370,16 +370,35 @@
/>
</view>
<!-- 权益名称 -->
<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 class="benefit_content" v-if="benefitList.length === 1">
<!-- 权益名称 -->
<text class="benefit_name">{{ benefit.name }}</text>
<!-- 积分价格容器 -->
<view class="benefit_points_container">
<text class="benefit_points">{{ benefit.points }}积分</text>
</view>
<!-- 兑换按钮 -->
<view class="exchange_button" @click="handleExchangeClick(benefit, index)">
<text class="exchange_text">兑换</text>
</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>
</scroll-view>
......@@ -1537,30 +1556,31 @@ const gongzhonghaoDescription = ref('长按关注星妈会公众号,了解更多
const gongzhonghaoQrCodeUrl = ref('https://course.feihe.com/momclub-picture/homepage/qrcode_gzh.png');
// 异业券权益相关数据
const availableBenefits = ref(3); // 可兑换权益数量
const availableBenefits = ref(1); // 可兑换权益数量
const benefitList = ref([
{
id: 1,
name: '权益名称文案占位...',
name: '商品名称商品名称称商品名品名品名品名品...',
points: 100,
originalPoints: 500,
image: ''
},
{
id: 2,
name: '权益名称文案占位...',
points: 150,
},{
id: 1,
name: '商品名称商品名称称商品名品名品名品名品...',
points: 100,
originalPoints: 500,
image: ''
},
{
id: 3,
name: '权益名称文案占位...',
points: 200,
},{
id: 1,
name: '商品名称商品名称称商品名品名品名品名品...',
points: 100,
originalPoints: 500,
image: ''
},
{
id: 4,
name: '权益名称文案占位...',
points: 250,
},{
id: 1,
name: '商品名称商品名称称商品名品名品名品名品...',
points: 100,
originalPoints: 500,
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