|
|
|
@ -1,173 +1,195 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar title="个人中心" |
|
|
|
leftClick |
|
|
|
@leftClick="$utils.navigateBack" |
|
|
|
bgColor="#E3441A" color="#fff" /> |
|
|
|
|
|
|
|
<!-- 头部 --> |
|
|
|
<view class="head"> |
|
|
|
<view class="headImage"> |
|
|
|
<image :src="userInfo.headImage" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="user-info"> |
|
|
|
<view class="user-base-info"> |
|
|
|
<view class="user-base-top"> |
|
|
|
<view class="user-name">{{ userInfo.nickName}}</view> |
|
|
|
<view class="member-level"> |
|
|
|
<image v-if="userInfo.role == 1" :src="configList.vip_user" mode="aspectFill" class="level"> |
|
|
|
</image> |
|
|
|
<image v-if="userInfo.role == 2" src="@/static/image/center/gold-min.png" mode="aspectFill" |
|
|
|
class="level"> |
|
|
|
</image> |
|
|
|
<image v-if="userInfo.role == 3" src="@/static/image/center/sliver-min.png" |
|
|
|
mode="aspectFill" class="level"> |
|
|
|
</image> |
|
|
|
<view class="flex flex-column header"> |
|
|
|
<view class="user"> |
|
|
|
<image class="user-avatar" :src="userInfo.headImage" mode="aspectFill"></image> |
|
|
|
<view class="user-name">{{ userInfo.nickName }}</view> |
|
|
|
</view> |
|
|
|
<view class="member"> |
|
|
|
<view class="flex member-overview" :class="[role ? 'is-member' : '']"> |
|
|
|
<template v-if="role"> |
|
|
|
<!-- todo: 缺切图 "皇冠" --> |
|
|
|
<image class="icon icon-crown" src="" mode="widthFix"></image> |
|
|
|
<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> |
|
|
|
<!-- todo: 换回接口字段 --> |
|
|
|
<text class="member-tips">{{ `将于${'2026-12-12'} 到期` }}</text> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<view class="flex"> |
|
|
|
<!-- todo: 缺切图 "皇冠" --> |
|
|
|
<image class="icon icon-crown" src="" mode="widthFix"></image> |
|
|
|
<!-- todo: 缺切图 "会员" --> |
|
|
|
<image class="icon icon-member" src="" mode="widthFix"></image> |
|
|
|
<text class="member-tips">成为会员可获得会员卡，享受会员福利哟~</text> |
|
|
|
</view> |
|
|
|
<view class="user-tag"> |
|
|
|
{{ userRole[userInfo.isPay] }} |
|
|
|
<button plain class="btn member-btn" @click="$utils.navigateTo('/pages_order/mine/memberCenter')">立即开通</button> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<view class="member-rights"> |
|
|
|
<image class="member-rights-bg" src="@/static/image/center/member-bg.png" mode="top" ></image> |
|
|
|
|
|
|
|
<view class="flex member-rights-content"> |
|
|
|
<view class="flex"> |
|
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image> |
|
|
|
<view> |
|
|
|
<view class="member-rights-label">会员福利</view> |
|
|
|
<view class="member-rights-value">会员折扣</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="edit-user" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/updateUser?back=true')"> |
|
|
|
<image src="@/static/image/center/edit-icon.png" mode="aspectFill" class="edit-icon"></image> |
|
|
|
<view class="edit-btn"> |
|
|
|
修改资料 |
|
|
|
<view class="flex"> |
|
|
|
<!-- todo: 缺切图 --> |
|
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image> |
|
|
|
<view> |
|
|
|
<view class="member-rights-label">会员积分</view> |
|
|
|
<view class="member-rights-value">兑换礼品</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="user-phone"> |
|
|
|
手机号:{{ userInfo.phone }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 会员卡片 --> |
|
|
|
<view @click="$utils.navigateTo({url : '/pages_order/mine/memberCenter' })" |
|
|
|
v-if="userInfo.role" |
|
|
|
class="earnings"> |
|
|
|
<view v-if="index + 1 == userInfo.role" v-for="(item,index) in vipList" :key="item.id" class="member-item"> |
|
|
|
<image :src="item.headImage" mode="aspectFill" 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"> |
|
|
|
开通时间：{{ riceInfo.openTime }} |
|
|
|
<!-- todo: 缺切图 --> |
|
|
|
<view class="flex"> |
|
|
|
<image class="icon icon-rights" src="@/static/image/center/icon-member-weal.png" mode="widthFix"></image> |
|
|
|
<view> |
|
|
|
<view class="member-rights-label">会员优惠券</view> |
|
|
|
<view class="member-rights-value">满减折扣</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="open"> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 佣金数据 --> |
|
|
|
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data" |
|
|
|
:class="{'brokerage-data-mt' : !userInfo.role}"> |
|
|
|
<view class="brokerage"> |
|
|
|
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image> |
|
|
|
|
|
|
|
<div class="main"> |
|
|
|
<div class="title">我的佣金</div> |
|
|
|
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div> |
|
|
|
</div> |
|
|
|
<view class="card flex account"> |
|
|
|
<view class="flex flex-column"> |
|
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">元</text></view> |
|
|
|
<view class="account-label">我的余额</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="balance"> |
|
|
|
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image> |
|
|
|
|
|
|
|
<div class="main"> |
|
|
|
<div class="title">我的余额</div> |
|
|
|
<div class="money">￥{{ riceInfo.balance || 0 }}</div> |
|
|
|
</div> |
|
|
|
<view class="flex flex-column"> |
|
|
|
<!-- todo: 字段对接 --> |
|
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}</view> |
|
|
|
<view class="account-label">我的积分</view> |
|
|
|
</view> |
|
|
|
<view class="flex flex-column"> |
|
|
|
<view class="account-value">{{ riceInfo.canWithdraw || 0 }}<text class="account-unit">元</text></view> |
|
|
|
<view class="account-label">推广佣金</view> |
|
|
|
</view> |
|
|
|
<view class="flex flex-column"> |
|
|
|
<!-- todo: 字段对接 --> |
|
|
|
<view class="account-value">{{ riceInfo.balance || 0 }}<text class="account-unit">张</text></view> |
|
|
|
<view class="account-label">优惠券</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<template v-if="false"> |
|
|
|
|
|
|
|
<!-- 佣金数据 --> |
|
|
|
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class="brokerage-data" |
|
|
|
:class="{'brokerage-data-mt' : !userInfo.role}"> |
|
|
|
<view class="brokerage"> |
|
|
|
<image :src="configList.money_image" mode="aspectFill" class="brokerage-img"></image> |
|
|
|
|
|
|
|
<div class="main"> |
|
|
|
<div class="title">我的佣金</div> |
|
|
|
<div class="money">￥{{ riceInfo.canWithdraw || 0 }}</div> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 我的服务 --> |
|
|
|
<view class="myServer"> |
|
|
|
<view class="server-title"> |
|
|
|
我的服务 |
|
|
|
</view> |
|
|
|
<view class="balance"> |
|
|
|
<image :src="configList.price_image" mode="aspectFill" class="balance-img"></image> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')"> |
|
|
|
<image src="@/static/image/center/1.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的订单</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')"> |
|
|
|
<image src="@/static/image/center/2.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的团队</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')"> |
|
|
|
<image src="@/static/image/center/3.png" mode="aspectFill" /> |
|
|
|
<view class="title">联系客服</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')"> |
|
|
|
<image src="@/static/image/center/4.png" mode="aspectFill" /> |
|
|
|
<view class="title">邀请好友</view> |
|
|
|
<div class="main"> |
|
|
|
<div class="title">我的余额</div> |
|
|
|
<div class="money">￥{{ riceInfo.balance || 0 }}</div> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')"> |
|
|
|
<image src="@/static/image/center/5.png" mode="aspectFill" /> |
|
|
|
<view class="title">合伙人招募</view> |
|
|
|
<!-- 我的服务 --> |
|
|
|
<view class="myServer"> |
|
|
|
<view class="server-title"> |
|
|
|
我的服务 |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')"> |
|
|
|
<image src="@/static/image/center/6.png" mode="aspectFill" /> |
|
|
|
<view class="title">会员权益</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')"> |
|
|
|
<image src="@/static/image/center/7.png" mode="aspectFill" /> |
|
|
|
<view class="title">优惠券</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')"> |
|
|
|
<image src="@/static/image/center/8.png" mode="aspectFill" /> |
|
|
|
<view class="title">帮助与反馈</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')"> |
|
|
|
<image src="@/static/image/center/address.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的地址</view> |
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=0')"> |
|
|
|
<image src="@/static/image/center/1.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的订单</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/partner')"> |
|
|
|
<image src="@/static/image/center/2.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的团队</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/home/contact')"> |
|
|
|
<image src="@/static/image/center/3.png" mode="aspectFill" /> |
|
|
|
<view class="title">联系客服</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/promotion')"> |
|
|
|
<image src="@/static/image/center/4.png" mode="aspectFill" /> |
|
|
|
<view class="title">邀请好友</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')"> |
|
|
|
<image src="@/static/image/center/9.png" mode="aspectFill" /> |
|
|
|
<view class="title">礼包列表</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/recruit')"> |
|
|
|
<image src="@/static/image/center/5.png" mode="aspectFill" /> |
|
|
|
<view class="title">合伙人招募</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/memberCenter')"> |
|
|
|
<image src="@/static/image/center/6.png" mode="aspectFill" /> |
|
|
|
<view class="title">会员权益</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/coupon')"> |
|
|
|
<image src="@/static/image/center/7.png" mode="aspectFill" /> |
|
|
|
<view class="title">优惠券</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/help')"> |
|
|
|
<image src="@/static/image/center/8.png" mode="aspectFill" /> |
|
|
|
<view class="title">帮助与反馈</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="logout"> |
|
|
|
<image src="@/static/image/center/logout.png" mode="aspectFill" /> |
|
|
|
<view class="title">退出登录</view> |
|
|
|
|
|
|
|
<view class="box"> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/mine/address')"> |
|
|
|
<image src="@/static/image/center/address.png" mode="aspectFill" /> |
|
|
|
<view class="title">我的地址</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="$utils.navigateTo('/pages_order/order/giftList')"> |
|
|
|
<image src="@/static/image/center/9.png" mode="aspectFill" /> |
|
|
|
<view class="title">礼包列表</view> |
|
|
|
</view> |
|
|
|
<view class="boxs" @click="logout"> |
|
|
|
<image src="@/static/image/center/logout.png" mode="aspectFill" /> |
|
|
|
<view class="title">退出登录</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 广告 --> |
|
|
|
<div v-if="showAdvertising" class="ad" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/recruit')"> |
|
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000" |
|
|
|
:duration="duration"> |
|
|
|
<swiper-item v-for="(item, index) in adList" :key="index"> |
|
|
|
<view class="swiper-main"> |
|
|
|
<view @click="closeAdvertising" class="close"> |
|
|
|
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image> |
|
|
|
<!-- 广告 --> |
|
|
|
<div v-if="showAdvertising" class="ad" |
|
|
|
@click="$utils.navigateTo('/pages_order/mine/recruit')"> |
|
|
|
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000" |
|
|
|
:duration="duration"> |
|
|
|
<swiper-item v-for="(item, index) in adList" :key="index"> |
|
|
|
<view class="swiper-main"> |
|
|
|
<view @click="closeAdvertising" class="close"> |
|
|
|
<image src="@/static/image/center/close.png" mode="aspectFill" class="close-img"></image> |
|
|
|
</view> |
|
|
|
<image :src="item" mode="aspectFill" class="swiper-main-img"></image> |
|
|
|
<div class="ad-tag"> |
|
|
|
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
<image :src="item" mode="aspectFill" class="swiper-main-img"></image> |
|
|
|
<div class="ad-tag"> |
|
|
|
<image src="@/static/image/center/ad-tag.png" mode="aspectFill" class="ad-tag-img"></image> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</div> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</div> |
|
|
|
|
|
|
|
<customerServicePopup ref="customerServicePopup" /> |
|
|
|
<customerServicePopup ref="customerServicePopup" /> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<tabber select="center" /> |
|
|
|
</view> |
|
|
|
@ -197,6 +219,8 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
role: '', // member-personal | member-business |
|
|
|
|
|
|
|
vipType: ['普通会员', '黄金会员', '渠道商'], |
|
|
|
vipImage: ['vip_vip', 'vip_user', 'vip_shop'], |
|
|
|
vipList: [], |
|
|
|
@ -245,152 +269,13 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
background-color: #F5F5F5; |
|
|
|
|
|
|
|
// 头部 |
|
|
|
.head { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 60rpx 20rpx 120rpx 20rpx; |
|
|
|
background: $uni-color; |
|
|
|
|
|
|
|
.headImage { |
|
|
|
width: 130rpx; |
|
|
|
height: 130rpx; |
|
|
|
background-image: url(/static/image/center/head-img.png); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: 50%, 50%; |
|
|
|
background-size: 100%; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 20rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user-info { |
|
|
|
width: calc(100% - 130rpx); |
|
|
|
|
|
|
|
.user-base-info { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.user-base-top { |
|
|
|
width: 65%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-wrap: wrap; |
|
|
|
color: white; |
|
|
|
|
|
|
|
.user-name { |
|
|
|
max-width: calc(100% - 240rpx); |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
font-size: 34rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.member-level { |
|
|
|
margin-left: 10rpx; |
|
|
|
|
|
|
|
.level { |
|
|
|
width: 120rpx; |
|
|
|
height: 60rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user-tag { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background: #000; |
|
|
|
width: 100rpx; |
|
|
|
height: 40rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.edit-user { |
|
|
|
width: 35%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
|
|
|
|
.edit-icon { |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.edit-btn { |
|
|
|
color: white; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user-phone { |
|
|
|
color: white; |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 会员卡片 |
|
|
|
.earnings { |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin-top: -18%; |
|
|
|
|
|
|
|
.member-item { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.member-image { |
|
|
|
width: 100%; |
|
|
|
height: 300rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.member-info { |
|
|
|
position: absolute; |
|
|
|
bottom: 30rpx; |
|
|
|
left: 0rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 0rpx 40rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.profile-photo { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.pro-img { |
|
|
|
width: 60rpx; |
|
|
|
height: 60rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.open-status { |
|
|
|
color: #F8A95F; |
|
|
|
border: 1px solid #F8A95F; |
|
|
|
border-radius: 30rpx; |
|
|
|
padding: 7rpx 20rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.open { |
|
|
|
font-size: 26rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.header { |
|
|
|
height: 550rpx; |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
justify-content: flex-start; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
// 佣金数据 |
|
|
|
@ -582,4 +467,138 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.user { |
|
|
|
margin-top: 123rpx; |
|
|
|
|
|
|
|
&-avatar { |
|
|
|
width: 115rpx; |
|
|
|
height: 115rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
&-name { |
|
|
|
margin-top: 4rpx; |
|
|
|
color: $uni-text-color-inverse; |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.member { |
|
|
|
width: calc(100vw - 13rpx*2); |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 13rpx; |
|
|
|
|
|
|
|
color: #F5F5F5; |
|
|
|
font-size: 22rpx; |
|
|
|
|
|
|
|
background-color: #2B2C30; |
|
|
|
border-top-left-radius: 20rpx; |
|
|
|
border-top-right-radius: 20rpx; |
|
|
|
|
|
|
|
&-overview { |
|
|
|
min-height: 81rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
&.is-member { |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.icon { |
|
|
|
height: auto; |
|
|
|
|
|
|
|
&-crown { |
|
|
|
width: 35rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-member { |
|
|
|
width: 62rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-role { |
|
|
|
width: 156rpx; |
|
|
|
margin-right: 15rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-rights { |
|
|
|
width: 56rpx; |
|
|
|
margin-right: 11rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-btn { |
|
|
|
padding: 9rpx 17rpx; |
|
|
|
color: #000000; |
|
|
|
font-size: 22rpx; |
|
|
|
background-image: linear-gradient(131deg, #F8EDE1, #B3997E); |
|
|
|
box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); |
|
|
|
border-radius: 24rpx; |
|
|
|
margin-right: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-tips { |
|
|
|
margin-left: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-rights { |
|
|
|
background-color: #37393D; |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 142rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
&-bg { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
&-content { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 35rpx 6rpx 35rpx; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
&-label { |
|
|
|
color: #CBAD8F; |
|
|
|
font-size: 22rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
&-value { |
|
|
|
color: #F5F5F5; |
|
|
|
font-size: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
margin: 20rpx 13rpx 0 13rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.account { |
|
|
|
padding: 40rpx 40rpx 23rpx 40rpx; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
&-label { |
|
|
|
color: #666666; |
|
|
|
font-size: 28rpx; |
|
|
|
margin-top: 9rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-value { |
|
|
|
color: #000000; |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-unit { |
|
|
|
color: #666666; |
|
|
|
font-size: 18rpx; |
|
|
|
margin-left: 2rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
