JP-ChargeTeam51/pages/user/finance/balance.vue

<template>
	<view>
		<u-navbar title="我的余额"></u-navbar>
		<view class="balance">
			<view class="balanceHead">
				<view class="balanceCard">
					<view class="balanceCard-head">
						<font>总金额</font><u-icon name="question-line" custom-prefix="custom-icon" color="#fff" size="32"></u-icon>
					</view>
					<view class="balanceCard-main">
						<h2>120.00</h2>
						<view class="balanceCard-btn" @click="rechargeNow">立即充值</view>
					</view>
					<view class="balanceCard-foot">
						<view class="balanceCard-item">充值金额 100.00</view>
						<view class="balanceCard-item">赠送金额 100.00</view>
					</view>
				</view>
			</view>
			<view class="balanceMain">
				<view class="balanceMain-title">
					<view class="title">
						<u-icon name="todo-fill" custom-prefix="custom-icon" color="#6BC6A7" size="40"></u-icon>
						<span>余额明细</span>
					</view>
					<view class="more" @click="seeAll">
						<span>查看全部</span>
						<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
					</view>
				</view>
				<view class="balanceMain-list">
					<view class="balanceMain-item" @click="gotoUrl('pages/user/finance/rechargeDet?id=')">
						<view class="title">
							<font>充值 - 微信支付</font>
							<p>2021-12-31 09:00</p>
						</view>
						<h4>100.00</h4>
					</view>
					<view class="balanceMain-item">
						<view class="title">
							<font>充值 - 微信支付</font>
							<p>2021-12-31 09:00</p>
						</view>
						<h4>100.00</h4>
					</view>
					<view class="balanceMain-item">
						<view class="title">
							<font>充值 - 微信支付</font>
							<p>2021-12-31 09:00</p>
						</view>
						<h4>100.00</h4>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			rechargeNow() {
				uni.navigateTo({
					url: '/pages/user/finance/recharge'
				})
			},
			seeAll() {
				uni.navigateTo({
					url: '/pages/user/finance/rechargeList'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balanceHead{
		background-color: #fff;
		padding: 16px;
		.balanceCard{
			background-color: #00B962;
			border-radius: 12px;
			padding: 16px;
			.balanceCard-head{
				font{
					font-size: 18px;
					color:#fff;
					margin-right: 8px;
				}
			}
			.balanceCard-main{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 8px;
				h2{
					font-size: 40px;
					color:#fff;
					font-weight: normal;
				}
				.balanceCard-btn{
					padding: 8px 20px;
					background-color: #fff;
					color:#00B962;
					border-radius: 18px;
				}
			}
			.balanceCard-foot{
				display: flex;
				margin-top: 16px;
				.balanceCard-item{
					flex: 1;
					color:#fff;
				}
			}
		}
	}
	
	.balanceMain{
		background-color: #fff;
		margin-top: 12px;
		.balanceMain-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 48px;
			border-bottom: 1px solid #f7f7f7;
			padding: 0 16PX;
			.title{
				display: flex;
				align-items: center;
				span{
					margin-left: 8px;
					font-size: 16px;
				}
			}
		}
		.balanceMain-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12px 16px;
			p{
				font-size: 12px;
				color:#888;
				margin-top: 3px;
			}
		}
		
	}
</style>