JP-ChargeTeam51/pages/fastRecharge/fastRecharge.vue

<template>
	<view>
		<view class="container">
			<view class="top">
				<text class="iconfont back">&#xe602;</text>充电结束
			</view>
			<view class="main">
				<view class="text-1">
					选择充值金额
				</view>
				<view class="text-2">
					当前余额￥0.00
				</view>
				<!-- 金额选择 -->
				<view class="price-choices">
					<view class="choices-items">
						10
					</view>
					<view class="choices-items">
						20
					</view>
					<view class="choices-items">
						50
					</view>
					<view class="choices-items">
						100
					</view>
					<view class="choices-items">
						200
					</view>
					<view class="choices-items">
						500
					</view>
				</view>

				<view class="other-amount">其他充值金额
					<input type="text" placeholder="100" />
				</view>
	<!-- 支付方式 -->
				<view class="pay-methods">
					<view class="pay-text">
						选择支付方式
					</view>
					<view class="pay-items">
						<view class="item-left">
							<view class="iconfont wechat">&#xe62d;</view> <view class="left-text">微信支付</view>
						</view>
						<view class="item-right" >
						<label class="radio">
							<radio value="" /><text></text>
						</label>
						</view>
					</view>
					<view class="pay-items">
						<view class="item-left">
							<view class="iconfont alipay">&#xe630;</view> <view class="left-text">支付宝支付</view>
						</view>
						<view class="item-right" >
						<label class="radio">
							<radio value="" /><text></text>
						</label>
						</view>
					</view>
				
				</view>
			<u-radio-group class="agreement" v-model="value" label-size="">
				<u-radio shape="circle" >我已阅读并同意《充值协议》</u-radio>
			</u-radio-group>
			</view>
			
			<!-- 底部 -->
			<view class="bottom">
				<u-button class="button" shape="square">立即充值</u-button>
			</view>

		</view>
	</view>
</template>

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

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	// 头部

	.top {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		border: 1px solid rgba(242, 242, 242, 100);
	}

	// 主体
	.main {
		flex: 1; // 填充剩余空间
		width: 90%;
		margin: 0 auto;
		// padding: 20px 30px;

		.text-1 {
			height: 22px;
			color: rgba(16, 16, 16, 100);
			font-size: 16px;
			text-align: left;
			margin-top: 20px;
		}

		.text-2 {
			height: 20px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			text-align: left;
		}
      // 金额选择
		.price-choices {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.choices-items {
				width: 95px;
				height: 48px;
				line-height: 48px;
				border-radius: 4px;
				color: rgba(16, 16, 16, 100);
				font-size: 16px;
				text-align: center;
				font-family: Arial;
				border: 1px solid rgba(227, 227, 227, 100);
				
				margin-top: 10px;
			}
		}

		.other-amount {
			line-height: 20px;
			color: #666666;
			font-size: 14px;
			margin-top: 20px;
		}

		input {

			height: 44px;
			border-radius: 4px;
			font-size: 16px;
			border: 1px solid rgba(227, 227, 227, 100);
			line-height: 44px;
			margin-top: 8px;
			margin: 10px auto;
		}
	}
	// 支付方式
	.pay-methods{
		.pay-text{
			height: 22px;
			font-size: 16px;
			margin-top: 32px;
		}
		.pay-items{
			width: 100%;
			height: 48px;
			line-height: 48px;
			display: flex;
			justify-content: space-between;
			.item-left{
				width: 40%;
				display: flex;
				
				.wechat{
				 color: #22a438;
				 font-size: 24px;
				 display: inline-block;
				
				}
				.alipay{
					color: #1677ff;
					font-size: 24px;
				}
				.left-text{
					margin-left: 8px;
					
				}
			}
			
			
		}
		
	}
 
.agreement{
	 position: absolute;
	 left:23px;
	 bottom: 70px;
}

	// 底部
	.bottom {
		width: 100%;
		height: 64px;
		text-align: center;
		background-color: #fff;
		.button{
			width: 90%;
			border-radius: 50px;
			background-color: rgba(0, 185, 98, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 16px;
		}
			button::after {
				border: none;
			}
	}
</style>