Homestay_manage_app/pages/search/search.vue

<template>
	<view class="container">
		<!-- 轮播图区域 -->
		<swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#1E7DFB" autoplay circular>
			<swiper-item v-for="item in lunbo" :key="item.id">
				<img :src="item" />
			</swiper-item>
		</swiper>

		<!-- 游客服务区域 -->
		<view class="search">
			<view class="search_title">游客服务</view>

			<view class="search_box">
				<!-- 每一个图标区域 -->
				<view class="box_item" v-for="item in iconsList" :key="item.id">
					<img :src="item.imgUrl"></img>
					<view class="item_text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 景区导览区域 -->
		<view class="trave">
			<view class="trave_title">
				景区导览
				<view class="trave_she"></view>
			</view>
			
		
			<view class="trave_box">
				<!-- 每一个图标区域 -->
				<view class="box_item" v-for="item in traveList" :key="item.id">
					<view style="height: 218rpx;">
						<img :src="item.imgUrl"></img>
						<view class="trave_dian">
							<img src="../../static/search/trave_map.png"></img>
							<view class="trave_length">{{item.juli}}</view>
						</view>
					</view>
					<!-- <view>2</view> -->
					<view class="item_kuang">
						<view class="item_name">{{item.name}}</view>
						<view class="item_jibie">{{item.jibie}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 特产推荐区域 -->
		<view class="techan">
			<view class="trave_title">
				特产推荐
				<view class="trave_she"></view>
			</view>
			
		
			<view class="techan_box">
				<view class="techan_list" v-for="item in techanList" :key="item.id">
					<img :src="item.imgUrl" class="techan_img"></img>
					<view>
						<text class="techan_name">{{item.name}}</text>
						<text class="techan_type">{{item.type}}</text>
						<text class="techan_liang">{{item.liang}}</text>
						<text class="techan_price">{{item.price}}</text>
					</view>
					<img src="../../static/search/gouwuche.png" class="techan_jiagou"></img>
					<view class="techan_line"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//轮播图
			lunbo:['https://jtishfw.ncjti.edu.cn/homestay/banner/7.png',
			'https://jtishfw.ncjti.edu.cn/homestay/banner/8.jpg',
			'https://jtishfw.ncjti.edu.cn/homestay/banner/9.png'],
			// 图标数组
			iconsList:[
				{
					id:1,
					imgUrl:'../../static/search/icon.png',
					text:'投诉建议'
				},
				{
					id:2,
					imgUrl:'../../static/search/icon2.png',
					text:'租车服务'
				},{
					id:3,
					imgUrl:'../../static/search/icon3.png',
					text:'车位查询'
				},{
					id:4,
					imgUrl:'../../static/search/icon4.png',
					text:'厕所查询'
				},{
					id:5,
					imgUrl:'../../static/search/icon5.png',
					text:'寻找向导'
				},{
					id:6,
					imgUrl:'../../static/search/icon6.png',
					text:'服务热线'
				},{
					id:7,
					imgUrl:'../../static/search/icon7.png',
					text:'服务热线'
				},{
					id:8,
					imgUrl:'../../static/search/icon8.png',
					text:'招商平台'
				}
			],
			// 景区导览
			traveList:[
				{id:1,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/scenicguide/中部梦幻城.png',juli:'45.96km',name:'中部梦幻城',jibie:'4A'},
				{id:2,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/scenicguide/中华传统文化园.png',juli:'45.96km',name:'中华传统文化园',jibie:'4A'},
				{id:3,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/scenicguide/靖安宝峰寺.png',juli:'45.96km',name:'靖安宝峰寺',jibie:'4A'},
				{id:4,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/scenicguide/九岭森林温泉度假村.png',juli:'45.96km',name:'九岭森林温泉度假村',jibie:'4A'},
			],
			// 特产
			techanList:[
				{id:1,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/productpicture/靖安木耳.png',name:'靖安木耳',type:'手工产品 营养丰富',liang:'500kg',price:'¥200',},
				{id:1,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/productpicture/靖安白茶.jpg',name:'靖安白茶',type:'经典茶品 营养丰富',liang:'500kg',price:'¥400',},
				{id:1,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/productpicture/靖安椪柑.jpg',name:'靖安椪柑',type:'汁水丰富 营养丰富',liang:'500kg',price:'¥80',},
				{id:1,imgUrl:'https://jtishfw.ncjti.edu.cn/homestay/productpicture/猕猴桃糕.jpg',name:'猕猴桃糕',type:'手工制作 回味无穷',liang:'500kg',price:'¥50',}
			],
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #ebeced;

	.banner {
		margin-top: 20rpx;
		width: 750rpx;
		height: 326rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.search {
		margin: 20rpx 0;
		width: 750rpx;
		height: 475rpx;
		background-color: #fff;

		.search_title {
			padding: 0 30rpx;
			height: 93rpx;
			line-height: 93rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.search_box {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx;
			height: 382rpx;

			.box_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				height: 190rpx;

				image {
					width: 78rpx;
					height: 78rpx;
				}
				
				.item_text{
					margin-top: 13rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	
	// 景区导览
	.trave {
		margin: 20rpx 0;
		width: 750rpx;
		height: 869rpx;
		background-color: #fff;
	
		.trave_title {
			padding: 0 30rpx;
			height: 93rpx;
			line-height: 93rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #e6e6e6;
		}
		.trave_she{
			margin: -40px 0 0 634rpx;
			width: 67rpx;
			height: 67rpx;
			background-image: url('../../static/search/trave_she.png');
			background-size: 100%;
		}
	
		.trave_box {
			display: flex;
			flex-wrap: wrap;
			padding: 32rpx 10rpx;
			height: 766rpx;
	
			.box_item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 331rpx;
				width: 50%;
	
				image {
					width: 335rpx;
					height: 218rpx;
					z-index: 2;
				}
				.trave_dian{
					width: 109rpx;
					height: 37rpx;
					border-radius: 73rpx;
					background: rgba(0, 0, 0, 0.4);
					margin: -57rpx 0 0 213rpx;
					z-index: 3;
					position: absolute;
					image {
						width: 26rpx;
						height: 26rpx;
						margin: 6rpx 0 0 8rpx;
						float: left;
					}
					.trave_length{
						font-size: 16rpx;
						line-height: 23rpx;
						color: rgba(255, 255, 255, 1);
						margin: 10rpx 0 0 8rpx;
					}
				}
				
				.item_kuang{
					width: 335rpx;
					height: 113rpx;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 0px 7rpx  rgba(0, 0, 0, 0.25);
					font-size: 28rpx;
					.item_name{
						margin: 11rpx 0 0 17rpx;
						line-height: 41rpx;
						color: rgba(0, 0, 0, 1);
					}
					.item_jibie{
						margin: 11rpx 0 0 17rpx;
						width: 48rpx;
						height: 30rpx;
						border-radius: 136rpx;
						background: rgba(255, 223, 117, 1);
						font-size: 22rpx;
						line-height: 30rpx;
						color: rgba(189, 120, 17, 1);
						text-align: center;
					}
				}
			}
		}
	}
	// 特产推荐
	.techan{
		margin: 20rpx 0;
		width: 750rpx;
		height: 110%;
		background-color: #fff;
		.trave_title {
			padding: 0 30rpx;
			height: 93rpx;
			line-height: 93rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom: 1rpx solid #e6e6e6;
		}
		.trave_she{
			margin: -40px 0 0 634rpx;
			width: 67rpx;
			height: 67rpx;
			background-image: url('../../static/search/trave_she.png');
			background-size: 100%;
		}
		.techan_box{
			display: flex;
			flex-wrap: wrap;
			margin-left: 30rpx;
			height: 110%;
			.techan_list{
				display: flex;
				height: 231rpx;
				margin-top: 30rpx;
				
				.techan_img{
					width: 200rpx;
					height: 200rpx;
				}
				.techan_name{
					display: flex;
					margin: 0 0 0 23rpx;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 41rpx;
					color: rgba(0, 0, 0, 1);
				}
				.techan_type{
					display: flex;
					margin: 11rpx 0 0 23rpx;
					font-size: 24rpx;
					line-height: 35rpx;
					color: rgba(166, 166, 166, 1);
				}
				.techan_liang{
					display: flex;
					margin: 14rpx 0 0 28rpx;
					width: 61rpx;
					height: 32rpx;
					border-radius: 4rpx;
					background: rgba(230, 230, 230, 1);
					font-size: 20rpx;
					line-height: 32rpx;
					color: rgba(166, 166, 166, 1);
					text-align: center;
				}
				.techan_price{
					display: flex;
					margin: 19rpx 0 0 23rpx;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 52rpx;
					color: rgba(255, 87, 51, 1);
				}
				.techan_jiagou{
					margin: 143rpx 0 0 207rpx;
					width: 62rpx;
					height: 62rpx;
				}
				.techan_line{
					position: absolute;
					margin: 230rpx 0 0 0;
					width: 690px;
					border: 1px solid #e6e6e6;
				}
			}
		}
	}
}
</style>