null/pages/mine/balance/moreRecord.vue

<template>
	<view class="page">
        <view class="p-list">
		    <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-list{
	background: #FFFFFF;
	border-radius: 4rpx;
	.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>