锶源昆仑会员+体验官

This commit is contained in:
2023-07-22 19:04:56 +08:00
commit 5a6b3517e6
439 changed files with 20654 additions and 0 deletions

View File

@@ -0,0 +1,82 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
identities : '', //身份信息
userData : '', //用户信息
tabType : 'season', //会员标签
can : '', //操作按钮
buttonText : '', //按钮名字
notRules : '', //权益
couponPrice : '' ,//抵值券
newId : '' //会员id
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取用户信息
this.userInfo();
// 获取身份前置
this.identityInfo();
},
/**
* 用户信息
*/
userInfo() {
wx.$api.user.userIndex().then(res => {
this.setData({
userData: res.data
})
}).catch(err => {})
},
/**
* 身份前置
*/
identityInfo(){
// 3为季卡,4为年卡
let identityId = ''
if(this.data.tabType == 'season') {
identityId = 3
} else {
identityId = 4
}
wx.$api.member.identitySee(identityId).then(res => {
this.setData({
identities : res.data,
couponPrice : res.data.coupon_price,
notRules : res.data.not_rules,
can : res.data.can,
buttonText : res.data.buttonText,
newId : res.data.identity_id
})
}).catch(err => {})
},
/**
* 切换身份
*/
typeClick(e) {
this.setData({
tabType: e.currentTarget.dataset.type
})
// 获取身份前置
this.identityInfo();
}
})

View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "会员权益"
}

View File

@@ -0,0 +1,40 @@
<image class="member-back" src="{{tabType == 'season' ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/member_back.png' : 'http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_back.png'}}" mode="aspectFill"></image>
<view class="tab {{tabType == 'year' ? 'active' : ''}}">
<view class="tab-item {{tabType == 'season' ? 'active' : ''}}" bindtap="typeClick" data-type="season">季卡会员</view>
<view class="tab-item {{tabType == 'year' ? 'active' : ''}}" bindtap="typeClick" data-type="year">年卡会员</view>
</view>
<view class="rights">
<view class="member-cont">
<block wx:if="{{tabType == 'season'}}">
<image class="member-title" src="{{couponPrice ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/quarterMember_title.png' : 'http://api.siyuankunlun.com/storage/materials/2022/08/30/quarterMember_price.png'}}" mode="widthFix"></image>
<image wx:if="{{couponPrice}}" class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_cost.png" mode="widthFix"></image>
</block>
<block wx:else>
<image class="member-title" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_title.png" mode="widthFix"></image>
<image class="member-error" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/yearMember_cost.png" mode="widthFix"></image>
</block>
</view>
<view class="member-btn">
<image class="member-btn-img" src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_Btn.png" mode="widthFix"></image>
<navigator hover-class="none" url="../open/index?identity_id={{newId}}" class="member-btn-text" wx:if="{{can.open}}" >点击开通会员</navigator>
<block wx:else>
<navigator hover-class="none" url="../open/index?identity_id={{newId}}" class="member-btn-text" wx:if="{{can.renew}}">
立即续费
</navigator>
<view class="member-btn-text active" wx:else>
{{buttonText}}
</view>
</block>
<view class="member-btn-tips" wx:if="{{tabType == 'season'}}">
<block wx:if="{{couponPrice}}">
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
您有一张抵值券可抵¥8640元
</block>
</view>
<view class="member-btn-tips" wx:else>
<image src="http://api.siyuankunlun.com/storage/materials/2022/08/30/member_choose.png" mode="aspectFill"></image>
开通年度会员享受5.25折
</view>
</view>
</view>

View File

