144 lines
3.0 KiB
Vue
144 lines
3.0 KiB
Vue
<template>
|
|
<div class="box-container">
|
|
<div class="data-item"
|
|
v-for="(item, index) in dataItems"
|
|
:key="index">
|
|
<div class="mr15">
|
|
<img class="imgs"
|
|
:src="item.icon"
|
|
alt="" />
|
|
</div>
|
|
<div class="data-content">
|
|
<div class="label">{{ item.label }}</div>
|
|
<div class="value">{{ item.value }}</div>
|
|
<div class="value">{{ item.dw }}</div>
|
|
</div>
|
|
<div style="width:100%;"
|
|
class="mt20 flex flex-warp"
|
|
v-if="item.data">
|
|
<div class="data-content-item"
|
|
v-for="(itemchild, iex) in item.data"
|
|
:key="iex">
|
|
<div class="label">{{ itemchild.label }}</div>
|
|
<div class="value">{{ itemchild.value }} {{ itemchild.dw }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const dataItems = ref([
|
|
{
|
|
label: '岗位需求数',
|
|
value: 120000,
|
|
icon: require('@/assets/images/30.png'),
|
|
dw: '个'
|
|
},
|
|
{
|
|
label: '培训机构',
|
|
value: 5,
|
|
icon: require('@/assets/images/31.png'),
|
|
dw: '家'
|
|
},
|
|
{
|
|
label: '上架培训项目数',
|
|
value: 23,
|
|
icon: require('@/assets/images/32.png'),
|
|
dw: '个'
|
|
},
|
|
{
|
|
label: '学员入职率',
|
|
value: 93.80,
|
|
icon: require('@/assets/images/33.png'),
|
|
dw: '%'
|
|
},
|
|
{
|
|
label: '培训成效',
|
|
icon: require('@/assets/images/34.png'),
|
|
value: 3727,
|
|
dw: '次',
|
|
data: [
|
|
{ label: '培训项目', value: 53, dw: '个' },
|
|
{ label: '培训课程数', value: 114, dw: '个' },
|
|
{ label: '报名人次', value: 925, dw: '次' },
|
|
{ label: '签到人数', value: 886, dw: '人' },
|
|
{ label: '培训完结', value: 879, dw: '人' },
|
|
{ label: '证书颁发', value: 870, dw: '人' },
|
|
]
|
|
},
|
|
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin textColor($color1, $color2) {
|
|
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.box-container {
|
|
padding: 2vw 10px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.data-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.data-content {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.label {
|
|
margin-left: 10px;
|
|
font-size: 2vw;
|
|
font-family: "YSBTH";
|
|
}
|
|
|
|
.value {
|
|
font-weight: bold;
|
|
font-size: 2vw;
|
|
font-family: "YSBTH";
|
|
@include textColor(#0deb0d, #ffffff);
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
|
|
.data-content-item {
|
|
width: 100%;
|
|
display: flex;
|
|
line-height: 4vw;
|
|
align-content: center;
|
|
.label {
|
|
margin-left: 80px;
|
|
font-size: 1.5vw;
|
|
font-family: "YSBTH";
|
|
}
|
|
|
|
.value {
|
|
font-weight: bold;
|
|
font-size: 1.5vw;
|
|
font-family: "YSBTH";
|
|
@include textColor(#0deb0d, #ffffff);
|
|
margin-left: 40px;
|
|
}
|
|
}
|
|
|
|
.imgs {
|
|
width: 6vw;
|
|
}
|
|
</style> |