feat 首页加上图标

IOReportSysMP/miniprogram/pages/index/index.scss

@@ -1,5 +1,6 @@
 .banner {
   display: flex;
+
   image {
     width: 200px;
     height: 150px;
@@ -7,15 +8,40 @@
   }
 }
 
-.btn-list{
+.btn-list {
   display: flex;
   flex-direction: column;
-  button{
-    margin: 4px auto;
+  $btn-item-height: 120rpx;
+  $btn-item-icon: 116rpx;
+  .btn-item {
+    display: flex;
+    // border-bottom: 1px solid gray;
+    justify-content: center;
+    align-items: center;
+    image {
+      background-color: rgb(146, 206, 248);
+      width: $btn-item-icon;
+      height: $btn-item-icon;
+      border-radius: 100%;
+      position: relative;
+      right: 15px;
+      margin: ($btn-item-height - $btn-item-icon) / 2;
+      box-shadow: rgba(128, 128, 128, 0.3) 1px 4px 5px 0.5px;
+    }
+  }
+
+  text {
     border-radius: 25rpx;
-    background-color: #0078D4;
-    font-size: 40rpx;
-    padding: 6px 0;
-    color: white;
+    height: $btn-item-height;
+    line-height: $btn-item-height;
+    font-size: 32px;
+    font-weight: 600;
+    color: black;
+    display: block;
+    &::after{
+      content: "";
+      border-bottom: rgba(128, 128, 128, 0.3) solid 1px;
+      display: block;
+    }
   }
 }

IOReportSysMP/miniprogram/pages/index/index.wxml

@@ -5,10 +5,25 @@
     <image src="/asset/banenr.png"></image>
   </view>
   <view class="btn-list">
-    <button wx:if="{{role > 4}}" bindtap="onEnterReport">进校报备</button>
-    <button wx:if="{{role > 4}}" bindtap="onOuterReport">出校报备</button>
-    <button wx:if="{{role > 6}}" bindtap="onAuditReport">报备审核</button>
-    <button wx:if="{{role > 4}}" bindtap="onMyReport">我的报备</button>
-    <button wx:if="{{role == 2}}" bindtap="onScanValid">进出校核验</button>
+    <view wx:if="{{role > 4}}" class="btn-item">
+      <image src="/asset/icons/enter_report.png"/>
+      <text  bindtap="onEnterReport">进校报备</text>
+    </view>
+    <view wx:if="{{role > 4}}" class="btn-item">
+      <image src="/asset/icons/outer_report.png"/>
+      <text  bindtap="onOuterReport">出校报备</text>
+    </view>
+    <view wx:if="{{role > 6}}" class="btn-item">
+      <image src="/asset/icons/audit_report.png"/>
+      <text  bindtap="onAuditReport">报备审核</text>
+    </view>
+    <view wx:if="{{role > 4}}" class="btn-item">
+      <image src="/asset/icons/my_report.png" style="background-color: rgb(242, 191, 112);"/>
+      <text  bindtap="onMyReport">我的报备</text>
+    </view>
+    <view wx:if="{{role == 2}}" class="btn-item">
+      <image src="/asset/icons/door_verify"/>
+      <text  bindtap="onScanValid">进出校核验</text>
+    </view>
   </view>
 </view>