lcw
This commit is contained in:
@ -30,43 +30,49 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '岗位需求数',
|
||||
value: 120000,
|
||||
icon: require('@/assets/images/30.png'),
|
||||
dw: '个'
|
||||
},
|
||||
// {
|
||||
// label: '岗位需求数',
|
||||
// value: 120000,
|
||||
// icon: require('@/assets/images/30.png'),
|
||||
// dw: '个'
|
||||
// },
|
||||
{
|
||||
label: '培训机构',
|
||||
value: 5,
|
||||
icon: require('@/assets/images/31.png'),
|
||||
icon: require('@/assets/images/30.png'),
|
||||
dw: '家'
|
||||
},
|
||||
{
|
||||
label: '上架培训项目数',
|
||||
value: 23,
|
||||
label: '培训项目',
|
||||
value: 39,
|
||||
icon: require('@/assets/images/31.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '培训课程数',
|
||||
value: 141,
|
||||
icon: require('@/assets/images/32.png'),
|
||||
dw: '个'
|
||||
},
|
||||
{
|
||||
label: '学员入职率',
|
||||
value: 93.80,
|
||||
label: '培训人次',
|
||||
icon: require('@/assets/images/33.png'),
|
||||
dw: '%'
|
||||
value: 5153,
|
||||
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: '人' },
|
||||
// ]
|
||||
},
|
||||
{
|
||||
label: '培训成效',
|
||||
label: '领证人数',
|
||||
value: 870,
|
||||
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: '人' },
|
||||
]
|
||||
dw: '人'
|
||||
},
|
||||
|
||||
]);
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<ul class="child-Box" v-for="(itemchild, iex) in item.data.list" :key="iex">
|
||||
<li class="child-item flex align-center">
|
||||
<span class="mr20 ml50">0{{ iex + 1 }}、{{ itemchild.mc }}</span>
|
||||
<span class="nums">{{ itemchild.num }} <span>{{ itemchild.dw }}</span></span>
|
||||
<!-- <span class="nums">{{ itemchild.num }} <span>{{ itemchild.dw }}</span></span> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -34,37 +34,35 @@ import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '用人单位数',
|
||||
value: 233,
|
||||
value: 628,
|
||||
dw:'家',
|
||||
icon:require('@/assets/images/1.png')
|
||||
},
|
||||
{
|
||||
label: '发布岗位数',
|
||||
dw:'个',
|
||||
dw:'万个',
|
||||
icon:require('@/assets/images/2.png'),
|
||||
value: 9637,
|
||||
value: 7.9,
|
||||
data: {
|
||||
label: '招聘热门岗位',
|
||||
icon:require('@/assets/images/35.png'),
|
||||
list: [
|
||||
{ mc: '制造业普工', num: 4000, dw: '岗位' },
|
||||
{ mc: '光伏业务员', num: 1400, dw: '岗位'},
|
||||
{ mc: '软件开发', num: 800, dw: '岗位' },
|
||||
{ mc: '操作工', num: 4000, dw: '岗位' },
|
||||
{ mc: '机修工', num: 1400, dw: '岗位'},
|
||||
{ mc: '工程师', num: 800, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '匹配入职人数',
|
||||
value: 1300,
|
||||
icon: require('@/assets/images/3.png'),
|
||||
dw:'人',
|
||||
label: '入职热门岗位',
|
||||
icon: require('@/assets/images/36.png'),
|
||||
data: {
|
||||
label: '入职热门岗位',
|
||||
icon:require('@/assets/images/36.png'),
|
||||
// label: '入职热门岗位',
|
||||
// icon:require('@/assets/images/36.png'),
|
||||
list: [
|
||||
{ mc: '普工', num: 680, dw: '岗位', },
|
||||
{ mc: '销售', num: 230, dw: '岗位' },
|
||||
{ mc: '操作工', num: 103, dw: '岗位' },
|
||||
{ mc: '质检', num: 680, dw: '岗位', },
|
||||
{ mc: '研发工程师', num: 230, dw: '岗位' },
|
||||
{ mc: '库管员', num: 103, dw: '岗位' },
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -79,7 +77,7 @@ const dataItems = ref([
|
||||
}
|
||||
|
||||
.box-container {
|
||||
padding: 2vw 20px;
|
||||
padding: 2vw 20px 7vw;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -31,37 +31,24 @@
|
||||
import { ref } from 'vue';
|
||||
const dataItems = ref([
|
||||
{
|
||||
label: '帮扶就业困难人员',
|
||||
value: 55,
|
||||
label: '崇州市政府统筹就业岗位',
|
||||
value: 654,
|
||||
icon: require('@/assets/images/41.png'),
|
||||
dw: '人',
|
||||
dw: '个',
|
||||
data: [
|
||||
{ label: '城镇零就业家庭成员', value: 0, dw: '人' },
|
||||
{ label: '城镇低保家庭', value: 5175, dw: '人' },
|
||||
{ label: '残疾人', value: 18000, dw: '人' },
|
||||
{ label: '现役军人配偶', value: 8970, dw: '人' },
|
||||
{ label: '烈士家属', value: 48, dw: '人' },
|
||||
{ label: '脱贫劳动力', value: 119000, dw: '人' },
|
||||
{ label: '农村低收入群体', value: 11200, dw: '人' },
|
||||
{ label: '公务员岗位', value: 52, dw: '个' },
|
||||
{ label: '事业人才引进岗位', value: 306, dw: '个' },
|
||||
{ label: '服务基层项目', value: 146, dw: '个' },
|
||||
{ label: '政府购买服务岗位', value: 150, dw: '个' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '困难毕业生',
|
||||
label: '见习岗位情况',
|
||||
icon: require('@/assets/images/29.png'),
|
||||
value: 1434,
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '退役军人',
|
||||
value: 25700,
|
||||
icon: require('@/assets/images/39.png'),
|
||||
dw: '人'
|
||||
},
|
||||
{
|
||||
label: '长期失业人员',
|
||||
icon: require('@/assets/images/40.png'),
|
||||
value: 2208,
|
||||
dw: '人'
|
||||
data: [
|
||||
{ label: '毕业生见习单位', value: 32, dw: '家' },
|
||||
{ label: '毕业生见习岗位数', value: 525, dw: '个' },
|
||||
]
|
||||
},
|
||||
|
||||
]);
|
||||
@ -81,7 +68,7 @@ const dataItems = ref([
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.data-item {
|
||||
@ -89,6 +76,7 @@ const dataItems = ref([
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
|
||||
.data-content {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="bigScrenn cppBox">
|
||||
<!-- 第一部分 -->
|
||||
<div class="none-Cont" >
|
||||
<Head title='兴蜀来了人力资源搓配服务平台'></Head>
|
||||
<Head title='三级劳务体系布局'></Head>
|
||||
<div class="conttent">
|
||||
<echartsMap></echartsMap>
|
||||
</div>
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
</li>
|
||||
<li class="childOne">
|
||||
<div class="title-small">重点人群</div>
|
||||
<div class="title-small">重点人群（大学生）</div>
|
||||
<div class="childCnt">
|
||||
<zdrq></zdrq>
|
||||
</div>
|
||||
|
||||
125
src/views/portraitScreen/components/pxkcjh.vue
Normal file
125
src/views/portraitScreen/components/pxkcjh.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="tableBox">
|
||||
<el-table :data="tableData" height="1540px" style="width: 100%">
|
||||
<el-table-column label="序号" width="140px">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="课程名称" width="550px" />
|
||||
<el-table-column prop="starTime" label="开课时间" />
|
||||
<el-table-column prop="endTime" label="结束时间" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "人社局劳务经纪人培训",
|
||||
starTime: "2025/09/24",
|
||||
endTime: "2025/09/26"
|
||||
},
|
||||
{
|
||||
name: "退役军人适应性培训",
|
||||
starTime: "2025/10/16",
|
||||
endTime: "2025/10/20"
|
||||
},
|
||||
{
|
||||
name: "首席统计员培训项目",
|
||||
starTime: "2025/10/14",
|
||||
endTime: "2025/10/17"
|
||||
},
|
||||
{
|
||||
name: "电工",
|
||||
starTime: "2025/05/12",
|
||||
endTime: "2025/06/06"
|
||||
},
|
||||
{
|
||||
name: "焊工",
|
||||
starTime: "2025/05/19",
|
||||
endTime: "2025/06/13"
|
||||
},
|
||||
{
|
||||
name: "钳工",
|
||||
starTime: "2025/05/26",
|
||||
endTime: "2025/06/20"
|
||||
},
|
||||
{
|
||||
name: "人工智能训练师",
|
||||
starTime: "2025/06/02",
|
||||
endTime: "2025/06/27"
|
||||
},
|
||||
{
|
||||
name: "无人机飞手",
|
||||
starTime: "2025/06/16",
|
||||
endTime: "2025/07/11"
|
||||
}
|
||||
// {
|
||||
// name: "手工木工",
|
||||
// starTime: "2025/7/14",
|
||||
// endTime: "2025/8/8"
|
||||
// },
|
||||
// {
|
||||
// name: "高空作业",
|
||||
// starTime: "2025/8/18",
|
||||
// endTime: "2025/9/12"
|
||||
// }
|
||||
// {
|
||||
// name: "学生就业指导",
|
||||
// starTime: "2025/9/1",
|
||||
// endTime: "2025/9/1"
|
||||
// }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableBox {
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
::v-deep .el-table {
|
||||
background-color: transparent;
|
||||
--el-table-border-color: rgba(22, 65, 85, 0.9);
|
||||
.cell {
|
||||
line-height: normal;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table__header-wrapper {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell {
|
||||
padding: 32px 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: rgba(31, 84, 145, 0.473);
|
||||
color: #c4f3fe;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 50px;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(22, 43, 85, 0);
|
||||
}
|
||||
::v-deep .el-table tr:nth-child(even) {
|
||||
background-color: rgba(31, 84, 145, 0.473);
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 41, 85, 0);
|
||||
font-size: 50px;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 41, 85, 0.3);
|
||||
}
|
||||
::v-deep
|
||||
.el-table--enable-row-hover
|
||||
.el-table__body
|
||||
tr:hover
|
||||
> td.el-table__cell {
|
||||
background-color: rgb(16, 68, 171, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
582
src/views/portraitScreen/components/qyzpq.vue
Normal file
582
src/views/portraitScreen/components/qyzpq.vue
Normal file
@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<div class="tableBox">
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
:data="tableData"
|
||||
height="1240px"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="序号" width="200px">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="企业名称" width="1000px" />
|
||||
<el-table-column prop="street" label="所在街道" />
|
||||
<el-table-column prop="position" label="招聘岗位" />
|
||||
<el-table-column prop="recruitmentNum" label="招聘人数" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
|
||||
import { onMounted, ref, Ref } from "vue";
|
||||
const tableRef = ref(null); //表格实例
|
||||
// const tableData = ref<any[]>([]) //定义表格list
|
||||
//表格测试数据
|
||||
const getTableData = () => {
|
||||
let data = [];
|
||||
for (var i = 0; i <= 50; i++) {
|
||||
data.push({
|
||||
date: i,
|
||||
name: `Tom${i}`,
|
||||
address: `地区${i}`
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// tableData.value = getTableData() //表格数据赋值
|
||||
scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
|
||||
});
|
||||
|
||||
const scroll = (tableBody) => {
|
||||
let isScroll = true; //滚动
|
||||
const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
|
||||
|
||||
//鼠标放上去，停止滚动；移开，继续滚动
|
||||
tableDom.addEventListener("mouseover", () => {
|
||||
isScroll = false;
|
||||
});
|
||||
tableDom.addEventListener("mouseout", () => {
|
||||
isScroll = true;
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
if (isScroll) {
|
||||
tableDom.scrollTop += 3; //设置滚动速度
|
||||
if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
|
||||
tableDom.scrollTop = 0;
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "比亚迪电子科技 (崇州) 有限公司",
|
||||
street: "大划街道",
|
||||
position: "操作工（正式工）",
|
||||
recruitmentNum: "150"
|
||||
},
|
||||
{
|
||||
name: "成都领益科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "电子设备维修师",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "日东材料科技 (成都) 有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "材料研发工程师",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "日东材料科技 (成都) 有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "设备操作员",
|
||||
recruitmentNum: "8"
|
||||
},
|
||||
{
|
||||
name: "日东材料科技 (成都) 有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "品保",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川福蓉科技股份公司",
|
||||
street: "崇双路街道",
|
||||
position: "铝合金加工技师",
|
||||
recruitmentNum: "6"
|
||||
},
|
||||
{
|
||||
name: "索菲亚家居（成都）有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "安装售后专员",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "四川中源智慧电缆有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "编织工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "四川中源智慧电缆有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "挤塑工",
|
||||
recruitmentNum: "6"
|
||||
},
|
||||
{
|
||||
name: "四川中源智慧电缆有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "拉丝工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "四川中源智慧电缆有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "成缆工",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川中源智慧电缆有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "绞线工",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "QC主管",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "销售经理",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "SQE工程师",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发工程师",
|
||||
recruitmentNum: "4"
|
||||
},
|
||||
{
|
||||
name: "全友家私有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "组装操作工",
|
||||
recruitmentNum: "8"
|
||||
},
|
||||
{
|
||||
name: "融通农发牧原（崇州）有限责任公司",
|
||||
street: "隆兴镇",
|
||||
position: "养殖技术员",
|
||||
recruitmentNum: "9"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "制瓶工",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "包装工",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "配料工 ",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "磨口工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "灯工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "成都达旺膜结构工程公司",
|
||||
street: "青霞街道",
|
||||
position: "膜结构业务员",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都兴兴蓉通信科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "通信设备调试员",
|
||||
recruitmentNum: "8"
|
||||
},
|
||||
{
|
||||
name: "四川合丰运维科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "信息化平台值班专员",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都市艾家食品有限公司",
|
||||
street: "街子古镇",
|
||||
position: "标签打码员",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都市艾家食品有限公司",
|
||||
street: "街子古镇",
|
||||
position: "销售",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都市艾家食品有限公司",
|
||||
street: "街子古镇",
|
||||
position: "香料粉碎工",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都市艾家食品有限公司",
|
||||
street: "街子古镇",
|
||||
position: "生产普工",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "成都市艾家食品有限公司",
|
||||
street: "街子古镇",
|
||||
position: "选香料临时工",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都恒兴昌科技有限公司",
|
||||
street: "崇庆街道",
|
||||
position: "普工（长白班）",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都市朗昇光电科技有限公司",
|
||||
street: "崇庆街道",
|
||||
position: "临时工",
|
||||
recruitmentNum: "4"
|
||||
},
|
||||
{
|
||||
name: "成都瀚林新材料科技有限公司",
|
||||
street: "崇庆街道",
|
||||
position: "普工(长白班)",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "包装工",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "制瓶工",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "配料工 ",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "磨口工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "四川蜀玻（集团）有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "灯工",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "钢制家具开料岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "钢制家具喷塑岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "钣金激光切割岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "钣金折弯岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "钢制家具钣金组焊岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都安居天下实业有限责任公司",
|
||||
street: "崇阳街道",
|
||||
position: "实木办公家具配料岗位",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "品质主管",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "销售经理",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "SQE工程师",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "研发工程师",
|
||||
recruitmentNum: "4"
|
||||
},
|
||||
{
|
||||
name: "四川展新胶粘材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "品质客户经理(CQM)",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都帝龙新材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "接纸工",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都帝龙新材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "操作工 ",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都帝龙新材料有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "销售业务员",
|
||||
recruitmentNum: "3"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "安装师傅",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "拆单",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "木工学徒",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "五金分拣",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "油漆主管",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "试装人员",
|
||||
recruitmentNum: "nan"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "异形制作人员",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "五面钻打孔人员",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "封边人员",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "油漆工序质检人员",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "木工全能师傅",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "电子锯开料",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "包装",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "杂工（学徒）",
|
||||
recruitmentNum: "1"
|
||||
},
|
||||
{
|
||||
name: "成都艾瑞卡家居用品有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "实木打磨",
|
||||
recruitmentNum: "2"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "针车",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "手工",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "品检",
|
||||
recruitmentNum: "5"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "普工",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "贴底",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "压机",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "刷白胶",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "打磨(PU)",
|
||||
recruitmentNum: "10"
|
||||
},
|
||||
{
|
||||
name: "崇州市华米科技有限公司",
|
||||
street: "崇阳街道",
|
||||
position: "贴标",
|
||||
recruitmentNum: "10"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableBox {
|
||||
width: 2920px;
|
||||
margin: 0 auto;
|
||||
padding: 150px 0 0 0;
|
||||
}
|
||||
::v-deep .el-table {
|
||||
background-color: transparent;
|
||||
--el-table-border-color: rgba(22, 65, 85, 0.5);
|
||||
.cell {
|
||||
line-height: normal;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table__header-wrapper {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell {
|
||||
padding: 36px 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: #1631551f !important;
|
||||
color: #c4f3fe;
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 54px;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(22, 43, 85, 0);
|
||||
}
|
||||
::v-deep .el-table tr:nth-child(even) {
|
||||
background-color: rgba(31, 84, 145, 0.473);
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 41, 85, 0);
|
||||
font-size: 54px;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 41, 85, 0.3);
|
||||
}
|
||||
::v-deep
|
||||
.el-table--enable-row-hover
|
||||
.el-table__body
|
||||
tr:hover
|
||||
> td.el-table__cell {
|
||||
background-color: rgb(16, 68, 171, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
124
src/views/portraitScreen/components/top10.vue
Normal file
124
src/views/portraitScreen/components/top10.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<ul class="rankList">
|
||||
<li v-for="(item, index) in rankData" :key="index">
|
||||
<div class="jdtBox">
|
||||
<div class="jdt" :style="{ width: item.proportion }"></div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="sequence red" v-if="index == 0">{{ index + 1 }}</div>
|
||||
<div class="sequence orange" v-else-if="index == 1">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="sequence yellow" v-else-if="index == 2">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="sequence" v-else>{{ index + 1 }}</div>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="right">{{ item.count }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
const rankData = ref([
|
||||
{ name: "电工培训", count: "120" },
|
||||
{ name: "焊工培训", count: "100" },
|
||||
{ name: "食品安全管理师培训", count: "95" },
|
||||
{ name: "手工木工", count: "78" },
|
||||
{ name: "公共营养师培训", count: "72" },
|
||||
{ name: "医疗护理员培训", count: "63" },
|
||||
{ name: "人工智能训练师培训", count: "48" },
|
||||
{ name: "无人机驾驶员培训", count: "40" },
|
||||
{ name: "高处安装维护拆除作业培训", count: "32" },
|
||||
{ name: "登高架设培训", count: "29" }
|
||||
]);
|
||||
const computeProportion = (num) => {
|
||||
const counts = rankData.value.map((item) => parseInt(item.count));
|
||||
|
||||
const maxNumb = Math.max(...counts);
|
||||
console.log("最大值", maxNumb);
|
||||
for (let i = 0; i < rankData.value.length; i++) {
|
||||
rankData.value[i].proportion =
|
||||
((parseInt(rankData.value[i].count) / maxNumb) * 100).toFixed(2) + "%";
|
||||
}
|
||||
console.log("比例", rankData.value);
|
||||
};
|
||||
onMounted(() => {
|
||||
computeProportion();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul.rankList {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
li {
|
||||
margin: 0 100px;
|
||||
height: 85px;
|
||||
background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
|
||||
0;
|
||||
background-size: 100% 100%;
|
||||
margin: 40px 0 0 0;
|
||||
position: relative;
|
||||
.left {
|
||||
float: left;
|
||||
.sequence {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: 0px;
|
||||
right: 1260px;
|
||||
font-size: 38px;
|
||||
height: 40px;
|
||||
line-height: 24px;
|
||||
color: #0a9eb5;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
&.red {
|
||||
color: #ff0000;
|
||||
}
|
||||
&.orange {
|
||||
color: #ffa500;
|
||||
}
|
||||
&.yellow {
|
||||
color: #ffd700;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 50px;
|
||||
margin: 0 0 0 200px;
|
||||
line-height: 80px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
height: 60px;
|
||||
line-height: 80px;
|
||||
font-size: 40px;
|
||||
display: block;
|
||||
background: -webkit-linear-gradient(#ffffff, #75e8ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 400;
|
||||
}
|
||||
.jdtBox {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 194px;
|
||||
right: 0px;
|
||||
height: 4px;
|
||||
.jdt {
|
||||
height: 4px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(53, 168, 235, 0) 0%,
|
||||
#00ddff 100%
|
||||
);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
343
src/views/portraitScreen/index copy.vue
Normal file
343
src/views/portraitScreen/index copy.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="bigScrenn portraitBox">
|
||||
<!-- 头部 -->
|
||||
<div class="portratCnt noScollLine">
|
||||
<!-- 头部 -->
|
||||
<div class="port-head">
|
||||
<Head title="崇州市就业生态链数据"></Head>
|
||||
<div class="bg-bbb">
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
<!-- <ul class="ul-bbb">
|
||||
<li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
|
||||
<div class="top">{{ it.label }}</div>
|
||||
<div class="cntBox">
|
||||
<Gxjnppfx v-if="it.label == '技能岗位缺口TOP5'"></Gxjnppfx>
|
||||
<Cygxfx v-if="it.label == '产业供需分析'"></Cygxfx>
|
||||
<Gjgrzmyd v-if="it.label == '各行业需求TOP5'"></Gjgrzmyd>
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<ul class="port-three">
|
||||
<li
|
||||
class="port-three-item"
|
||||
v-for="(it, idx) in data.threeList"
|
||||
:key="idx"
|
||||
>
|
||||
<div class="bt-Title tc">
|
||||
<span>{{ it.title }}</span>
|
||||
</div>
|
||||
<ul class="childBox flex">
|
||||
<li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
|
||||
<div class="info tc">{{ iv.label }}</div>
|
||||
<div class="chartsBox">
|
||||
<Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
|
||||
<Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
|
||||
<Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
|
||||
<Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
|
||||
<Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
|
||||
<Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
|
||||
<Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
|
||||
<Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
|
||||
<Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
|
||||
<Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
|
||||
<Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
|
||||
<Lxfx v-if="iv.label == '流向分析'"></Lxfx>
|
||||
<Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
|
||||
<Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
|
||||
<Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
|
||||
<Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
|
||||
<Jndqzpnd
|
||||
v-if="iv.label == '重点企业技能短缺招聘难度'"
|
||||
></Jndqzpnd>
|
||||
<Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="port-four">
|
||||
<li class="port-four-item" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>人才流失趋势分析</span>
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<img src="@/assets/images/sjt.png" alt="">
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import Cygjbl from "./components/cygjbl.vue";
|
||||
import Gxjnppfx from "./components/gxjnppfx.vue";
|
||||
import Cygxfx from "./components/cygxfx.vue";
|
||||
import Ghyxqzf from "./components/ghyxqzf.vue";
|
||||
import Gjgrzmyd from "./components/gjgrzmyd.vue";
|
||||
import Jsxrcfb from "./components/jsxrcfb.vue";
|
||||
import Jgsl from "./components/Jgsl.vue";
|
||||
import Qylsry from "./components/qylsry.vue";
|
||||
import Lsyyfx from "./components/lsyyfx.vue";
|
||||
import Lxfx from "./components/lxfx.vue";
|
||||
import Xxrcgw from "./components/xxrcgw.vue";
|
||||
import Zdrc from "./components/zdrc.vue";
|
||||
import Glrq from "./components/glrq.vue";
|
||||
import Jgrzcgl from "./components/Jgrzcgl.vue";
|
||||
import Jgmyd from "./components/jgmyd.vue";
|
||||
import Csgf from "./components/csgf.vue";
|
||||
import Hyjyl from "./components/hyjyl.vue";
|
||||
import Xlccjyl from "./components/xlccjyl.vue";
|
||||
import Syl from "./components/syl.vue";
|
||||
import Jgpxfb from "./components/jgpxfb.vue";
|
||||
import Jnxgwxq from "./components/jnxgwxq.vue";
|
||||
import Xxgwxq from "./components/xxgwxq.vue";
|
||||
import Rcldyy from "./components/rcldyy.vue";
|
||||
import Jngwtop from "./components/jngwtop.vue";
|
||||
import Jndqzpnd from "./components/jndqzpnd.vue";
|
||||
import Gwxzdb from "./components/gwxzdb.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
getCurrentInstance,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
twoList: [
|
||||
{ label: "产业供需分析" },
|
||||
{ label: "各行业需求TOP5" },
|
||||
{ label: "技能岗位缺口TOP5" }
|
||||
],
|
||||
threeList: [
|
||||
{
|
||||
title: "人力资源服务市场",
|
||||
list: [
|
||||
{ label: "服务机构分类与数量" },
|
||||
{ label: "服务机构入职成功率" },
|
||||
{ label: "各类人群就业率" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才结构分析",
|
||||
list: [
|
||||
{ label: "技能型岗位需求" },
|
||||
{ label: "新兴人才岗位需求" },
|
||||
{ label: "重点企业人才招聘技能要求" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "人才流失趋势分析",
|
||||
list: [
|
||||
{ label: "企业流失人员分析" },
|
||||
{ label: "流失原因分析" },
|
||||
{ label: "流向分析" }
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 50%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.portraitBox {
|
||||
width: 100%;
|
||||
background: url("~@/assets/images/0000.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding: 0 40px;
|
||||
|
||||
.portratCnt {
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
overflow: hidden;
|
||||
.port-head {
|
||||
height: calc(1800px - 190px);
|
||||
// height: 1800px ;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
margin-top: 190px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/top_bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.bg-bbb {
|
||||
// height: 1300px;
|
||||
height: 100%;
|
||||
padding-top: 260px;
|
||||
}
|
||||
|
||||
.ul-bbb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
position: absolute;
|
||||
bottom: 34px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.bbb-item {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
// background: url("~@/assets/images/fff.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.top {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
font-size: 2.2vw;
|
||||
font-family: "YSBTH";
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cntBox {
|
||||
height: calc(100% - 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-three {
|
||||
height: 2400px;
|
||||
|
||||
// background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
.port-three-item {
|
||||
height: 50%;
|
||||
min-height: 350px;
|
||||
margin: 0 4px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.childBox {
|
||||
height: calc(100% - 120px);
|
||||
background: url("~@/assets/images/ggg.png") no-repeat center center;
|
||||
.childItem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.info {
|
||||
font-size: 2.2vw;
|
||||
@include textColor(#09b8cf, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
|
||||
.chartsBox {
|
||||
height: calc(100% - 125px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 10px;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 90%;
|
||||
background: url("~@/assets/images/lien.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 56px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.port-four {
|
||||
height: 1200px;
|
||||
|
||||
.port-four-item {
|
||||
height: 100%;
|
||||
background: none;
|
||||
|
||||
.bt-Title {
|
||||
font-size: 2.8vw;
|
||||
background: url("~@/assets/images/bg_14.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 120px;
|
||||
|
||||
span {
|
||||
@include textColor(#499fe2, #ffffff);
|
||||
font-family: "YSBTH";
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
height: calc(100% - 120px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,10 +4,10 @@
|
||||
<div class="portratCnt noScollLine">
|
||||
<!-- 头部 -->
|
||||
<div class="port-head">
|
||||
<Head title="崇州市就业生态链数据"></Head>
|
||||
<div class="bg-bbb">
|
||||
<Head title="兴蜀来了平台业务数据"></Head>
|
||||
<!-- <div class="bg-bbb">
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <ul class="ul-bbb">
|
||||
<li class="bbb-item" v-for="(it, idx) in data.twoList" :key="idx">
|
||||
<div class="top">{{ it.label }}</div>
|
||||
@ -19,9 +19,12 @@
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<!-- 第二部分 -->
|
||||
<ul class="port-three">
|
||||
<li class="port-three-item" v-for="(it, idx) in data.threeList" :key="idx">
|
||||
<!-- <ul class="port-three">
|
||||
<li
|
||||
class="port-three-item"
|
||||
v-for="(it, idx) in data.threeList"
|
||||
:key="idx"
|
||||
>
|
||||
<div class="bt-Title tc">
|
||||
<span>{{ it.title }}</span>
|
||||
</div>
|
||||
@ -45,57 +48,63 @@
|
||||
<Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
|
||||
<Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
|
||||
<Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
|
||||
<Jndqzpnd v-if="iv.label == '重点企业技能短缺招聘难度'"></Jndqzpnd>
|
||||
<Jndqzpnd
|
||||
v-if="iv.label == '重点企业技能短缺招聘难度'"
|
||||
></Jndqzpnd>
|
||||
<Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="port-four">
|
||||
<li class="port-four-item" :key="idx">
|
||||
<div class="bt-Title tc">
|
||||
<span>人才流失趋势分析</span>
|
||||
</div>
|
||||
<div class="bottom_box">
|
||||
<img src="@/assets/images/sjt.png" alt="">
|
||||
</div>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div class="bigBox">
|
||||
<div class="pubTitle">人才机构分析</div>
|
||||
<ul class="chartsBox">
|
||||
<li>
|
||||
<div class="info">技能型岗位需求</div>
|
||||
<div class="chartsMian"><Jgrzcgl></Jgrzcgl></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="info">新兴人才岗位需求</div>
|
||||
<div class="chartsMian"><Xxrcgw /></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="info">重点企业人才招聘技能要求</div>
|
||||
<div class="chartsMian"><Zdrc /></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bigBox" style="margin-top: 75px; height: 1650px">
|
||||
<div class="pubTitle" style="height: 180px; line-height: 200px">
|
||||
企业招聘情况
|
||||
</div>
|
||||
<div class="mainBox">
|
||||
<Qyzpq></Qyzpq>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bigBox" style="margin-top: 75px; height: 1650px">
|
||||
<div class="pubTitle" style="height: 180px; line-height: 200px">
|
||||
兴蜀来了培训产品 online
|
||||
</div>
|
||||
<ul
|
||||
class="chartsBox"
|
||||
style="height: calc(100% - 180px); overflow: hidden"
|
||||
>
|
||||
<li style="width: 50%">
|
||||
<div class="info">培训课程top10</div>
|
||||
<div class="chartsMian"><Top10></Top10></div>
|
||||
</li>
|
||||
<li style="width: 50%">
|
||||
<div class="info">培训课程计划</div>
|
||||
<div class="chartsMian"><Pxkcjh></Pxkcjh></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import Cygjbl from "./components/cygjbl.vue";
|
||||
import Gxjnppfx from "./components/gxjnppfx.vue";
|
||||
import Cygxfx from "./components/cygxfx.vue";
|
||||
import Ghyxqzf from "./components/ghyxqzf.vue";
|
||||
import Gjgrzmyd from "./components/gjgrzmyd.vue";
|
||||
import Jsxrcfb from "./components/jsxrcfb.vue";
|
||||
import Jgsl from "./components/Jgsl.vue";
|
||||
import Qylsry from "./components/qylsry.vue";
|
||||
import Lsyyfx from "./components/lsyyfx.vue";
|
||||
import Lxfx from "./components/lxfx.vue";
|
||||
import Xxrcgw from "./components/xxrcgw.vue";
|
||||
import Zdrc from "./components/zdrc.vue";
|
||||
import Glrq from "./components/glrq.vue";
|
||||
import Jgrzcgl from "./components/Jgrzcgl.vue";
|
||||
import Jgmyd from "./components/jgmyd.vue";
|
||||
import Csgf from "./components/csgf.vue";
|
||||
import Hyjyl from "./components/hyjyl.vue";
|
||||
import Xlccjyl from "./components/xlccjyl.vue";
|
||||
import Syl from "./components/syl.vue";
|
||||
import Jgpxfb from "./components/jgpxfb.vue";
|
||||
import Jnxgwxq from "./components/jnxgwxq.vue";
|
||||
import Xxgwxq from "./components/xxgwxq.vue";
|
||||
import Rcldyy from "./components/rcldyy.vue";
|
||||
import Jngwtop from "./components/jngwtop.vue";
|
||||
import Jndqzpnd from "./components/jndqzpnd.vue";
|
||||
import Gwxzdb from "./components/gwxzdb.vue";
|
||||
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
@ -104,12 +113,20 @@ import {
|
||||
getCurrentInstance,
|
||||
onBeforeUnmount
|
||||
} from "vue";
|
||||
import Head from "@/views/largeScreen/layout/head.vue";
|
||||
import Xxrcgw from "./components/xxrcgw.vue";
|
||||
import Zdrc from "./components/zdrc.vue";
|
||||
import Jgrzcgl from "./components/Jgrzcgl.vue";
|
||||
import Top10 from "./components/top10.vue";
|
||||
import Qyzpq from "./components/qyzpq.vue";
|
||||
import Pxkcjh from "./components/pxkcjh.vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const data = reactive({
|
||||
twoList: [
|
||||
{ label: "产业供需分析" },
|
||||
{ label: "各行业需求TOP5" },
|
||||
{ label: "技能岗位缺口TOP5" },
|
||||
{ label: "技能岗位缺口TOP5" }
|
||||
],
|
||||
threeList: [
|
||||
{
|
||||
@ -117,7 +134,7 @@ const data = reactive({
|
||||
list: [
|
||||
{ label: "服务机构分类与数量" },
|
||||
{ label: "服务机构入职成功率" },
|
||||
{ label: "各类人群就业率" },
|
||||
{ label: "各类人群就业率" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -133,7 +150,7 @@ const data = reactive({
|
||||
list: [
|
||||
{ label: "企业流失人员分析" },
|
||||
{ label: "流失原因分析" },
|
||||
{ label: "流向分析" },
|
||||
{ label: "流向分析" }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -141,6 +158,65 @@ const data = reactive({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pubTitle {
|
||||
height: 146px;
|
||||
line-height: 146px;
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
}
|
||||
.bigBox {
|
||||
width: 2988px;
|
||||
height: 1480px;
|
||||
background: url("~@/assets/images/largeScreen2/bigBox-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 0 auto;
|
||||
ul.chartsBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
height: calc(100% - 146px);
|
||||
background: url("~@/assets/images/ggg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
li {
|
||||
width: 33.33%;
|
||||
height: 100%;
|
||||
padding: 20px 50px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 1300px;
|
||||
background: url("~@/assets/images/largeScreen2/vertical-line.png")
|
||||
no-repeat;
|
||||
background-size: 100% 100%;
|
||||
right: 0px;
|
||||
top: 20px;
|
||||
}
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.info {
|
||||
height: 140px;
|
||||
text-align: center;
|
||||
line-height: 140px;
|
||||
font-size: 50px;
|
||||
}
|
||||
.chartsMian {
|
||||
width: 100%;
|
||||
height: calc(100% - 140px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainBox {
|
||||
height: calc(100% - 180px);
|
||||
background: url("~@/assets/images/ggg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
@ -160,15 +236,14 @@ const data = reactive({
|
||||
height: calc(100vh - 90px);
|
||||
overflow: hidden;
|
||||
.port-head {
|
||||
height: calc(1800px - 190px);
|
||||
// height: 1800px ;
|
||||
height: 170px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
margin-right: 4px;
|
||||
margin-left: 4px;
|
||||
margin-top: 190px;
|
||||
position: relative;
|
||||
background: url("~@/assets/images/top_bg.png") no-repeat center center;
|
||||
// background: url("~@/assets/images/top_bg.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.bg-bbb {
|
||||
@ -205,13 +280,14 @@ const data = reactive({
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||||
background: url("~@/assets/images/icon_20.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
@ -226,7 +302,7 @@ const data = reactive({
|
||||
|
||||
.port-three {
|
||||
height: 2400px;
|
||||
|
||||
|
||||
// background: url("~@/assets/images/bg_13.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
|
||||
@ -251,11 +327,10 @@ const data = reactive({
|
||||
|
||||
.childBox {
|
||||
height: calc(100% - 120px);
|
||||
background: url('~@/assets/images/ggg.png') no-repeat center center;
|
||||
background: url("~@/assets/images/ggg.png") no-repeat center center;
|
||||
.childItem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
|
||||
.info {
|
||||
font-size: 2.2vw;
|
||||
@ -270,12 +345,13 @@ const data = reactive({
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
top: 10px;
|
||||
right: 0;
|
||||
width: 3px;
|
||||
height: 90%;
|
||||
background: url("~@/assets/images/lien.png") no-repeat center center;
|
||||
background: url("~@/assets/images/lien.png") no-repeat center
|
||||
center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@ -284,7 +360,7 @@ const data = reactive({
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -333,4 +409,4 @@ const data = reactive({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<!-- </button>-->
|
||||
|
||||
<!-- 横向滚动区域 -->
|
||||
<div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
|
||||
<!-- <div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
|
||||
<div
|
||||
v-for="(tab, index) in state.tabs"
|
||||
:key="index"
|
||||
@ -23,7 +23,7 @@
|
||||
>
|
||||
{{ tab }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<!-- <button-->
|
||||
@ -35,13 +35,15 @@
|
||||
<!-- <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </button>-->
|
||||
<Cygjbl></Cygjbl>
|
||||
</div>
|
||||
|
||||
<NetworkMap />
|
||||
<!-- <NetworkMap /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Cygjbl from "./cygjbl.vue";
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import NetworkMap from "../card/NetworkMap.vue";
|
||||
const state = reactive({
|
||||
|
||||
195
src/views/recruitment/components/cygjbl.vue
Normal file
195
src/views/recruitment/components/cygjbl.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="seconent">
|
||||
<div class="inbox flex space-between">
|
||||
<ul class="inLeft items">
|
||||
<li class="child left_child" v-for="it in data.left" :key="it">
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="inright items tc">
|
||||
<li
|
||||
class="child relative right_child"
|
||||
v-for="it in data.right"
|
||||
:key="it"
|
||||
>
|
||||
<div class="text">{{ it.label }}</div>
|
||||
<div class="num">{{ it.per }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from "vue";
|
||||
const data = reactive({
|
||||
left: [
|
||||
{ label: "岗位需求人数", per: "7.9万人" },
|
||||
{ label: "就业意向人数", per: "5.8万人" }
|
||||
],
|
||||
right: [
|
||||
{ label: "岗位需求增幅", per: "17.04%" },
|
||||
{ label: "求职人员增幅", per: "20.38%" }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin textColor($color1, $color2) {
|
||||
background-image: linear-gradient(to top, $color1 0%, $color2 70%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.seconent {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inbox {
|
||||
width: 19vw;
|
||||
height: 14vw;
|
||||
padding-top: 2vw;
|
||||
box-sizing:border-box;
|
||||
background: url("~@/assets/recruitment/jy.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.items {
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
|
||||
.child {
|
||||
height: 100px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.left_child {
|
||||
// width: 439px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.text {
|
||||
margin-left: 1.6vw;
|
||||
margin-top: -0.2vw;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-left: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 0.9vw;
|
||||
@include textColor(#5cb2f7, #48fafc);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
background: url("~@/assets/recruitment/left-one.svg") no-repeat;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/recruitment/left-two.svg") no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.right_child {
|
||||
background-size: 100% 100%;
|
||||
margin-top: -1vw;
|
||||
|
||||
.text {
|
||||
margin-right: 1.5vw;
|
||||
margin-top: -0.2vw;
|
||||
white-space: nowrap;
|
||||
font-size: 0.8vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-right: 1.5vw;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
font-size: 0.9vw;
|
||||
@include textColor(#5cb2f7, #48fafc);
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
background: url("~@/assets/recruitment/right-one.svg") no-repeat right;
|
||||
.text {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
background: url("~@/assets/recruitment/right-two.svg") no-repeat right;
|
||||
.text {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.inLeft,
|
||||
.inright {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inLeft {
|
||||
// margin-left: -2vw;
|
||||
}
|
||||
|
||||
.inright {
|
||||
.num {
|
||||
margin-left: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ohher {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: 162px;
|
||||
font-family: "YSBTH";
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.incenter {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 73%;
|
||||
left: 50%;
|
||||
transform: translateX(-54%);
|
||||
width: 60%;
|
||||
|
||||
.hedbt {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 2vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.ctbox {
|
||||
justify-content: space-around;
|
||||
padding-left: 30px;
|
||||
font-size: 3vw;
|
||||
font-family: "YSBTH";
|
||||
@include textColor(#5cb2f7, #ffffff);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -33,6 +33,14 @@ const props = defineProps({
|
||||
count: "",
|
||||
class: ""
|
||||
})
|
||||
},
|
||||
type3: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: "",
|
||||
count: "",
|
||||
class: ""
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -43,7 +51,7 @@ const props = defineProps({
|
||||
<div class="left">{{ title }}</div>
|
||||
<div class="right">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<slot name="header"></slot>
|
||||
<div class="row">
|
||||
<div :class="type1.class">
|
||||
<div class="title">{{ type1.title }}</div>
|
||||
@ -53,6 +61,10 @@ const props = defineProps({
|
||||
<div class="title">{{ type2.title }}</div>
|
||||
<div class="count">{{ type2.count }}</div>
|
||||
</div>
|
||||
<div :class="type3.class">
|
||||
<div class="title">{{ type3.title }}</div>
|
||||
<div class="count">{{ type3.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cardWrapper">
|
||||
@ -79,6 +91,7 @@ const props = defineProps({
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
margin: 0.521vw 0.573vw 0;
|
||||
|
||||
.count {
|
||||
@ -111,6 +124,25 @@ const props = defineProps({
|
||||
width: 9.823vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
.modelItem3 {
|
||||
padding-top: 0.8vw;
|
||||
padding-left: 3.2vw;
|
||||
text-align: left;
|
||||
width: 7vw;
|
||||
height: 4.167vw;
|
||||
}
|
||||
.first{
|
||||
background: url("~@/assets/recruitment/first.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.seconed{
|
||||
background: url("~@/assets/recruitment/seconed.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.third{
|
||||
background: url("~@/assets/recruitment/third.svg") no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
|
||||
@ -26,13 +26,19 @@
|
||||
</el-carousel>
|
||||
</enterprise-employment-card>
|
||||
<!-- 左2 -->
|
||||
|
||||
<enterprise-employment-card
|
||||
:title="cardTwoInfo.title"
|
||||
:description="cardTwoInfo.description"
|
||||
:type1="cardTwoInfo.type1"
|
||||
:type2="cardTwoInfo.type2"
|
||||
:type3="cardTwoInfo.type3"
|
||||
style="margin-top: 0.625vw"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div style="margin-top:1vw" class="header_bg">产业求人倍率</div>
|
||||
</template>
|
||||
<div class="header_bg" style="margin-top:1vw">就业生态数据</div>
|
||||
<costom-caed />
|
||||
</enterprise-employment-card>
|
||||
</div>
|
||||
@ -143,18 +149,22 @@ const cardOneInfo = {
|
||||
}
|
||||
};
|
||||
const cardTwoInfo = {
|
||||
title: "服务网络覆盖情况",
|
||||
description: "17家人力资源机构",
|
||||
title: "兴蜀就业生态数据",
|
||||
type1: {
|
||||
title: "公共服务站点",
|
||||
count: "40",
|
||||
class: "modelItem1"
|
||||
title: "第一产业",
|
||||
count: "1.2",
|
||||
class: "modelItem3 first"
|
||||
},
|
||||
type2: {
|
||||
title: "第二产业",
|
||||
count: "1.6",
|
||||
class: "modelItem3 seconed"
|
||||
},
|
||||
type3: {
|
||||
title: "第三产业",
|
||||
count: "1.4",
|
||||
class: "modelItem3 third"
|
||||
}
|
||||
// type2: {
|
||||
// title: "其他服务机构",
|
||||
// count: "200",
|
||||
// class: "modelItem1"
|
||||
// }
|
||||
};
|
||||
const cardThreeInfo = {
|
||||
title: "重点企业保供案例(比亚迪)",
|
||||
@ -236,4 +246,16 @@ function getWebSocketData() {
|
||||
:deep(.el-carousel__mask) {
|
||||
display: none;
|
||||
}
|
||||
.header_bg {
|
||||
height: 17px;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 0.729vw;;
|
||||
color: #c4f3fe;
|
||||
line-height: 19px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user