discounts-minapp/detail/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>
	</view>
</template>

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

<style lang="scss" scoped>
.hotel{
	background: #F9F9F9;
	min-height: 100vh;
	.banner{
		
	}
	.search-box{
		padding: 28rpx 24rpx;
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 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;
			}
		}
	}
}
</style>