TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

会员中心我的伙伴

Browse Source
This commit is contained in:
zhangmanman
2021-09-26 09:56:16 +08:00
parent 9d9cf4c580
commit 2f75c30bac
163 changed files with 33588 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/certification/personal.vue
View File

@@ -207,7 +207,7 @@
button{
height: 90rpx;
line-height: 90rpx;
background-color: $mian-color-deep;
background-color: $mian-color;
border-radius: 0;
color: white;
font-size: $title-size-lg;

15
pages/user/code.vue
View File

@@ -4,10 +4,10 @@
<!-- 邀请码图 -->
<view class="codeBack">
<image class="codeBack-img" src="/static/user/user-codeIcon.png" mode="widthFix"></image>
<view class="codeBack-avatar">
<image src="/static/user/call.png" mode="aspectFill"></image>
<view class="codeBack-avatar" v-if="inviteData.user_info">
<image :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="">
张慢慢
{{inviteData.user_info.nickname}}
</view>
</view>
<view class="codeBack-top">
@@ -15,7 +15,7 @@
您的邀请码
</view>
<view class="codeBack-number">
8012568
{{inviteData.invite}}
</view>
<view class="codeBack-copy" @click="copyCenter(inviteData.invite)">
复制
@@ -51,6 +51,7 @@
// 二维码
inviteInfo(){
userInvite().then(res => {
console.log(res)
this.inviteData = res
}).catch(err => {
uni.showToast({
@@ -161,7 +162,7 @@
color: #7c52fc
}
.codeBack-number {
font-size: 60rpx;
font-size: 40rpx;
color: #7c52fc;
text-transform:uppercase;
font-weight: 700;
@@ -196,6 +197,8 @@
}
.codeBack-avatar {
margin-top: $margin * 2;
font-size: 32rpx;
font-weight: 600;
image {
width: 140rpx;
height: 140rpx;
@@ -204,7 +207,7 @@
}
}
.codeBack-yard {
padding: $padding $padding * 4 $padding * 2;
padding: $padding $padding * 2 $padding * 2;
text-align: center;
position: relative;
font-size: $title-size-lg;

83
pages/user/index.vue
View File

@@ -68,7 +68,7 @@
<view class="userVip-top-name" v-if="userIdentity.right">
开通{{userIdentity.right.name}}。
</view>
<view class="userVip-top-btn">
<view class="userVip-top-btn" v-if="!userIdentity.is_top" @click="$Router.push({name: 'vipIndex'})">
去开通<image class="userVip-top-arrow" src="/static/user/userVip_arrow.png"></image>
</view>
</view>
@@ -92,12 +92,17 @@
<view class="userVip-rightst-more">全部权益 <image class="userVip-rightst-more-img" src="/static/user/userVip_more_arrow.png"></image></view>
</view>
<view class="userVip-rightst-list" v-if="userIdentity.right">
<block v-for="(item, index) in userIdentity.right.rights" :key="index">
<view class="userVip-rightst-label" v-if="index <= 3">
<view v-for="(item, index) in userIdentity.right.rights" :key="index" class="userVip-rightst-label">
<block v-if="index <= 3">
<image class="userVip-rightst-img" :src="item.cover"></image>
<view class="userVip-rightst-name">{{item.name}}</view>
</view>
</block>
<view class="nowrap userVip-rightst-name">{{item.name}}</view>
</block>
</view>
<view class="userVip-rightst-label">
<image class="userVip-rightst-img" src="/static/user/userRightst_icon_more.png"></image>
<view class="nowrap userVip-rightst-name">敬请期待</view>
</view>
</view>
</view>
</view>
@@ -149,16 +154,16 @@
我的伙伴
</view>
<view class="partner-list" v-if="userData.relation_count">
<view class="partner-label">
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:''}})">
<view class="partner-label-name">伙伴总数</view>
<view class="partner-label-number">{{userData.relation_count.all || 0}}</view>
</view>
<view class="partner-label">
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:1}})">
<view class="partner-label-name">直接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.one || 0}}</view>
</view>
<view class="partner-label">
<view class="partner-label-name">简接伙伴</view>
<view class="partner-label" @click="$Router.push({name: 'userPartner', params:{larer:2}})">
<view class="partner-label-name">间接伙伴</view>
<view class="partner-label-number">{{userData.relation_count.two || 0}}</view>
</view>
</view>
@@ -178,7 +183,7 @@
<image class="tool-label-img" src="/static/user/userTool-01.png" mode=""></image>
<view class="tool-label-name">优惠券管理</view>
</view>
<view class="tool-label">
<view class="tool-label" @click="$Router.push({name: ''})">
<image class="tool-label-img" src="/static/user/userTool-02.png" mode=""></image>
<view class="tool-label-name">营销推广码</view>
</view>
@@ -190,9 +195,9 @@
<image class="tool-label-img" src="/static/user/userTool-04.png" mode=""></image>
<view class="tool-label-name">部门门店</view>
</view>
<view class="tool-label" @click="$Router.push({name: 'instrumentBasics'})">
<view class="tool-label" @click="$Router.push({name: ''})">
<image class="tool-label-img" src="/static/user/userTool-05.png" mode=""></image>
<view class="tool-label-name">店员管理</view>
<view class="tool-label-name">员工管理</view>
</view>
</view>
</view>
@@ -207,18 +212,18 @@
<image class="tool-label-img" src="/static/user/userServe-00.png" mode=""></image>
<view class="tool-label-name">专属客服</view>
</view>
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userCode'})">
<view class="tool-label" @click="$Router.push({name: 'userCode'})">
<image class="tool-label-img" src="/static/user/userServe-01.png" mode=""></image>
<view class="tool-label-name">邀请好友</view>
</navigator>
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userHelp'})">
</view>
<view class="tool-label" @click="$Router.push({name: 'userHelp'})">
<image class="tool-label-img" src="/static/user/userServe-02.png" mode=""></image>
<view class="tool-label-name">帮助中心</view>
</navigator>
<navigator hover-class="none" class="tool-label" @click="$Router.push({name: 'userClause'})">
</view>
<view class="tool-label" @click="$Router.push({name: 'userClause'})">
<image class="tool-label-img" src="/static/user/userServe-03.png" mode=""></image>
<view class="tool-label-name">服务条款</view>
</navigator>
</view>
</view>
</view>
</view>
@@ -229,7 +234,6 @@
<view class="item" @click="$Router.push({name: 'couponsManagement'})">优惠券管理</view>
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
<view class="item" @click="$Router.push({name: 'instrumentCustomer'})">成交客户</view>
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
<view class="item" @click="$Router.push({name: 'Personal'})">个人认证</view>
<view class="item" @click="$Router.push({name: 'companyApprove'})">企业认证</view>
<view class="item" @click="$Router.push({name: 'companyApprove', params: { form_type: 'put' }})">编辑企业认证</view>
@@ -247,6 +251,7 @@
scroll : 0, // 回弹效果
userData : '', // 用户信息
userIdentity : '', // 用户身份
helpDoc : '', // 资产说明
classStyle : false, // 下拉vip时改变样式
animatedShow : false, // vip上下跳动效果
newList : [],
@@ -267,11 +272,11 @@
// 获取用户信息
this.userInfo();
// 获取公告列表
this.newInfo();
// 获取专属客服二维码
this.customerInfo();
// 获取公告列表
this.newInfo();
},
onHide() {
// 移除vip模块跳动样式
@@ -282,8 +287,8 @@
userInfo() {
// 读取配置信息
userIndex().then(res=>{
console.log(res)
this.userData = res
this.userData = res
this.helpDoc = res.help_doc
this.userIdentity = res.identityShow
}).catch(err =>{
uni.showToast({
@@ -354,10 +359,12 @@
// 友情提示信息
showHelp(type) {
let content = '能量球钱包'
if(type == 'chip') content = '能量碎片'
let title = '能量球',
content = this.helpDoc.energy_ball.description
if(type == 'chip') title = '能量碎片'
if(type == 'chip') content = this.helpDoc.energy_shard.description
uni.showModal({
title: '友情提示',
title: title,
content: content,
showCancel: false
})
@@ -585,8 +592,8 @@
z-index: 1;
.user-tool-icon {
padding-left: $padding;
width: $uni-img-size-sm + 2;
height: $uni-img-size-sm + 2;
width: $uni-img-size-sm;
height: $uni-img-size-sm;
}
}
.user-back {
@@ -612,7 +619,7 @@
position: relative;
.user-portrait-head {
border-radius: $uni-border-radius-circle;
border: 4rpx solid #b197ff;
border: 4rpx solid #bfaaff;
position: absolute;
left: 8rpx;
top: 14rpx;
@@ -662,9 +669,9 @@
margin: 30rpx 0 5rpx;
font-size: 36rpx;
.user-name-identity {
width: 92rpx;
width: 100rpx;
height: 36rpx;
margin: 6rpx 0 0 10rpx;
margin: 4rpx 0 0 10rpx;
}
}
.user-status {
@@ -729,11 +736,13 @@
.userVip-rights {
margin-top: 40rpx;
border-radius: 10rpx;
padding: 20rpx;
padding: 20rpx 0;
box-sizing: border-box;
background-image:linear-gradient(to bottom, #dbceff, #bb9fff);
color: #5723af;
.userVip-rightst-title {
padding: 0 20rpx;
box-sizing: border-box;
font-size: 30rpx;
display: flex;
.userVip-rightst-title-name {
@@ -754,12 +763,12 @@
display: flex;
.userVip-rightst-label {
display: inline-block;
flex: 4;
width: 25%;
text-align: center;
font-size: 26rpx;
.userVip-rightst-img {
width: 80rpx;
height: 80rpx;
width: 90rpx;
height: 90rpx;
margin-bottom: 10rpx;
}
}

144
pages/user/partner.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<view class="content">
<!-- 分类 -->
<view class="tabs">
<view class="item" :class="{'show': larer == ''}" @click="onTabs('')">全部</view>
<view class="item" :class="{'show': larer == '1'}" @click="onTabs('1')">直接</view>
<view class="item" :class="{'show': larer == '2'}" @click="onTabs('2')">间接</view>
</view>
<view class="partner-list">
<view class="partner-label" v-for="(item, index) in lists" :larer='larer'>
<image class="partner-avatar" :src="item.avatar ? item.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="partner-cont">
<view class="partner-name">
<view class="partner-nickname">
{{item.nickname}}
</view>
<image v-if="item.identity" class="partner-identity" :src="item.identity.cover" mode="widthFix"></image>
</view>
<view class="partner-tel">
{{item.username}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { userPartne } from '@/apis/interfaces/user'
export default {
data() {
return {
larer : '',
lists : [],
pages : {}
};
},
onShow() {
this.larer = this.$Route.query.larer
// 获取伙伴列表
this.getPartner()
},
methods: {
// 伙伴列表
getPartner() {
userPartne({
larer: this.larer
}).then(res => {
this.lists = res.users
})
},
// tabs
onTabs(value){
if(value == this.larer) return
this.lists = []
this.larer = value
this.getPartner()
}
}
}
</script>
<style lang="scss" scoped>
.content{
padding-top: 90rpx;
}
// tabs
.tabs{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
display: flex;
justify-content: space-around;
background: white;
padding: 15rpx 0;
font-size: $title-size-lg;
color: $text-gray;
.item{
height: 60rpx;
line-height: 60rpx;
&.show{
color: $text-price;
border-bottom: solid 4rpx $text-price;
}
}
}
// 列表
.partner-list{
margin: calc(#{$padding} - 10rpx);
display: flex;
flex-wrap: wrap;
background-color: #FFFFFF;
.partner-label {
padding: 20rpx;
box-sizing: border-box;
position: relative;
border-radius: 4rpx;
width: 100%;
&::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 1rpx;
background-color: #f8f8f8;
}
&:last-child::after {
display: none;
}
.partner-avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.partner-cont {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 22rpx 20rpx 20rpx 150rpx;
box-sizing: border-box;
.partner-name {
display: flex;
margin-bottom: 15rpx;
.partner-nickname {
font-size: 30rpx;
font-weight: 600;
margin-right: 10rpx;
}
.partner-identity {
width: 120rpx;
}
}
}
}
}
</style>

38
pages/vip/agree.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<view>
<view class="contentTitle">
<rich-text :nodes="content"></rich-text>
</view>
</view>
</template>
<script>
import { userAgree } from '@/apis/interfaces/vip'
export default {
data() {
return {
content: ''
}
},
created() {
userAgree().then(res => {
this.content = res.content
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.contentTitle {
padding: $padding;
box-sizing: border-box;
}
</style>

541
pages/vip/vip.vue Normal file
View File

@@ -0,0 +1,541 @@
<template>
<view class="content" v-if="!loding">
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" circular @change="swiperChange">
<swiper-item class="swiper-item" v-for="(item, index) in identitie" :key="index">
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
<view class="vip-cont">
<view class="vip-name">
{{item.name}}<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)" src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
</view>
<view class="vip-number" v-if="item.count">
{{item.count.stock > 0 ? '剩余名额：' + item.count.residue : '不限名数'}}
</view>
<view class="vip-tips">
<!-- 轻节点 -->
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-00">
{{item.title}}
</view>
<!-- 会员 -->
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-01">
{{item.title}}
</view>
<!-- VIP节点 -->
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-02">
{{item.title}}
</view>
<!-- 主节点 -->
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-03">
{{item.title}}
</view>
<!-- 超级节点 -->
<view v-else-if="item.identity_id == 6" class="vip-tips-text vip-tips-color-04">
{{item.title}}
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!-- 会员特权 -->
<view class="privilege">
<view class="privilege-list">
<image class="privilege-img" src="/static/user/vip_privilege_00.png" mode=""></image>
<view class="privilege-text">
<view class="privilege-name">
节点定义
</view>
{{identitie[tabsIndex].node_definition}}
</view>
</view>
<view class="privilege-list">
<image class="privilege-img" src="/static/user/vip_privilege_01.png" mode=""></image>
<view class="privilege-text">
<view class="privilege-name">
升级条件
</view>
<view class="privilege-label" :class="{'active' : item.finish == true}" v-for="(item, index) in identitie[tabsIndex].get_condition">
&{{item.message}}
</view>
</view>
</view>
<view class="privilege-list">
<image class="privilege-img" src="/static/user/vip_privilege_02.png" mode=""></image>
<view class="privilege-text">
<view class="privilege-name">
节点权益
</view>
<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights">
&{{item.remark}}
</view>
</view>
</view>
</view>
<!-- 用户协议 -->
<view class="agree">
<view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
请仔细阅读并确认服务协议
</view>
</view>
<view class="agree-btn" @click="agreeChange">
<radio :checked="selected" style="transform: scale(.7);" color="#7c52fc"></radio>会员服务协议
</view>
<!-- 开通按钮 -->
<view class="footer">
<block v-if="identitie[tabsIndex].identity_id == 2">
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openUrl"></image>
</block>
<block v-else>
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
</block>
<!-- <button class="footer-btn" type="default" >
<view class="footer-btn-num">
合计：{{total}}
</view>
<view class="footer-btn-pay">
立即支付
</view>
</button> -->
</view>
</view>
</template>
<script>
import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
export default {
data() {
return {
loding : true,
tabsIndex : 0,
user : {},
identitie : [],
rights : [],
description : '',
identityTime: '', // 到期时间
sumNumber : 1, // 开通年限
total : '', // 开通年限总资金额
selected : false, // 用户协议
}
},
created() {
// 获取当前用户信息
this.idenInfo();
},
methods: {
// 当前用户信息
idenInfo(){
identities().then(res => {
console.log(res.identities)
this.loding = false
this.identitie = res.identities
this.rights = res.identities[this.tabsIndex].rights
this.total = res.identities[this.tabsIndex].price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 切换开通身份
swiperChange(e) {
this.tabsIndex = e.detail.current
// 获取当前用户信息
this.idenInfo();
},
// 开通会员
openOrder(){
if(this.selected == false) {
uni.showToast({
title: '请勾选用户协议',
icon : 'none'
})
return
}
let identitiesId = this.identitie[this.tabsIndex].identity_id
vipOrder(identitiesId,{
year: 1
}).then(res => {
if(!res.test){
let verifyForm = res
this.wechatPay(res.id)
}else{
// 测试环境
uni.showModal({
title : '开通提示',
content : '会员开通成功，是否继续完成企业认证',
showCancel : true,
cancelText : '稍后认证',
confirmText : '立即认证',
success : modalRes => {
if(modalRes.confirm){
this.$Router.replace({name: 'Approve'})
return
}
this.$Router.back()
},
fail(err) {
}
})
}
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 轻节点身份-跳转个人认证
openUrl() {
this.$Router.push({name: 'Personal'})
},
// 微信支付
wechatPay(id){
vipWechatPay(id).then(res => {
let payConfig = JSON.parse(res.wechat),
payIdentity = res.identity
uni.requestPayment({
provider : "wxpay",
orderInfo : payConfig,
success : payRes => {
console.log(payRes)
},
fail : payErr => {
console.log(payErr)
}
})
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 勾选协议
agreeChange() {
this.selected = !this.selected
},
// 会员权益介绍
showRemark(title, val){
uni.showModal({
title : title,
content : val,
showCancel : false
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #FFFFFF;
}
.vip-container {
width: 750rpx;
height: 340rpx;
margin-top: $margin;
}
.swiper-item {
width: 640rpx;
height: 340rpx;
display: flex;
}
.vip-item {
width: 640rpx;
height: 340rpx;
border-radius: 20rpx;
position: relative;
.vip-back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.vip-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
padding: 45rpx 70rpx;
box-sizing: border-box;
.vip-name {
display: flex;
font-size: 46rpx;
color: #ffffff;
font-weight: 600;
.vip-name-img {
width: 36rpx;
height: 36rpx;
margin: 12rpx 20rpx;
}
}
.vip-number {
margin: 10rpx 0 40rpx;
color: #FFFFFF;
font-size: 32rpx;
opacity: .8;
}
.vip-tips {
font-size: 30rpx;
background-color: #e8ebf6;
display: inline-block;
border-radius: 80rpx;
height: 60rpx;
line-height: 60rpx;
padding: 0 30rpx;
.vip-tips-text {
font-weight: 700;
background-clip: text;
color: transparent;
}
.vip-tips-color-00 {
background-image: linear-gradient(to bottom,#6189f0,#b6b9c1);
}
.vip-tips-color-01 {
background-image: linear-gradient(to top,#ffd459,#ff6c52);
}
.vip-tips-color-02 {
background-image: linear-gradient(to top,#e0c9fe,#892edb);
}
.vip-tips-color-03 {
background-image: linear-gradient(to top,#f6b237,#f035e3);
}
.vip-tips-color-04 {
background-image: linear-gradient(to top,#c455ec,#5f76e9);
}
}
}
}
// 会员特权
.privilege {
padding: 20rpx 30rpx 80rpx;
box-sizing: border-box;
.privilege-list {
margin-bottom: 50rpx;
display: flex;
.privilege-img {
width: 74rpx;
height: 74rpx;
}
.privilege-text {
width: calc(100% - 74rpx);
padding-left: 40rpx;
font-size: 32rpx;
color: #999999;
line-height: 52rpx;
.privilege-name {
font-size: 40rpx;
color: #000000;
margin: 10rpx 0 20rpx;
}
.privilege-label.active {
color: #f6b338;
}
.privilege-right {
color: #7877eb;
}
}
}
}
// 用户协议
.agree {
margin: $margin 0;
text-align: center;
.agree-tips {
background-color: #999999;
display: inline-block;
padding: 14rpx $padding;
color: #FFFFFF;
border-radius: 60rpx;
}
}
.agree-btn {
display: flex;
font-size: $title-size-lg;
text-align: left;
color: #999999;
padding: $padding;
}
// .content{
// min-height: 100vh;
// background: #fefaef;
// }
// 开通须知
.notice{
font-size: $title-size-m;
color: $text-gray;
padding: $padding $padding*2 $padding*2;
.title{
padding-bottom: $padding/2;
font-weight: bold;
}
.item{
padding-bottom: $padding/2;
line-height: 40rpx;
text-align: justify;
}
}
// footer
.footer{
padding: 0 $padding;
box-sizing: border-box;
text-align: center;
.footer-btn{
width: 74%;
}
}
// 会员权限
.privilege{
padding: $padding;
.title{
font-weight: bold;
color: #322711;
font-size: $title-size;
text-align: center;
line-height: 90rpx;
}
.privilege-box{
display: flex;
flex-wrap: wrap;
padding: $padding 0;
.item{
width: 25%;
padding: $padding/2;
box-sizing: border-box;
text-align: center;
.icon{
width: 78rpx;
height: 78rpx;
background: #bd995d;
border-radius: 50%;
vertical-align: top;
}
.text{
font-size: $title-size-sm;
color: #201212;
line-height: 60rpx;
}
}
}
}
// 会员卡
.cards{
position: relative;
background: #1f1b1c;
.card{
position: relative;
margin: 0 $margin;
background: linear-gradient(to right, #3b3d4a, #231d1f);
padding: 15rpx;
border-radius: $radius/2;
z-index: 2;
.card-content{
position: relative;
border:solid 1rpx rgba($color: white, $alpha: .4);
border-radius: $radius/2;
padding: 30rpx 180rpx 60rpx 148rpx;
min-height: 98rpx;
.cover{
position: absolute;
left: 30rpx;
top: 30rpx;
width: 98rpx;
height: 98rpx;
border-radius: 50%;
}
.user{
color: rgba($color: white, $alpha: .7);
line-height: 58rpx;
font-size: $title-size-lg;
}
.sub-time{
line-height: 40rpx;
color: #e6ce9e;
font-size: $title-size-sm;
}
.btn{
position: absolute;
color: #261f0f;
background: #e6ce9e;
width: 160rpx;
border-radius: 30rpx;
font-size: $title-size-m;
right: 30rpx;
top: 50rpx;
line-height: 58rpx;
text-align: center;
}
}
}
.cards-angle{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 3;
}
&::after{
content: " ";
height: 70rpx;
background: #b29671;
position: absolute;
width: 100%;
bottom: 0;
border-radius: $radius/2;
z-index: 0;
}
}
// tabs
.tabs{
background: #1f1b1c;
color: white;
padding: 0 0 $padding 0;
display: flex;
justify-content: center;
font-size: $title-size-lg;
.item{
margin: 0 $margin;
line-height: 70rpx;
height: 70rpx;
color: rgba($color: white, $alpha: .6);
&.show{
position: relative;
font-weight: bold;
font-size: $title-size;
color: white;
&::after{
position: absolute;
bottom: 0;
left: 20%;
width: 60%;
height: 6rpx;
border-radius: 3rpx;
content: " ";
background: white;
}
}
}
}