<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>