<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>
      <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 {
  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: 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) {
  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>
