hotelHomestayWx/pagesHouse/home/orderList.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="订单列表"></c-nav-bar>
		<view class="query">
			<u-icon @click="" name="calendar" label="自定义查询" labelPos="right" labelColor="#666" color="#666" space="10px"></u-icon>
		</view>
		<view class="list">
			<view class="time">
				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
			</view>
			<view class="content">
				<view class="li first">
					<text>订单信息</text>
					<text>销量</text>
					<text>成交金额</text>
				</view>
				<view class="li" v-for="(item,index) in data" :key="index">
					<view class="avatar">
						<image :src="emg"></image>
						<text>黄山村渔家乐12客位体验渔民出海</text>
					</view>
					<text>897</text>
					<text>￥765</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				data: [1, 2, 3, 4, 5],
				name: '黄沙村渔家乐',
				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
				icons: ['https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		.query{
			height: 100rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			background-color: #fff;
		}
		.list {
			width: calc(100% - 36rpx);
			margin: 20rpx auto;
			padding: 0 0 6rpx;
			.time {
				margin: 24rpx 0;
				color: #111;
			}

			.content {
				background-color: #fff;
				padding: 22rpx 20rpx 4rpx;
				border-radius: 24rpx;
				.li {
					display: grid;
					grid-template-columns: 60% 20% 20%;
					align-items: center;
					margin-bottom: 24rpx;


					text {
						color: #333;
						font-size: 26rpx;
					}

					.avatar {
						display: flex;
						align-items: center;

						image {
							width: 90rpx;
							min-width: 90rpx;
							height: 90rpx;
							margin-right: 20rpx;
						}

						text {
							width: 100px;
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							font-size: 24rpx;
							line-height: 33rpx;
							/* 这里是超出几行省略 */
							overflow: hidden;
						}
					}

					&.first {
						margin-bottom: 30rpx;

						text {
							color: #5A697C;
						}
					}

				}
			}
		}
	}
</style>