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

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

View File

@ -1,14 +1,42 @@
<template> <template>
<!-- 人员类别 --> <!-- 人员类别 -->
<div class="container"> <div class="containerBox">
<div class="titleTxt">{{ title }}</div> <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> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
title: { title: {
type: String, type: String,
@ -16,17 +44,13 @@ export default {
} }
}, },
data() { data() {
return { return {};
};
},
} }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .containerBox {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #0081c3; border: 1px solid #0081c3;
@ -37,6 +61,55 @@ export default {
margin-top: 5px; margin-top: 5px;
margin-left: 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> </style>