mh/pages/me/carpassList/carpassList.vue

<template>
	<view>
		<view class="carpass-list">
			<template v-for="carpass in carpassList">
				<view class="carpass-item" :key="carpass.id">
					<view class="carpass-item-top">
						<view class="password">
							卡密：{{carpass.password}}
						</view>
					</view>
					<view class="carpass-item-bottom">
						<view class="price">
							<view class="symbol">￥</view>{{carpass.price}}
						</view>
						<view class="etime">
							充值时间：{{carpass.etime}}
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carpassList: []
			}
		},
		created(){
			this.loadCarpassList()
		},
		methods: {
			loadCarpassList(){
				this.$api.carpassList().then( res => {
					if(res.code === 1){
						this.carpassList = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.carpass-item{
		display: flex;
		flex-direction: column;
		margin: 0 10px;
		margin-bottom: 10px;
		background-color: white;
		padding: 10px;
		.password{
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.price{
			color: red;
			font-weight: bold;
			font-size: 14px;
			.symbol{
				display: inline-block;
			}
		}
		.etime{
			color: #7f7f7f;
		}
		> view{
			display: flex;
			> view{
				flex: 1;
			}
		}
	}
</style>