<template>
	<view class="page">
		<view class="box">
			<view class="title">充值金额</view>
			<view class="money">
				¥
				<input type="text" class="fill" />
			</view>

			<view class="huiyuanbot">
				<view class="behuiyuanbtn" @click="sureti">确认</view>
			</view>
		</view>

		<view class="cover" v-if="showwrap">
			<view class="coverBox">
				<view class="top">
					<view class="close" @click="hidewrap">
						<image src="../../static/colose.png" mode="widthFix" />
					</view>
					支付
				</view>
				<!-- <view class="monetall">
					<view class="moneyNum">￥2560.00</view>
					<view class="moneyTitle">订单总额</view>
				</view> -->
				<view class="payBox">
					<view class="payItem">
						<view class="left">
							<image src="../../static/paya.png" mode="widthFix" />
							支付宝
						</view>
						<view class="right">
							<image src="../../static/nocheck.png" mode="widthFix" class="check" />
						</view>
					</view>
					<view class="payItem">
						<view class="left">
							<image src="../../static/payb.png" mode="widthFix" />
							微信
						</view>
						<view class="right">
							<image src="../../static/check.png" mode="widthFix" class="check" />
						</view>
					</view>
				</view>
				<view class="submit">确认支付（￥2560.00）</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showwrap: false,
			};
		},
		methods: {
			sureti(){
				this.showwrap=true
			},
			// 隐藏弹出
			hidewrap(){
				this.showwrap=false
			}
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
		height: 100%;
	}

	.behuiyuanbtn {
		width: 686rpx;
		height: 88rpx;
		background: #C29445;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 10rpx;

	}

	.huiyuanbot {
		position: fixed;
		background: #fff;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 116rpx;
		padding: 14rpx 32rpx;
	}

	.box {
		margin-top: 20rpx;
		padding: 20rpx 32rpx 16rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eaeaea;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
		margin: 40rpx 0;
	}

	.money {
		display: flex;
		align-items: center;
		font-size: 72rpx;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: rgba(8, 18, 31, 1);
	}

	.fill {
		margin-left: 20rpx;
	}

	.cover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
	}

	.coverBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 566rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.top {
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(6, 18, 31, 1);
		border-bottom: 1px solid #eeeeee;
	}

	.close {
		width: 48rpx;
		position: absolute;
		left: 32rpx;
		top: 24rpx;
	}

	.close image {
		width: 100%;
	}

	.monetall {
		margin-top: 70rpx;
	}

	.moneyNum {
		font-size: 68rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(194, 148, 69, 1);
		text-align: center;
	}

	.moneyTitle {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(61, 68, 76, 1);
		text-align: center;
	}

	.payBox {
		margin-bottom: 80rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.payItem {
		margin-top: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(6, 18, 31, 1);
	}

	.left image {
		width: 48rpx;
		margin-right: 32rpx;
	}

	.right {
		width: 48rpx;
	}

	.check {
		width: 100%;
	}

	.submit {
		width: 686rpx;
		height: 88rpx;
		background: #c29445;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(254, 254, 254, 1);
		line-height: 88rpx;
		text-align: center;
		margin: 0 auto;
	}
</style>