rsxm-master/src/views/recruitment/layout/centerModel.vue

<template>
  <div class="contentWrapper">
    <div class="rowContent">
      <div class="modelWrapper">
        <div
          class="modelContent"
          v-for="(item, index) in modelContentList"
          :key="index"
          :class="selectedIndex == index ? 'active' : ''"
          @click="onacitve(index, item.label)"
        >
          <div class="num">{{ item.num }}</div>
          <div class="label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div
      class="content"
      v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3 && isactive != 4 && isactive != 5 && isactive != 6"
    >
      <div class="num">{{ centerInfoMap[activeView].num }}</div>
      <div class="label">{{ centerInfoMap[activeView].label }}</div>
    </div>
    <!-- <transition name="fade"> -->
    <div class="hjrkDialogBox" v-show="isactive == 0">
      <div class="titleBox">
        <div class="title">户籍人口</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="tabsBox">
        <!-- <li
            v-for="(item, index) in tabsDate.tabs"
            :key="index"
            :class="tabsActive == index ? 'active' : ''"
            @click="tabsActive = index"
          >
            {{ item }}
          </li> -->
        <li
          v-for="(item, index) in tabsDate.tabs"
          :key="index"
          :class="tabsActive == index ? 'active' : ''"
          @click="tabsActive = 0"
        >
          {{ item }}
        </li>
      </ul>

      <div class="barBox" ref="enterpriseTwoRef"></div>
    </div>
    <!-- </transition> -->
    <div class="hjrkDialogBox" v-show="isactive == 1">
      <div class="titleBox">
        <div class="title">高中端人才</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="statisticOne">
        <li v-for="(item, index) in statisticData" :key="index">
          <img :src="item.imgURL" :alt="item.title" />
          <div class="infoBox">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="count">
              <span class="numb">{{ item.count }}</span
              >（{{ item.unit }}）
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="hjrkDialogBox" v-show="isactive == 3">
      <div class="titleBox">
        <div class="title">新增就业群体</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <div class="pieBigBox">
        <div class="pieMain">
          <div class="pieBox" ref="pieRef"></div>
          <div class="pieTitle">新增就业群体</div>
        </div>
        <ul class="pieLsit">
          <li>
            <div><span class="blockOne"></span><span>城镇新增就业</span></div>
            <div>
              <span class="numb">目标7200人</span
              ><span class="proportion">完成5445人</span>
            </div>
          </li>
          <li>
            <div><span class="blockTwo"></span><span>失业人员再就业</span></div>
            <div>
              <span class="numb">目标1900人</span
              ><span class="proportion">完成1528人</span>
            </div>
          </li>
          <li>
            <div>
              <span class="blockThree"></span><span>就业困难人员再就业</span>
            </div>
            <div>
              <span class="numb">目标190人</span
              ><span class="proportion">完成125人</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="hjrkDialogBox" v-show="isactive == 2">
      <div class="titleBox">
        <div class="title">高校毕业未就业情况</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="tabsBox">
        <!-- <li
            v-for="(item, index) in tabsDate.tabs"
            :key="index"
            :class="tabsActive == index ? 'active' : ''"
            @click="tabsActive = index"
          >
            {{ item }}
          </li> -->
        <li
          v-for="(item, index) in tabsDate2.tabs"
          :key="index"
          :class="tabsActive == index ? 'active' : ''"
          @click="
            tabsDate2.activeIndex = index;
            tabsActive = index;
          "
        >
          {{ item }}
        </li>
      </ul>
      <Xueli v-if="tabsDate2.activeIndex == 0"></Xueli>
      <Zhuanye v-if="tabsDate2.activeIndex == 1"></Zhuanye>
      <Xingbie v-if="tabsDate2.activeIndex == 2"></Xingbie>
      <Juzhudi v-if="tabsDate2.activeIndex == 3"></Juzhudi>
      <Kunnan v-if="tabsDate2.activeIndex == 4"></Kunnan>
    </div>
    <div class="hjrkDialogBox" v-show="isactive == 4">
      <div class="titleBox">
        <div class="title">在崇学校就业人数</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <div class="schoolEmploymentBox">
        <table class="employmentTable">
          <thead>
            <tr>
              <th>序号</th>
              <th>校名</th>
              <th>当年就业人数</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, idx) in schoolEmploymentList" :key="idx">
              <td>{{ (idx + 1).toString().padStart(2, '0') }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.count }}人</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="hjrkDialogBox topSchoolsDialog" v-show="isactive == 5">
      <div class="titleBox">
        <div class="title">合作学校TOP5</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="cooperateSchoolList">
        <li v-for="(item, index) in topSchools" :key="index">
          <img :src="schoolIcon" alt="学校" class="schoolIcon" />
          <div class="schoolName">{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <div class="hjrkDialogBox" v-show="isactive == 6">
      <div class="titleBox">
        <div class="title">合作社TOP5</div>
        <div class="close" @click="isactive = -1"></div>
      </div>
      <ul class="cooperateOrgList">
        <li v-for="(item, index) in topCoops" :key="index">
          <img :src="coopIcon" alt="合作社" class="coopIcon" />
          <div class="coopName">{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <div class="bottomSwitch">
      <button data-type="overview" :class="{active: activeView === 'overview'}" @click="switchView('overview')">崇州概况</button>
      <button data-type="work" :class="{active: activeView === 'work'}" @click="switchView('work')">兴蜀工作</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
import Xueli from "../components/jyknryzjy/xueli.vue";
import Zhuanye from "../components/jyknryzjy/zhuanye.vue";
import Xingbie from "../components/jyknryzjy/xingbie.vue";
import Juzhudi from "../components/jyknryzjy/juzhudi.vue";
import Kunnan from "../components/jyknryzjy/kunnan.vue";
import schoolIcon from "@/assets/images/recruitment/xuexiao.png";
import coopIcon from "@/assets/images/recruitment/hzqy.png";
const isactive = ref(-1); // 控制弹窗
const hideBottomSwitch = computed(() => [0, 1, 2, 3, 4, 5, 6].includes(isactive.value));
const selectedIndex = ref(-1); // 控制上方卡片高亮
const tabsActive = ref(0);
const dialogTitle = ref("户籍人口");
const onacitve = (index, label) => {
  // 仅在“崇州概况”模式下开启弹窗，其它模式只高亮不弹窗
  // 记录高亮卡片
  selectedIndex.value = index;
  if (activeView.value === "overview") {
    // 根据标签映射到既有弹窗：户籍人口(0)、高中端人才(1)、新增就业群体(3)、在崇学校就业人数(4)
    if (label === "户籍人口") {
      // 取消弹窗显示
      isactive.value = -1;
    } else if (label === "高中端人才") {
      isactive.value = 1;
    } else if (label.includes("新增")) {
      isactive.value = 3;
    } else if (label === "在崇学校就业人数") {
      isactive.value = 4;
    } else {
      isactive.value = -1;
    }
    dialogTitle.value = label;
  } else {
    // 兴蜀工作视图的弹窗映射：合作学校TOP5、合作社TOP5
    if (label === "合作学校") {
      isactive.value = 5;
    } else if (label === "合作社") {
      isactive.value = 6;
    } else {
      isactive.value = -1;
    }
  }
};

const activeView = ref("overview");
const centerInfoMap = {
  overview: { num: "81.1万", label: "人口总数" },
  work: { num: "19.7万", label: "服务人数" }
};
const modelSets = {
   overview: [
     { num: "65.33万", label: "户籍人口" },
     { num: "2.2万", label: "高中端人才" },
     { num: "0.71万", label: "新增就业群体" },
     { num: "0.76万", label: "失业人员就业帮扶" },
     { num: "0.49万", label: "在崇学校就业人数" }
   ],
   work: [
     { num: "628个", label: "服务企业" },
     { num: "36所", label: "合作学校" },
     { num: "19个", label: "合作社" },
     { num: "17期", label: "培训课程" },
     { num: "870人", label: "领证人数" }
   ]
 };
const modelContentList = ref(modelSets[activeView.value]);
const switchView = (view) => {
   activeView.value = view;
   isactive.value = -1; // 退出任何弹窗
   selectedIndex.value = -1; // 取消高亮
   modelContentList.value = modelSets[view];
 };
const statisticData = ref([
  {
    imgURL: tongjiPxjg,
    title: "国家级领军人才",
    count: "18",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "地方级领军型人才",
    count: "45",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "博士",
    count: "133",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "硕士",
    count: "1012",
    unit: "人"
  },
  {
    imgURL: tongjiPxjg,
    title: "本科",
    count: "20792",
    unit: "人"
  }
]);
const tabsDate = reactive({
  tabs: [
    "学历",
    "工种",
    "性别",
    "年龄段",
    "原户籍地",
    "所在产业",
    "所在行业",
    "公司规模"
  ],
  activeIndex: 0
});
const tabsDate2 = reactive({
  tabs: ["学历", "专业", "性别", "居住地址", "困难大学生"],
  activeIndex: 0
});
const schoolEmploymentList = ref([
  { name: "四川矿产机电技师学院", count: 1228 },
  { name: "四川科华高级技工学校", count: 176 },
  { name: "中国五冶高级学校崇州校区", count: 300 },
  { name: "四川水利职业技术学院", count: 2067 },
  { name: "四川文化传媒职业技术学校", count: 1200 }
]);
const topSchools = ref([
  { name: "成都工业职业技术学院" },
  { name: "成都工贸职业技术学院" },
  { name: "四川师范大学" },
  { name: "崇州市职业教育培训中心（成都市技师学院南校区）" },
  { name: "成都矿产机电技师学院" }
]);
const topCoops = ref([
  { name: "绵阳市游仙区鑫众送劳务信息咨询农民专业合作社" },
  { name: "成都市武侯青业劳务信息咨询农民专业合作社" },
  { name: "成都市成华青业劳务信息咨询农民专业合作社" },
  { name: "崇州市蜀洲聚力劳务信息咨询农民专业合作社" },
  { name: "成都市蜀州兴蜀农民劳务信息咨询专业合作社" }
]);
import * as echarts from "echarts";
const enterpriseTwoRef = ref(null);
const option = {
  // 设置图形位置
  grid: {
    top: "10%",
    left: "8%",
    right: "5%",
    bottom: "11%"
  },
  // 设置图例
  // legend: {
  //   itemWidth: 10, // 方块宽度
  //   itemHeight: 10, // 方块高度
  //   textStyle: {
  //     color: "#B2D9DF" // 文字颜色
  //   },
  //   x: "center", // 图例在左（left）、右（right）、居中（center）、100px
  //   y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
  //   padding: [15, 50, 0, 0] // 图例[距上右下左方距离
  // },
  xAxis: {
    axisLine: {
      lineStyle: {
        color: "#CBF2FA" // 文字颜色
      }
    },
    axisLabel: {
      fontSize: 22, // 设置 x 轴文字大小
      color: "#CBF2FA" // 可以同时设置文字颜色
    },
    type: "category",
    data: ["大专及以上", "高中(含中专)", "初中", "小学"]
  },
  yAxis: {
    //网格线
    splitLine: {
      show: true,
      lineStyle: {
        color: ["#A1C7CD"], // 线颜色
        opacity: 0.2 // 透明度
      }
    },
    axisLine: {
      lineStyle: {
        color: "#CBF2FA" // 文字颜色
      }
    },
    axisLabel: {
      fontSize: 20, // 设置 x 轴文字大小
      color: "#CBF2FA" // 可以同时设置文字颜色
    },
    type: "value"
  },
  series: [
    {
      name: "岗位种类数",
      type: "bar",
      showBackground: true,
      barWidth: 20,
      data: [71013, 105716, 266225, 210356],
      // 设置柱状图的数值
      label: {
        show: true,
        position: "top",
        color: "#30DCFF",
        fontSize: 22
      },
      itemStyle: {
        //渐变色
        color: {
          type: "linear",
          x: 1,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(48, 220, 255, 1)" },
            { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
          ]
        }
      }
    }
  ]
};
const pieRef = ref(null);
const optionPie = {
  // 设置图形位置
  tooltip: {
    trigger: "item"
  },

  series: [
    {
      name: "新增就业群里",
      type: "pie",
      radius: ["65%", "80%"],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 1
      },
      label: {
        show: false,
        position: "center"
      },

      labelLine: {
        show: false
      },
      data: [
        { value: 5445, name: "城镇新增就业", itemStyle: { color: "#58A8FF" } },
        {
          value: 1528,
          name: "失业人员再就业",
          itemStyle: { color: "#30DCFF" }
        },
        {
          value: 125,
          name: "就业困难人员再就业",
          itemStyle: { color: "#ffffff" }
        }
      ]
    }
  ]
};
// 生命周期钩子
onMounted(() => {
  if (enterpriseTwoRef.value) {
    const chart = echarts.init(enterpriseTwoRef.value);
    // 设置option
    chart.setOption(option);
  }
  if (pieRef.value) {
    const chart = echarts.init(pieRef.value);
    // 设置option
    chart.setOption(optionPie);
  }
});
</script>

<style lang="scss" scoped>
.contentWrapper {
  position: absolute;
  top: 8.2vw;
  left: 23.58vw;
  width: 52.46vw;

  .rowContent {
    position: absolute;
    width: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 9.46875vw;

    margin-top: 12.90625vw;
    background: url("~@/assets/recruitment/content_bg.svg") no-repeat;
    background-size: 100% 100%;
    width: 52.46vw;
    height: 31.667vw;

    .num {
      font-family: PingFang SC, PingFang SC;
      font-size: 2.667vw;
      color: #30dcff;
    }

    .label {
      margin-top: 0.521vw;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 0.833vw;
      color: #cbf2fa;
    }
  }
  .modelWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .modelContent {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      background: url("~@/assets/recruitment/model_bg.svg") no-repeat;
      background-size: 100% 100%;
      width: 10.729vw;
      height: 6.667vw;
      padding: 0.625vw 0;
      margin: 0 1.5vw 1.2vw;
      cursor: pointer;
      .num {
        font-family: PingFang SC, PingFang SC;
        font-size: 1.667vw;
        color: #30dcff;
      }

      .label {
        margin-top: 0.521vw;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 0.833vw;
        color: #cbf2fa;
      }

      // &:nth-last-child(1) {
      //   margin-right: 8vw;
      // }

      // &:nth-last-child(3) {
      //   margin-left: 8vw;
      // }
      &.active {
        background: url("~@/assets/images/recruitment/model-active-bg.png")
          no-repeat;
        background-size: 100% 100%;
        .num {
          background: -webkit-linear-gradient(#fff4b3, #ffd901);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
  }
  .hjrkDialogBox {
    top: 15.2vw;
    left: 50%;
    position: absolute;
    width: 52.604vw;
    height: 27.135vw;
    background: url("~@/assets/images/recruitment/hjrk-dialog-bg.png") no-repeat;
    background-size: 100% 100%;
    margin-left: -26.302vw;
    z-index: 9999;
    .titleBox {
      display: flex;
      justify-content: space-between;
      height: 2.604vw;
      .title {
        font-size: 1vw;
        height: 100%;
        line-height: 2.604vw;
        padding: 0 0 0 1.042vw;
        font-weight: bold;
      }
      .close {
        width: 1.5625vw;
        height: 1.5625vw;
        background: url("~@/assets/images/recruitment/hjrk-dialog-close.png")
          no-repeat;
        background-size: 100% 100%;
        margin: 0.5vw;
        cursor: pointer;
      }
    }
    ul.tabsBox {
      display: flex;
      justify-content: space-around;
      padding: 1vw 7vw;
      li {
        width: 3.958vw;
        height: 1.354vw;
        line-height: 1.354vw;
        text-align: center;
        font-size: 0.625vw;
        background: url("~@/assets/images/recruitment/tabs-bg.png") no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
      li.active {
        background: url("~@/assets/images/recruitment/tabs-active-bg.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
    .barBox {
      width: 40vw;
      height: 20vw;
      margin: 0 auto;
    }
  }
}
ul.statisticOne {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 3vw;
  li {
    // width: 450px;
    height: 9vw;
    margin: 0 0;
    // 第一排的前2个元素（第一排显示2个）
    &:nth-child(-n + 2) {
      width: 20vw; // 减去margin值
    }

    // // 第二排的第3-5个元素（第二排显示3个）
    // &:nth-child(n + 3):nth-child(-n + 5) {
    //   width: calc(33.33% - 20px); // 减去margin值
    // }

    img {
      display: block;
      width: 7vw;
      height: 7vw;
      float: left;
    }
    .infoBox {
      float: left;
      padding: 0 0 0 0.5vw;
      .title {
        height: 2vw;
        line-height: 2vw;
        margin-top: 1vw;
        span {
          background: -webkit-linear-gradient(#ffffff, #75e8ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 1.3vw;
          font-weight: 400;
        }
      }
      .count {
        font-size: 1.4vw;
        padding: 0.5vw 0 0 0;
        span.numb {
          font-size: 2.2vw;
          display: inline-block;
          padding: 0 0.5vw 0 0;
        }
      }
    }
  }
}
.pieBigBox {
  width: 40vw;
  margin: 1vw auto 0;
  // height: 274px;
  .pieMain {
    position: relative;
    border: 1px solid transparent;
    float: left;
    .pieBox {
      margin: 0 auto;
      margin-top: 3vw;
      width: 15vw;
      height: 15vw;
      background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
        center;
      background-size: 100%;
      border: 1px solid transparent;
    }
    .pieTitle {
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      z-index: 10;
      margin-top: 1vw;
      font-size: 1vw;
    }
  }
  ul.pieLsit {
    float: left;
    margin: 2.6vw 0 0 2vw;
    border: 1px solid transparent;
    padding: 1vw 0 0 0;
    width: 20vw;
    li {
      // font-size: 16px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 3vw;
      padding: 0 1vw;
      background: rgba(203, 242, 250, 0.2);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(203, 242, 250, 0.2);
      margin-top: 1vw;
      font-size: 0.7vw;
      > div {
        height: 100%;
        line-height: 3vw;
      }
      .blockOne,
      .blockTwo,
      .blockThree,
      .blockFour {
        display: inline-block;
        width: 0.8vw;
        height: 0.8vw;
        margin-right: 1vw;
      }
      .blockOne {
        background-color: #58a8ff;
      }
      .blockTwo {
        background-color: #30dcff;
      }
      .blockThree {
        background-color: #ffffff;
      }
      .blockFour {
        background-color: #dd7d4d;
      }
      .proportion {
        display: inline-block;
        width: 4.5vw;
        text-align: right;
      }
    }
  }
}
/* 在崇学校就业人数列表样式 */
.schoolEmploymentBox {
  width: 40vw;
  margin: 1.6vw auto 0;
}
.employmentTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.6vw;
  color: #cbf2fa;
  font-size: 0.8vw;
}
.employmentTable thead th {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
  border: 1px solid rgba(48, 220, 255, 0.25);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody td {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
  border: 1px solid rgba(48, 220, 255, 0.2);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody tr:nth-child(odd) td {
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
}
.bottomSwitch {
      position: fixed;
      left: 50%;
      bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
      transform: translateX(-50%);
      display: flex;
      gap: 0.8vw;
      z-index: 100; // 保持在内容之上但不遮挡弹窗
      pointer-events: auto;
      button {
        min-width: 7vw;
        height: 2vw;
        line-height: 2vw;
        font-size: 0.8vw;
        color: #c4f3fe;
        background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
        background-size: auto 100%;
        border: none;
        cursor: pointer;
        padding: 0 1.2vw;
        border-radius: 0.26vw;
      }
      button.active {
        color: #fff;
        background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
        background-size: auto 100%;
      }
    }
/* 合作社TOP5 样式 */
.cooperateOrgList {
  width: 42vw;
  margin: 1.2vw auto 1.6vw;
  display: block;
  padding: 1vw 2vw;
  background: rgba(12, 52, 76, 0.35);
  border: 1px solid rgba(48, 220, 255, 0.15);
  border-radius: 0.4vw;
}
.cooperateOrgList li {
  display: flex;
  align-items: center;
}
.cooperateOrgList .coopIcon {
  width: 3.6vw;
  height: 3.6vw;
  margin-right: 1.2vw;
  filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
}
.cooperateOrgList .coopName {
  font-size: 1.1vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
  word-break: break-word;
}
.cooperateOrgList .coopName {
  font-size: 1.2vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8),
               0 0 0.8vw rgba(48, 220, 255, 0.4);
}
.employmentTable thead th {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
  border: 1px solid rgba(48, 220, 255, 0.25);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody td {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
  border: 1px solid rgba(48, 220, 255, 0.2);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody tr:nth-child(odd) td {
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
}
.bottomSwitch {
      position: fixed;
      left: 50%;
      bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
      transform: translateX(-50%);
      display: flex;
      gap: 0.8vw;
      z-index: 100; // 保持在内容之上但不遮挡弹窗
      pointer-events: auto;
      button {
        min-width: 7vw;
        height: 2vw;
        line-height: 2vw;
        font-size: 0.8vw;
        color: #c4f3fe;
        background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
        background-size: auto 100%;
        border: none;
        cursor: pointer;
        padding: 0 1.2vw;
        border-radius: 0.26vw;
      }
      button.active {
        color: #fff;
        background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
        background-size: auto 100%;
      }
    }
/* 合作学校TOP5 样式 */
.cooperateSchoolList {
  width: 42vw;
  margin: 1.2vw auto 1.6vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 1.6vw;
  grid-column-gap: 2vw;
  padding: 1vw 2vw;
  background: rgba(12, 52, 76, 0.35);
  border: 1px solid rgba(48, 220, 255, 0.15);
  border-radius: 0.4vw;
}
.cooperateSchoolList li {
  display: flex;
  align-items: center;
}
.cooperateSchoolList .schoolIcon {
  width: 3.6vw;
  height: 3.6vw;
  margin-right: 1.2vw;
  filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
}
.cooperateSchoolList .schoolName {
  font-size: 1.2vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
}

.bottomSwitch {
  position: fixed;
  left: 50%;
  bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
  transform: translateX(-50%);
  display: flex;
  gap: 0.8vw;
  z-index: 100; // 保持在内容之上但不遮挡弹窗
  pointer-events: auto;
  button {
    min-width: 7vw;
    height: 2vw;
    line-height: 2vw;
    font-size: 0.8vw;
    color: #c4f3fe;
    background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
    background-size: auto 100%;
    border: none;
    cursor: pointer;
    padding: 0 1.2vw;
    border-radius: 0.26vw;
  }
  button.active {
    color: #fff;
    background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
    background-size: auto 100%;
  }
}
.bottomSwitch {
  position: fixed;
  left: 50%;
  bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
  transform: translateX(-50%);
  display: flex;
  gap: 0.8vw;
  z-index: 999; // 保持在内容之上但不遮挡弹窗
  pointer-events: auto;
  button {
    min-width: 7vw;
    height: 2vw;
    line-height: 2vw;
    font-size: 0.8vw;
    color: #c4f3fe;
    background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
    background-size: auto 100%;
    border: none;
    cursor: pointer;
    padding: 0 1.2vw;
    border-radius: 0.26vw;
  }
  button.active {
    color: #fff;
    background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
    background-size: auto 100%;
  }

.pieBigBox {
  width: 40vw;
  margin: 1vw auto 0;
  // height: 274px;
  .pieMain {
    position: relative;
    border: 1px solid transparent;
    float: left;
    .pieBox {
      margin: 0 auto;
      margin-top: 3vw;
      width: 15vw;
      height: 15vw;
      background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
        center;
      background-size: 100%;
      border: 1px solid transparent;
    }
    .pieTitle {
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      z-index: 10;
      margin-top: 1vw;
      font-size: 1vw;
    }
  }
  ul.pieLsit {
    float: left;
    margin: 2.6vw 0 0 2vw;
    border: 1px solid transparent;
    padding: 1vw 0 0 0;
    width: 20vw;
    li {
      // font-size: 16px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 3vw;
      padding: 0 1vw;
      background: rgba(203, 242, 250, 0.2);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(203, 242, 250, 0.2);
      margin-top: 1vw;
      font-size: 0.7vw;
      > div {
        height: 100%;
        line-height: 3vw;
      }
      .blockOne,
      .blockTwo,
      .blockThree,
      .blockFour {
        display: inline-block;
        width: 0.8vw;
        height: 0.8vw;
        margin-right: 1vw;
      }
      .blockOne {
        background-color: #58a8ff;
      }
      .blockTwo {
        background-color: #30dcff;
      }
      .blockThree {
        background-color: #ffffff;
      }
      .blockFour {
        background-color: #dd7d4d;
      }
      .proportion {
        display: inline-block;
        width: 4.5vw;
        text-align: right;
      }
    }
  }
}
/* 在崇学校就业人数列表样式 */
.schoolEmploymentBox {
  width: 40vw;
  margin: 1.6vw auto 0;
}
.employmentTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.6vw;
  color: #cbf2fa;
  font-size: 0.8vw;
}
.employmentTable thead th {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
  border: 1px solid rgba(48, 220, 255, 0.25);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody td {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
  border: 1px solid rgba(48, 220, 255, 0.2);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody tr:nth-child(odd) td {
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
}
.bottomSwitch {
      position: fixed;
      left: 50%;
      bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
      transform: translateX(-50%);
      display: flex;
      gap: 0.8vw;
      z-index: 100; // 保持在内容之上但不遮挡弹窗
      pointer-events: auto;
      button {
        min-width: 7vw;
        height: 2vw;
        line-height: 2vw;
        font-size: 0.8vw;
        color: #c4f3fe;
        background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
        background-size: auto 100%;
        border: none;
        cursor: pointer;
        padding: 0 1.2vw;
        border-radius: 0.26vw;
      }
      button.active {
        color: #fff;
        background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
        background-size: auto 100%;
      }
    }
/* 合作社TOP5 样式 */
.cooperateOrgList {
  width: 42vw;
  margin: 1.2vw auto 1.6vw;
  display: block;
  padding: 1vw 2vw;
  background: rgba(12, 52, 76, 0.35);
  border: 1px solid rgba(48, 220, 255, 0.15);
  border-radius: 0.4vw;
}
.cooperateOrgList li {
  display: flex;
  align-items: center;
}
.cooperateOrgList .coopIcon {
  width: 3.6vw;
  height: 3.6vw;
  margin-right: 1.2vw;
  filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
}
.cooperateOrgList .coopName {
  font-size: 1.1vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
}
.cooperateOrgList .coopName {
  font-size: 1.2vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8),
               0 0 0.8vw rgba(48, 220, 255, 0.4);
}
.employmentTable thead th {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.35) 0%, rgba(48, 220, 255, 0.15) 100%);
  border: 1px solid rgba(48, 220, 255, 0.25);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody td {
  height: 2vw;
  line-height: 2vw;
  background: linear-gradient(180deg, rgba(88, 168, 255, 0.18) 0%, rgba(48, 220, 255, 0.08) 100%);
  border: 1px solid rgba(48, 220, 255, 0.2);
  border-radius: 0.26vw;
  text-align: center;
}
.employmentTable tbody tr:nth-child(odd) td {
  background: linear-gradient(180deg, rgba(48, 220, 255, 0.16) 0%, rgba(48, 220, 255, 0.06) 100%);
}
.bottomSwitch {
      position: fixed;
      left: 50%;
      bottom: 2.2vw; // 更贴近底部，避免与弹窗标题冲突
      transform: translateX(-50%);
      display: flex;
      gap: 0.8vw;
      z-index: 100; // 保持在内容之上但不遮挡弹窗
      pointer-events: auto;
      button {
        min-width: 7vw;
        height: 2vw;
        line-height: 2vw;
        font-size: 0.8vw;
        color: #c4f3fe;
        background: url("~@/assets/images/recruitment/tabs-active-bg1.png") no-repeat center;
        background-size: auto 100%;
        border: none;
        cursor: pointer;
        padding: 0 1.2vw;
        border-radius: 0.26vw;
      }
      button.active {
        color: #fff;
        background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
        background-size: auto 100%;
      }
    }
/* 合作学校TOP5 样式 */
.cooperateSchoolList {
  width: 42vw;
  margin: 1.2vw auto 1.6vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 1.6vw;
  grid-column-gap: 2vw;
  padding: 1vw 2vw;
  background: rgba(12, 52, 76, 0.35);
  border: 1px solid rgba(48, 220, 255, 0.15);
  border-radius: 0.4vw;
}
.cooperateSchoolList li {
  display: flex;
  align-items: center;
}
.cooperateSchoolList .schoolIcon {
  width: 3.6vw;
  height: 3.6vw;
  margin-right: 1.2vw;
  filter: drop-shadow(0 0 0.6vw rgba(48, 220, 255, 0.5));
}
.cooperateSchoolList .schoolName {
  font-size: 1.2vw;
  font-weight: 600;
  letter-spacing: 0.02vw;
  color: #cbf2fa;
  background-image: linear-gradient(to top, #8cc8ff 0%, #ffffff 55%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 0.3vw rgba(48, 220, 255, 0.8), 0 0 0.8vw rgba(48, 220, 255, 0.4);
}
.bottomSwitch {
   position: fixed;
   left: 50%;
   bottom: 2.2vw;
   transform: translateX(-50%);
   display: flex;
   gap: 1.2vw;
   z-index: 10001;
 }
.bottomSwitch button {
  min-width: 11vw;
  height: 2.8vw;
  line-height: 2.8vw;
  padding: 0 2.2vw;
  font-size: 1.1vw;
  letter-spacing: 0.14vw;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.bottomSwitch button[data-type="overview"] {
  background: linear-gradient(180deg, rgba(255,208,96,0.85) 0%, rgba(204,160,61,0.78) 100%);
  text-shadow: 0 0 0.5vw rgba(241,207,104,0.6), 0 0 0.2vw rgba(241,207,104,0.8);
  box-shadow: 0 0 0.6vw rgba(241,207,104,0.35) inset, 0 0 0.6vw rgba(241,207,104,0.3);
}
.bottomSwitch button[data-type="work"] {
  background: linear-gradient(180deg, rgba(64,196,255,0.85) 0%, rgba(24,142,196,0.78) 100%);
  text-shadow: 0 0 0.5vw rgba(48,220,255,0.7), 0 0 0.2vw rgba(48,220,255,0.9);
  box-shadow: 0 0 0.6vw rgba(48,220,255,0.35) inset, 0 0 0.6vw rgba(48,220,255,0.3);
}
.bottomSwitch button::before {
  content: "";
  position: absolute;
  inset: -0.5vw;
  clip-path: inherit;
  border: 0.12vw dashed rgba(203,242,250,0.35);
  pointer-events: none;
  filter: drop-shadow(0 0 0.4vw rgba(48,220,255,0.45));
}
.bottomSwitch button::after {
  content: "";
  position: absolute;
  left: 1.2vw;
  top: 0.4vw;
  width: 1.8vw;
  height: 0.6vw;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left top / 0.6vw 0.12vw no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left center / 1vw 0.12vw no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.85), rgba(117,232,255,0.7)) left bottom / 1.4vw 0.12vw no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.bottomSwitch button.active::before {
  border-color: rgba(48, 220, 255, 0.55);
}

}
</style>