ct

src/sass/AppHome/application.vue

@@ -1,6 +1,101 @@
 <template>
   <div class="application">
-    
+    <!-- 网格管理 -->
+    <div class="card">
+      <div class="card-title">网格管理</div>
+      <div class="app-list">
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon1wg@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">网格管理</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon2ts@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">特殊人群</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon3yf@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">以房找人</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon4jm@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">居民管理</div>
+        </div>
+      </div>
+    </div>
+    <!-- 事务处理 -->
+    <div class="card">
+      <div class="card-title">事务处理</div>
+      <div class="app-list">
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon5md@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">矛盾调解</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon6zf@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">走访慰问</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon7sw@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">事务记录</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon8wj@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">问卷表单</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon9hy@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">会议通知</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon10txl@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">通讯录</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon11tzgg@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">通知公告</div>
+        </div>
+      </div>
+    </div>
+    <!-- 疫情防控 -->
+    <div class="card">
+      <div class="card-title">疫情防控</div>
+      <div class="app-list">
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon12jksb@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">健康上报</div>
+        </div>
+        <div class="app-item">
+          <div>
+            <img src="./components/img/icon13fxdj@2x.png" alt="" class="app-img">
+          </div>
+          <div class="app-name">返乡登记</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +121,47 @@ export default {
 
 <style lang="scss" scoped>
 .application {
+  padding: 40px 28px 0px 28px;
+  box-sizing: border-box;
+
+  .card {
+    padding: 20px 30px;
+    margin-bottom: 32px;
+    box-sizing: border-box;
+    width: 100%;
+    background-color: #FFFFFF;
+    border-radius: 12px;
+    box-shadow: 0px 2px 4px 2px rgba(173, 173, 173, 0.05);
+
+    .card-title {
+      height: 40px;
+      line-height: 40px;
+      font-weight: 800;
+    }
+
+    .app-list {
+      display: flex;
+      flex-wrap: wrap;
+
+      .app-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 158px;
+        height: 150px;
+
+        .app-img {
+          width: 72px;
+          height: 72px;
+        }
+
+        .app-name {
+          font-size: 26px;
+        }
+      }
+    }
+  }
 
 }
 </style>