服务页面和线上图片

pages/search/search.vue

@@ -2,14 +2,8 @@
 	<view class="container">
 		<!-- 轮播图区域 -->
 		<swiper class="banner" indicator-dots indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#1E7DFB" autoplay circular>
-			<swiper-item>
-				<img src="../../static/search/img.png" />
-			</swiper-item>
-			<swiper-item>
-				<img src="../../static/search/img.png" />
-			</swiper-item>
-			<swiper-item>
-				<img src="../../static/search/img.png" />
+			<swiper-item v-for="item in lunbo" :key="item.id">
+				<img :src="item" />
 			</swiper-item>
 		</swiper>
 
@@ -26,6 +20,56 @@
 					</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>
@@ -33,7 +77,11 @@
 <script>
 export default {
 	data() {
-		return {
+		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:[
 				{
@@ -70,7 +118,21 @@ export default {
 					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',}
+			],
 		}
 	}
 }
@@ -134,6 +196,181 @@ export default {
 				}
 			}
 		}
+	}
+	
+	// 景区导览
+	.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>

pages/setMeal/setMeal.vue

@@ -1,62 +1,48 @@
 <template>
 	<view class="container">
 		<!-- 每一个套餐区域 -->
-		<view class="setMeal_box">
+		<view class="setMeal_box" v-for="item in list" :key="item.id">
 			<!-- 图片区域 -->
 			<view class="box_img">
-				<img src="../../static/search/img.png" />
+				<img :src="item.img" />
 			</view>
 
 			<!-- 套餐信息区域 -->
 			<view class="box_info">
-				<view class="info_msg">新店开业：端午周末不加价|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流双人|中华传统文化园套票|特色小吃2份</view>
+				<view class="info_msg">{{item.title}}</view>
 				<view class="info_price">
 					<view class="new">
-						¥180
+						{{item.price}}
 						<text>起</text>
 					</view>
 
-					<view class="old">市场价¥400</view>
+					<view class="old">市场价{{item.outprice}}</view>
 				</view>
 				<view class="info_btn">
-					<view class="btn_count">已售88张</view>
+					<view class="btn_count">已售{{item.number}}张</view>
 
 					<view class="btn_pay">立即抢购</view>
 				</view>
 			</view>
-		</view>
-
-		<view class="setMeal_box">
-			<!-- 图片区域 -->
-			<view class="box_img">
-				<img src="../../static/search/img.png" />
-			</view>
-
-			<!-- 套餐信息区域 -->
-			<view class="box_info">
-				<view class="info_msg">新店开业：端午周末不加价|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流双人|中华传统文化园套票|特色小吃2份</view>
-				<view class="info_price">
-					<view class="new">
-						¥180
-						<text>起</text>
-					</view>
-
-					<view class="old">市场价¥400</view>
-				</view>
-				<view class="info_btn">
-					<view class="btn_count">已售88张</view>
-
-					<view class="btn_pay">立即抢购</view>
-				</view>
-			</view>
-		</view>
+		</view>
+		
 	</view>
 </template>
 
 <script>
 export default {
 	data() {
-		return {}
+		return {
+			// 套餐
+			list:[
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/1.jpg',title:'新店开业：端午周末不加价|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流双人|中华传统文化园套票|特色小吃2份',price:'¥180',outprice:'¥400',number:1151,},
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/2.png',title:'新店开业：国庆中秋大优惠|靖安双溪抱朴小院6天5晚含门票|三爪仑漂流三人|中华传统文化园套票|特色小吃3份',price:'¥240',outprice:'¥520',number:188,},
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/3.png',title:'新店开业：国庆中秋大优惠|靖安双溪抱朴小院6天5晚含门票|三爪仑漂流双人|中华传统文化园套票|特色小吃2份',price:'¥180',outprice:'¥400',number:58,},
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/4.png',title:'新店开业：暑期限定特惠|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流五人人|中华传统文化园套票|特色小吃5份',price:'¥900',outprice:'¥1700',number:88,},
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/5.png',title:'新店开业：暑期限定特惠|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流双人|中华传统文化园套票|特色小吃2份',price:'¥180',outprice:'¥400',number:88,},
+				{id:1,img:'https://jtishfw.ncjti.edu.cn/homestay/setmeal/6.jpg',title:'新店开业：端午周末不加价|靖安双溪抱朴小院3天2晚含门票|三爪仑漂流三人|中华传统文化园套票|特色小吃3份',price:'¥240',outprice:'¥520',number:72,},
+			],
+		}
 	}
 }
 </script>