src/views/index.vue

@@ -1,16 +1,38 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="24">
-        智慧仲裁
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>我的待办事项</h2>
-      </el-col>
-    </el-row>
-    <el-divider />
+    <div class="header">
+      <div class="iconTitle"></div>
+      <div class="headerMain">我的代办事项</div>
+    </div>
+    <div class="homeMain">
+        <div class="cardList">
+          <div class="badge">32</div>
+          <div class="cardMain" style="margin-top: 50px;">
+            <img class="iconImg" src="@/assets/images/daishencha.png" alt="">
+          </div>
+          <div class="cardMain">
+            <div class="imgTitle">待审查案件</div>
+          </div>
+        </div>
+        <div class="cardList">
+          <div class="badge">32</div>
+          <div class="cardMain" style="margin-top: 50px;">
+            <img class="iconImg" src="@/assets/images/daijiaofei.png" alt="">
+          </div>
+          <div class="cardMain">
+            <div class="imgTitle">待缴费案件</div>
+          </div>
+        </div>
+        <div class="cardList">
+          <div class="badge">32</div>
+          <div class="cardMain" style="margin-top: 50px;">
+            <img class="iconImg" src="@/assets/images/peisongzhong.png" alt="">
+          </div>
+          <div class="cardMain">
+            <div class="imgTitle">待送达案件</div>
+          </div>
+        </div>
+    </div>
   </div>
 </template>
 
@@ -31,63 +53,66 @@ export default {
 
 <style scoped lang="scss">
 .home {
-  blockquote {
-    padding: 10px 20px;
-    margin: 0 0 20px;
-    font-size: 17.5px;
-    border-left: 5px solid #eee;
-  }
-  hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    border: 0;
-    border-top: 1px solid #eee;
-  }
-  .col-item {
-    margin-bottom: 20px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
   font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;
+  background-color:#f1f1f1 ;
+  height: 100vh;
 
-  ul {
-    list-style-type: none;
+  .header {
+    width: 100%;
+    height: 80px;
+    display: flex;
+    align-items: center;
+
+    .iconTitle {
+      width: 5px;
+      height: 25px;
+      background-color: #0f5c9b;
+      margin-right: 25px;
     }
 
-  h4 {
-    margin-top: 0px;
-  }
-
-  h2 {
-    margin-top: 10px;
-    font-size: 26px;
-    font-weight: 100;
-  }
-
-  p {
-    margin-top: 10px;
-
-    b {
-      font-weight: 700;
+    .headerMain {
+      font-size: 20px;
     }
   }
 
-  .update-log {
-    ol {
-      display: block;
-      list-style-type: decimal;
-      margin-block-start: 1em;
-      margin-block-end: 1em;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-inline-start: 40px;
+  .homeMain {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .cardList {
+      width: 30%;
+      height: 300px;
+      border-radius: 30px;
+      background-color: #ffffff;
+      position: relative;
+      .badge{
+        width: 50px;
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        color: #0a12e6;
+        border-radius: 10px 30px 10px 30px;
+        background-color: #05baf1;
+        position: absolute;
+        right: 0;
+      }
+      .cardMain{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        .iconImg{
+          width: 100px;
+          height: 110px;
+        }
+        .imgTitle{
+          font-size: 20px;
+          font-weight: 600;
+        }
+      }
     }
   }
 }