@@ -0,0 +1,127 @@
.tab {
position: fixed;
left: 0;
top: 0;
z-index: 99;
width: 100%;
display: flex;
padding: 0 30rpx;
box-sizing: border-box;
height: 90rpx;
background-color: #2b0a58;
font-weight: 600;
border-bottom: 2rpx solid #402663;
}
.tab.active {
background-color: #a92021;
border-bottom: 2rpx solid #bd3335;
}
.tab-item {
height: 90rpx;
flex: 2;
text-align: center;
line-height: 90rpx;
color: #efb480;
position: relative;
}
.tab-item::after {
position: absolute;
content: '';
left: calc(50% - 40rpx);
bottom: 0;
width: 80rpx;
height: 6rpx;
background-color: #efb480;
border-radius: 30rpx;
display: none;
}
.tab-item.active::after {
display: block;
}
.member-back {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
text-align: center;
}
.rights {
position: relative;
width: 100%;
}
.member-cont {
padding: 140rpx 30rpx 30rpx;
box-sizing: border-box;
text-align: center;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: calc(70vh + 120rpx);
}
.member-title {
width: 100%;
margin: 0 auto;
}
.member-error {
width: 40%;
margin-top: -30rpx;
}
.member-btn {
position: absolute;
z-index: 1;
top: calc(30vh + 80rpx);
left: 0;
width: 100%;
text-align: center;
}
.member-btn-img {
width: 100%;
}
.member-btn-text {
position: absolute;
width: 100%;
z-index: 200;
color: #fff;
bottom: 42rpx;
color: #a21a1e;
left: 0;
font-size: 38rpx;
}
.member-btn-text.active {
color: #000;
}
.member-btn-tips {
position: absolute;
text-align: center;
width: 100%;
z-index: 2;
color: #fff;
color: #f1c39a;
font-size: 26rpx;
bottom: -40rpx;
line-height: 34rpx;
}
.member-btn-tips image {
width: 30rpx;
height: 30rpx;
vertical-align: -4rpx;
display: inline-block;
margin-right: 10rpx;
}

View File

@@ -0,0 +1,53 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
orderId: '', //身份id
rights : [], //权益
rules : [],
newId: '',
identities: '',
identityId: '',
can: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 获取身份前置
this.identityInfo(options.orderid);
this.setData({
orderId: options.orderid
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {},
/**
* 身份前置
*/
identityInfo(orderId){
wx.$api.member.identitySee(orderId).then(res => {
this.setData({
identities : res.data,
rules : res.data.rules,
couponPrice : res.data.coupon_price,
rights : res.data.rights,
newId : res.data.identity_id,
can : res.data.can,
buttonText : res.data.buttonText
})
}).catch(err => {})
}
})

View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "会员权益"
}

View File

@@ -0,0 +1,58 @@
<view class="tab">
<view class="tab-item active" wx:if="{{orderId == 5}}">创始会员</view>
<view class="tab-item active" wx:if="{{orderId == 6}}">合伙人</view>
</view>
<view class="rights">
<view class="card">
<image class="cardBack" src="{{orderId == 5 ? 'http://api.siyuankunlun.com/storage/materials/2022/08/30/memberBack_3.png':'http://api.siyuankunlun.com/storage/materials/2022/08/30/memberBack_4.png'}}" mode="widthFix"></image>
<view class="cardText">
<view class="card-title">
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/memberOpen_icon.png"></image>{{identities.name}}
</view>
<view class="price">
<view class="price-serial">
{{identities.times.serial}}
</view>
<view class="price-left" wx:if="{{identities.is_open}}">
<view class="price-top">
到期时间:
</view>
<view class="price-times">
{{identities.times.ended_at}}
</view>
</view>
</view>
</view>
</view>
<scroll-view scroll-x class="list" scroll-with-animation>
<view class="list-item" wx:for="{{rules}}" wx:key="rules">
<view class="list-img">
<image src="{{item.cover}}" mode=""></image>
</view>
<view class="list-rights">
{{item.value}}
</view>
<view class="list-name">
{{item.text}}
</view>
<view class="list-tips active" wx:if="{{orderId == 6}}">
现金
</view>
</view>
</scroll-view>
<view class="suggest">
<view class="suggest-cont">
<view class="suggest-title">
{{orderId == 5 ? '创始会员' : '合伙人'}}权益说明
</view>
<view class="suggest-item">
<view class="suggest-label" wx:for="{{rights}}" wx:key="index">
<text>{{index + 1}}</text>
<view class="suggest-text">
{{item.remark}}
</view>
</view>
</view>
</view>
</view>
</view>

View File

