jp-housekeep-electric/pages/recharge/accountRecharge.vue

<template>
	<view>
		<u-navbar title="账户充值"  title-color="#101010" ></u-navbar>
		<view class="main">
			<view class="headline">
				<view class="title-left">
					<view class="icon">
						<image class="icon1" src="../../assets/img/PEokWS2@1x.png" mode=""></image>
					</view>
					<view class="text">
						账户充值

					</view>
				</view>
				<view class="title-right">
					<view class="icon">
						<image class="icon2" src="../../assets/img/riLine-file-text-line Copy l9stN6v.svg" mode=""></image>
					</view>
					<view class="text">
						历史账单
					</view>
				</view>
			</view>
			<view class="content">
				<!-- 可用余额 -->
				<view class="balance">
					<view class="balance-left">
						可用余额(元)
					</view>
					<view class="balance-right">
						88.88
					</view>
				</view>
				<!-- 提示 有余额-->
				
				<view class="hint">
					有余额，可提前充值
				</view>
				<!-- 提示 无余额 已欠费 -->
				<view class="hint hint2">
					已扣完，请尽快缴费
				</view>
				<!-- 租户信息 -->
				<view class="infos">
					<view class="item">
						<view class="item-title">
							租户信息
						</view>
						
						<view class="item-value">
							3~6楼联通公司
						</view>
					</view>
					
					<view class="item">
						<view class="item-title">
							户号
						</view>
						
						<view class="item-value">
							00880088
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							联系人
						</view>
						
						<view class="item-value">
							周琼
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							缴费单位
						</view>
						
						<view class="item-value">
							湖北荆鹏集团有限公司
						</view>
					</view>
				</view>
				<!-- 缴费金额 -->
				<view class="payment-amount">
					<view class="title">
						缴费金额
					</view>
					<view class="amount-options">
						<view class="options-item chosen">
							100元
						</view>
						<view class="options-item">
							200元
						</view>
						<view class="options-item">
							500元
						</view>
						<view class="options-item">
							1000元
						</view>
						<view class="options-item">
							2000元
						</view>
						<view class="options-item">
							5000元
						</view>
					</view>
				</view>
				<!-- 输入金额 -->
				<view class="input-amount">
					<view class="symbol">
						￥
					</view>
					<input class="input" type="text" placeholder="点击输入缴费金额">
				</view>
				<!-- 支付方式 -->
				<view class="payment-way">
					<view class="title">
						支付方式
					</view>
					<view class="way">
						<view class="way-item">
							<view class="way-name">
								<view class="icon">
									<image class="img" src="../../assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode=""></image>
								</view>
								<view class="text">
									微信支付
								</view>
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="" /><text></text>
								</label>
							</view>
						</view>
						
						<view class="way-item">
							<view class="way-name">
								<view class="icon">
									<image class="img" src="../../assets/img/antOutline-alipay-circle bQiHn7m.svg" mode=""></image>
								</view>
								<view class="text">
									支付宝
								</view>
							</view>
							<view class="way-radio">
								<label class="radio">
									<radio value="" /><text></text>
								</label>
							</view>
						</view>
						
					</view>
				</view>
				<!-- 按钮 -->
				<button class="btn" >立即缴费</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 50px;
	}
	.main{
		margin: 24rpx;
		overflow: hidden;
		.headline{
			background: linear-gradient(90deg, rgba(120,175,247,1) 0%,rgba(39,116,226,1) 100%);
			color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:24rpx;
			.title-left{
				display: flex;
				align-items: center;
				font-size: 36rpx;
				.icon1{
					width: 56rpx;
					height: 56rpx;
					margin-right: 8rpx;
					vertical-align: middle;
				}
			}
			.title-right{
				display: flex;
				font-size: 32rpx;
				line-height: 32rpx;
				.icon2{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					
				}
			}
			
		}
		
		.content{
			border-radius: 8px 8px 0 0 ;
			margin-top: -8rpx;
			z-index: 999;
			background-color: #fff;
			padding: 40rpx 32rpx;
			// 可用余额
			.balance{
				display: flex;
				justify-content: space-between;
				
				.balance-left{
					color: rgb(48,48,48);
					font-size: 36rpx;
					line-height: 40px;
				}
				.balance-right{
					color: rgb(48,48,48);
					font-size: 80rpx;
				}
			}
			// 提示
			.hint{
				font-size: 24rpx;
				color: #1677FF;
				margin-top: 16rpx;
				text-align: right;
				padding-bottom: 32rpx;
				border-bottom: 1px solid rgba(244,244,244,1);
			}
			.hint2{
				color: #E60012;
			}
			// 租户信息
			.infos{
				border-bottom: 1px solid rgba(244,244,244,1);
				margin-top: 32rpx;
				padding-bottom: 32rpx;
				.item{
					display: flex;
					justify-content: space-between;
					margin-bottom: 24rpx;
					
					.item-title{
						color: rgb(119,119,119);
					}
					.item-value{
						color: rgb(48,48,48);
					}
				}
			}
			// 缴费金额
			.payment-amount{
				margin-top: 32rpx;
				.title{
					color: rgb(48,48,48);
					font-size: 36rpx;
				}
				.amount-options{
					margin-top: 32rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.options-item{
						width: 200rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 4px;
						text-align: center;
						background-color: rgba(242,242,242,1);
						color: rgba(16,16,16,1);
						font-size: 32rpx;
						margin-bottom: 20rpx;
					}
					.chosen{
						background-color: rgba(22,119,255,1);
						color: rgba(255,255,255,1);
					}
				}
			}
			// 输入金额
			.input-amount{
				margin-top: 24rpx;
				display: flex;
				font-size: 48rpx;
				height: 100rpx;
				line-height: 100rpx;
				.symbol{
					margin-right: 32rpx;
				}
				.input{
					height: 100rpx;
					font-size: 48rpx;
					color: rgba(204,204,204,1);
				}
				/deep/.uni-input-placeholder{
					color: rgba(204,204,204,1);
				}
			}
		
		
		// 支付方式
		.payment-way{
			margin-top: 24rpx;
			.title{
				color: rgb(48,48,48);
				font-size: 36rpx;
			}
			.way{
				margin-top: 24rpx;
				.way-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;
					.way-name{
						display: flex;
						align-items: center;
						color: rgb(51,51,51);
						.img{
							width: 48rpx;
							height: 48rpx;
							vertical-align: middle;
							margin-right: 16rpx;
						}
					}
					/deep/.uni-radio-input{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		// 按钮
		.btn{
			height: 96rpx;
			border-radius: 50px;
			background-color: rgba(51,133,255,1);
			color: rgba(255, 255, 255, 1);
			font-size: 36rpx;
			margin-top: 48rpx;
		}
		
		}
	}

</style>