更新页面内容

App.vue

@@ -14,4 +14,26 @@
 
 <style>
 	/*每个页面公共css */
+	.display-flex-start {
+		display: flex;
+		align-items: center;
+	}
+	.display-between {
+		display: flex;
+		justify-content: space-between;
+	}
+	.display-around{
+		display: flex;
+		justify-content: space-around;
+	}
+	.display-between-column {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	.display-around-column {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-around;
+	}
 </style>

pages/index/index.vue

@@ -13,14 +13,53 @@
 		 </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-y: scroll;">
+				<view class="park-box" v-for="(item , index) in parkList" :key="index">
+					 <image :src="item.url" mode="aspectFill" style="width:452rpx;height:300rpx;border-radius:32rpx;"></image>
+					 <view class="park-content-box">
+						 <view class="park-title">{{item.title}}</view>
+						 <view class="park-address display-flex-start">
+							 <view>{{item.title}}</view>
+							  <view>{{item.address}}</view>
+						 </view>
+					 </view>
+				</view>
+			</view>
+	
+			
+		</view> 
 		 
 	</view>
 </template>
@@ -73,8 +112,40 @@
 						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:'华潮科技产业园',
+						address:'渭城区·底张镇'
+					},
+					{
+						url:'/static/park/1.png',
+						title:'华潮科技产业园',
+						address:'渭城区·底张镇'
+					},
+					{
+						url:'/static/park/1.png',
+						title:'华潮科技产业园',
+						address:'渭城区·底张镇'
+					},
 				]
 			}
 		},
@@ -141,5 +212,79 @@
 		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;
+	}
+	.park-box {
+		border-radius: 32rpx;
+		margin-right: 20rpx;
+		position: relative;
+	}
+	.park-content-box {
+		width: 452rpx;
+		background-color: #FFFFFF;
+		border-radius: 56rpx 0px 32rpx 32rpx;
+		position: absolute;
+		bottom: -25rpx;
+		font-size: 24rpx;
+		padding: 20rpx;
+	}
+	.park-title {
+		font-weight: 600;
+		line-height: 36rpx;
+		letter-spacing: 0.02em;
+		color: #0D1937;
+	}
+	.park-address {
+		font-weight: 600;
+		font-size: 18rpx;
+		letter-spacing: 0.02em;
+		color: #CFCFCF;
+	}
 </style>