中建四局(政企联合):疫情防控模块

src/views/projectAdmin/zjsj/govComp/index.vue

@@ -38,10 +38,10 @@ export default {
       height: 33%;
     }
     .middle {
-      height: 30%;
+      height: 42%;
     }
     .bottom {
-      height: 37%;
+      height: 25%;
     }
   }
 }

src/views/projectAdmin/zjsj/govComp/leftBottom.vue

@@ -1,14 +1,102 @@
 <template>
   <Card title="疫情防控">
-    疫情防控
+    <div class="contentBox">
+      <div class="contentTop">
+        <div class="img">
+          <img src="../assets/images/common/num_skyblue.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num1">6250</p>
+          <p class="text">在场总人数</p>
+        </div>
+        <div class="img">
+          <img src="../assets/images/common/num_skyblue.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num2">5649</p>
+          <p class="text">核酸人数</p>
+        </div>
+      </div>
+      <div class="contentbut">
+        <div class="lw">
+          <p>劳务人数</p>
+          <p class="number">366</p>
+        </div>
+        <div class="cq">
+          <p>出勤人数</p>
+          <p class="number">236</p>
+        </div>
+        <div class="tc">
+          <p>退场人数</p>
+          <p class="number">128</p>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
 export default {
   components: { Card }
-}
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.contentBox {
+  margin-top: 20px;
+  margin-left: 25px;
+  .contentTop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .img,
+    .contentBtn {
+      margin-right: 20px;
+    }
+    .img {
+      img {
+        height: 66px;
+        width: 66px;
+      }
+    }
+    .contentBtn {
+      margin-right: 40px;
+      .num1 {
+        color: #53a9b1;
+      }
+      .num2 {
+        color: #f56c35;
+      }
+    }
+
+    .text {
+      margin-top: 5px;
+      color: #a4a9b0;
+    }
+  }
+  .contentbut {
+    margin-top: 20px;
+    margin-left: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #a4a9b0;
+    .lw,
+    .cq,
+    .tc {
+      width: 88px;
+      text-align: center;
+      margin-right: 55px;
+      .number {
+        height: 40px;
+        line-height: 40px;
+        background-image: url(../assets/images/common/num_bg.png);
+        background-repeat: no-repeat;
+        background-size: 100%;
+        color: #6ee4f0;
+      }
+    }
+  }
+}
+</style>