guosen-ldt-mall/pages/test/test.vue

<template>
	<view class="margin-30">
		<view class="bank">
			<view class="left center">
				<image src="@/static/bank/BOC.png" mode=""></image>
				<view class="content">
					<text>中国银行</text>
					<text>尾号8888储蓄卡</text>
				</view>
			</view>
			
			<view class="center">
				<text class="cuIcon-right" style="font-size: 36rpx;color: #888888;"></text>
			</view>
		</view>
		
		<view class="card">
			<text class="title">提现金额</text>
			
			<view class="input">
				<text class="text-price center  text-bold" style="font-size: 60rpx;"></text>
				<view class="margin-left-20" style="width: 60%;">
					<u-input placeholder="请输入提现金额" ></u-input>
				</view>
				<view class="center margin-bottom-10 margin-left-20">
					<view class="cu-btn withdraw-btn sm round center" >
						<text>全部提现</text>
					</view>
				</view>
			</view>
			
			<view class="canWithdraw">
				可提现金额
				<text class="text-price margin-left-20" style="font-size: 34rpx;">18.00</text>
			</view>
			<view class="rate">
				<view class="item">
					<text>服务费</text>
					<text class="text-price">0.10</text>
				</view>
				<view class="item">
					<view class="">
						<text>费率</text>
						<text @click="rateShow=true" class="cuIcon-question margin-left-10 text-lg"></text>
					</view>
					<text class="">0.05%</text>
				</view>
			</view>
		</view>
		
		<block>
			<view  class="footer-fixed center" style="bottom: 15%;z-index: 9;">
				<view @click="pass" class="cu-btn df btn-bg-color  radius " style="width: 86%;height: 86rpx;">
					<text>确认提现</text>
				</view>
			</view>
		</block>
		
		<u-popup v-model="rateShow" :mask-close-able="false" mode="center" height="40%" width="76%" borderRadius="20" negative-top="100">
			<view class="popup-content" style="height: 98%;">
				<view class="">
					<text class="popup-title">费率说明</text>
					<view class="popup-desc">
						<text>累计营收0-1000元，费率为0.5%;</text>
						<text>1001-10000元，费率为0.38%;</text>
						<text>10000-100000元，费率0.3%;</text>
						<text>100000元起申请更低费率。</text>
					</view>
				</view>
				<view class="center">
					<view  class="cu-btn btn-bg-color round" style="height: 80rpx;font-size: 30rpx;width: 80%;" @click="rateShow=false">
						确认
					</view>
				</view>
				
			</view>
		</u-popup>
		
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			rateShow:true
		};
	},
	onLoad() {
		
	},
	methods:{
		
	}
};
</script>

<style lang="scss" scoped>
	.bank{
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 40rpx;
		display: flex;
		justify-content: space-between;
		
		.left{
			display: flex;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}
			
			.content{
				display: flex;
				flex-direction: column;
				
				text:first-child{
					color: #252525;
					font-weight: 800;
					font-size: 34rpx;
				}
				
				text:last-child{
					margin-top: 10rpx;
					color: #888888;
					font-size: 26rpx;
				}
			}
		}
	}
	
	.card{
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 40rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		.title{
			font-size: 36rpx;
			font-weight: 800;
			margin-bottom: 30rpx;
		}
		
		.input{
			display: flex;
			border-bottom: 1rpx solid #DFDFDF;
			
			.withdraw-btn{
				background-color: #FFFFFF;
				color: #EE9230;
				border: 1rpx solid #EE9230;
				height: 54rpx;width: 180rpx;font-size: 28rpx;line-height: 54rpx;
			}
		}
		
		.canWithdraw{
			margin-top: 24rpx;
			color: #252525;
		}
		
		.rate{
			margin-top: 40rpx;
			
			.item{
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				
				text:first-child{
					color: #252525;
				}
				text:last-child{
					color: #999999;
				}
			}
		}
		
		
	}
	
	.submit-btn{
		background-color: #EE9230;	
		color: #FFFFFF;
		border-radius: 10rpx;
	}
	
	.popup-content{
		height: 100%;
		padding: 50rpx 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		
		.popup-title{
			font-size: 38rpx;
			font-weight: 800;
		}
		
		.popup-desc{
			margin-top: 50rpx;
			color: #666666;
			display: flex;
			flex-direction: column;
			text{
				line-height: 40rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>