XEH-miniProgram/pages/self/wallet/recharge.vue

<template>
	<view class="page-wrap">
		<view class="phone">18863100789</view>
		<view class="money-group">
			<view class="item" v-for="(item, index) in moneyList" :key="index" @click="handleOpenPay(item)">{{ item }}元</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			moneyList: [100, 200, 500, 1000, 2000, 5000]
		};
	},
	methods: {
		handleOpenPay(val){
			uni.navigateTo({
				url: 'pay'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.phone {
	padding: 89.29rpx 42.58rpx 0;
	font-size: 49.45rpx;
	color: #333;
	&::after {
		content: '当前操作用户';
		display: block;
		font-size: 27.47rpx;
		color: #999;
		margin-left: 12.36rpx;
	}
}
.money-group{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 41.21rpx 31.59rpx;
	.item{
		width: 219.78rpx;
		height: 123.63rpx;
		background: #fff;
		border-radius: 10.99rpx;
		border: 1rpx solid #e0e0e0;
		box-sizing: border-box;
		line-height: 120.88rpx;
		text-align: center;
		font-size: 38.46rpx;
		color: #7F2508;
		margin-bottom: 13.74rpx;
	}
}
</style>