null/pages/mine/balance/myBalance.vue

<template>
	<view class="page">
		<view class="p-money flex-col items-start">
			  <text class="key">余额</text>
			  <text class="val clamp">387.50</text>
		</view>
		<view class="p-recharge flex-col">
			  <view class="flex-row justify-between">
			    <text class="text_4">充值中心</text>
			    <view class="flex-row group_6">
			      <text class="text_5">更多</text>
			      <image
			        src="/static/rech-rarrow.png"
			        class="image_5"
			      />
			    </view>
			  </view>
			  <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>
		
		<view class="p-list">
			<view class="flex-row justify-between title-wrap">
			  <text class="title">账户明细</text>
			  <view class="flex-row group_9">
			    <text class="txt">更多</text>
			    <image
			      src="/static/rech-rarrow.png"
			      class="ic"
			    />
			  </view>
			</view>
		    <view class="list-wrap flex-col">
				  <view class="flex-col list-item" :key="i" v-for="(item, i) in 8">
				    <view class="flex-row justify-between">
				      <text class="name clamp">幸福西饼四拼多口味蛋糕</text>
					  <!-- add -->
				      <text class="price">-￥148.50</text>
				    </view>
				    <text class="time">2022/07/15 15:12</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-money{
	  padding: 22rpx 30rpx 51rpx;
	  background-color: #92b99c;
	  border-radius: 10rpx;
	.key {
	  color: #ffffff;
	  font-size: 32rpx;
	  font-family: PingFang;
	  letter-spacing: 1.28rpx;
	}
	.val {
	  margin-top: 27rpx;
	  color: #ffffff;
	  font-size: 54rpx;
	  font-family: PingFang;
	  letter-spacing: 2.16rpx;
	  max-width: 400rpx;
	}
}
.p-recharge{
  margin-top: 24rpx;
  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 {
	  margin-top: 41rpx;
	  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;
	}
}
.p-list{
	margin-top: 20rpx;
	background: #FFFFFF;
	border-radius: 4rpx;
	.title-wrap{
		  padding: 29rpx 20rpx 30rpx 21rpx;
		  border-bottom: solid 2rpx #0000001a;
		.title{
		  color: #333333;
		  font-size: 30rpx;
		  font-family: PingFang;
		  line-height: 29rpx;
		  letter-spacing: 1.2rpx;
		}
		.group_9 {
		  margin-top: 4rpx;
		}
		.txt {
		  color: #999999;
		  font-size: 24rpx;
		  font-family: PingFang;
		  line-height: 23rpx;
		}
		.ic{
		  margin-left: 13rpx;
		  flex-shrink: 0;
		  width: 12rpx;
		  height: 20rpx;
		}
	}
    .list-wrap{
		.list-item{
			padding: 40rpx 27rpx 40rpx 30rpx;
		}
		.list-item:not(:last-of-type) {
		  border-bottom: solid 2rpx #0000000f;
		}
		.name {
		  color: #333333;
		  font-size: 30rpx;
		  font-family: PingFang;
		  letter-spacing: 1.2rpx;
		  max-width: 439rpx;
		}
		.price {
		  margin-top: 6rpx;
		  color: #ea5f58;
		  font-size: 30rpx;
		  font-family: PingFang;
		  &.add{
			  color:#333333;
		  }
		}
		.time {
		  margin-top: 14rpx;
		  align-self: flex-start;
		  color: #999999;
		  font-size: 24rpx;
		  font-family: PingFang;
		}
	}
}
</style>