mini_rabot/pages/selfInfo/rechargeRecord/rechargeRecord.vue

<template>
	<view class="content" :style="{height:nowHeight}">
		
		<view class="recharge-box" v-for="pay in payList" :key='pay.payId'>
			 <view class="recharge-time-box">
				 <view class="recharge-font">智能投顾</view>
				 <view class="recharge-time">{{pay.payTime}}</view>
			 </view>
			 <view class="recharge-money"> 
				 <text>{{pay.payMoney}}</text>
			 </view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				nowHeight:getApp().globalData.glbalHeight,
				payList:[
					{
						payTime:'8-28 17:27',
						payMoney:'¥ 14',
						payId:'A1',	
					},
					{
						payTime:'8-27 18:27',
						payMoney:'¥ 6',
						payId:'A2',
					},{
						payTime:'8-29 19:27',
						payMoney:'¥ 10'	,
						payId:'A3',
					},
				],
			}
		},
		methods: {
			
		}
	}
	
</script>

<style>
     .content {
     	display: flex;
     	flex-direction: column;
     	align-items: center;
     	justify-content: flex-start;
     	background: #f4f5f7;
     }
	 
	 .recharge-box {
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 background: #fff;
		 width:100%;
		 height: 150upx;
		 border-bottom: 1upx solid #D8D8D8;
	 }
	 
	 .recharge-time-box {
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: space-between;
		 margin-left: 5%;
		 height: 110upx;
	 }
	 .recharge-font {
		 font-size: 30upx;
		 margin-left: -10%;
	 }
	 .recharge-time {
		 color:#D9D9D9;
		 font-size: 26upx;
	 }
	 .recharge-money {
		 margin-right: 5%;
	 }
	 .recharge-money text {
		 font-size: 28upx;
	 }
</style>