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