兴蜀来了平台业务数据
This commit is contained in:
@ -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,83 +19,51 @@
|
||||
</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 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: 1830px">
|
||||
<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: 1830px">
|
||||
<div class="pubTitle" style="height: 180px; line-height: 200px">
|
||||
兴蜀来了培训产品 online
|
||||
</div>
|
||||
<ul class="chartsBox">
|
||||
<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 +72,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 +93,7 @@ const data = reactive({
|
||||
list: [
|
||||
{ label: "服务机构分类与数量" },
|
||||
{ label: "服务机构入职成功率" },
|
||||
{ label: "各类人群就业率" },
|
||||
{ label: "各类人群就业率" }
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -133,7 +109,7 @@ const data = reactive({
|
||||
list: [
|
||||
{ label: "企业流失人员分析" },
|
||||
{ label: "流失原因分析" },
|
||||
{ label: "流向分析" },
|
||||
{ label: "流向分析" }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -141,6 +117,60 @@ 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: no-wrap;
|
||||
height: calc(100% - 146px);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
|
||||
@mixin textColor($color1, $color2) {
|
||||
@ -160,15 +190,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 +234,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 +256,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 +281,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 +299,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 +314,7 @@ const data = reactive({
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
content: "";
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
@ -333,4 +363,4 @@ const data = reactive({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user