128 lines
2.6 KiB
Vue
128 lines
2.6 KiB
Vue
<template>
|
|
<!-- 人员概览 -->
|
|
<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>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "default title"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.containerBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #0081c3;
|
|
|
|
.titleTxt {
|
|
font-size: 18px;
|
|
color: #6ee4f0;
|
|
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>
|
|
|