null/pages/mine/balance/moreRecharge.vue

<template>
	<view class="page">
		<view class="p-recharge flex-col">
			  <view class="grid">
			    <view class="flex-col items-start grid-item" v-for="(item,idx) in 4" :key="idx">
			      <view class="group_7 align-center">
			        <text class="text_6">￥</text>
			        <text class="text_8 clamp">100</text>
			      </view>
			      <text class="text_10">充值金额</text>
			    </view>
			  </view>
		</view>
		<safe-area bgColor="#f8f8f8" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.page{
	padding: 30rpx;
}
.p-recharge{
  padding: 29rpx 20rpx 30rpx;
  background-color: #ffffff;
  border-radius: 4rpx;
	.text_4 {
	  color: #333333;
	  font-size: 30rpx;
	  font-family: PingFang;
	  line-height: 29rpx;
	  letter-spacing: 1.2rpx;
	}
	.group_6 {
	  margin-top: 4rpx;
	}
	.text_5 {
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	  line-height: 23rpx;
	}
	.image_5 {
	  margin-left: 13rpx;
	  flex-shrink: 0;
	  width: 12rpx;
	  height: 20rpx;
	}
	.grid {
	  display: grid;
	  grid-template-columns: repeat(2, 1fr);
	  row-gap: 22rpx;
	  column-gap: 22rpx;
	}
	.grid-item {
	  padding: 26rpx 22rpx 30rpx;
	  background-color: #ffffff;
	  border-radius: 4rpx;
	  border: solid 1rpx #d8d8d8;
	}
	.group_7 {
	  line-height: 31rpx;
	}
	.text_6 {
	  color: #333333;
	  font-size: 28rpx;
	  font-family: PingFang;
	  letter-spacing: 1.12rpx;
	}
	.text_8 {
	  color: #333333;
	  font-size: 40rpx;
	  font-family: PingFang;
	  max-width: 220rpx;
	  letter-spacing: 1.6rpx;
	}
	.text_10 {
	  margin-left: 7rpx;
	  margin-top: 13rpx;
	  color: #999999;
	  font-size: 24rpx;
	  font-family: PingFang;
	}
}
</style>