discounts-minapp/hotel/index.vue

<template>
	<view class="hotel">
	<zs-img class="banner" width="750rpx" height="556rpx" src="http://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/y82Lt1MyVdPu5f5f6895568756dbbea184cccce3825b.png/1.png"></zs-img>
	
	<view class="search-box">
		<view class="address-box">
			<view class="address">
				重庆江北国际机场T3航站楼楼楼楼楼楼楼楼
			</view>
			<image class="more" src="../../static/right.png" mode=""></image>
			<view class="nearby">
				附近酒店
			</view>
			<image class="position" src="../../static/rePosition.png" mode=""></image>
		</view>
		
		<view class="chooose-box">
			<view class="time-box">
				
				<view class="start-time">
					03月07日
				</view>
				<view class="day">
					周四
				</view>
				<view class="line">
					—
				</view>
				<view class="end-time">
					03月07日
				</view>
				<view class="day">
					周五
				</view>
			</view>
			
			<view class="total">
				共1晚 
				<image class="more" src="@/static/right.png" mode=""></image>
			</view>
		</view>
		
		<view class="input-box">
			<input class="input" type="text" v-model="value" placeholder="搜索酒店名/地名/关键词" />
			<image class="more" src="@/static/right.png" mode=""></image>
		</view>
		
		<view class="btn-box">
			<button class="btn" type="default">特惠购票</button>
		</view>
		
	</view>
	
	<!-- 列表 -->
	<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
		<view class="left">
			<view class="hotel-item" v-for="(item,index) in list" :key="index">

						<view >
							<zs-img src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/662f340632e63427d1a36a50/ext/GOODS_INFO/750_750.jpg/1.jpg?x-oss-process=image/resize,w_376" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
							<view class="info">
								<view class="price-box">
									<view class="left">
										<view class="price">
										￥580
										</view>
									</view>
									
									<view class="right">
										评分
									</view>
								</view>
								<view class="title">
									重庆秘境森林里温汤的的绝
									美民宿
								</view>
								<view class="desc">
									观山湖区
								</view>
								
							</view>
						</view>
						
					</view>
				</view>
				<view class="right">
				<view class="hotel-item" v-for="(item,index) in list" :key="index">
							<view >
								<zs-img src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/662f340632e63427d1a36a50/ext/GOODS_INFO/750_750.jpg/1.jpg?x-oss-process=image/resize,w_376" width="340rpx" height="340rpx" mode="widthFix"></zs-img>
								<view class="info">
									<view class="price-box">
										<view class="left">
											<view class="price">
											￥580
											</view>
										</view>
										
										<view class="right">
											评分
										</view>
									</view>
									<view class="title">
										重庆秘境森林里温汤的的绝
										美民宿
									</view>
									<view class="desc">
										观山湖区
									</view>
									
								</view>
							</view>
							
						</view>
				</view>
			
			</zs-list>
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list:9,
				list1:9,
			}
		},
	}
</script>

<style lang="scss" >
.hotel{
	background: #F9F9F9;
	min-height: 100vh;
	.banner{
		
	}
	.search-box{
		padding: 28rpx 24rpx;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: -224rpx 24rpx 20rpx;
		position: relative;
		// top: -224rpx;
		box-sizing: border-box;
		.address-box{
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			.address{
				flex: 1;
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.more{
				width: 48rpx;
				height: 48rpx;
				margin: 0 16rpx;
			}
			.nearby{
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
			}
			.position{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.chooose-box{
			padding: 78rpx 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top:1rpx solid #F0F0F0;
			border-bottom: 1rpx solid #F0F0F0;
			.time-box{
				display: flex;
				align-items: flex-end;
				.start-time,.end-time{
					font-weight: 600;
					font-size: 32rpx;
					color: #222222;
					position: relative;
				}
				.start-time::before{
					content: '入住';
					position: absolute;
					top:calc(-100% - 20rpx);
					left: 0;
					font-weight: 300;
					font-size: 24rpx;
					color: #222222;
				}
				.end-time::before{
					content: '离店';
					position: absolute;
					top:calc(-100% - 20rpx);
					left: 0;
					font-weight: 300;
					font-size: 24rpx;
					color: #222222;
				}
				
				.line{
					font-weight: 600;
					font-size: 32rpx;
					color: #222222;
					margin: 0 16rpx;
				}
				.day{
					font-weight: 300;
					font-size: 28rpx;
					color: #222222;
					margin-left: 16rpx;
					vertical-align: bottom;
				}
			}
			.total{
				display: flex;
				align-items: center;
				font-weight: 300;
				font-size: 24rpx;
				color: #222222;
				.more{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		.input-box{
			position: relative;
			line-height: 84rpx;
			border-bottom: 1rpx solid #F0F0F0;
			.input{
				width: 100%;
				height: 84rpx;
				line-height: 84rpx;
				padding-right: 48rpx;
				font-size: 24rpx;
				color: #222222;
			}
			.more{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 50%;
				right: 0%;
				transform: translateY(-50%);
			}
		}
		.btn-box{
			padding-top: 28rpx;
			.btn{
				height: 80rpx;
				background: #EE4320;
				border-radius: 40rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
	
	.zs-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 24rpx;
	
		.left {
			.adv-swiper{
				width: 340rpx;
				height: 444rpx;
				margin-bottom: 25rpx;
				.adv-item{
					width: 340rpx;
					height: 444rpx;
				}
			}
		}
			.ad{
				width: 340rpx;
				border-radius: 16rpx;
			}
	
		.hotel-item {
			width: 340rpx;
			margin-bottom: 20rpx;
			// box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 16rpx;
			background: #fff;
	
			.icon {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
	
			.info{
				flex: 1;
				padding: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				.title{
					font-size: 28rpx;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					margin-top: 10rpx;
				}
				
				.desc{
					font-size: 24rpx;
					color: #AAAAAA;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					/* 限制在一个块元素显示的文本的行数 */
					-webkit-line-clamp: 2;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-box-orient: vertical;
					margin-top: 12rpx;
				}
				
				.price-box{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;
					.left{
						display: flex;
						align-items: flex-end;
						.unit{
							font-size: 20rpx;
							color: $uni-color-primary;
							font-weight: bold;
						}
						.price{
							font-size: 32rpx;
							color: $uni-color-primary;
							font-weight: bold;
						}
					}
					.right{
						font-size: 24rpx;
						color: #AAAAAA;
					}
				}
				
			}
		}
	}
	
}
</style>