177 lines
4.2 KiB
Vue
177 lines
4.2 KiB
Vue
<template>
|
||
<div class="bigScrenn cppBox">
|
||
<!-- 第一部分 -->
|
||
<div class="none-Cont" >
|
||
<Head title='三级劳务体系布局'></Head>
|
||
<div class="conttent">
|
||
<echartsMap></echartsMap>
|
||
</div>
|
||
</div>
|
||
<!-- 第二个部分 -->
|
||
<div class="two-cont">
|
||
<ul class="cntBoxcpp flex">
|
||
<li class="childOne">
|
||
<div class="title-small">全职招聘</div>
|
||
<div class="childCnt">
|
||
<qzzp></qzzp>
|
||
</div>
|
||
</li>
|
||
<li class="childOne">
|
||
<div class="title-small">零工招聘</div>
|
||
<div class="childCnt">
|
||
<lgzp></lgzp>
|
||
</div>
|
||
</li>
|
||
<li class="childOne">
|
||
<div class="title-small">实习招聘</div>
|
||
<div class="childCnt">
|
||
<sszp></sszp>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 第三部分-->
|
||
<div class="two-cont">
|
||
<ul class="cntBoxcpp flex">
|
||
<li class="childOne">
|
||
<div class="title-small">创业撮合</div>
|
||
<div class="childCnt">
|
||
<cych></cych>
|
||
</div>
|
||
</li>
|
||
<li class="childOne">
|
||
<div class="title-small">技能培训</div>
|
||
<div class="childCnt">
|
||
<jnpx></jnpx>
|
||
</div>
|
||
</li>
|
||
<li class="childOne">
|
||
<div class="title-small">重点人群（大学生）</div>
|
||
<div class="childCnt">
|
||
<zdrq></zdrq>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import echartsMap from './components/echartsMap.vue';
|
||
import qzzp from './components/qzzp.vue';
|
||
import lgzp from './components/lgzp.vue';
|
||
import sszp from './components/sszp.vue';
|
||
import cych from './components/cych.vue';
|
||
import jnpx from './components/jnpx.vue';
|
||
import zdrq from './components/zdrq.vue';
|
||
import Head from "@/views/largeScreen/layout/head.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({
|
||
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/css/homeScreen.scss";
|
||
|
||
@mixin textColor($color1, $color2) {
|
||
background-image: linear-gradient(0deg, $color1 0%, $color2 50%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.cppBox {
|
||
width: 100%;
|
||
background: url("~@/assets/images/bigHome.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
padding: 0 60px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
// 第一部分
|
||
.none-Cont {
|
||
height: calc(100% / 3);
|
||
// height: 900px;
|
||
position: relative;
|
||
.conttent {
|
||
position: absolute;
|
||
height: calc(100% - 120px);
|
||
width: 100%;
|
||
overflow: auto;
|
||
top: 9vw;
|
||
padding: 0 10px 10px;
|
||
box-sizing: border-box;
|
||
|
||
.conttentOne {
|
||
width: 100%;
|
||
height: calc(100% - 286px);
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 第二三不部分
|
||
.two-cont {
|
||
height: calc(100% / 3);
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
.cntBoxcpp {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
.childOne {
|
||
width: 33%;
|
||
height: 100%;
|
||
background: url("~@/assets/images/bg_16.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
.childCnt {
|
||
height: calc(100% - 80px);
|
||
overflow: hidden;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chartsBox {
|
||
height: calc(100% - 125px);
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.title-small {
|
||
line-height: 130px;
|
||
padding-left: 150px;
|
||
box-sizing: border-box;
|
||
font-size: 2.2vw;
|
||
font-family: "icrosoft YaHei";
|
||
position: relative;
|
||
background: url("~@/assets/images/ttt.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
&::before {
|
||
position: absolute;
|
||
content: "";
|
||
left: 50px;
|
||
top: 38px;
|
||
width: 68px;
|
||
height: 68px;
|
||
background: url("~@/assets/images/icon_20.png") no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
</style> |