retailStore/pages/selfCenter/awardPage/index.vue

<template>
	<view>
		
		<view class="header-box"></view>
		<view class="header-title">
			<text style="margin-top: 4%;">累计积分</text>
			<text style="margin-top: 2%;font-size: 36rpx;">66261</text>
		</view>
		
		
		<view class="count-deatil-box">
			
			<view class="count-detail-title">
				积分明细
			</view>
			
			<view class="leader-info" v-for="item in teamList" :key='item.id'>
				<image src="/static/bed2-bg.png"></image>
				<view class="leader-column">
					<view>
						<text>{{item.name}}</text>
						<text style="visibility: hidden;">A</text>
						<text>购买了产品</text>
					</view>
					<view>
						<text style="color:#ccc;font-size: 28rpx;">{{item.time}}</text>
					</view>
				</view>
				<view class="count-sum">
					{{item.count}}
				</view>
			</view>
		
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'selfCenter',
			teamList: [
				{
					name: '晚霞',
					count: '+12999',
					time: '2019-02-14 00:00',
					id: 1
				},
				{
					name: '午霞',
					count: '+5112',
					time: '2019-02-15 00:00',
					id: 2
				},
				{
					name: '午霞A',
					count: '+8999',
					time: '2019-02-15 01:00',
					id:3
				},
				{
					name: '午霞2',
					count: '+13999',
					time: '2019-02-16 00:00',
					id: 4
				}
			]
		};
	},
	onLoad() {
	},
	methods: {
	}
};
</script>

<style>
	
	
	.header-box {
		width: 100%;
		height: 180rpx;
		background: #1a9ed3;
	}
	
	.header-title {
		width: 93%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		z-index: 99;
		border-radius: 10rpx;
		font-size: 30rpx;
		margin: -13% auto;
		margin-bottom: 3%;
	}
	.count-sum {
		color: red;
		font-size: 32rpx;
	}
	
	.count-deatil-box {
		width: 93%;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		margin: 0 auto;
	}
	.count-detail-title {
		width: 89%;
		border-bottom: 1px solid #dbdbdb;
		padding: 10px;
		font-size: 32rpx;
	}
	
.leader-info {
	width: 90%;
	display: flex;
	align-items: center;
	background: #fff;
	padding: 20rpx;
	border-bottom: 1px solid #ccc;
}
.leader-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 90rpx;
	font-size: 28rpx;
	margin-right: 2%;
	width: 400rpx;
}
.leader-info image {
	height: 75rpx;
	width: 75rpx;
	border-radius: 50%;
	border: 1px solid #eee;
	margin-right: 3%;
}



</style>