@@ -0,0 +1,220 @@
page {
background-image: linear-gradient(to bottom, #383041, #1a1528);
}
.tab {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
height: 100rpx;
line-height: 100rpx;
background-color: #383041;
display: flex;
}
.tab-item {
text-align: center;
flex: 2;
color: #c3c1c5;
font-size: 34rpx;
position: relative;
font-weight: 600;
}
.tab-item::after {
position: absolute;
content: '';
left: calc(50% - 40rpx);
bottom: 0;
background-color: transparent;
width: 80rpx;
height: 6rpx;
border-radius: 50rpx;
}
.tab-item.active {
color: #ffffff;
}
.tab-item.active::after {
background-color: #ffffff;
}
.rights {
position: absolute;
width: 100%;
top: 120rpx;
background-image: linear-gradient(to bottom, #383041, #1a1528);
}
.card {
position: relative;
height: 380rpx;
}
.cardBack {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.cardText {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 3;
padding: 50rpx 60rpx;
box-sizing: border-box;
}
.card-title {
font-weight: 600;
font-size: 44rpx;
color: #4c2616;
display: flex;
}
.card-title image {
width: 46rpx;
height: 46rpx;
margin: 6rpx 10rpx 0 0;
}
.tips {
color: #653925;
margin: 10rpx 0 30rpx;
font-size: 30rpx;
}
.price {
font-size: 30rpx;
color: #653925;
display: flex;
margin-top: 140rpx;
}
.price-left {
text-align: right;
display: flex;
}
.price-serial {
font-weight: 600;
font-size: 36rpx;
flex: 1;
}
.list {
display: flex;
padding: 30rpx 20rpx;
box-sizing: border-box;
white-space: nowrap;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.list-item {
width: 25%;
display: inline-block;
position: relative;
text-align: center;
}
.list-tips {
position: absolute;
top: 0;
left: 60%;
font-size: 24rpx;
background: #f1bd6e;
color: #681e0f;
border-radius: 30rpx;
padding: 0 10rpx;
line-height: 30rpx;
height: 30rpx;
}
.list-tips.active {
background: #f2c2a3;
}
.list-img {
width: 100rpx;
height: 100rpx;
margin: 0 auto;
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
padding: 20rpx;
box-sizing: border-box;
}
.list-img image {
width: 100%;
height: 100%;
}
.list-rights {
color: #ffffff;
margin: 20rpx 0 10rpx;
font-size: 28rpx;
}
.list-name {
color: #8d8a93;
font-size: 26rpx;
}
.suggest {
padding: 20rpx 40rpx;
box-sizing: border-box;
}
.suggest-cont {
border: 2rpx solid #d2bfa9;
border-radius: 40rpx;
padding: 30rpx 40rpx;
box-sizing: border-box;
}
.suggest-title {
color: #e8bb9f;
font-size: 36rpx;
margin-bottom: 30rpx;
}
.suggest-item {
color: #b3a3a3;
font-size: 30rpx;
}
.suggest-label {
display: flex;
margin-bottom: 30rpx;
}
.suggest-label:last-child {
margin-bottom: 0;
}
.suggest-label text {
width: 38rpx;
height: 38rpx;
border-radius: 50%;
border: 2rpx solid #b3a3a3;
text-align: center;
font-size: 26rpx;
display: inline-block;
margin-top: 5rpx;
}
.suggest-text {
width: calc(100% - 50rpx);
padding-left: 20rpx;
line-height: 40rpx;
box-sizing: border-box;
text-align: justify;
}

View File

@@ -0,0 +1,84 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
service : '',
username: '', //用户手机号
price : '', //打款金额
name : '',
card_no : '',
//打款凭证
showpath: '',
path : '',
disabled : false ,// 提交按钮状态
identityId: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
identityId: options.identity_id
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
wx.$api.user.userIndex().then(res => {
this.setData({
username: res.data.username
})
}).catch(err => {})
wx.$api.user.identitiesee(this.data.identityId).then(res => {
this.setData({
service: res.data.identity.service,
price : res.data.identity.price
})
}).catch(err => {})
},
// 上传图片
openImg(){
wx.chooseMedia({
count : 1,
success : path => {
// 上传图片
wx.$api.file.uploadImg(path.tempFiles[0].tempFilePath, {}).then(res=>{
this.setData({
showpath: res.url,
path : res.path
})
})
}
})
},
// 提交表单
issueForm(e) {
let value = e.detail.value;
let data = {
name : value.name,
price : value.price,
cover : this.data.path
}
wx.$api.member.openIndex(this.data.identityId, data).then(res => {
this.setData({
disabled: true
})
wx.switchTab({
url: '/pages/user/index'
})
}).catch(err => {})
}
})

View File

@@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@@ -0,0 +1,40 @@
<form bindsubmit="issueForm" class="take">
<view class="take-label">
<view class="item">
<view class="name">
<image src="/static/icons/takeIcon_08.png" mode="widthFix"></image>收款银行
</view>
<view class="time">{{service.bank}}</view>
</view>
<view class="item">
<view class="name">
<image src="/static/icons/takeIcon_09.png" mode="widthFix"></image>收款银行帐号
</view>
<view class="time">{{service.bank_no}}</view>
</view>
<view class="item">
<view class="name">
<image src="/static/icons/takeIcon_10.png" mode="widthFix"></image>打款金额
</view>
<input class="entry" type="text" value="{{price}}" name="price" placeholder="请输入打款金额" />
</view>
<view class="item">
<view class="name">
<image src="/static/icons/takeIcon_05.png" mode="widthFix"></image>转款账户
</view>
<input class="entry" type="text" name="name" placeholder="请输入转款人账户名" />
</view>
<view class="item">
<view class="name">
<image src="/static/icons/takeIcon_07.png" mode="widthFix"></image>打款凭证
</view>
<view class="issueNew" bindtap="openImg">
<image class="issueNew-icon" src="{{showpath || '/static/imgs/cover_img.png'}}" mode="aspectFill"></image>
<view class="issueNew-text">请上传转款电子回单</view>
</view>
</view>
</view>
<view class="userdata-btn">
<button class="issue-btn" form-type="submit" size="mini" disabled="{{disabled}}">提交审核</button>
</view>
</form>

View File

@@ -0,0 +1,96 @@
page {
background-color: #f4f4f4;
}
.take-label {
padding: 30rpx 30rpx 0;
box-sizing: border-box;
border-bottom: 160rpx solid transparent;
}
.item {
padding:25rpx 20rpx 30rpx;
box-sizing: border-box;
background-color: #FFFFFF;
border-bottom: 2rpx solid #f3f3f3;
font-size: 32rpx;
margin-bottom: 30rpx;
border-radius: 30rpx;
}
.name {
width: 100%;
display: flex;
line-height: 44rpx;
margin-bottom: 20rpx;
}
.name image {
width: 44rpx;
height: 44rpx;
margin-right: 15rpx;
}
.time {
width: 100%;
color: #9d9d99;
}
.entry {
width: 100%;
background-color: #f4f4f4;
font-size: 30rpx;
padding: 0 30rpx;
height: 84rpx;
line-height: 84rpx;
box-sizing: border-box;
border-radius: 10rpx;
color: #9d9d99;
}
.issueNew {
text-align: center;
margin-top: 20rpx;
}
.issueNew-icon {
width: 200rpx;
height: 200rpx;
}
.issueNew-text {
font-size: 28rpx;
color: #9d9d9d;
}
/* 按钮 */
.userdata-btn {
width: 100%;
box-sizing: border-box;
padding: 30rpx;
position: fixed;
bottom: 0;
left: 0;
z-index: 99;
right: 0;
background: white;
}
.issue-btn {
background: #1d37e2;
text-align: center;
color: white;
height: 90rpx;
line-height: 90rpx !important;
font-size: 34rpx;
font-weight: normal;
width: 100% !important;
margin: 0;
padding: 0;
border-radius: 10rpx;
}
.issue-btn[disabled] {
background: #1d37e2 !important;
color: #fff !important;
}

View File

@@ -0,0 +1,70 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
buttonText : '',
couponPrice : '', //抵值券
tabType : 'season', //会员标签
rights : [], //权益
rules : [],
newId: '',
identities : '',
identityId : '',
can : ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取身份前置
this.identityInfo();
},
/**
* 身份前置
*/
identityInfo(){
// 3为季卡,4为年卡
let identityId = ''
if(this.data.tabType == 'season') {
identityId = 3
} else {
identityId = 4
}
wx.$api.member.identitySee(identityId).then(res => {
this.setData({
identities : res.data,
rules : res.data.rules,
couponPrice : res.data.coupon_price,
rights : res.data.rights,
newId : res.data.identity_id,
can : res.data.can,
buttonText : res.data.buttonText
})
}).catch(err => {})
},
/**
* 切换身份
*/
typeClick(e) {
this.setData({
tabType: e.currentTarget.dataset.type
})
// 获取身份前置
this.identityInfo();
}
})

