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

This commit is contained in:
骆乐 2022-08-04 11:37:11 +08:00
parent 1c432ff8b1
commit 10e5928528

View File

@ -1,14 +1,42 @@
<template>
<!-- 人员类别 -->
<div class="container">
<!-- 人员类别 -->
<div class="containerBox">
<div class="titleTxt">{{ title }}</div>
</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>