wx-qhb/pageC/accountBalance/accountBalance.vue

<template>
	<view class="balance">
		<view class="shadow">
		</view>
		<view class="mine-balance">
			<view class="title">
				我的余额（元）
			</view>
			<view class="money"> 500.00 </view>
			<view class="btn-list">
				<button class="withdrawal">提现</button>
				<button class="recharge">充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		created() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#f74639'
			})
		}
	}
</script>

<style lang="scss">
	.balance {
		position: relative;
		padding-top: 10px;
		.shadow {
			position: absolute;
			top: 0;
			height: 300px;
			width: 100%;
			background: linear-gradient(#f74639, #f4f4f4);
			z-index: -1;
		}
		.mine-balance{
			width: 96%;
			margin: 0 auto;
			background-color: #fff;
			border-radius: 10px;
			padding-top: 82rpx;
			padding-bottom: 62rpx;
			.title{
				text-align: center;
				font-size: 28rpx;
				color: #222;
			}
			.money{
				font-size: 84rpx;
				color: #222;
				font-weight: 600;
				text-align: center;
				margin-top: 36rpx;
			}
			.btn-list{
				display: flex;
				justify-content: space-around;
				margin-top: 76rpx;
				.withdrawal{
					width: 298rpx;
					height: 88rpx;
					background-color: rgba(248, 50, 36, 0.1);
					border-radius: 44px;
					color: #f83224;
					font-size: 32rpx;
				}
				.recharge{
					width: 298rpx;
					height: 88rpx;
					background-color: #f83224;
					border-radius: 44px;
					color: #fff;
					font-size: 32rpx;
					box-shadow: 0rpx 12rpx 28rpx -12rpx #f83224;
				}
			}
		}
	}
</style>