<template>
	<view class="user_container">
		<!-- 用户信息 -->
		<view class="user_info">
			<view class="user_logo"></view>
			<view class="user_text">
				<view class="user_name">
					<text>于慈航</text>
					<view class="code_card">VIP1</view>
				</view>
				<view class="tel_number">
					<text>手机号：</text>
					<text>17722701181</text>
				</view>
			</view>
		</view>
		<!-- 金额信息 -->
		<view class="amount_info">
			<view class="top">
				<view class="left">
					当前余额：<text>2333</text>
				</view>
				<view class="actions">
					<text>充值</text>
					<text>立刻提现</text>
				</view>
			</view>
			<view class="bottom">
				<view class="child">
					<text>累计收益</text>
					<text>123445</text>
				</view>
				<view class="child">
					<text>今日预估</text>
					<text>11111</text>
				</view>
				<view class="child">
					<text>昨日收入</text>
					<text>222</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.user_container {
		color: #FFFFFF;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.user_info {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

		.user_logo {
			height: 120rpx;
			width: 120rpx;
			border-radius: 50%;
			background-color: gray;
		}

		.user_text {
			font-size: 28rpx;
			line-height: 1;
			flex: 1;
			margin-left: 30rpx;
			align-self: center;

			.code_card {
				display: inline-block;
			}

			.tel_number {
				margin-top: 10rpx;
				color: #C4CBE4;
			}
		}
	}

	.amount_info {
		height: 230rpx;
		border-radius: 17rpx;
		background-color: #2B3062;
		margin-top: 40rpx;
		
		.top {
			border-radius: 17rpx 17rpx 0px 0px;
			height: 80rpx;
			align-items: center;
			background-color: #F7D8B2;
			display: flex;
			justify-content: space-between;

			.left {
				margin-left: 40rpx;
				font-size: 26rpx;
				color: #272727;

				text {
					margin-left: 20rpx;
					font-size: 38rpx;
				}
			}
			.actions{
				margin-right: 40rpx;
				width: 228rpx;
				height: 50rpx;
				background: #D8D8D8 linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
				border-radius: 25rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					position: relative;
					padding:0 10rpx;
					&:first-child::after{
						content: '';
						display: block;
						position: absolute;
						right: -2px;
						top: 2px;
						bottom: 2px;
						width: 4rpx;
						background-color: #FFFFFF;
					}
				}
			}
		}
		.bottom{
			height: 150rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			line-height: 1;
			.child{
				color: #C4CBE4;
				display: flex;
				font-size: 22rpx;
				align-items: center;
				flex-direction: column;
				text{
					&:last-child{
						margin-top: 10rpx;
						line-height: 50rpx;
						color: #FFFFFF;
						font-size: 36rpx;
					}
				}
			}
		}
	}
</style>
