IOReportSysMP/miniprogram/pages/index/index.scss

@@ -1,21 +1,57 @@
-.banner {
+.index-container {
   display: flex;
-  image {
-    width: 200px;
-    height: 150px;
-    margin: 30px auto;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80vh;
+  .banner {
+    display: flex;
+
+    image {
+      width: 200px;
+      height: 150px;
+      margin: 30px auto;
+    }
   }
-}
 
-.btn-list{
-  display: flex;
-  flex-direction: column;
-  button{
-    margin: 4px auto;
-    border-radius: 25rpx;
-    background-color: #0078D4;
-    font-size: 40rpx;
-    padding: 6px 0;
-    color: white;
+  .btn-list {
+    display: flex;
+    flex-direction: column;
+    $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;
+      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

@@ -1,14 +1,29 @@
 <navigationBar onlyStations title="教师进出校管理系统">
 </navigationBar>
-<view>
+<view class="index-container">
   <view class="banner">
     <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>