View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "会员权益"
}

View File

@@ -0,0 +1,92 @@
<view class="tab">
<view class="tab-item {{tabType == 'season' ? 'active' : ''}}" bindtap="typeClick" data-type="season">
季卡会员
</view>
<view class="tab-item {{tabType == 'year' ? 'active' : ''}}" bindtap="typeClick" data-type="year">
年卡会员
</view>
</view>
<view class="rights">
<view class="card">
<image class="cardBack" src="{{tabType == 'season' ? 'http://api.siyuankunlun.com/storage/materials/2022/09/14/memberBack_01.png':'http://api.siyuankunlun.com/storage/materials/2022/09/14/memberBack_02.png'}}" mode="widthFix"></image>
<view class="cardText">
<view class="card-title">
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/memberOpen_icon.png"></image>{{identities.name}}
</view>
<view class="price-left" wx:if="{{identities.is_open}}">
<view class="price-serial">
{{identities.times.serial}}
</view>
<view class="price-time">
到期时间: {{identities.times.ended_at}}
</view>
</view>
<view class="price-left" wx:else>
<view class="price-top">
开通{{tabType == 'season' ? '季卡' : '年卡'}}会员金额
</view>
<view class="price-number">
¥{{identities.price}}<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/memberOpen_img.png"></image>
</view>
</view>
</view>
</view>
<scroll-view scroll-x class="list" scroll-with-animation>
<view class="list-item" wx:for="{{rules}}" wx:key="rules">
<view class="list-img">
<image src="{{item.cover}}" mode=""></image>
</view>
<view class="list-rights">
<text wx:if="{{tabType == 'season'}}">{{item.name == 'recommend_coupon' ? '¥' : '+'}}</text>
<text wx:else>{{item.name == 'open_nk' ? '' : '+'}}</text>
{{item.value}}
</view>
<view class="list-name">
{{item.text}}
</view>
<view class="list-tips {{tabType == 'season' ? 'active' : ''}}" wx:if="{{tabType == 'season'}}">
<text>{{item.name == 'recommend_coupon' ? '券' : '水滴'}}</text>
</view>
<view class="list-tips{{tabType == 'season' ? 'active' : ''}}" wx:else>
<text wx:if="{{item.name == 'open_nk'}}">折</text>
<text wx:elif="{{item.name == 'open_get_goods'}}">水</text>
<text wx:else>水滴</text>
</view>
</view>
</scroll-view>
<view class="suggest">
<view class="suggest-cont">
<view class="suggest-title">
{{tabType == 'season' ? '季卡' : '年卡'}}权益说明
</view>
<view class="suggest-item">
<view class="suggest-label" wx:for="{{rights}}" wx:key="rights">
<text>{{index + 1}}</text>
<view class="suggest-text">
{{item.remark}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="emption">
<view class="emption-cont">
<view class="emption-price">
<view class="emption-top">¥{{identities.price}}</view>
<view class="emption-tips" wx:if="{{couponPrice > 0}}">(抵值券¥{{couponPrice}})</view>
<view class="emption-tips" wx:else>({{tabType == 'season'?'季卡会员' : '年卡会员'}})</view>
</view>
<navigator hover-class="none" url="../open/index?identity_id={{newId}}" class="emption-btn" wx:if="{{can.open}}">
立即开通
</navigator>
<block wx:else>
<navigator hover-class="none" wx:if="{{can.renew}}" url="../open/index?identity_id={{newId}}" class="emption-btn">
立即续费
</navigator>
<view class="emption-btn active" wx:else>
{{buttonText}}
</view>
</block>
</view>
</view>

View File

@@ -0,0 +1,292 @@
page {
background-image: linear-gradient(to bottom, #383041, #1a1528);
}
.tab {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
height: 100rpx;
line-height: 100rpx;
background-color: #383041;
display: flex;
}
.tab-item {
text-align: center;
flex: 2;
color: #c3c1c5;
font-size: 34rpx;
position: relative;
font-weight: 600;
}
.tab-item::after {
position: absolute;
content: '';
left: calc(50% - 40rpx);
bottom: 0;
background-color: transparent;
width: 80rpx;
height: 6rpx;
border-radius: 50rpx;
}
.tab-item.active {
color: #ffffff;
}
.tab-item.active::after {
background-color: #ffffff;
}
.rights {
position: absolute;
width: 100%;
top: 120rpx;
background-image: linear-gradient(to bottom, #383041, #1a1528);
border-bottom: 160rpx solid transparent;
}
.card {
position: relative;
height: 380rpx;
}
.cardBack {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.cardText {
position: absolute;
width: 100%;
left: 0;
top: 0;
z-index: 3;
padding: 50rpx 60rpx;
box-sizing: border-box;
}
.card-title {
font-weight: 600;
font-size: 44rpx;
color: #4c2616;
display: flex;
}
.card-title image {
width: 46rpx;
height: 46rpx;
margin: 6rpx 10rpx 0 0;
}
.tips {
color: #653925;
margin: 10rpx 0 30rpx;
font-size: 30rpx;
}
.price-left {
color: #653925;
display: flex;
margin-top: 140rpx;
}
.price-top {
flex: 1;
line-height: 64rpx;
}
.price-number {
font-weight: 600;
font-size: 46rpx;
display: flex;
}
.price-number image {
width: 32rpx;
height: 32rpx;
margin: 16rpx 0 0 10rpx;
}
.price-serial {
font-weight: 600;
font-size: 36rpx;
flex: 1;
line-height: 64rpx;
}
.price-time {
line-height: 60rpx;
font-size: 28rpx;
}
.list {
display: flex;
padding: 30rpx 20rpx;
box-sizing: border-box;
white-space: nowrap;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.list-item {
width: 25%;
display: inline-block;
position: relative;
text-align: center;
}
.list-tips {
position: absolute;
top: 0;
left: 60%;
font-size: 24rpx;
background: #f1bd6e;
color: #681e0f;
border-radius: 30rpx;
padding: 0 10rpx;
line-height: 30rpx;
height: 30rpx;
}
.list-tips.active {
background: #f2c2a3;
}
.list-img {
width: 100rpx;
height: 100rpx;
margin: 0 auto;
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
padding: 20rpx;
box-sizing: border-box;
}
.list-img image {
width: 100%;
height: 100%;
}
.list-rights {
color: #ffffff;
margin: 20rpx 0 10rpx;
}
.list-name {
color: #8d8a93;
font-size: 26rpx;
}
.suggest {
padding: 20rpx 40rpx;
box-sizing: border-box;
}
.suggest-cont {
border: 2rpx solid #d2bfa9;
border-radius: 40rpx;
padding: 30rpx 40rpx;
box-sizing: border-box;
}
.suggest-title {
color: #e8bb9f;
font-size: 36rpx;
margin-bottom: 30rpx;
}
.suggest-item {
color: #b3a3a3;
font-size: 30rpx;
}
.suggest-label {
display: flex;
margin-bottom: 30rpx;
}
.suggest-label:last-child {
margin-bottom: 0;
}
.suggest-label text {
width: 38rpx;
height: 38rpx;
border-radius: 50%;
border: 2rpx solid #b3a3a3;
text-align: center;
font-size: 26rpx;
display: inline-block;
margin-top: 5rpx;
}
.suggest-text {
width: calc(100% - 50rpx);
padding-left: 20rpx;
line-height: 40rpx;
box-sizing: border-box;
text-align: justify;
}
.emption {
position: fixed;
background-color: #251f31;
bottom: 0;
left: 0;
padding: 30rpx;
box-sizing: border-box;
width: 100%;
height: 160rpx;
z-index: 99;
}
.emption-cont {
border: 2rpx solid #e9c1a4;
border-radius: 50rpx;
line-height: 100rpx;
height: 100rpx;
color: #fbe8d2;
display: flex;
padding: 0 15rpx;
box-sizing: border-box;
}
.emption-price {
flex: 1;
display: flex;
}
.emption-top {
font-weight: 600;
font-size: 40rpx;
padding-right: 10rpx;
}
.emption-tips {
font-size: 28rpx
}
.emption-btn {
background-image: linear-gradient(to right, #f5c17d, #fbe9d6);
color: #681e0f;
height: 74rpx;
line-height: 74rpx;
padding: 0 30rpx;
border-radius: 50rpx;
font-weight: 600;
font-size: 30rpx;
margin-top: 13rpx;
}
.emption-btn.active {
background-image: linear-gradient(to right, #bbbbbb, #9e9e9e);
color: #000;
}