推送

src/styles/index.scss

@@ -8,6 +8,7 @@
 html,
 body {
   height: 100%;
+  overflow: hidden;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -17,6 +18,7 @@ body {
 
 #app {
   height: 100%;
+  overflow: hidden;
 }
 
 *,

src/views/portraitScreen/index.vue

@@ -76,7 +76,7 @@
       </div>
       <div class="bigBox" style="margin-top: 75px; height: 1650px">
         <div class="pubTitle" style="height: 180px; line-height: 200px">
-          企业招聘情况
+          企业招聘岗位
         </div>
         <div class="mainBox">
           <Qyzpq></Qyzpq>
@@ -84,7 +84,7 @@
       </div>
       <div class="bigBox" style="margin-top: 75px; height: 1650px">
         <div class="pubTitle" style="height: 180px; line-height: 200px">
-          兴蜀来了培训产品 online
+          培训产品 online
         </div>
         <ul
           class="chartsBox"

src/views/recruitment/layout/centerModel.vue

@@ -6,7 +6,7 @@
           class="modelContent"
           v-for="(item, index) in modelContentList"
           :key="index"
-          :class="isactive == index ? 'active' : ''"
+          :class="selectedIndex == index ? 'active' : ''"
           @click="onacitve(index, item.label)"
         >
           <div class="num">{{ item.num }}</div>
@@ -16,10 +16,10 @@
     </div>
     <div
       class="content"
-      v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3"
+      v-show="isactive != 0 && isactive != 1 && isactive != 2 && isactive != 3 && isactive != 4 && isactive != 5 && isactive != 6"
     >
-      <div class="num">81.1万</div>
+      <div class="num">{{ centerInfoMap[activeView].num }}</div>
-      <div class="label">人口总数</div>
+      <div class="label">{{ centerInfoMap[activeView].label }}</div>
     </div>
     <!-- <transition name="fade"> -->
     <div class="hjrkDialogBox" v-show="isactive == 0">
@@ -138,11 +138,63 @@
       <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 } from "vue";
+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";
@@ -151,55 +203,72 @@ 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";
-const isactive = ref(-1);
+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) => {
-  console.log(index, "index");
+  // 仅在“崇州概况”模式下开启弹窗，其它模式只高亮不弹窗
-  //将点击的元素的索引赋值给isactive变量 , 每次点击都更改变量的值
+  // 记录高亮卡片
-  isactive.value = index;
+  selectedIndex.value = index;
-  dialogTitle.value = label;
+  if (activeView.value === "overview") {
-  console.log(isactive.value, "isactive");
+    // 根据标签映射到既有弹窗：户籍人口(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 modelContentList = ref([
+const activeView = ref("overview");
-  {
+const centerInfoMap = {
-    num: "65.33万",
+  overview: { num: "81.1万", label: "人口总数" },
-    label: "户籍人口"
+  work: { num: "19.7万", label: "服务人数" }
-  },
+};
-  {
+const modelSets = {
-    num: "2.2万",
+   overview: [
-    label: "高中端人才"
+     { num: "65.33万", label: "户籍人口" },
-  },
+     { num: "2.2万", label: "高中端人才" },
-  {
+     { num: "0.71万", label: "新增就业群体" },
-    num: "655",
+     { num: "0.76万", label: "失业人员就业帮扶" },
-    label: "高校毕业未就业"
+     { num: "0.49万", label: "在崇学校就业人数" }
-  },
+   ],
-  {
+   work: [
-    num: "0.54万",
+     { num: "628个", label: "服务企业" },
-    label: "新增就业群体"
+     { num: "36所", label: "合作学校" },
-  },
+     { num: "19个", label: "合作社" },
-  {
+     { num: "17期", label: "培训课程" },
-    num: "0.76万",
+     { num: "870人", label: "领证人数" }
-    label: "失业人员就业帮扶"
+   ]
-  },
+ };
-  {
+const modelContentList = ref(modelSets[activeView.value]);
-    num: "4608",
+const switchView = (view) => {
-    label: "领金人员"
+   activeView.value = view;
-  }
+   isactive.value = -1; // 退出任何弹窗
-  // {
+   selectedIndex.value = -1; // 取消高亮
-  //   num: "8.91万",
+   modelContentList.value = modelSets[view];
-  //   label: "流动人口"
+ };
-  // },
-  // {
-  //   num: "约27万",
-  //   label: "就业人群"
-  // },
-  // {
-  //   num: "13000",
-  //   label: "待就业人群"
-  // },
-]);
 const statisticData = ref([
   {
     imgURL: tongjiPxjg,
@@ -249,6 +318,27 @@ 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 = {
@@ -393,7 +483,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .contentWrapper {
   position: absolute;
-  top: 9.53125vw;
+  top: 8.2vw;
   left: 23.58vw;
   width: 52.46vw;
 
@@ -479,7 +569,7 @@ onMounted(() => {
     }
   }
   .hjrkDialogBox {
-    top: 17vw;
+    top: 15.2vw;
     left: 50%;
     position: absolute;
     width: 52.604vw;
@@ -524,8 +614,7 @@ onMounted(() => {
         cursor: pointer;
       }
       li.active {
-        background: url("~@/assets/images/recruitment/tabs-active-bg.png")
+        background: url("~@/assets/images/recruitment/tabs-active-bg.png") no-repeat center;
-          no-repeat;
         background-size: 100% 100%;
       }
     }
@@ -666,5 +755,563 @@ ul.statisticOne {
       }
     }
   }
+}
+/* 在崇学校就业人数列表样式 */
+.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>