|
|
|
@ -1,444 +1,391 @@ |
|
|
|
<!-- 会员中心页面 --> |
|
|
|
<template> |
|
|
|
<view class="member-center"> |
|
|
|
<view class="page"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" |
|
|
|
bgColor="#000" color="#fff" /> |
|
|
|
|
|
|
|
<!-- 会员卡片 --> |
|
|
|
<!-- <swiper class="swiper" |
|
|
|
circular |
|
|
|
:indicator-dots="indicatorDots" |
|
|
|
:autoplay="autoplay" |
|
|
|
:interval="interval" |
|
|
|
:duration="duration" :current="current" style="height: 380rpx;"> |
|
|
|
<swiper-item v-for="(item,index) in list" :key="item.id"> |
|
|
|
<view class="member-item"> |
|
|
|
<image :src="item.headImage" mode="widthFix" class="member-image"></image> |
|
|
|
<view class="member-info"> |
|
|
|
<view class="profile-photo"> |
|
|
|
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"> |
|
|
|
</image> |
|
|
|
<view class="open-status"> |
|
|
|
{{ index + 1 == userInfo.role ? '已开通' : '暂未开通'}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="open"> |
|
|
|
累计消费满{{ item.money }}元自动开通 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> --> |
|
|
|
|
|
|
|
<view class="" |
|
|
|
style="width: 100%;height: 150rpx;position: absolute;z-index: -1;background-color: #000;"> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-swiper |
|
|
|
:list="list" |
|
|
|
previousMargin="60rpx" |
|
|
|
nextMargin="60rpx" |
|
|
|
circular |
|
|
|
:autoplay="false" |
|
|
|
radius="20rpx" |
|
|
|
indicator |
|
|
|
height="290rpx" |
|
|
|
bgColor="transparent" |
|
|
|
keyName="headImage"></uv-swiper> |
|
|
|
|
|
|
|
<!-- <esc-swiper ref="swiper" :autoplay="true" :circular="true" :current.sync="current" :size="list.length" |
|
|
|
:plus="2" :width="750" :height="290" :itemWidth="600" :space="30"> |
|
|
|
<esc-swiper-item class="member-item" v-for="(item, idx) in list" :index="idx" :key="item.id"> |
|
|
|
<view class="item" style="width: 100%;height: 100%;"> |
|
|
|
<image :src="item.headImage" mode="widthFix" class="member-image"></image> |
|
|
|
<view class="member-info"> |
|
|
|
<view class="profile-photo"> |
|
|
|
<image :src="userInfo.headImage" mode="aspectFill" class="pro-img"> |
|
|
|
</image> |
|
|
|
<view class="open-status"> |
|
|
|
暂未开通 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="open"> |
|
|
|
累计消费满{{ item.money }}元自动开通 |
|
|
|
</view> |
|
|
|
<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" color="#fff" /> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view class="flex user"> |
|
|
|
<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image> |
|
|
|
<view class="user-info"> |
|
|
|
<view class="flex user-name"> |
|
|
|
<text>{{ userInfo.nickName }}</text> |
|
|
|
<template v-if="role === 'member-personal'"> |
|
|
|
<image class="icon icon-role" src="@/static/image/center/icon-member-personal.png" mode="widthFix"></image> |
|
|
|
</template> |
|
|
|
<template v-else-if="role === 'member-business'"> |
|
|
|
<image class="icon icon-role" src="@/static/image/center/icon-member-business.png" mode="widthFix"></image> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</esc-swiper-item> |
|
|
|
</esc-swiper> --> |
|
|
|
|
|
|
|
<!-- 充值套餐 --> |
|
|
|
<!-- <view class="top-up-package"> |
|
|
|
<view class="title"> |
|
|
|
充值套餐 |
|
|
|
</view> |
|
|
|
<view class="set-meal-list"> |
|
|
|
<view v-for="item in cardList" :key="item.id" |
|
|
|
:class="{'active-set-meal-item' : item.id == userInfo.role }" |
|
|
|
class="set-meal-item"> |
|
|
|
<view class="card-tag"> |
|
|
|
限时折扣 |
|
|
|
</view> |
|
|
|
<view class="card-title">{{ item.title }}</view> |
|
|
|
<view class="money"> |
|
|
|
<text class="unit">￥</text>{{ item.money }} |
|
|
|
<view class="user-desc"> |
|
|
|
<template v-if="role"> |
|
|
|
<!-- todo: 换回接口字段 --> |
|
|
|
<text>{{ `将于${'2026-12-12'} 到期` }}</text> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<text>暂未开通会员</text> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="member-descript"> |
|
|
|
（不同会员等级商品价格不一样，可以设置给与推荐人佣金。） |
|
|
|
<view class="consumption" v-if="!role"> |
|
|
|
<!-- todo: 对接接口 --> |
|
|
|
<progress :current="1000" :total="3800"></progress> |
|
|
|
<text class="consumption-desc">{{ `累积消费达到${3800}元或直接充值即可成为会员` }}</text> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- 会员权益 --> |
|
|
|
<view class="member-equity-title"> |
|
|
|
<image :src="configList.vip_qy_image" mode="widthFix" class="eqyity-img"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="equity-card-list"> |
|
|
|
<view v-for="(item, index) in list" :key="item.id" class="equity-card"> |
|
|
|
<view class="equity-title">累计消费满{{ item.money }}，将获得{{ item.title }}</view> |
|
|
|
<view class="equity-descript-list"> |
|
|
|
<!-- <view class="equity-descript-icon"> |
|
|
|
<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image> |
|
|
|
</view> --> |
|
|
|
<view class="equity-descript-item"> |
|
|
|
<uv-parse :content="item.details"></uv-parse> |
|
|
|
</view> |
|
|
|
<view class="charge"> |
|
|
|
<view class="charge-header"> |
|
|
|
<view class="flex charge-header-title">充值会员</view> |
|
|
|
<view class="charge-header-mask"></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="equity-card-list"> |
|
|
|
<view v-for="(item,index) in equityList" :key="item.id" class="equity-card"> |
|
|
|
<view class="equity-title">{{ item.title }}</view> |
|
|
|
<view class="equity-descript-list"> |
|
|
|
<view class="equity-descript-icon"> |
|
|
|
<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image> |
|
|
|
<view class="charge-content"> |
|
|
|
<view class="flex charge-selection"> |
|
|
|
<view class="flex charge-option" |
|
|
|
v-for="item in chargeOptions" |
|
|
|
:key="item.id" |
|
|
|
:class="[selectedChargeId === item.id ? 'is-active' : '']" |
|
|
|
@click="onSelectCharge(item.id)" |
|
|
|
> |
|
|
|
<view class="charge-option-value"> |
|
|
|
<text class="charge-option-unit">¥</text> |
|
|
|
<text>{{ item.value }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-for="(litem,lindex) in item.list" :key="lindex" class="equity-descript-item"> |
|
|
|
<view class="num"> |
|
|
|
{{ lindex + 1 }} |
|
|
|
<view class="charge-rights"> |
|
|
|
<view class="flex charge-rights-header"> |
|
|
|
<image class="title" src="../static/memberCenter/title-rights.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view class="content"> |
|
|
|
{{ litem }} |
|
|
|
<view class="charge-rights-content"> |
|
|
|
<view class="charge-rights-item" |
|
|
|
v-for="(item, index) in rights" |
|
|
|
:key="item" |
|
|
|
> |
|
|
|
{{ `${index+1}、${item}` }} |
|
|
|
</view> |
|
|
|
<image class="icon" src="../static/memberCenter/icon-rights.png" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex bar"> |
|
|
|
<view class="flex count"> |
|
|
|
<text>合计：</text> |
|
|
|
<view class="price"> |
|
|
|
<text class="price-unit">¥</text> |
|
|
|
<!-- todo: check --> |
|
|
|
<text>{{ totalPrice }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="btn btn-pay" @click="submit"> |
|
|
|
开通会员 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
import progress from '../components/progress.vue' |
|
|
|
|
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "MemberCenter", |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
progress, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
cardList: [{ |
|
|
|
id: 1, |
|
|
|
title: "金卡", |
|
|
|
money: "39" |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
title: "银卡", |
|
|
|
money: "29" |
|
|
|
}, |
|
|
|
role: 'member-business', // member-personal | member-business | merchant |
|
|
|
// todo: fetch |
|
|
|
chargeOptions: [ |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
title: "钻石卡", |
|
|
|
money: "99" |
|
|
|
} |
|
|
|
], |
|
|
|
equityList: [{ |
|
|
|
id: 1, |
|
|
|
title: "权益1·专属推广码", |
|
|
|
icon: "/pages_order/static/memberCenter/descript1.png", |
|
|
|
list: [ |
|
|
|
"购买会员卡或者购物金额满500元！有专属推广码。", |
|
|
|
"显示直推，间推人员信息及下单佣金明细。" |
|
|
|
id: '001', |
|
|
|
value: 800, |
|
|
|
rights: [ |
|
|
|
'会员享受专属折扣和优惠活动', |
|
|
|
'会员积分累积与抵扣功能', |
|
|
|
'成为会员后，得到平台发放的代金券', |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
title: "权益2·直推奖励", |
|
|
|
icon: "/pages_order/static/memberCenter/descript2.png", |
|
|
|
list: [ |
|
|
|
"通过扫专属推广码进来的用户下单，享受30%的直推奖励！（比例可调）", |
|
|
|
"显示直推，间推人员信息及下单佣金明细。" |
|
|
|
id: '002', |
|
|
|
value: 1800, |
|
|
|
rights: [ |
|
|
|
'会员享受专属折扣和优惠活动', |
|
|
|
'会员积分累积与抵扣功能', |
|
|
|
'成为会员后，得到平台发放的代金券', |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
title: "权益3·间推奖励", |
|
|
|
icon: "/pages_order/static/memberCenter/descript1.png", |
|
|
|
list: [ |
|
|
|
"下级发展的用户下单，享受20%的间推奖励！（比例可调）", |
|
|
|
id: '003', |
|
|
|
value: 2800, |
|
|
|
rights: [ |
|
|
|
'会员享受专属折扣和优惠活动', |
|
|
|
'会员积分累积与抵扣功能', |
|
|
|
'成为会员后，得到平台发放的代金券', |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
title: "权益4·会员等级奖励", |
|
|
|
icon: "/pages_order/static/memberCenter/descript2.png", |
|
|
|
list: [ |
|
|
|
"银，金，钻不同会员等级，同一个商品分佣比例不一样，等级越高，佣金比例越高！" |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
mixinsListApi: "getRiceVipList", |
|
|
|
current: 0 |
|
|
|
selectedChargeId: '001' |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['userInfo']) |
|
|
|
...mapState(['userInfo']), |
|
|
|
selectedChargeObj() { |
|
|
|
return this.chargeOptions.find(item => item.id === this.selectedChargeId) |
|
|
|
}, |
|
|
|
rights() { |
|
|
|
return this.selectedChargeObj?.rights || [] |
|
|
|
}, |
|
|
|
totalPrice() { |
|
|
|
return this.selectedChargeObj?.value || 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onSelectCharge(id) { |
|
|
|
// todo |
|
|
|
this.selectedChargeId = id |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
// todo: check jump to create order ? |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.member-center { |
|
|
|
<style scoped lang="scss"> |
|
|
|
$bar-height: 132rpx; |
|
|
|
|
|
|
|
.page { |
|
|
|
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom)); |
|
|
|
background-color: $uni-fg-color; |
|
|
|
min-height: 100vh; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
padding-bottom: 413rpx; |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
position: absolute; |
|
|
|
top: 175rpx; |
|
|
|
width: 100vw; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
//会员卡片 |
|
|
|
.member-image { |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
.user { |
|
|
|
align-items: flex-start; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 22rpx; |
|
|
|
margin: 0 18rpx; |
|
|
|
|
|
|
|
&-avatar { |
|
|
|
width: 147rpx; |
|
|
|
height: 147rpx; |
|
|
|
margin-right: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.member-info { |
|
|
|
position: absolute; |
|
|
|
bottom: 40rpx; |
|
|
|
left: 0rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0rpx 40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 100%; |
|
|
|
&-info { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.profile-photo { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
&-name { |
|
|
|
font-size: 32rpx; |
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
|
|
.pro-img { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
.icon { |
|
|
|
height: auto; |
|
|
|
|
|
|
|
.open-status { |
|
|
|
color: #F8A95F; |
|
|
|
border: 1px solid #F8A95F; |
|
|
|
border-radius: 30rpx; |
|
|
|
padding: 7rpx 20rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
&-role { |
|
|
|
width: 138rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.open { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background: #F8A95F; |
|
|
|
color: white; |
|
|
|
border-radius: 30rpx; |
|
|
|
padding: 7rpx 20rpx; |
|
|
|
} |
|
|
|
&-desc { |
|
|
|
margin-top: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.consumption { |
|
|
|
margin: 0 28rpx; |
|
|
|
|
|
|
|
&-desc { |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 22rpx; |
|
|
|
margin-top: 1rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 充值套餐 |
|
|
|
.top-up-package { |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
.charge { |
|
|
|
background-color: $uni-fg-color; |
|
|
|
border-top-left-radius: 18rpx; |
|
|
|
border-top-right-radius: 18rpx; |
|
|
|
margin-top: 45rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 30rpx; |
|
|
|
} |
|
|
|
&-header { |
|
|
|
$header-height: 90rpx; |
|
|
|
|
|
|
|
.set-meal-list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
.set-meal-item { |
|
|
|
position: relative; |
|
|
|
width: 30%; |
|
|
|
margin-right: calc(9% / 2); |
|
|
|
border-radius: 10rpx; |
|
|
|
overflow: hidden; |
|
|
|
box-sizing: border-box; |
|
|
|
background: white; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
padding: 40rpx; |
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
margin-right: 0rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.card-tag { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
background: #FF9633; |
|
|
|
border-bottom-right-radius: 10rpx; |
|
|
|
color: white; |
|
|
|
padding: 5rpx 10rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.card-title { |
|
|
|
text-align: center; |
|
|
|
font-size: 38rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.money { |
|
|
|
color: #FF9633; |
|
|
|
font-size: 30rpx; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.unit {} |
|
|
|
} |
|
|
|
} |
|
|
|
height: $header-height; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.active-set-meal-item { |
|
|
|
border: 2rpx solid #FF9633; |
|
|
|
background: #FFF5EB; |
|
|
|
} |
|
|
|
&-title { |
|
|
|
width: calc(50% + 25rpx); |
|
|
|
height: 100%; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 28rpx; |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
box-sizing: border-box; |
|
|
|
border-top-left-radius: 18rpx; |
|
|
|
border-bottom-right-radius: 90rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.member-descript { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #333333; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
&-mask { |
|
|
|
$marsk-width: 50rpx; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 50%; |
|
|
|
transform: translateX(25rpx); |
|
|
|
// height: 100%; |
|
|
|
// width: 70rpx; |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-top: calc(#{$header-height}/2) solid transparent; |
|
|
|
border-left: calc(#{$marsk-width}/2) solid transparent; |
|
|
|
border-bottom: calc(#{$header-height}/2) solid $uni-fg-color; |
|
|
|
border-right: calc(#{$marsk-width}/2) solid $uni-fg-color; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 会员权益 |
|
|
|
.member-equity-title { |
|
|
|
margin: 30rpx 0rpx; |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
&-content { |
|
|
|
padding: 57rpx 14rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-selection { |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&-option { |
|
|
|
width: 230rpx; |
|
|
|
height: 248rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #F5F5F5; |
|
|
|
border: 3rpx solid #C7C7C7; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx #eef3e3; |
|
|
|
color: #999999; |
|
|
|
|
|
|
|
&-value { |
|
|
|
font-size: 61rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-unit { |
|
|
|
font-size: 34rpx; |
|
|
|
margin-right: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.eqyity-img { |
|
|
|
width: 240rpx; |
|
|
|
&.is-active { |
|
|
|
background-color: rgba($color: #E9FFC3, $alpha: 0.74); |
|
|
|
border-color: $uni-color-light; |
|
|
|
color: #F64041; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.equity-card-list { |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
&-rights { |
|
|
|
margin-top: 67rpx; |
|
|
|
|
|
|
|
.equity-card { |
|
|
|
background: white; |
|
|
|
border-radius: 10rpx; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
&-header { |
|
|
|
.title { |
|
|
|
width: 202rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.equity-title { |
|
|
|
color: #F18F09; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
&-content { |
|
|
|
margin-top: 31rpx; |
|
|
|
background-color: rgba($color: #E2FFAE, $alpha: 0.71); |
|
|
|
border-radius: 16rpx; |
|
|
|
padding: 29rpx 30rpx; |
|
|
|
width: 100%; |
|
|
|
min-height: 500rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.icon { |
|
|
|
position: absolute; |
|
|
|
top: 23rpx; |
|
|
|
right: 11rpx; |
|
|
|
width: 131rpx; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-item { |
|
|
|
margin-top: 26rpx; |
|
|
|
color: $uni-color-light; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 下单 |
|
|
|
.bar { |
|
|
|
position: fixed; |
|
|
|
z-index: 1000; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
width: 100vw; |
|
|
|
height: $bar-height; |
|
|
|
padding-bottom: env(safe-area-inset-bottom); |
|
|
|
background-color: $uni-fg-color; |
|
|
|
|
|
|
|
.count { |
|
|
|
flex: 1; |
|
|
|
color: #000000; |
|
|
|
font-size: 28rpx; |
|
|
|
margin-left: 48rpx; |
|
|
|
|
|
|
|
.equity-descript-list { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.equity-descript-icon { |
|
|
|
.equity-descript-img { |
|
|
|
width: 150rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.equity-descript-item { |
|
|
|
position: relative; |
|
|
|
background: #FDF9EF; |
|
|
|
border-radius: 10rpx; |
|
|
|
border: 1px solid #F7C47B; |
|
|
|
margin: 20rpx 0rpx; |
|
|
|
padding: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
color: #BA7E2B; |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
.num { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
position: absolute; |
|
|
|
top: -15rpx; |
|
|
|
left: -15rpx; |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
border-radius: 50%; |
|
|
|
background: #F18F09; |
|
|
|
border: 2px solid #F8CB8E; |
|
|
|
box-sizing: border-box; |
|
|
|
color: white; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
.price { |
|
|
|
color: #FF2A2A; |
|
|
|
font-size: 30rpx; |
|
|
|
|
|
|
|
&-unit { |
|
|
|
font-size: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// &:nth-child(1) { |
|
|
|
// .equity-descript-list { |
|
|
|
// display: flex; |
|
|
|
// justify-content: space-between; |
|
|
|
// flex-wrap: wrap; |
|
|
|
|
|
|
|
// .equity-descript-icon { |
|
|
|
// position: absolute; |
|
|
|
// bottom: 100%; |
|
|
|
// right: 0rpx; |
|
|
|
// z-index: 200; |
|
|
|
// } |
|
|
|
|
|
|
|
// .equity-descript-item { |
|
|
|
// width: 49%; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// &:nth-child(2) { |
|
|
|
// .equity-descript-icon { |
|
|
|
// position: absolute; |
|
|
|
// bottom: -10%; |
|
|
|
// right: 0rpx; |
|
|
|
// z-index: 200; |
|
|
|
// } |
|
|
|
|
|
|
|
// .equity-descript-item { |
|
|
|
// &:nth-child(3) { |
|
|
|
// width: calc(100% - 160rpx); |
|
|
|
// margin-right: 10rpx; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// &:nth-child(3), |
|
|
|
// &:nth-child(4) { |
|
|
|
// .equity-descript-icon { |
|
|
|
// position: absolute; |
|
|
|
// bottom: 100%; |
|
|
|
// right: 0rpx; |
|
|
|
// z-index: 200; |
|
|
|
// } |
|
|
|
// } |
|
|
|
.btn { |
|
|
|
border: none; |
|
|
|
line-height: 1; |
|
|
|
background-color: transparent; |
|
|
|
padding: 0; |
|
|
|
width: auto; |
|
|
|
height: auto; |
|
|
|
margin: 0; |
|
|
|
|
|
|
|
&-pay { |
|
|
|
margin-right: 41rpx; |
|
|
|
padding: 24rpx 137rpx; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 28rpx; |
|
|
|
border-radius: 44rpx; |
|
|
|
background-image: linear-gradient(to right, #84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
