<template>
	<view class="main">
		<view class="balance">
			<view class="title">
				可提现余额
			</view>
			<view class="balance-span site-flex">
				<text class="fuhao">$</text>
				<text>120.00.00</text>
			</view>
		</view>
		<view class="with">
			<view class="tabs ">
				<view class="tab" :class="[activeIndex == 0 ? 'activeTab': '']" @click="setIndex(0)">我要提现</view>
				<view class="tab" :class="[activeIndex == 1 ? 'activeTab': '']"  @click="setIndex(1)">提现记录</view>
			</view>
		</view>
		<view class="_input">
			<!-- <u--input
			    placeholder="请输入提现金额"
				class='_input'
			    border="surround"
			    v-model="value"
			  ></u--input> -->
			<input  placeholder-style="font-size:32upx;"  @focus="onfocus" v-model="number" placeholder="请输入提现金额"></input>
			<text>全部提现</text>
		</view>
		<view class="card">
			<BankCrad></BankCrad>
		</view>
		<view class="btn">
			<u-button :circle="true" color="linear-gradient(to right, rgba(22, 104, 214, 1), rgba(88, 153, 235, 1))">立即提现</u-button>
		</view>
	</view>
</template>

<script>
	import BankCrad from  "./component/Card.vue"
	export default {
		data(){
			return{
				activeIndex:0
			}
		},
		
		methods:{
			onfocus(e){
				
			},
			setIndex(e){
				this.activeIndex = e
			}
		},
		components: {
			BankCrad
		},
	}
</script>

<style lang="scss">
	page{
		background:#fff !important
	}
	body{
		background:#fff !important
	}
		
	html{
		background:#fff
	}
	@import "@/font.css";
	.tabs{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20upx;
		view{
			flex: 1;
			text-align: center;
			color:#333;
			border-radius: 20upx;
			padding: 20upx;
		}
	}
	.btn{
		padding: 40upx;
	}
	._input{
		padding:40upx;
		display: flex;
		align-items: flex-end;
		text{
			color: #333 !important ;
			font-size: 28upx;
			margin-left: 10upx;
			font-weight: 500;
		}
		input{
			border-bottom: 2px solid #2963e2;
			// border-bottom: 2px solid #333;
			padding: 20upx;
			flex: 1;
			font-family: 'Product-Sans-Bold';
			font-weight: 600;
			font-size: 56upx;
				
		}
		input::focus{
			border-bottom: 2px solid #2963e2 !important;
		}
	}
	.activeTab{
		padding: 20upx;
		font-weight: 500;
		color:#fff !important;
		background: #2963e2;
		border-radius: 20upx;
	}
	.balance-span{
		font-family: 'Product-Sans-Bold';
		font-weight: 700;
		font-size: 70upx;
		padding-bottom: 80upx;
	}
	.fuhao{
		font-size: 38upx;
	}
	.title{
		font-size: 30upx;
		font-weight: 400;
	}
	.card{
		padding: 40upx;
	}
	.with{
		margin-top: -20px;
		background: #fff;
		border-top-left-radius: 50upx;
		border-top-right-radius: 50upx;
		width: 100%;
		height: 100%;
	}
	.balance{
		padding: 15upx 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		view{
			margin: 10upx;
			color: #fff;
		}
		background: #2963e2;
		// border-bottom-left-radius: 20upx;
		// border-bottom-right-radius: 20upx;
	}
</style>