hotelHomestayWx/pagesHouse/home/index.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px'}">
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left">
				<text>{{name}}</text>
			</view>
		</u-navbar>
		<view class="bg" :style="{'padding-top':(mt+10)+'px'}">
			<view class="dataBox">
				<view class="item">
					<view>成交金额</view>
					<view>￥<text>238</text></view>
					<view>昨日¥900.78</view>
				</view>
				<view class="item">
					<view>成交订单数</view>
					<view>￥<text>238</text></view>
					<view>昨日8</view>
				</view>
				<view class="item">
					<view>退款金额</view>
					<view>￥<text>238</text></view>
					<view>昨日¥900.78</view>
				</view>
				<view class="item">
					<view>退款订单数</view>
					<view>￥<text>238</text></view>
					<view>昨日8</view>
				</view>
				<view class="item">
					<view>已购商品数量</view>
					<view>￥<text>238</text></view>
					<view>昨日78</view>
				</view>
			</view>
			<view class="numberData">
				<view>
					<text>0</text>
					<text>待付款</text>
				</view>
				<view>
					<text>0</text>
					<text>待使用</text>
				</view>
				<view>
					<text>0</text>
					<text>已完成</text>
				</view>
				<view>
					<text>0</text>
					<text>已取消</text>
				</view>
				<view>
					<text>0</text>
					<text>退款售后</text>
				</view>
			</view>
			<view class="menus">
				<view @click="toHref('/pagesHouse/home/bill')">
					<image :src="icons[0]"></image>
					<text>交易账单</text>
				</view>
				<view>
					<image :src="icons[1]"></image>
					<text>资金账单</text>
				</view>
				<view>
					<image :src="icons[2]"></image>
					<text>数据统计</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="tit">
				<text>订单列表</text>
				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
				<u-icon @click="more()" name="arrow-right" label="查看全部" labelPos="left" labelSize="13px" labelColor="#808080" color="#AAA"></u-icon>
			</view>
			<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>
</template>

<script>
	export default {
		data() {
			return {
				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'
				]
			}
		},
		methods:{
			toHref(url){
				uni.redirectTo({
					url:url
				})
			},
			more(){
				uni.navigateTo({
					url:"/pagesHouse/home/orderList"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.list {
			width: calc(100% - 36rpx);
			margin: 20rpx auto;
			padding: 0 20rpx 6rpx;
			background-color: #fff;
			border-radius: 24rpx;

			.tit {
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					&:first-child {
						font-size: 32rpx;
						color: #111;
						font-weight: bold;
					}

					&:nth-child(2) {
						margin-left: 17rpx;
						color: #666666;
						width: 100px;
						flex: 1;
					}
				}
			}

			.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: #666;
					}
				}

			}
		}

		.bg {
			width: 100%;
			height: auto;
			padding: 0 18rpx;
			background: url(https://i.ringzle.com/file/20240224/343febca7aa149c5aa0ee8c9365b2d3e.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;



			.menus {
				display: flex;
				justify-content: space-around;
				height: 184rpx;
				border-radius: 24rpx;
				background-color: #fff;
				color: #333;
				align-items: center;


				&>view {
					image {
						width: 64rpx;
						height: 64rpx;
						display: block;
						margin: 0 auto 22rpx;
					}

					text {
						font-size: 26rpx;
					}
				}
			}

			.numberData {
				display: flex;
				justify-content: space-around;
				height: 150rpx;
				border-radius: 24rpx;
				background-color: #007A69;
				color: #fff;
				align-items: center;
				margin: 20rpx 0;

				&>view {

					text {
						display: block;
						text-align: center;
						font-size: 26rpx;
						color: #F0F8F6;

						&:first-child {
							font-size: 36rpx;
							color: #fff;
							margin-bottom: 20rpx;
						}
					}
				}
			}

			.dataBox {
				padding: ;
				display: grid;
				/* 宽度平均分成4份 */
				grid-template-columns: repeat(3, 1fr);
				/* 高度平均分成3份 */
				grid-template-rows: repeat(2, 1fr);
				gap: 12rpx;

				.item {
					width: 230rpx;
					height: 180rpx;
					padding: 24rpx 0 0 18rpx;
					border-radius: 16rpx;
					background-color: rgba(255, 255, 255, .48);
					color: #777;

					&>view:nth-child(2) {
						color: #111;

						text {
							font-size: 36rpx;
							display: inline-block;
							margin: 12rpx 0;
							font-weight: bold;
							margin-left: -4rpx;
						}
					}

				}

			}
		}
	}

	/deep/.u-nav-slot {
		&>text {
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #333;
		}
	}
</style>