<template>
	<view class="main">
		<u-navbar
			title="提现"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view class="top">
			<text class="text_28_unbold">到账银行卡</text>
			<view class="bank_box">
				<image class="bank_icon" src="../../static/images/bank/nongye.png"/>
				<text class="bank_text">中国xxxx银行（****6969）</text>
				<text class="bank_info" style="left: 66rpx;top: 104rpx;">预计两小时到账</text>
			</view>
		</view>
		<view class="center">
			<text class="text_28_unbold" style="left: 0rpx;top: 30rpx;position: absolute;">提现金额</text>
			<text class="money_big" style="position: absolute;left: 24rpx;bottom: 100rpx;">￥</text>
			<input :adjust-position="true"
					type="number"
					value="2000"
					placeholder="0.00"
					
					@blur="onInputEnd"
					class="input_money"
			></input>
			<view style="width: 662rpx;height: 1rpx;border: 1rpx solid #E2E2E2;position: absolute;left: 24rpx;bottom: 90rpx;" />
			<text class="bank_info" style="left: 24rpx;bottom: 38rpx;">
				可提现金额￥5000.00
			</text>
		</view>
		<button class="button">提现</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * 点击了导航上的返回按钮
			 */
			onBackTouched(){
				
			},
			/**
			 * @param {Object} obj 输入框失去焦点
			 */
			onInputEnd(obj){
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.top{
		width: 750rpx;
		height: 202rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.text_28_unbold{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		margin-left: 24rpx;
	}
	
	.bank_box{
		width: 550rpx;
		height: 202rpx;
		//background-color: #2979FF;
		border-radius: 20rpx;
		margin-right: 24rpx;
		position: relative;
	}
	.bank_text{
		height: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		opacity: 1;
		position: absolute;
		left: 66rpx;
		top: 64rpx;
	}
	.bank_info{
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
	}
	.bank_icon{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 24rpx;
		top: 69rpx;
	}
	
	.center{
		width: 702rpx;
		height: 360rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
		left: 24rpx;
		top: 20rpx;
	}
	.money_big{
		height: 92rpx;
		font-size: 66rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.input_money{
		position: absolute;left: 85rpx;
		bottom: 100rpx;
		width: 590rpx;
		height: 92rpx;
		font-size: 66rpx;
		font-weight: bold;
		color: #333333;
	}
	.button{
		position: relative;
		
		top: 50rpx;
		width: 702rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 93rpx;
		background: #D49B4B;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 400;
	}
</style>
