Homestay_gongzhonghao/components/liebiao/dingdanliang.vue

<template>
	<view>
		<uni-table stripe emptyText="暂无更多数据" >
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">排行</uni-th>
				<uni-th align="center">民宿名称</uni-th>
				<uni-th align="center">订单量（个）</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in dingPai" :key="index">
				<uni-td align="center">
					<view class="uni-group">
						<button class="uni-button" v-if="item.rank==1">{{item.rank}}</button>
						<button class="uni-button2" v-if="item.rank==2">{{item.rank}}</button>
						<button class="uni-button3" v-if="item.rank==3">{{item.rank}}</button>
						<button class="uni-button4" v-if="item.rank>3">{{item.rank}}</button>
					</view>
					<!-- <view>{{item.measureTime.slice(11,19)}}</view> -->
				</uni-td>
				<uni-td align="center">{{item.hotelName}}
					<!-- <template v-if="item.status==0">
						空腹
					</template> -->
				</uni-td>
				<uni-td align="center">{{item.bookNum}}
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		props: {
			dingPai:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
		},
		mounted() {
		},
		data() {
			return {
				dingPai:[]
			}
		},
		watch:{
		   dingPai: {
				immediate: true,
				handler(value) {
				  this.dingPai = value
				}
			},
		},
		methods: {},
	 
	}
</script>

<style>
	/* >>>.uni-table-tr[data-v-c2c83a8e] {
		margin-top: 18rpx;
	    display: table-row;
	    transition: all 0.3s;
	    box-sizing: border-box;
	    height: 103rpx;
	    opacity: 1;
	    background: rgba(242, 246, 250, 1);
	}
	>>>.uni-table-th[data-v-511e81f9] {
	    padding: 12px 10px;
	    display: table-cell;
	    box-sizing: border-box;
	    font-size: 28rpx;
	    font-weight: 500;
	    color: rgba(0, 0, 0, 1);
	    border-bottom: 1px #ebeef5 solid;
	}
	>>>.uni-table-td[data-v-321f8e79] {
	    display: table-cell;
	    border-bottom: 1px #EBEEF5 solid;
	    font-size: 24px;
		transform: scale(0.6);
	    font-weight: 500;
	    color: rgba(0, 0, 0, 1);
	    line-height: 24px;
	    box-sizing: border-box;
	} */
	/* 排行图标 */
	.uni-group {
		display: flex;
		align-items: center;
	}
	.uni-button{
		color:#FFFFFF;
		/* width: 30px;
		height: 30px; */
		box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
		transition: unset;
		color:#FFFFFF;
		font-size: 28rpx;
		background: linear-gradient(183deg, #d93f52 0%, #f6909c 100%);
		border-radius:50%;
	}
	.uni-button2{
		color:#FFFFFF;
		box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
		transition: unset;
		color:#FFFFFF;
		font-size: 28rpx;
		background: linear-gradient(183deg, #7ebc1c 0%, #c4eb88 100%);
		border-radius:50%;
	}
	.uni-button3{
		color:#FFFFFF;
		box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
		transition: unset;
		color:#FFFFFF;
		font-size: 28rpx;
		background: linear-gradient(183deg, #ef9237 0%, #efaa66 100%);
		border-radius:50%;
	}
	.uni-button4{
		color:#FFFFFF;
		box-shadow: rgba(255, 255, 255, 0) 0px 0px 1px;
		transition: unset;
		color:#FFFFFF;
		font-size: 28rpx;
		background-color:rgba(165, 165, 165, 255);
		border-radius:50%;
	}
</style>