完善首页样式

pages/index/index.vue

@@ -41,26 +41,52 @@
 				<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>
+					<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="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:300rpx;border-radius:32rpx;"></image>
+					 <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>{{item.title}}</view>
-							  <view>{{item.address}}</view>
+							 <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> 
+		 
+		 
 	</view>
 </template>
 
@@ -134,17 +160,27 @@
 					{
 						url:'/static/park/1.png',
 						title:'华潮科技产业园',
-						address:'渭城区·底张镇'
+						time:'2015-10-25',
+						num:484,
+						area1:1.72,
+						area2:1.01
+						
 					},
 					{
 						url:'/static/park/1.png',
 						title:'华潮科技产业园',
-						address:'渭城区·底张镇'
+						time:'2015-10-25',
+						num:484,
+						area1:1.72,
+						area2:1.01
 					},
 					{
 						url:'/static/park/1.png',
 						title:'华潮科技产业园',
-						address:'渭城区·底张镇'
+						time:'2015-10-25',
+						num:484,
+						area1:1.72,
+						area2:1.01
 					},
 				]
 			}
@@ -265,15 +301,17 @@
 		border-radius: 32rpx;
 		margin-right: 20rpx;
 		position: relative;
+		height: 440rpx;
 	}
 	.park-content-box {
-		width: 452rpx;
+		width: 394rpx;
 		background-color: #FFFFFF;
 		border-radius: 56rpx 0px 32rpx 32rpx;
 		position: absolute;
-		bottom: -25rpx;
+        top: 210rpx;
 		font-size: 24rpx;
-		padding: 20rpx;
+		padding: 30rpx;
+		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
 	}
 	.park-title {
 		font-weight: 600;
@@ -283,8 +321,30 @@
 	}
 	.park-address {
 		font-weight: 600;
-		font-size: 18rpx;
+		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%;
 	}
 </style>