konggang-city-miniprogram/pages/index/index.vue

<template>
	<view class="content">
		<view class="page-section-spacing" style="width: 100%;">
		 	<swiper class="swiper" 
		 		indicator-dots="true" 
				 autoplay="true" 
		 		 duration="500"	>
		 		<swiper-item v-for="(item , index) in swiperList" :key="index">
		 			<image :src="item.img" mode="aspectFill" style="width: 100%;height: 100%;"></image>
		 		</swiper-item>
		 	</swiper>
		 </view>
		 
		 <view class="page-nav-box">	
		 
		    <navigator v-for="(item , index) in navList" :key="index" :url="item.path" open-type="navigate" class="nav-content">
				 <image :src="item.url" mode="aspectFit" style="width: 38px;height: 38px;"></image>
				 <view>{{item.content}}</view>
			</navigator>
		 
		 </view>
		 
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
			    swiperList:[
					{
						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251007104506.jpg'
					},
					{
						img:'https://f.xazhima.com/userfiles/upload/indexpic/202005251007104506.jpg'
					},
				],
			    navList:[
					{
						url:'/static/navList/7.png',
						path:'/pages/appeal/index',
						content:'提诉求'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/policy/index',
						content:'搜政策'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/park/index',
						content:'找园区'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/activity/index',
						content:'找活动'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/supply/index',
						content:'发供需'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/enterprise/index',
						content:'查企业'
					},
					{
						url:'/static/navList/7.png',
						path:'/pages/service/index',
						content:'找服务'
					},
					
					
				]
			}
		},
		onLoad() {

		},
		methods: {
    }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.page-nav-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 10rpx 30rpx 10rpx;
		border-bottom: 10rpx solid #e9e9e9;
	}
	.nav-content {
		
		width: 25%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		font-size: 26rpx;
		justify-content: space-around;
	}
	
</style>