qzw_xcx/pages/index/searchresult.vue

<template>
	<view class="searchType" style="background: #fff;height: 100vh;">
		 <van-cell value-class="searchclass">
			 <template slot="title">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#666666" />
					<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" 
							@input="confirm" />
				</view> 
			 </template>
			 <template>
				 <view>搜索</view>
			 </template>
		 </van-cell>
		 
		 <view class="hotelList">
		 		 <view class="hotleLeft">
		 			 <image  style="width: 214upx;height: 152upx;" src=""/>
		 		 </view>
		 		 <view class="hotelright">
		 		 	<view style="font-size: 36upx;color: #303133;">华南城市酒店</view>
		 		    <view style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
		 				<view style="font-size: 40upx; color: #303133;"> 0.0</view>
		 				<view>月访客990</view>
		 				<view>8km</view>
		 			</view>
		 			<view class="undertip">
		 				<view class="tipsTop">有停车为</view>
		 				<view class="tipsTop">内置酒店</view>
		 			</view>
		 </view>
		 </view>
	 </view>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				searchvalue:''
			}
		},
		methods: {
			confirm(e) {
				this.searchvalue = e.detail.value;
			}
		}
	}
</script>

<style>
	.searchType .input-view {
		width: 80%;
		display: flex;
		background-color: #e7e7e7;
		height: 30px;
		border-radius: 15px;
		padding: 0 4%;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: 30px;
		margin: 24upx 0 24upx 32upx;
	}
	
	.searchType .input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.searchType .input-view .input {
		height: 30px;
		line-height: 30px;
		width: 94%;
		padding: 0 3%;
	}
	.van-cell__title {
		flex: 6!important;
	}
	.searchclass {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.van-cell {
		padding: 15upx 32upx 0 32upx!important;
	}
	.hotelList {
		display: flex;
		flex-direction: row;
		padding: 24upx 32upx;
	}
		
	.hotleLeft {
		width: 214upx;
		height: 152upx;
		background-color: #007AFF;
	}
		
	.hotelright {
		padding-left: 16upx;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
		
	.undertip {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.tipsTop {
		border: 2upx solid #BBBBBB;
		margin-right: 14upx;
		color: #BBBBBB;
		padding: 4upx;
	}
	/* .van-cell__title {
		flex: 6!important;
	} */
</style>