<template>
	<view class="content">
		<headerTopsTips></headerTopsTips>
		<uni-nav-bar left-icon="left" title="充值" backgroundColor="#e6eafa" />
		<view class="t_1">
			<view class="">
				<view class="per_rech">
					<text>账户充值</text>
					<text>支持绿色出行</text>
				</view>
				<view class="">
					我的余额: -1元
				</view>
			</view>
			<view class="">

			</view>
		</view>
		<!--  -->
		<view class="pro_line">

		</view>
		<view class="money">
			充值金额
		</view>
		<!--  -->
		<view class="money_number">
			<view style="margin-right: 10rpx;">
				<text>充300元</text>
				<text>送300元</text>
			</view>
			<view style="margin-left: 10rpx;">
				<text>充100元</text>
				<text>送75元</text>
			</view>
		</view>
		<view class="money_number" style="margin-top: 20rpx;">
			<view style="margin-right: 10rpx;">
				<text>充50元</text>
				<text>送20元</text>
			</view>
			<view style="margin-left: 10rpx;">
				<text>充20元</text>
				<text>送5元</text>
			</view>
		</view>
		<!--  -->
		<view class="money">
			选择支付方式
		</view>
		<view class="center_con">
			<!--  -->
			<view class="t_3">
				<view style="display: flex; align-items: center;">
					<view class="square">
					</view>
					<text style="margin-left: 15rpx; font-size: 12px;">支付宝支付</text>
				</view>
				<!-- <u-radio-group v-model="checkvalue">
					<u-radio shape="circle">
					</u-radio>
				</u-radio-group> --> 
			</view>
			<view class="t_3">
				<view style="display: flex; align-items: center;">
					<view class="square">
					</view>
					<text style="margin-left: 15rpx; font-size: 12px;">微信支付</text>
				</view>
				<!-- <u-radio-group v-model="checkvalue">
					<u-radio shape="circle">
					</u-radio>
				</u-radio-group> -->
			</view>
			<view class="btn_bottom">
				<button>立即充值</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		height: 100vh;
		box-sizing: border-box;
	}

	.t_1 {
		margin-top: 20rpx;
		display: flex;

		>view {
			flex: 1;
			height: 200rpx;

			.per_rech {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}
		}

		>view:first-child {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		>view:last-child {
			background: #eeeeee;
		}
	}

	.pro_line {
		margin-top: 20rpx;
		border: 1px solid #d9d9d9;
	}

	.money {
		margin: 40rpx 0 20rpx 0;
		font-size: 12px;
		font-weight: 600;
	}

	.money_number {
		display: flex;

		// justify-content: space-between;
		>view {
			flex: 1;
			height: 150rpx;
			border: 1px solid #d9d9d9;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			>text:first-child {
				font-size: 14px;
				font-weight: 600;
			}

			>text:last-child {
				font-size: 12px;
				color: #999999;
				margin-top: 15rpx;
			}
		}

		>view:first-child {
			background: #000000;
			color: #fff;
		}
	}

	.center_con {
		padding: 20rpx;
		box-sizing: border-box;

		.t_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.deposi {
				font-size: 18px;
				font-weight: 600;
			}
		}

		.t_2 {
			font-size: 12px;
			color: #999999;
		}

		.t_3 {
			border-bottom: 1px solid #ccc;
			// height: 50rpx;
			padding: 25rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.square {
				width: 30rpx;
				height: 30rpx;
				background: #ccc;
			}
		}

		.btn_depo {
			margin-top: 30rpx;
		}
	}
	.btn_bottom {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 30rpx;
		left: 0;
		button {
			background: #000000;
			color: #fff;
			font-size: 14px;
			line-height: 90rpx;
		}
	}
</style>