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"	
				 style="height:400rpx">
		 		<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:'/static/swiper/swiper1.jpg'
					},
					{
						img:'/static/swiper/swiper2.jpg'
					},
				],
			    navList:[
					{
						url:'/static/navList/appeal.png',
						path:'/pages/appeal/index',
						content:'提诉求'
					},
					{
						url:'/static/navList/policy.png',
						path:'/pages/policy/index',
						content:'搜政策'
					},
					{
						url:'/static/navList/park.png',
						path:'/pages/park/index',
						content:'找园区'
					},
					{
						url:'/static/navList/activity.png',
						path:'/pages/activity/index',
						content:'找活动'
					},
					{
						url:'/static/navList/supply.png',
						path:'/pages/supply/index',
						content:'发供需'
					},
					{
						url:'/static/navList/enterprise.png',
						path:'/pages/enterprise/index',
						content:'查企业'
					},
					{
						url:'/static/navList/service.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: 80%;
		/* height: 320rpx; */
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 10rpx 30rpx 10rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
		border-radius: 32rpx;
		position: absolute;
		top: 300rpx;
		background-color: #fff;
	}
	.nav-content {
		
		width: 25%;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
		font-size: 22rpx;
		justify-content: space-around;
		letter-spacing: 0.02em;
		color: #0D1937;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
	}
	
</style>