移动端简易的table表格

<template>
	<view>
		<view class="flex ac Dark" style="color: white;">
			<view class="p-2 " style="width:25%;text-align: center;">
				房间号
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				业绩金额
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				可提成金额
			</view>
			<view class="p-2 " style="width:25%;text-align: center;">
				赠送金额
			</view>
		</view>
		<block v-for="(item,index) in dataList" :key="index">
			<view class="flex ac Dark" :class="{'colour':index%2!=1}" style="color: #919DB5;">
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.num}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.price}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.tprice}}
				</view>
				<view class="p-2 " style="width:25%;text-align: center;">
					{{item.zprice}}
				</view>   
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			dataList:Array,
		},
		methods: {
			
		}
	}
</script>

<style>
.p-2{
	padding: 20rpx;
}
.flex{
	display: flex;
}
.ac{
	align-items: center;
}
.Dark{
	background-color: #37435F;
}
.colour{
	background-color: #313D58;
}
</style>