JP-ChargeTeam51/pages/newPage/chargeMoney/withdraw.vue

<template>
	<view>
		<ujp-navbar title="充电金提现">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
		
				<view class="right-text">
					交易规则
				</view>
			</view>
		</ujp-navbar>
		<!-- 提现方式 -->
		<view class="withdraw-method">
			<view class="title">
				提现至
			</view>
			<view class="item">
				<view class="icon">
					<img src="../../../assets/img/st-coin.svg" alt="">
				</view>
				<view class="text">
					<view class="title">
						会员账户余额
					</view>
					
				</view>
				<view class="radio">
					<label class="radio">
						<radio value="" /><text></text>
					</label>
				</view>
				
			</view>
			<view class="item">
				<view class="icon">
					<img src="../../../assets/img/riFill-bank-card-fill.svg" alt="">
				</view>
				<view class="text">
					<view class="title">
						银行转账
					</view>
					
				</view>
				<view class="radio">
					<label class="radio">
						<radio value="" /><text></text>
					</label>
				</view>
				
			</view>
		</view>
	   <!-- 提现金额 -->
	<view class="withdraw-amount">
		<view class="title">
			提现金额(元)
		</view>
		<view class="input-amount">
		￥<input placeholder="本次最多可提现200.00元">
		<view class="all">
			全部
		</view>
		</view>
		
		
	</view>
	 <!-- 银行卡信息 -->
	 <view class="bank-card">
	 	<view class="title">
	 		提现银行卡信息
	 	</view>
		<view class="bank-name">
			<view class="icon">
				<img src="../../../assets/img/bankIcon.svg" alt="">
			</view>
			<view class="name">
				中国工商银行
			</view>
			<view class="change">
				更换<u-icon name="arrow-down" color="#999999" size="26"></u-icon>
			</view>
		</view>
		<view class="infos">
			<view class="item">
				<view class="title">
					姓名
				</view>
				<view class="input">
					<input placeholder="输入本人真实姓名">
				</view>
			</view>
			<view class="item">
				<view class="title">
					卡号
				</view>
				<view class="input">
					<input placeholder="输入本人银行卡号">
				</view>
			</view>
		</view>
	 </view>
	<!-- 确认提现 -->
	<button class="confirm">确认提现</button>
	</view>
</template>

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

<style lang="scss" scoped>
	// 提现方式
	.withdraw-method{
		margin: 24rpx 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 12px;
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}
		.item{
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			.icon{
				width: 40px;
				height: 40px;
				line-height: 20px;
				border-radius: 8px;
				border: 1px solid rgba(226, 226, 226, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				img{
					vertical-align: middle;
				}
			}
			.text{
				margin-left: 32rpx;
				.title{
					color: rgba(16, 16, 16, 1);
				}
				
			}
			.radio{
	               margin-left:auto;
				   ::v-deep.uni-radio-input-checked{
					   background-color: #00B962 !important;
					   border-color: #00B962 !important;
				   }
				   ::v-deep.uni-radio-input{
					   width: 38rpx;
					   height: 38rpx;
				   }
			}
		}
		
	}
// 提现金额
.withdraw-amount{
	margin: 24rpx 32rpx;
	background-color: #fff;
	padding: 32rpx;
	border-radius: 12px;
	.title{
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}
	.input-amount{
		display: flex;
		align-items: center;
		color: rgba(51, 51, 51, 1);
		font-size: 56rpx;
		margin-top: 60rpx;
		border-bottom: 1px solid #E4E4E4;
		padding-bottom: 8rpx;
		uni-input{
			height: 56rpx !important;
			line-height: 56rpx;
			font-size: 36rpx;
			color: #cccccc;
		}
		::v-deep.uni-input-placeholder{
			color: #cccccc;
		}
		.all{
			color: rgba(0, 185, 98, 1);
			margin-left: auto;
			font-size: 28rpx
		}
	}
	}
	//提现银行卡信息
	.bank-card{
		margin: 24rpx 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 12px;
		.title{
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
		}
		.bank-name{
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			.icon{
				border: 1px solid rgba(226, 226, 226, 1);
				width: 80rpx;
				height: 80rpx;
				border-radius: 8px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.name{
				margin-left: 48rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 36rpx;
			}
			.change{
				margin-left: auto;
				color: rgba(119, 119, 119, 1);
				font-size: 32rpx;
				line-height: 40rpx;
			}
			.u-icon{
				margin-left: 8rpx;
			}
		}
	   .infos{
		   margin-top: 40rpx;
		   .item{
			   display: flex;
			   
			   margin-top: 40rpx;
			   .title{
				   margin-right: 40rpx;
			   }
			   .input{
				   flex: 1;
				   border-bottom: 1px solid #E4E4E4;
				   padding-bottom: 16rpx;
			   }
		   }
	   }
	}

// 确认提现
.confirm{
	margin:40rpx 32rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 50px;
	background-color: rgba(0, 185, 98, 1);
	color: rgba(255, 255, 255, 1);
	font-size: 36rpx;
}

</style>