top

miniprogram/app.wxss

@@ -66,3 +66,4 @@
   height: 84rpx;
   opacity: 0;
 }
+.bgw{background-color: #fff;}

miniprogram/pages/home/home.wxml

@@ -1,18 +1,18 @@
-<view class="header" >
+<view class="header">
     <image class="header-bg" src="../../images/main/home_top.png" mode="widthFix" />
     <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
         首页
     </view>
-   
+
 </view>
 <view class="bgw">
     <view class="gridouter">
         <view class="grid">
-            <image src="../../images/main/home01.png"  />
+            <image src="../../images/main/home01.png" />
             <view>红帆支队</view>
         </view>
         <view class="grid">
-            <image src="../../images/main/home02.png"  />
+            <image src="../../images/main/home02.png" />
             <view>骑士驿站</view>
         </view>
         <view class="grid">
@@ -20,11 +20,28 @@
             <view>红色网格员</view>
         </view>
         <view class="grid">
-            <image src="../../images/main/home04.png"  />
+            <image src="../../images/main/home04.png" />
             <view>西海岸先锋</view>
         </view>
     </view>
+    <view class="gridouter">
+        <view class="grid2 blue">
+            <image src="../../images/main/home05.png" />
+            <view>
+                <view class="h1">在职党员</view>
+                <view class="h2">到居住社区报到</view>
+            </view>
+        </view>
+        <view class="grid2 red">
+            <image src="../../images/main/home06.png" />
+            <view>
+                <view class="h1">红色尖兵</view>
+                <view class="h2">志愿服务队</view>
+            </view>
+        </view>
+    </view>
 </view>
+
 <view class="home" style="margin-top: {{statusHeight + navigationHeight}}px">
 
     <!-- <view class="belong-grid">

miniprogram/pages/home/home.wxss

@@ -3,12 +3,13 @@ page {
     height: auto;
     overflow-y: auto;
     background: #f7f7f7;
+    font-family: PingFang SC;
 }
 
 .header {
-  
+
     width: 100%;
-    height:484rpx;
+    height: 484rpx;
     /* position: fixed;
     top: 0;
     left: 0;
@@ -55,7 +56,7 @@ page {
     top: 0;
     left: 0;
     z-index: 0;
-   
+
 }
 
 .belong-grid .grid {
@@ -140,30 +141,81 @@ page {
     font-size: 36rpx;
     color: #04BCA0;
 }
-.bgw{
+
+.bgw {
     background-color: #fff;
-    margin:20rpx;
+    margin: 20rpx;
     margin-top: -50rpx;
     border-radius: 20rpx;
-   padding:40rpx 30rpx;
-   box-sizing: border-box;
-   z-index: 1;
+    padding: 40rpx 30rpx;
+    box-sizing: border-box;
+    z-index: 1;
 }
-.gridouter{
+
+.gridouter {
     display: flex;
     justify-content: space-around;
-  
+
 }
+
 .grid {
     width: 25%;
     text-align: center;
     font-size: 28rpx;
-    line-height:56rpx;
+    line-height: 56rpx;
     color: #333333;
 }
 
 .grid image {
     width: 80rpx;
     height: 80rpx;
+
+}
+
+.grid2 {
+    width: 50%;
+    background: linear-gradient(90deg, #F5F9FE 0%, #FBFDFF 100%);
+    border-radius: 16rpx;
+    display: flex;
+    padding: 30rpx;
+    margin: 20rpx 10rpx;
+}
+
+.grid2 .h1 {
    
+    font-size: 32rpx;
+    font-weight: bold;
+    line-height: 32rpx;
+}
+
+.grid2 .h2 {
+    height: 23rpx;
+    font-size: 24rpx;
+    line-height: 36rpx;
+}
+
+.grid2 image {
+    width: 64rpx;
+    height: 64rpx;
+    margin-right:10rpx
+}
+
+.blue {
+    background: linear-gradient(90deg, #F5F9FE 0%, #FBFDFF 100%);
+}
+
+.blue .h1 {
+    color: #5A89B7;
+}
+
+.blue .h2 {
+    color: #80A4C7;
+}
+
+.red { background: linear-gradient(90deg, #FEFBF0 0%, #FFFDF9 100%);}
+
+.red .h1 {color: #CD9058;}
+
+.red .h2 {
+    color: #C89C74;
 }