You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
255 lines
4.3 KiB
255 lines
4.3 KiB
<template>
|
|
<view class="page">
|
|
|
|
<navbar title="个人中心" />
|
|
|
|
<view class="head">
|
|
<view class="headImage">
|
|
<image src="" mode=""></image>
|
|
</view>
|
|
<view class="info">
|
|
<view class="name">
|
|
<view class="one"> 可可</view>
|
|
<view class="two"> 黄金会员</view>
|
|
</view>
|
|
<view class="vip">
|
|
ID：Aa63982546
|
|
</view>
|
|
<view class="tips">
|
|
注册时间：2020-10-11
|
|
</view>
|
|
</view>
|
|
<view class="setting">
|
|
<uv-icon name="setting" size="40rpx"></uv-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="earnings">
|
|
<view class="member">
|
|
<view>会员等级：黄金会员</view>
|
|
<view>查看权益></view>
|
|
</view>
|
|
<view class="deposit">
|
|
<view class="">
|
|
<view>
|
|
<view>1.00</view>
|
|
<view>收益明细</view>
|
|
</view>
|
|
<view>收益明细</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<!-- 酒店 -->
|
|
<view class="user">
|
|
<view class="line grid">
|
|
<view class="title">
|
|
常用功能
|
|
</view>
|
|
</view>
|
|
<view class="cell-bottom">
|
|
<uv-cell-group>
|
|
<uv-cell icon="share" title="我的邀请码" :isLink="true" arrow-direction="right" />
|
|
<uv-cell icon="share" title="我的推荐" :isLink="true" arrow-direction="right " />
|
|
<uv-cell icon="share" title="联系客服" :isLink="true" arrow-direction="right " />
|
|
<uv-cell icon="share" title="我的地址" :isLink="true" arrow-direction="right " />
|
|
</uv-cell-group>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<tabber select="center" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabber from '@/components/base/tabbar.vue'
|
|
import {
|
|
mapGetters
|
|
} from 'vuex'
|
|
import userShopCommission from '@/components/userShop/userShopCommission.vue'
|
|
export default {
|
|
components: {
|
|
tabber,
|
|
userShopCommission,
|
|
},
|
|
computed: {},
|
|
data() {
|
|
return {}
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page {
|
|
|
|
.warp {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
.rect {
|
|
width: 600rpx;
|
|
height: 300rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.title {
|
|
padding: 10rpx 0 0 15rpx;
|
|
background-color: #fd5100;
|
|
color: #FFF;
|
|
text-align: left;
|
|
width: 100%;
|
|
height: 18%;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.center {
|
|
height: 40%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
background-color: #fff;
|
|
padding: 40rpx 20rpx;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.headImage {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-image: url(/static/image/center/3.png);
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.info {
|
|
font-size: 28rpx;
|
|
|
|
.vip {
|
|
color: #909294;
|
|
font-size: 24rpx;
|
|
|
|
}
|
|
|
|
.name {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.one {
|
|
color: #343140;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.two {
|
|
font-size: 24rpx;
|
|
margin-left: 10rpx;
|
|
padding: 3rpx 16rpx;
|
|
border-radius: 18rpx;
|
|
background-color: rgb(252, 213, 157);
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
font-size: 26rpx;
|
|
color: #ABABAB;
|
|
}
|
|
}
|
|
}
|
|
|
|
.headBtn {
|
|
margin-left: auto;
|
|
padding: 15rpx 20rpx;
|
|
background-color: $uni-color;
|
|
color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.setting {
|
|
position: absolute;
|
|
right: 50rpx;
|
|
top: 50rpx;
|
|
}
|
|
|
|
.earnings {
|
|
width: 94%;
|
|
margin-left: 3%;
|
|
|
|
.member {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 90%;
|
|
margin-left: 5%;
|
|
height: 80rpx;
|
|
background-image: url("../../static/image/center/12.png");
|
|
background-size: 100% 100%;
|
|
font-size: 28rpx;
|
|
color: #F9CF93;
|
|
|
|
view {
|
|
margin: 0 20rpx;
|
|
}
|
|
}
|
|
|
|
.deposit {
|
|
height: 300rpx;
|
|
margin-top: -20rpx;
|
|
background-color: rgb(163, 201, 80);
|
|
border-radius: 40rpx;
|
|
}
|
|
}
|
|
|
|
.user {
|
|
|
|
.grid {
|
|
flex-direction: column;
|
|
font-size: 26rpx;
|
|
padding: 20rpx;
|
|
|
|
.title {
|
|
font-weight: 600;
|
|
padding: 10rpx;
|
|
border-left: 6rpx solid #A3D250;
|
|
}
|
|
}
|
|
|
|
.cell-bottom {
|
|
width: 96%;
|
|
margin-top: 20rpx;
|
|
margin-left: 2%;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
|
|
}
|
|
}
|
|
</style>
|