retailStore/pages/selfCenter/index.vue

<template>
	<view class="content">
		
		<view class="selfInfo-box">
			 <view class="self-auth">
				 <image src="../../static/bed-bg.png" mode=""></image>
				 <view>
					 <text>棉花糖</text>
					 <text style="margin-left: 30%;font-size: 28rpx;">156****3232</text>
				 </view>
			 </view>
			 
			 <view class="self-content">
				 <view>
					 <text>13982</text>
					 <text style="font-size: 28rpx;">我的积分</text>
				 </view>
				 <view>
				 	 <text>127.83元</text>
				 	 <text style="font-size: 28rpx;">已提现</text>
				 </view>
			 </view>
		</view>
		
		<view class="function-box">
			<view class="function-content">
				<image src="../../static/commend.png" mode=""></image>
				<text>推荐分销品</text>
			</view>
			<view class="function-content" style="background: #33b5fc;">
				<image src="../../static/award.svg" mode=""></image>
				<text>奖励记录</text>
			</view>
			<view class="function-content" style="background:#fcca2f;">
				<image src="../../static/cashout.svg" mode=""></image>
				<text>提现记录</text>
			</view>
		</view>
		
		<view class="list-box">
			<view class="list-content">
				<text class="margin-left5">分销资格</text>
				<view class="apply-box">
					<text style="color: #999;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
			
			<view class="list-content" @click="goTeamDetail">
				<text class="margin-left5">分销团队</text>
				<view class="apply-box">
					<text style="color: #999;visibility: hidden;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
			
			<view class="list-content" style="border-bottom: none;">
				<text class="margin-left5">帮助中心</text>
				<view class="apply-box">
					<text style="color: #999;visibility: hidden;">点击申请</text>
					<image src="../../static/arrow-right2.png" mode=""></image>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'selfCenter'
			}
		},
		onLoad() {

		},
		methods: {
         goTeamDetail(){
			 uni.navigateTo({
			 	url: '/pages/selfCenter/recommendTeam/index',
			 	success: res => {},
			 	fail: () => {},
			 	complete: () => {}
			 });
		 }
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.selfInfo-box {
		width: 100%;
		height: 330rpx;
		background: #1fa1fb;
		padding-top: 5%;
		color: #fff;
	}
	.self-auth {
		display: flex;
		align-items: center;
	}
    .self-auth image{
		margin-left: 5%;
    	height:120rpx;
    	width:120rpx;
    	border-radius: 50%;
    }
	.self-auth view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
    
	.self-content  {
		margin-top: 10%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.self-content view{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
		width: 100%;
		height: 240rpx;
	}
	
	.function-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background: #ff685a;
		width: 200rpx;
		height: 180rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #fff;
	}
	.function-content image {
		width: 75rpx;
		height: 75rpx;
		margin-top: 5%;
	}
	.function-content text {
		margin-bottom: 5%;
	}
	
	.list-box {
		width: 100%;
		margin-top: 3%;
		font-size: 30rpx;
	}
	
	.list-content {
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		border-bottom: 1px solid #dbdbdb;
	}
	.apply-box {
		display: flex;
		align-items: center;
		width: 180rpx;
	}
	.apply-box image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 5%;
	}
	.margin-left5 {
		margin-left: 5%;
	}
</style>