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 class="notice-box">
			<view class="notice-title-box">
				<view class="notice-font">通知公告</view>
				<view class="notice-more-font">
					<view style="margin-right: 8rpx;font-size: 22rpx;">更多</view>
					<image src="../../static/right-arrow-blue.png" mode="aspectFill" style="width: 12rpx;height: 16rpx;"></image>
				</view>
			</view>
			<view class="notice-content-box" v-for="(item , index) in noticeList" :key="index">
				<image :src="item.url" mode="aspectFit" style="width:34px;height:34px;"></image>
				<view class="notice-content display-around-column">
					<view class="notice-content-font">{{item.title}}</view>
					<view class="notice-content-time">{{item.time}}</view>
				</view>
			</view>
		</view> 
		
		<view class="notice-box" style="margin-top: 40rpx;">
			<view class="notice-title-box">
				<view class="notice-font">推荐园区</view>
				<view class="notice-more-font">
					<view style="margin-right: 8rpx;font-size: 22rpx;">更多</view>
					<image src="/static/right-arrow-blue.png" mode="aspectFill" style="width: 12rpx;height: 16rpx;"></image>
				</view>
			</view>
			<view class="display-flex-start" style=" overflow:scroll;position:relative">
				<view class="park-box" v-for="(item , index) in parkList" :key="index">
					 <image :src="item.url" mode="aspectFill" style="width:452rpx;height:250rpx;border-radius:32rpx 32rpx 0 0;"></image>
					 <view class="park-content-box">
						 <view class="park-title">{{item.title}}</view>
						 <view class="park-address display-flex-start">
							 <view class="display-flex-start" style="margin-right: 10rpx;"><image src="/static/park/park-time.png" mode="aspectFill" class="park-title-img"></image>{{item.time}}建成</view>
							 <view class="display-flex-start"><image src="/static/park/park-name.png" mode="aspectFill" class="park-title-img"></image>{{item.title}}</view>
						 </view>
						 <view class="park-footer-box display-between">
							  <view class="display-between-column width-30">
								  <view class="display-flex-start"><image src="/static/park/park-num.png" mode="aspectFill" class="park-footer-img"></image>{{item.num}}</view>
								  <view class="park-footer-font">企业数量</view>
							  </view>
							  <view class="display-between-column width-30">
								  <view class="display-flex-start">
									  <image src="/static/park/park-area.png" mode="aspectFill" class="park-footer-img"></image>
									  {{item.area1}}<text style="font-size: 12rpx;">万㎡</text></view>
								  <view class="park-footer-font">占地面积</view>
							  </view>
							  <view class="display-between-column width-30">
								  <view class="display-flex-start">
									  <image src="/static/park/park-area2.png" mode="aspectFill" class="park-footer-img"></image>
									  {{item.area2}}<text style="font-size: 12rpx;">万㎡</text></view>
								  <view class="park-footer-font">建设面积</view>
							  </view>
						 </view>
					 </view>
				</view>
			</view>
		</view> 
		 
		 <view class="notice-box" style="margin-top:20rpx;">
		 	<view class="notice-title-box">
		 		<view class="notice-font">招商专区</view>
		 		<view class="notice-more-font">
		 			<view style="margin-right: 8rpx;font-size: 22rpx;">更多</view>
		 			<image src="/static/right-arrow-blue.png" mode="aspectFill" style="width: 12rpx;height: 16rpx;"></image>
		 		</view>
		 	</view>
			
			<view class="notice-content-box" v-for="(item , index) in attractList" :key="index" style="justify-content: start;">
				<image :src="item.url" mode="aspectFit" style="width:112rpx;height:112rpx;margin-right: 20rpx;"></image>
				<view class="notice-content">
					<view class="notice-content-font">{{item.title}}</view>
					<view class="attract-content">{{item.subtitle}}</view>
					<view class="notice-content-time" style="margin-top: 20rpx;">{{item.time}}</view>
				</view>
			</view>
		 </view> 
		 
		 <view class="notice-box" style="margin-top:20rpx;">
		 	<view class="notice-title-box">
		 		<view class="notice-font">区内活动</view>
		 		<view class="notice-more-font">
		 			<view style="margin-right: 8rpx;font-size: 22rpx;">更多</view>
		 			<image src="/static/right-arrow-blue.png" mode="aspectFill" style="width: 12rpx;height: 16rpx;"></image>
		 		</view>
		 	</view>
		 			
			<view class="notice-content-box" v-for="(item , index) in activityList" :key="index" style="justify-content: start;padding: 30rpx 0 30rpx 30rpx;">
				<image :src="item.url" mode="aspectFit" style="width:128rpx;height:128rpx;margin-right: 20rpx;"></image>
				<view class="notice-content" style="width: 70%;">
					<view class="notice-content-font" style="white-space: break-spaces;">{{item.title}}</view>
					<view class="display-flex-start" style="margin-top: 20rpx;">
						<view class="notice-content-time display-flex-start color-a7adba"  v-show="item.isOnline"><view class="online-box"></view>线上</view>
						<view class="notice-content-time display-flex-start color-a7adba"  v-show="!item.isOnline"><view class="offline-box"></view>线下</view>
						<view class="notice-content-time color-a7adba" >{{item.department}}</view>
						<view class="notice-content-time color-a7adba" >{{item.time}}</view>
					</view> 
					<view class="display-flex-end" style="margin-top: 20rpx;">
						<view class="notice-content-time">浏览 {{item.browe}}</view>
						<view class="notice-content-time">分享 {{item.share}}</view>
					</view>
				</view>
			</view>
		 </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:'找服务'
					},
				],
				noticeList:[
					{
						url:'/static/navList/policy-icon.png',
						title:'政策速览 | 小微企业、个体工商户税费...',
						time:'2021-08-05'
					},
					{
						url:'/static/navList/activity-icon.png',
						title:'活动预告 | 想了解跨境电商？8月5日带...',
						time:'2021-08-04'
					},
					{
						url:'/static/navList/policy-icon.png',
						title:'政策速览 | 2022年首批次重点新材料扶...',
						time:'2021-08-03'
					},
				],
				parkList:[
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
						
					},
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
					},
					{
						url:'/static/park/1.png',
						title:'华潮科技产业园',
						time:'2015-10-25',
						num:484,
						area1:1.72,
						area2:1.01
					},
				],
			    attractList:[
			    	{
			    		url:'/static/attract/1.png',
			    		title:'工业互联网',
						subtitle:'工业互联网是全球工业系统与高级计算、分析、...',
			    		time:'2021-09-05'
			    	},
			    	{
			    		url:'/static/attract/2.png',
			    		title:'生产性服务业',
						subtitle:'生产性服务业是指为保持工业生产过程的连续性...',
			    		time:'2021-09-05'
			    	},
			    ],
				activityList:[
					{
						url:'/static/activity/2.png',
						title:'400场讲座,200门课程,免费送上门!就等你申请',
						isOnline:1,
						department:'区人力资源局', 
						time:'2021-09-05',
						browe:'322',
						share:'2'
					},
					{
						url:'/static/activity/1.png',
						title:'智能制造商标品牌培育系列培训活动',
						isOnline:0,
						department:'市场监督管理局',
						time:'2021-09-05',
						browe:'322',
						share:'2'
					},
				],
			}
		},
		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;
	}
	.notice-box{
		width: 83%;
		margin-top: 300rpx;
		margin-bottom:20rpx;
	}
	.notice-title-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:40rpx;
	}
	.notice-font {
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600;
		font-size: 32rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.notice-more-font {
		font-size: 24rpx;
		color: #146AFB;
		display: flex;
		align-items: center;
	}
	
	.notice-content-box {
		display: flex;
		padding: 30rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 4rpx 32rpx rgba(0, 0, 0, 0.1);
		border-radius: 32rpx;
		margin-top: 20rpx;
		justify-content: space-between;
	}
	.notice-content-font {
		font-size:26rpx;
		color: #0D1937;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.notice-content-time {
		font-size: 18rpx;
		letter-spacing: 0.02em;
		color: #CFCFCF;
		margin-right: 14rpx;
	}
	.park-box {
		border-radius: 32rpx;
		margin-right: 20rpx;
		position: relative;
		height: 450rpx;
	}
	.park-content-box {
		width: 394rpx;
		background-color: #FFFFFF;
		border-radius: 56rpx 0px 32rpx 32rpx;
		position: absolute;
        top: 210rpx;
		font-size: 24rpx;
		padding: 30rpx;
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
	}
	.park-title {
		font-weight: 600;
		line-height: 36rpx;
		letter-spacing: 0.02em;
		color: #0D1937;
	}
	.park-address {
		font-weight: 600;
		font-size: 19rpx;
		letter-spacing: 0.02em;
		color: #CFCFCF;
		margin-top: 10rpx;
	}
	.park-title-img {
		width: 16rpx;
		height: 16rpx;
		margin-right: 4rpx;
	}
	.park-footer-box {
		margin-top: 30rpx;
	}
	.park-footer-img{
		width: 24rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}
	.park-footer-font {
		color: #CFCFCF;
		font-size: 19rpx;
		margin-top: 10rpx;
	}
	.width-30 {
		width: 30%;
	}
	.attract-content {
		color: #697594;
		font-weight: 600;
		font-size: 20rpx;
		margin-top: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.online-box {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color:#589CFF;
		margin-right:5rpx;
	}
	.offline-box {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color:#FFCF86;
		margin-right:5rpx;
	}
	.color-a7adba{
		color: #A7ADBA;
	}
</style>