|
|
- <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>
|