344 lines
9.8 KiB
Vue
344 lines
9.8 KiB
Vue
<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>
|