top

miniprogram/app.wxss

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

miniprogram/pages/home/home.wxml

@@ -1,4 +1,4 @@
-<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;">
         首页
@@ -24,7 +24,24 @@
             <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;
@@ -140,25 +141,28 @@ page {
     font-size: 36rpx;
     color: #04BCA0;
 }
-.bgw{
+
+.bgw {
     background-color: #fff;
-    margin:20rpx;
+    margin: 20rpx;
     margin-top: -50rpx;
     border-radius: 20rpx;
-   padding:40rpx 30rpx;
+    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;
 }
 
@@ -167,3 +171,51 @@ page {
     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;
+}