湖里大屏(劳务管理):人员概况模块

This commit is contained in:
骆乐 2022-08-04 13:33:10 +08:00
parent 10e5928528
commit 9e985aa0b3

View File

@ -1,7 +1,54 @@
<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">
{{ '62,590' }}
</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 class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num3">
{{ '89%'}}
</div>
<div class="label">
{{ '在职男女比例' }}
</div>
</div>
</div>
<div class="countItem">
<img src="@/assets/images/dataBoard/numImg_orange.png" />
<div class="info">
<div class="num4">
{{ 62590}}
</div>
<div class="label">
{{ '入场培训人数' }}
</div>
</div>
</div>
</div>
</div>
</template>
@ -26,7 +73,7 @@ export default {
</script>
<style lang="less" scoped>
.container {
.containerBox {
width: 100%;
height: 100%;
border: 1px solid #0081c3;
@ -37,6 +84,44 @@ export default {
margin-top: 5px;
margin-left: 5px;
}
.personCount {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
margin-left: 30px;
.countItem {
flex-shrink: 0;
height: 35%;
width:48%;
margin-top: 20px;
img {
margin-right: 8px;
}
.info{
display: inline-block;
line-height: 28px;
.num1{
color:#7851f6;
}
.num2{
color:#6ee4f0;
}
.num3{
color:#3d83f3;
}
.num4{
color: #7852f7;
}
.label{
font-size: 12px;
}
.label1{
width:68px;
}
}
}
}
}
</style>