discounts-minapp/invite/index.vue

<template>
	<view class="popularize">
		
		<view class="content ">
			<view class="top-box">
				<view class="left">
					<view class="title">
						可提现金额
					</view>
					<view class="num">
						0
					</view>
					<view class="notice">
						每月25日后可申请提现
					</view>
				</view>
				<view class="withdraw" @click="jump('./withdraw')">
					提现
				</view>
			</view>
			
			<view class="bottom-box">
				<view class="money-box">
					<view class="title">
						0
					</view>
					<view class="label">
						总收入（元）
					</view>
				</view>
				
				<view class="money-box">
					<view class="title">
						0
					</view>
					<view class="label">
						已提现（元）
					</view>
				</view>
			</view>
		</view>
		
		<view class="content ">
			<u-cell-group :border="false">
				<u-cell
				    title="我的邀请码"
					isLink
					rightIcon="arrow-right"
					:border="false"
					@click="jump('./invite')"
				>
				<text
					slot="value"
					class="u-slot-value"
				>邀请二维码</text>
				</u-cell>
				<u-cell
				    title="邀请记录"
					rightIcon="arrow-right"
					:border="false"
				></u-cell>
				<u-cell
				    title="提现记录"
					rightIcon="arrow-right"
					:border="false"
				></u-cell>
			</u-cell-group>
		</view>
		
	</view>
</template>

<script>
	export default {
		methods: {
			jump(url) {
				uni.navigateTo({
					url
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
.popularize{
	padding: 20rpx 30rpx ;
	min-height: 100vh;
	background: #f5f5f5;
	.content{
		padding: 28rpx 24rpx ;
		border-radius: 16rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}
	
	.top-box{
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(243, 243, 243, 1);
		padding-bottom: 24rpx;
		.left{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				color: #181818;
				font-size: 28rpx;
			}
			.num{
				font-weight: bold;
				color: #222222;
				font-size: 36rpx;
				margin: 16rpx 0;
			}
			.notice{
				
				color: #999999;
				font-size: 24rpx;
			}
		}
		.withdraw{
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #2836FE;
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.16);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	
	.bottom-box{
		display: flex;
		padding-top: 34rpx;
		.money-box{
			flex: 1;
			padding-left: 20rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				color: #222222;
				font-size: 36rpx;
			}
			.label{
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
		.money-box+.money-box{
			border-left: 2rpx solid rgba(243, 243, 243, 1);
		}
	}
	
	.u-slot-value{
		
		font-size: 28rpx;
		color: #999999;
	}
	
}
</style>