413 lines
11 KiB
Vue
413 lines
11 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> -->
|
|
<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 {
|
|
ref,
|
|
reactive,
|
|
onMounted,
|
|
onUnmounted,
|
|
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" }
|
|
],
|
|
threeList: [
|
|
{
|
|
title: "人力资源服务市场",
|
|
list: [
|
|
{ label: "服务机构分类与数量" },
|
|
{ label: "服务机构入职成功率" },
|
|
{ label: "各类人群就业率" }
|
|
]
|
|
},
|
|
{
|
|
title: "人才结构分析",
|
|
list: [
|
|
{ label: "技能型岗位需求" },
|
|
{ label: "新兴人才岗位需求" },
|
|
{ label: "重点企业人才招聘技能要求" }
|
|
]
|
|
},
|
|
{
|
|
title: "人才流失趋势分析",
|
|
list: [
|
|
{ label: "企业流失人员分析" },
|
|
{ label: "流失原因分析" },
|
|
{ label: "流向分析" }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
</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) {
|
|
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: 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-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>
|