lishang/pages/usdt/withdraw.vue

<template>
	<view class="content">
		<view class="title">
			<view class="money">
				{{money}}
			</view>
			<view class="name">
				可用额度
			</view>
		</view>
		<view class="tixian">
			<view class="tixian-title">
				<view class="title-left">
					<view class="kkk">

					</view>
					<text>提现信息</text>
				</view>
				<view class="title-right">
					<image src="../../static/usdt/right.png" mode=""></image>
				</view>
			</view>
			<view class="erweima flex">
				<view class="box1">
					二维码
				</view>
				<view class="img">
					<image src="../../static/usdt/image.png" mode=""></image>
				</view>
			</view>
			<view class="quantity flex">
				<view class="box">
					提现数量
				</view>
				<input class="input" type="text" :placeholder='text' />
				
			</view>
			<view class="quantity flex">
				<view class="box">
					手续费
				</view>
				<input class="input" type="text" :placeholder='text1' />
			</view>
			<view class="quantity flex">
				<view class="box">
					实际到账数量
				</view>
				<input class="input" type="text" placeholder="0.00" />
			</view>
		</view>
		<view class="button">
			确认提现
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: 1000,
				shouxu:20
			}
		},
		methods: {

		},
		computed: {
			text(){
				return '输入所需提币数量(最低' + this.money + 'USDT起提'
			},
			text1(){
				return '提取'+this.shouxu+'%手续费'
			}
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		
		height: 100%;
		background: #F3F3F3;
		padding: 0;
		margin: 0;
	}
	.box{
		width: 200rpx;
		
		margin: 0 30rpx;
	}
	.input{
		width: 100%;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 55rpx;
	}

	.title {
		background-color: #FFFFFF;
		width: 100%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.money {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
		}

		.name {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #666666;
			line-height: 46rpx;
		}
	}

	.tixian {
		width: 100%;
		background-color: #FFFFFF;
		margin: 20rpx 0;
		display: flex;
		flex-direction: column;
		.tixian-title {
			border-bottom: #F3F3F3 solid 0.1rpx;
			width: 100%;
			padding: 20rpx 0;
			

			.title-left {
				display: flex;
				align-items: center;

				.kkk {
					margin: 0 16rpx 0 30rpx;
					width: 2rpx;
					height: 30rpx;
					background: linear-gradient(90deg, #44BFEC, #438BED);
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 55rpx;
				}
			}

			.title-right {
				width: 28rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.erweima{
			display: flex;
			justify-content: flex-start;
			width: 100%;
			.box1{
				margin:  30rpx;
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 500;
				color: #333333;
				
				width:140rpx;
				height: 100rpx;
			}
			
			.img{
				width:100rpx;
				height: 100rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.quantity{
		border-bottom: #F3F3F3 solid 0.1rpx;
		display: flex;
		justify-content: center;
			width: 100%;
			height: 80rpx;
			font-size: 24rpx;
			font-family: PingFangSC;
			font-weight: 500;
			color: #333333;
			line-height: 80rpx;
			
		}
		
		
	}
	.button{
		margin: 100rpx 30rpx;
		text-align: center;
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #44BFEC, #438BED);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFangSC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>