bawangcan-user/pages/member/cash.vue

<template>
	<view class="cash">

		<!-- background-image: url(../../static/img/my/cashbackground.png);background-size: 100%; -->
		<view class="showcash">
			<view class="left" style="width: 100px;float: left;">
				<view class="tips">可提现金额：</view>
				<view style="margin-top: 10px;font-size: 20px;">
					￥{{message}}
				</view>
			</view>
			<view class="right" style="float: right;margin-right: 50px;margin-top: 5px;">
				<image src="../../static/img/my/money.png" style="width: 65.96px;height: 72px;"></image>
			</view>
		</view>

		<view class="inputmoney">
			<view class="tips" style="padding: 10px;">提现金额</view>
			<view style="margin-left: 10px;">
				<view style="float: left;">￥</view>
				<input class="uni-input" type="number" placeholder="请输入金额" />
			</view>
		</view>

		<view class="changeways">
			<view class="tips" style="font-size: 12px;padding: 10px;font-family: PingFang SC;
		font-weight: 400;">兑换方式</view>
			<view style="display: flex;margin:0 16px;margin-top: 14px;justify-content: space-between;">
				<button class="wchat"><image src="../../static/img/my/wchart.png" style="width: 26.03px;height: 21.21px;margin-top: 5px;"></image>微信</button>
				<button class="alipay"><image src="../../static/img/my/alipay.png" style="width: 26.03px;height: 21.21px;margin-top: 5px;"></image>支付宝</button>
			</view>
		</view>

		<button class="cashout">立即提现</button>

		<view class="cashlog">提现记录</view>
		<view class="rules">
			<view class="content">
				<view style="font-size: 14px;margin-bottom: 4px;font-weight: Regular;">兑换规则:</view>
				<p>1.建议兑换时间周一至周五；</p>
				<p>2.建议提现金额超过100；</p>
				<p>3.除节假日外提现到账时间最晚不超过24小时；</p>
			</view>
			<view class="picture">
				<image src="../../static/img/my/cash.png" style="width: 113px;height: 91.89px;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: 10
			}
		}

	}
</script>

<style lang="scss">
	.cash {
		width: 100%;
	}

	.showcash,
	.inputmoney {
		height: 80px;
		background: #FFFFFF;
		border-radius: 6px;
		margin: 0 16px;
		margin-top: 16px;

	}

	.showcash .left {
		margin-left: 10px;
	}


	.tips {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 10px;
	}

	.changeways {

		height: 104px;
		background: #FFFFFF;
		border-radius: 6px;
		margin: 0 16px;
		margin-top: 16px;
	}

	.cashout {
		width: 343px;
		height: 40px;
		background: #FF2C2C;
		border-radius: 8px;
		margin-top: 48px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.cashlog {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		margin: 0 auto;
		margin-top: 22px;
		width: 48px;
		
		
	}

	.wchat {
		width: 144px;
		height: 32px;
		background: #32C45E;
		opacity: 1;
		border-radius: 8px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		padding-left: 45px;
	}

	.alipay {
		width: 144px;
		height: 32px;
		background: #31ADDC;
		opacity: 1;
		border-radius: 8px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		padding-left: 40px;
	}
	
	.rules{
		height: 120px;
		background: #FBD4D2;
		opacity: 0.56;
		border-radius: 6px;
		margin: 0 16px;
		margin-top: 10px;
		display: flex;
		
		.content{
			padding-top: 10px;
			margin-left: 5px;
			P{
				margin-bottom: 3px;
				font-family: YouSheBiaoTiHei;
				color: #999999;
				font-size: 12px;
			}
		}
	}
</style>