湖里大屏(劳务管理):人员类别模块

src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftTop.vue

@@ -1,14 +1,42 @@
 <template>
   <!-- 人员类别 -->
-<div class="container">
+  <div class="containerBox">
     <div class="titleTxt">{{ title }}</div>
-
+    <div class="personCount">
+      <div class="countItem">
+        <img src="@/assets/images/dataBoard/numImg_purple.png" />
+        <div class="info">
+          <div class="num1">{{ 62590 }}</div>
+          <!-- 实名制人数 -->
+          <div class="label label1">{{ '在场总人数' }}</div>
+        </div>
+      </div>
+      <div class="countItem">
+        <img src="@/assets/images/dataBoard/numImg_orange.png" />
+        <div class="info">
+          <div class="num2">{{ 62590 }}</div>
+          <!-- 在场人数 -->
+          <div class="label">{{ '在场劳务人数' }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="persontype">
+        <span>项目管理人员</span>
+        <p class="person">679</p>
+        <span>特种作业人员</span>
+        <p class="person">679</p>
+    </div>
+    <div class="persontype">
+        <span>一般作业人员</span>
+        <p class="person">679</p>
+        <span>临时作业人员</span>
+        <p class="person">679</p>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
   props: {
     title: {
       type: String,
@@ -16,17 +44,13 @@ export default {
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {};
   }
+};
 </script>
 
 <style lang="less" scoped>
-.container {
+.containerBox {
   width: 100%;
   height: 100%;
   border: 1px solid #0081c3;
@@ -37,6 +61,55 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
+  .personCount {
+    display: flex;
+    margin-top: 30px;
+    margin-left: 30px;
+    margin-bottom: 30px;
+    .countItem {
+      flex: 1;
+      height: 35%;
+      display: flex;
+      img {
+        margin-right: 8px;
+      }
+      .info {
+        margin-top: 5px;
+        .num1 {
+          color: #309b8a;
+        }
+        .num2 {
+          color: #f7d400;
+        }
+        .label {
+          font-size: 12px;
+        }
+        .label1 {
+          width: 68px;
+        }
+      }
+    }
+  }
+  .persontype {
+    display: flex;
+    justify-content: center;
+    height: 38px;
+    line-height: 30px;
+    margin-bottom: 20px;
+    span{
+      font-size: 12px;
+      margin-right: 10px;
+    }
+    .person {
+      width: 15%;
+      text-align: center;
+      margin-right: 30px;
+      color: #47b1c4;
+      background-image: url(~@/assets/images/projectImg/numBgc.png);
+      background-size:100%;
+      background-repeat: no-repeat;
+    }
+  }
 }
 </style>