hotelHomestayWx/pages/home/index.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px'}">
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left" style="display: flex;" @tap="show=true">
				<text>{{name}}</text>
				<u-icon name="arrow-down" size="28" :bold="true" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="bg" :style="{'padding-top':(mt+30)+'px'}">
			<view class="b_money">
				<text>{{orderMoney.toFixed(2)}}</text>
				<text>今日订单金额</text>
			</view>
			<view class="b_items">
				<view>
					<text>{{resData.yrzNum}}</text>
					<text>已入住</text>
				</view>
				<view>
					<text>{{resData.drzNum}}</text>
					<text>待入住</text>
				</view>
				<view>
					<text>{{resData.dqrNum}}</text>
					<text>待确认</text>
				</view>
				<view>
					<text>{{resData.dclNum}}</text>
					<text>待处理</text>
				</view>
				<view>
					<text>{{resData.zrddNum}}</text>
					<text>昨日订单</text>
				</view>
				<view>
					<text>{{resData.zrscNum}}</text>
					<text>昨日售出</text>
				</view>
				<view>
					<text>{{resData.zrkfNum}}</text>
					<text>昨日空房</text>
				</view>
				<view>
					<text>{{resData.rzl}}</text>
					<text>入住率</text>
				</view>
			</view>
		</view>
		<Tabbar :tabbarIndex="0"></Tabbar>
		<u-picker :show="show" :columns="nameList" @close="show=false" @cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'一家民宿',
				nameList:[['一家民宿','我家民宿','他家民宿']],
				show:false,
				orderMoney:66614,
				resData:{
					yrzNum:68,
					drzNum:0,
					dqrNum:12,
					dclNum:16,
					zrddNum:48,
					zrscNum:48,
					zrkfNum:20,
					rzl:'69.65%'
				}
			}
		},
		methods: {
			confirm(e){
				this.name = e.value[0];
				this.show = false;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		.bg{
			width: 100%;
			height: 660rpx;
			background: url(https://i.ringzle.com/file/20240107/8bc656fc64fd4386a6b336a7dc8c86d0.png) no-repeat;
			background-size: 100%  100%;
			box-sizing: border-box;
			.b_money{
				display: flex;
				flex-direction: column;
				align-items: center;
				text{
					font-size: 56rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: bold;
					color: #FFFFFF;
					&:last-child{
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						margin-top: 21rpx;
					}
				}
			}
			.b_items{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				&>view{
					width: 25%;
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					text{
						font-size: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: bold;
						color: #FFFFFF;
						&:last-child{
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
	
	/deep/.u-nav-slot{
		&>text{
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
		.u-icon{
			margin: 8rpx 0 0 20rpx;
		}
	}
</style>