[...修复会员中心成为会员样式及会员特权可切换显示]
This commit is contained in:
@@ -3,10 +3,11 @@
|
||||
<view class="content">
|
||||
<swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
|
||||
<image class="swiper-item-bg" src="/static/imgs/account-bg.png" mode="widthFix" />
|
||||
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
|
||||
<view class="vip-top">
|
||||
<view class="vip-name">
|
||||
<image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill"></image>
|
||||
<view :class="tabsIndex == index ? 'vip-name' : 'vip-name1'">
|
||||
<image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill" />
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="vip-price">
|
||||
@@ -121,6 +122,7 @@
|
||||
created() {
|
||||
// 获取当前用户信息
|
||||
identities().then(res => {
|
||||
console.log(res)
|
||||
this.loding = false
|
||||
this.user = res.user
|
||||
this.description= res.description
|
||||
@@ -142,8 +144,9 @@
|
||||
swiperChange(e) {
|
||||
this.tabsIndex = e.detail.current
|
||||
this.total = this.identities[e.detail.current].price
|
||||
this.sumNumber = 1
|
||||
this.rights = this.identities[e.detail.current].rights
|
||||
this.totalData(this.identities[e.detail.current].identity_id);
|
||||
this.sumNumber = 1
|
||||
},
|
||||
|
||||
// 开通会员
|
||||
@@ -288,15 +291,24 @@
|
||||
width: 630rpx;
|
||||
height: 280rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.swiper-item-bg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vip-item {
|
||||
width: 630rpx;
|
||||
height: 280rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #c8c8c8;
|
||||
background-color: #c7c7c7;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
color: #cacaca;
|
||||
.vip-top {
|
||||
display: flex;
|
||||
position: relative;
|
||||
@@ -308,7 +320,7 @@
|
||||
border-radius: 60rpx;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
background: red;
|
||||
background-image: linear-gradient(to bottom ,#e93340,#e8252f);
|
||||
display: flex;
|
||||
.vip-name-icon {
|
||||
width: 50rpx;
|
||||
@@ -316,6 +328,20 @@
|
||||
margin: $margin - 15 $margin - 10 0 0;
|
||||
}
|
||||
}
|
||||
.vip-name1{
|
||||
font-size: $title-size + 6;
|
||||
border-radius: 60rpx;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
background-image: linear-gradient(to bottom ,#cacaca,#cacaca);
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.vip-name-icon {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin: $margin - 15 $margin - 10 0 0;
|
||||
}
|
||||
}
|
||||
.vip-price {
|
||||
font-size: $title-size + 10;
|
||||
font-weight: 600;
|
||||
@@ -331,9 +357,10 @@
|
||||
}
|
||||
|
||||
.color-item-img {
|
||||
background-color: #ff252f;
|
||||
background-color: #e93340;
|
||||
background-image: linear-gradient(to bottom ,#e93340,#e8252f);
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 0 20rpx rgba(145,196,255,.5);
|
||||
box-shadow: 0 0 20rpx 4rpx rgba($color: #e93340, $alpha: 1.0);
|
||||
}
|
||||
|
||||
// 轮播点
|
||||
@@ -363,7 +390,7 @@
|
||||
.vip-years-name {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
color: #c8c8c8;
|
||||
color: #c2c2c2;
|
||||
.vip-years-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
@@ -397,21 +424,23 @@
|
||||
text-align: center;
|
||||
.privilege-img {
|
||||
height: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.privilege-list {
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
margin-top: $margin;
|
||||
margin-top: $margin * 0.5;
|
||||
.privilege-label {
|
||||
border-bottom: 2rpx #e6eaef dashed;
|
||||
font-size: $title-size;
|
||||
padding: $padding + 10 0;
|
||||
font-size: 30rpx;
|
||||
padding: $padding 0;
|
||||
display: flex;
|
||||
.privilege-label-tips {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.privilege-label-text {
|
||||
width: calc(100% - 60rpx);
|
||||
@@ -422,7 +451,6 @@
|
||||
|
||||
// 支付方式
|
||||
.payWay {
|
||||
margin-top: $margin * 4;
|
||||
.payWay-way {
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
@@ -466,7 +494,7 @@
|
||||
margin: $margin 0;
|
||||
text-align: center;
|
||||
.agree-tips {
|
||||
background-color: #999999;
|
||||
background-color: #d9d9d9;
|
||||
display: inline-block;
|
||||
padding: 14rpx $padding;
|
||||
color: #FFFFFF;
|
||||
@@ -507,11 +535,11 @@
|
||||
.footer-btn{
|
||||
padding: 0 $padding + 10;
|
||||
box-sizing: border-box;
|
||||
background-color: #ff2828;
|
||||
background-color: #e93340;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
border-radius: 60rpx;
|
||||
color: #FFFFFF;
|
||||
color: #ececec;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
@@ -520,7 +548,7 @@
|
||||
flex: 1;
|
||||
}
|
||||
.footer-btn-pay {
|
||||
color: #f6ff00;
|
||||
color: rgba($color: #ff0, $alpha: .8);
|
||||
}
|
||||
&[disabled] {
|
||||
background-color: #b1b1b1;
|
||||
|
||||
Reference in New Issue
Block a user