cyzh-SoundOfMusic-H5/pages/mine/pointsDetail.vue

<template>
	<view>
		<view class="bg-img flex justify-center align-center" style="background-image: url('/static/bgimg.png');height: 310upx;">
			<view class="text-center" style="margin-top: 80upx;">
				<view style="font-size: 24upx;font-family: PingFang SC;font-weight: 400;color: #cfc8f9;">可用积分</view>
				<view style="font-size: 54upx;font-family: PingFang SC;font-weight: 800;color: #ffffff;">205</view>
			</view>
		</view>
		<block v-for="(item, index) in pointsList" :key="index">
			<view class="flex justify-between align-center container">
				<view class="padding">
					<view class="type">{{item.type}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="padding">
					<view class="points">{{item.points}} 积分</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pointsList: [
					{type: '每日签到', time: '2021-05-18 9:39', points: '+1'},
					{type: '立白助力礼包', time: '2021-05-18 9:39', points: '+168'},
					{type: '积分消费', time: '2021-05-18 9:39', points: '-80'},
					{type: '每日签到', time: '2021-05-18 9:39', points: '+1'},
					{type: '每日签到', time: '2021-05-18 9:39', points: '+1'},
					{type: '每日签到', time: '2021-05-18 9:39', points: '+1'},
					{type: '每日签到', time: '2021-05-18 9:39', points: '+1'}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx;
	}
	.type {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		margin-bottom: 20upx;
		color: #111111;
	}
	.time {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #9E9E9E;
	}
	.points {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
</style>