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>
				<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>
		</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>
</template>

<script>
export default {
	data() {
		return {
			// 图标数组
			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:'招商平台'
				}
			]
		}
	}
}
</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;
				}
			}
		}
	}
}
</style>