75 lines
1.2 KiB
Vue
75 lines
1.2 KiB
Vue
<template>
|
|
<!-- 机构数量 -->
|
|
<ul class="mr40">
|
|
<li v-for="item in dataList" :key="item">
|
|
<div class="name_text">{{ item.name }}</div>
|
|
<div class="num">{{ item.num }}%</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { onMounted, ref, nextTick } from "vue";
|
|
const jgslEcharts = ref();
|
|
const dataList = ref([
|
|
{
|
|
name: '院校毕业生',
|
|
num: 78
|
|
},
|
|
{
|
|
name: '就业困难人群',
|
|
num: 45
|
|
},
|
|
|
|
{
|
|
name: '退役军人',
|
|
num: 78
|
|
},
|
|
{
|
|
name: '失业人群',
|
|
num: 72
|
|
},
|
|
{
|
|
name: '残疾人',
|
|
num: 34
|
|
},
|
|
{
|
|
name: '其他人群',
|
|
num: 65
|
|
}
|
|
])
|
|
onMounted(() => {
|
|
});
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
li {
|
|
width: 50%;
|
|
text-align: center;
|
|
align-items: center;
|
|
font-size: 36px;
|
|
height: 320px;
|
|
display: flex;
|
|
font-family: "YSBTH";
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
.name_text {
|
|
font-size: 2vw;
|
|
width: 100%;
|
|
color: skyblue;
|
|
}
|
|
.num{
|
|
width: 100%;
|
|
font-size: 2vw;
|
|
}
|
|
}
|
|
}
|
|
</style> |