提交

package-lock.json

@@ -2076,31 +2076,6 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -15010,7 +14985,6 @@
         }
       }
     },
-<<<<<<< HEAD
     "vue-loader-v16": {
       "version": "npm:vue-loader@16.8.3",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
@@ -15036,8 +15010,6 @@
         }
       }
     },
-=======
->>>>>>> ac9e27d045b841a3a3a2a3dca10cce199d7f3c77
     "vue-router": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",

src/App.vue

@@ -105,4 +105,3 @@ v-deep .el-loading-mask {
 }
 
 </style>
- 

src/assets/recruitment/bjtl.svg

@@ -0,0 +1,33 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9_2545)">
+<rect width="1920" height="1080" fill="url(#paint0_linear_9_2545)" fill-opacity="0.75"/>
+<rect width="1920" height="1080" fill="url(#paint1_linear_9_2545)" fill-opacity="0.75"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_9_2545" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078A4"/>
+<stop offset="0.120509" stop-color="#0078A4" stop-opacity="0.545518"/>
+<stop offset="0.179314" stop-color="#0078A4" stop-opacity="0.268142"/>
+<stop offset="0.286458" stop-color="#0078A4" stop-opacity="0.0154769"/>
+<stop offset="0.671875" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.790323" stop-color="#0078A4" stop-opacity="0.221651"/>
+<stop offset="0.863472" stop-color="#0078A4" stop-opacity="0.503942"/>
+<stop offset="1" stop-color="#0078A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9_2545" x1="1920" y1="592.5" x2="3.32107e-06" y2="592.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078A4"/>
+<stop offset="0.0924192" stop-color="#0078A4" stop-opacity="0.441093"/>
+<stop offset="0.147393" stop-color="#0078A4" stop-opacity="0.212322"/>
+<stop offset="0.194418" stop-color="#0078A4" stop-opacity="0.0732132"/>
+<stop offset="0.249495" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.756487" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.815023" stop-color="#0078A4" stop-opacity="0.0812947"/>
+<stop offset="0.870659" stop-color="#0078A4" stop-opacity="0.224653"/>
+<stop offset="0.92232" stop-color="#0078A4" stop-opacity="0.463412"/>
+<stop offset="1" stop-color="#0078A4"/>
+</linearGradient>
+<clipPath id="clip0_9_2545">
+<rect width="1920" height="1080" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/recruitment/mbc.svg

@@ -0,0 +1,33 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9_2545)">
+<rect width="1920" height="1080" fill="url(#paint0_linear_9_2545)" fill-opacity="0.5"/>
+<rect width="1920" height="1080" fill="url(#paint1_linear_9_2545)" fill-opacity="0.5"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_9_2545" x1="960" y1="0" x2="960" y2="1080" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078A4"/>
+<stop offset="0.120509" stop-color="#0078A4" stop-opacity="0.545518"/>
+<stop offset="0.179314" stop-color="#0078A4" stop-opacity="0.268142"/>
+<stop offset="0.286458" stop-color="#0078A4" stop-opacity="0.0154769"/>
+<stop offset="0.671875" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.790323" stop-color="#0078A4" stop-opacity="0.221651"/>
+<stop offset="0.863472" stop-color="#0078A4" stop-opacity="0.503942"/>
+<stop offset="1" stop-color="#0078A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_9_2545" x1="1920" y1="592.5" x2="3.32107e-06" y2="592.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078A4"/>
+<stop offset="0.0924192" stop-color="#0078A4" stop-opacity="0.441093"/>
+<stop offset="0.147393" stop-color="#0078A4" stop-opacity="0.212322"/>
+<stop offset="0.194418" stop-color="#0078A4" stop-opacity="0.0732132"/>
+<stop offset="0.249495" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.756487" stop-color="#0078A4" stop-opacity="0"/>
+<stop offset="0.815023" stop-color="#0078A4" stop-opacity="0.0812947"/>
+<stop offset="0.870659" stop-color="#0078A4" stop-opacity="0.224653"/>
+<stop offset="0.92232" stop-color="#0078A4" stop-opacity="0.463412"/>
+<stop offset="1" stop-color="#0078A4"/>
+</linearGradient>
+<clipPath id="clip0_9_2545">
+<rect width="1920" height="1080" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/router/index.js

@@ -76,7 +76,7 @@ export const publicRoutes = [
     name: "/platformBusinessData",
     component: () => import("@/views/platformBusinessData/index"),
     meta: {}
-  }
+  },
 ];
 
 const router = createRouter({

src/views/cpp/components/czjjnrcdd.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="top">
           <div class="label">{{ it.label2 }}</div>
-          <div class="cz">需求岗位数：<span class="num mr10">{{ it.gws }}</span>个</div>
+          <div class="cz">需求岗位：<span class="num mr10">{{ it.gws }}</span>个</div>
           <div class="cz">需求人数：<span class="num">{{ it.xqrs }}</span>人</div>
         </div>
       </div>
@@ -24,34 +24,34 @@
 import { reactive, ref } from "vue";
 const list = reactive([
   {
-    label: "第一产业产值及趋势",
-    label2: '第一产业技能人才需求',
+    label: "崇州一产产值及趋势",
+    label2: '服务企业技能人才需求',
     cz: 36.75,
     czdw: '亿',
     hb: "-1.6%",
     tb: "+2%",
-    gws: 3000,
-    xqrs: 2565,
+    gws: 60,
+    xqrs: 680,
     img: require("@/assets/images/icon_32.png")
   },
   {
-    label: "第二产业产值及趋势",
-    label2: '第二产业技能人才需求',
+    label: "崇州二产产值及趋势",
+    label2: '服务企业技能人才需求',
     cz: 240.9,
     hb: "-1.6%",
     tb: "-1%",
-    gws: 3000,
-    xqrs: 2565,
+    gws: 559,
+    xqrs: 70742,
     img: require("@/assets/images/icon_34.png")
   },
   {
-    label: "第三产业产值及趋势",
-    label2: '第三产业技能人才需求',
+    label: "崇州三产产值及趋势",
+    label2: '服务企业技能人才需求',
     cz: 232.79,
     hb: "-1.6%",
     tb: "+2%",
-    gws: 3000,
-    xqrs: 2565,
+    gws: 146,
+    xqrs: 6162,
     img: require("@/assets/images/icon_35.png")
   }
 ]);

src/views/cpp/components/zdpxqt.vue

@@ -2,13 +2,19 @@
   <div class="training-products-container">
     <div class="products-section">
       <div class="products-grid">
-        <div class="product-card" v-for="(item, index) in products" :key="index">
+        <div
+          class="product-card"
+          v-for="(item, index) in products"
+          :key="index"
+        >
           <div class="icon">
             <img :src="item.icon" :alt="item.name" />
           </div>
           <div class="info">
             <div class="label">{{ item.name }}</div>
-            <div class="value">{{ animatedValues.products[index] }}<span>人</span></div>
+            <div class="value">
+              {{ animatedValues.products[index] }}<span>人</span>
+            </div>
           </div>
         </div>
       </div>
@@ -17,28 +23,28 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from "vue";
 
 const products = ref([
   {
-    name: '退役军人',
-    count: 54,
-    icon: require('@/assets/images/42.png')
+    name: "退役军人",
+    count: 230,
+    icon: require("@/assets/images/42.png")
   },
   {
-    name: '困难毕业生',
+    name: "毕业生",
     count: 570,
-    icon: require('@/assets/images/43.png')
+    icon: require("@/assets/images/43.png")
   },
   {
-    name: '领金人员',
-    count: 11,
-    icon: require('@/assets/images/44.png')
+    name: "就业困难人员",
+    count: 27,
+    icon: require("@/assets/images/44.png")
   },
   {
-    name: '长期失业人员',
-    count: 7,
-    icon: require('@/assets/images/45.png')
+    name: "其他",
+    count: 58,
+    icon: require("@/assets/images/45.png")
   }
 ]);
 
@@ -53,7 +59,9 @@ const animateNumber = (startValue, endValue, duration, updateCallback) => {
   const animate = () => {
     const currentTime = Date.now();
     const progress = Math.min((currentTime - startTime) / duration, 1);
-    const currentValue = Math.floor(startValue + (endValue - startValue) * progress);
+    const currentValue = Math.floor(
+      startValue + (endValue - startValue) * progress
+    );
 
     updateCallback(currentValue);
 
@@ -67,7 +75,12 @@ const animateNumber = (startValue, endValue, duration, updateCallback) => {
 
 onMounted(() => {
   products.value.forEach((item, index) => {
-    animateNumber(0, item.count, 2000, (value) => animatedValues.value.products[index] = value);
+    animateNumber(
+      0,
+      item.count,
+      2000,
+      (value) => (animatedValues.value.products[index] = value)
+    );
   });
 });
 </script>
@@ -128,7 +141,7 @@ onMounted(() => {
             color: #8cc8ff;
             margin-bottom: 8px;
             font-family: "YSBTH";
-            @include textColor(#003D63, #ffffff);
+            @include textColor(#003d63, #ffffff);
           }
 
           .value {

src/views/cpp/index.vue

@@ -2,13 +2,12 @@
   <div class="bigScrenn cppBox">
     <!-- 第一部分 -->
     <div class="none-Cont">
-
       <Head title='"产教评"融合培训平台'></Head>
       <div class="conttent">
         <div class="bt-Title tc"><span>三产技能人才分析</span></div>
         <ul class="conttentOne flex just-between">
           <li class="childOne">
-            <div class="title-small">产值及技能人才比对</div>
+            <div class="title-small">崇州产值与服务企业技能人才需求</div>
             <div class="childCnt">
               <Czjjnrcdd></Czjjnrcdd>
             </div>
@@ -92,17 +91,17 @@
 </template>
 
 <script setup>
-import Czjjnrcdd from './components/czjjnrcdd.vue';
-import Czjjnrcdb from './components/czjjnrcdb.vue';
-import TrainingInstitutions from './components/trainingInstitutions.vue';
-import Pxxm from './components/pxxm.vue';
-import Qyzdpxb from './components/qyzdpxb.vue';
-import sjpx from './components/sjpx.vue';
-import Zyzgzs from './components/zyzgzs.vue';
-import zdpxqt from './components/zdpxqt.vue';
-import pxcg from './components/pxcg.vue';
-import bfzs from './components/bfzs.vue';
-import pfjgfb from './components/pfjgfb.vue';
+import Czjjnrcdd from "./components/czjjnrcdd.vue";
+import Czjjnrcdb from "./components/czjjnrcdb.vue";
+import TrainingInstitutions from "./components/trainingInstitutions.vue";
+import Pxxm from "./components/pxxm.vue";
+import Qyzdpxb from "./components/qyzdpxb.vue";
+import sjpx from "./components/sjpx.vue";
+import Zyzgzs from "./components/zyzgzs.vue";
+import zdpxqt from "./components/zdpxqt.vue";
+import pxcg from "./components/pxcg.vue";
+import bfzs from "./components/bfzs.vue";
+import pfjgfb from "./components/pfjgfb.vue";
 import Head from "@/views/largeScreen/layout/head.vue";
 import { qcckPost, qcckGet } from "@/api/qcckApi.js";
 import emitter from "@/utils/eventBus.js";
@@ -115,9 +114,7 @@ import {
   onBeforeUnmount
 } from "vue";
 const { proxy } = getCurrentInstance();
-const data = reactive({
-
-});
+const data = reactive({});
 </script>
 
 <style lang="scss" scoped>

src/views/mapCount/components/echartsMap copy.vue

@@ -48,9 +48,9 @@ import { onMounted, onUnmounted, reactive, ref } from 'vue';
 const list = ref([
   { label: '就业服务站', value: 40, dw: '个' },
   { label: '服务一体机', value: 40, dw: '个' },
-  { label: '劳务经纪人', value: 118, dw: '人' },
-  { label: '招聘岗位', value: 9637, dw: '个' },
-  { label: '成功入职', value: 1305, dw: '个' },
+  { label: '劳务经纪人', value: 178, dw: '人' },
+  // { label: '招聘岗位', value: 9637, dw: '个' },
+  // { label: '成功入职', value: 1305, dw: '个' },
 ])
 const dataForm = ref({})
 const baseList = ref([])

src/views/mapCount/components/echartsMap.vue

@@ -49,9 +49,9 @@ import { onMounted, onUnmounted, nextTick , ref } from 'vue';
 const list = ref([
   { label: '就业服务站', value: 40, dw: '个' },
   { label: '服务一体机', value: 40, dw: '个' },
-  { label: '劳务经纪人', value: 118, dw: '人' },
-  { label: '招聘岗位', value: 9637, dw: '个' },
-  { label: '成功入职', value: 1305, dw: '人' },
+  { label: '劳务经纪人', value: 178, dw: '人' },
+  // { label: '招聘岗位', value: 9637, dw: '个' },
+  // { label: '成功入职', value: 1305, dw: '人' },
 ])
 const dataForm = ref({})
 const baseList = ref([])

src/views/mapCount/components/echartsMap2.vue

@@ -51,9 +51,9 @@ import { onMounted, onUnmounted, nextTick, ref } from 'vue';
 const list = ref([
   { label: '就业服务站', value: 40, dw: '个' },
   { label: '服务一体机', value: 40, dw: '个' },
-  { label: '劳务经纪人', value: 118, dw: '人' },
-  { label: '招聘岗位', value: 9637, dw: '个' },
-  { label: '成功入职', value: 1305, dw: '人' },
+  { label: '劳务经纪人', value: 178, dw: '人' },
+  // { label: '招聘岗位', value: 9637, dw: '个' },
+  // { label: '成功入职', value: 1305, dw: '人' },
 ])
 const dataForm = ref({})
 const baseList = ref([])

src/views/portraitScreen/components/pxkcjh.vue

@@ -17,11 +17,6 @@
 import { ref, onMounted, onBeforeUnmount } from "vue";
 
 const tableData = ref([
-  {
-    name: "人社局劳务经纪人培训",
-    starTime: "2025/09/24",
-    endTime: "2025/09/26"
-  },
   {
     name: "退役军人适应性培训",
     starTime: "2025/10/16",
@@ -33,45 +28,50 @@ const tableData = ref([
     endTime: "2025/10/17"
   },
   {
-    name: "电工",
-    starTime: "2025/05/12",
-    endTime: "2025/06/06"
+    name: "人社局劳务经纪人培训",
+    starTime: "2025/9/24",
+    endTime: "2025/9/26"
   },
   {
-    name: "焊工",
-    starTime: "2025/05/19",
-    endTime: "2025/06/13"
+    name: "学生就业指导",
+    starTime: "2025/9/1",
+    endTime: "2025/9/1"
   },
   {
-    name: "钳工",
-    starTime: "2025/05/26",
-    endTime: "2025/06/20"
+    name: "高空作业",
+    starTime: "2025/8/18",
+    endTime: "2025/9/12"
   },
   {
-    name: "人工智能训练师",
-    starTime: "2025/06/02",
-    endTime: "2025/06/27"
+    name: "机械木工-拼缝接合",
+    starTime: "2025/8/4",
+    endTime: "2025/10/17"
   },
   {
     name: "无人机飞手",
-    starTime: "2025/06/16",
-    endTime: "2025/07/11"
+    starTime: "2025/6/16",
+    endTime: "2025/7/11"
+  },
+  {
+    name: "人工智能训练师",
+    starTime: "2025/6/2",
+    endTime: "2025/6/27"
+  },
+  {
+    name: "钳工",
+    starTime: "2025/5/26",
+    endTime: "2025/6/20"
+  },
+  {
+    name: "焊工",
+    starTime: "2025/5/19",
+    endTime: "2025/6/13"
+  },
+  {
+    name: "电工",
+    starTime: "2025/5/12",
+    endTime: "2025/6/6"
   }
-  // {
-  //   name: "手工木工",
-  //   starTime: "2025/7/14",
-  //   endTime: "2025/8/8"
-  // },
-  // {
-  //   name: "高空作业",
-  //   starTime: "2025/8/18",
-  //   endTime: "2025/9/12"
-  // }
-  // {
-  //   name: "学生就业指导",
-  //   starTime: "2025/9/1",
-  //   endTime: "2025/9/1"
-  // }
 ]);
 </script>
 

src/views/portraitScreen/components/qyzpq.vue

@@ -24,45 +24,55 @@
 
 import { onMounted, ref, Ref } from "vue";
 const tableRef = ref(null); //表格实例
-// const tableData = ref<any[]>([]) //定义表格list
-//表格测试数据
-const getTableData = () => {
-  let data = [];
-  for (var i = 0; i <= 50; i++) {
-    data.push({
-      date: i,
-      name: `Tom${i}`,
-      address: `地区${i}`
-    });
-  }
-  return data;
-};
+let scrollInterval = null;
+let isScroll = true;
+let scrollSpeed = 2;
+let scrollDelay = 20; // 控制滚动速度
 
 onMounted(() => {
-  // tableData.value = getTableData() //表格数据赋值
-  scroll(tableRef.value.$refs.bodyWrapper); //设置滚动
+  setTimeout(() => {
+    setupScroll();
+  }, 100);
 });
 
-const scroll = (tableBody) => {
-  let isScroll = true; //滚动
-  const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0];
+const setupScroll = () => {
+  if (!tableRef.value) return;
 
-  //鼠标放上去，停止滚动；移开，继续滚动
-  tableDom.addEventListener("mouseover", () => {
+  const tableBodyWrapper = tableRef.value.$refs.bodyWrapper;
+  const scrollContainer = tableBodyWrapper.querySelector(".el-scrollbar__wrap");
+
+  if (!scrollContainer) return;
+
+  // 鼠标悬停控制
+  scrollContainer.addEventListener("mouseover", () => {
     isScroll = false;
   });
-  tableDom.addEventListener("mouseout", () => {
+
+  scrollContainer.addEventListener("mouseout", () => {
     isScroll = true;
   });
 
-  setInterval(() => {
-    if (isScroll) {
-      tableDom.scrollTop += 3; //设置滚动速度
-      if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
-        tableDom.scrollTop = 0;
+  // 清除之前的定时器（如果有的话）
+  if (scrollInterval) {
+    clearInterval(scrollInterval);
+  }
+
+  // 设置新的滚动定时器
+  scrollInterval = setInterval(() => {
+    if (isScroll && scrollContainer) {
+      // 正常滚动
+      scrollContainer.scrollTop += scrollSpeed;
+
+      // 检查是否已经滚动到底部附近
+      if (
+        scrollContainer.scrollTop + scrollContainer.clientHeight >=
+        scrollContainer.scrollHeight - 5
+      ) {
+        // 重置到顶部，实现循环滚动
+        scrollContainer.scrollTop = 0;
       }
     }
-  }, 100);
+  }, scrollDelay);
 };
 
 const tableData = ref([

src/views/portraitScreen/components/top10.vue

@@ -26,11 +26,11 @@ const rankData = ref([
   { name: "电工培训", count: "120" },
   { name: "焊工培训", count: "100" },
   { name: "食品安全管理师培训", count: "95" },
-  { name: "手工木工", count: "78" },
+  { name: "无人机驾驶员培训", count: "78" },
   { name: "公共营养师培训", count: "72" },
   { name: "医疗护理员培训", count: "63" },
   { name: "人工智能训练师培训", count: "48" },
-  { name: "无人机驾驶员培训", count: "40" },
+  { name: "机械木工", count: "40" },
   { name: "高处安装维护拆除作业培训", count: "32" },
   { name: "登高架设培训", count: "29" }
 ]);
@@ -54,16 +54,18 @@ onMounted(() => {
 ul.rankList {
   width: 100%;
   margin: 0 auto;
+
   li {
     margin: 0 100px;
     height: 85px;
-    background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
-      0;
+    background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0 0;
     background-size: 100% 100%;
     margin: 40px 0 0 0;
     position: relative;
+
     .left {
       float: left;
+
       .sequence {
         position: absolute;
         text-align: right;
@@ -75,16 +77,20 @@ ul.rankList {
         color: #0a9eb5;
         font-weight: bold;
         font-size: 40px;
+
         &.red {
           color: #ff0000;
         }
+
         &.orange {
           color: #ffa500;
         }
+
         &.yellow {
           color: #ffd700;
         }
       }
+
       .name {
         font-size: 50px;
         margin: 0 0 0 200px;
@@ -92,6 +98,7 @@ ul.rankList {
         height: 60px;
       }
     }
+
     .right {
       float: right;
       height: 60px;
@@ -103,19 +110,19 @@ ul.rankList {
       -webkit-text-fill-color: transparent;
       font-weight: 400;
     }
+
     .jdtBox {
       position: absolute;
       top: 0px;
       left: 194px;
       right: 0px;
       height: 4px;
+
       .jdt {
         height: 4px;
-        background: linear-gradient(
-          90deg,
+        background: linear-gradient(90deg,
             rgba(53, 168, 235, 0) 0%,
-          #00ddff 100%
-        );
+            #00ddff 100%);
         border-radius: 4px 4px 4px 4px;
       }
     }

src/views/portraitScreen/components/xxrcgw.vue

@@ -7,7 +7,7 @@
         <div class="label">
           <span class="order mr4" :style="{ color: indx < 3 ? '#01d0db' : '' }">TOP.{{ indx + 1 }}</span>
           <img src="@/assets/images/icon_03.png" alt="">
-          <span class="ml4 text one_text_detail" :style="{ color: indx < 3 ? '#01d0db' : '' }">{{ it.mc }}</span>
+          <span class="ml4 text one_text_detail" :style="{ color: '#48FAFC' }">{{ it.mc }}</span>
         </div>
         <div class="flex align-center just-around">
           <div class="line">
@@ -15,7 +15,7 @@
               <div class="persont" :style="{ width: it.persont }"></div>
             </div>
           </div>
-          <div class="num">{{ it.num }}</div>
+          <!-- <div class="num">{{ it.num }}</div> -->
         </div>
       </li>
     </ul>
@@ -35,7 +35,7 @@ const list = ref([
   { mc: '智能生产线调试工程师', persont: '80%', num: 355 },
   { mc: '精密仪器装配工程师', persont: '70%', num: 322 },
   { mc: '人工智能算法工程师', persont: '60%', num: 189 },
-  { mc: '数字孪生工程师。', persont: '50%', num: 67 },
+  { mc: '数字孪生工程师', persont: '50%', num: 67 },
 ])
 const timer = ref(null)
 onMounted(() => {
@@ -78,6 +78,11 @@ onUnmounted(() => {
         display: inline-block;
         white-space: nowrap;
       }
+
+      img {
+        width: 1.8vw; // 原字号 1.8vw 的两倍
+        height: 1.8vw;
+      }
     }
 
     .line {

src/views/portraitScreen/index.vue

@@ -65,7 +65,7 @@
             <div class="chartsMian"><Jgrzcgl></Jgrzcgl></div>
           </li>
           <li>
-            <div class="info">新兴人才岗位需求</div>
+            <div class="info">新兴人才岗位</div>
             <div class="chartsMian"><Xxrcgw /></div>
           </li>
           <li>

src/views/recruitment/card/EnterpriseEmploymentTwo.vue

@@ -3,33 +3,54 @@
 </template>
 
 <script setup>
-// Vue 3 Composition API 的 setup 语法糖
-// 在这里直接编写响应式数据和方法，无需返回
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
+
 const enterpriseTwoRef = ref(null);
-const option = {
-  // 添加标题
+let chart = null;
+
+// 响应式设计稿配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算实际的像素值（基于设计稿比例）
+function calcResponsivePX(pxValue) {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+}
+
+// 计算 vw 单位值（真正的 vw）
+function calcVW(pxValue) {
+  return (pxValue / designConfig.designWidth) * 100;
+}
+
+// 计算 vh 单位值
+function calcVH(pxValue) {
+  return (pxValue / designConfig.designHeight) * 100;
+}
+
+// 图表配置
+const getChartOption = () => ({
   title: {
     text: '重点保供企业分布',
     left: 'center',
     top: '5%',
     textStyle: {
       color: '#30DCFF',
-      fontSize: 16,
+      fontSize: calcResponsivePX(16),
       fontWeight: 'normal'
     }
   },
-  // 设置图形位置
   grid: {
-    top: '20%',
-    left: '15%',
-    right: '5%',
-    bottom: '25%'
+    top: `${calcVH(210)}%`, // 使用 vh 确保垂直方向也响应式
+    left: `${calcVW(130)}%`,
+    right: `${calcVW(120)}%`,
+    bottom: `${calcVH(170)}%`
   },
   xAxis: {
     show: true,
-
     axisTick: {
       show: true,
       lineStyle: {
@@ -37,17 +58,19 @@ const option = {
       }
     },
     axisLabel: {
-      fontSize: 14,
+      fontSize: calcResponsivePX(12),
       color: '#CBF2FA',
       rotate: 0,
-      margin: 15
+      show: true,
+      interval: 0,
+      hideOverlap: false,
+      margin: calcResponsivePX(14)
     },
     type: "category",
     data: ["第一产业", "第二产业", "第三产业"]
   },
   yAxis: {
-    interval: 50, // 设置刻度间隔
-    //显示网格线
+    interval: 50,
     splitLine: {
       show: true,
       lineStyle: {
@@ -72,34 +95,54 @@ const option = {
       name: "企业数",
       type: "bar",
       showBackground: false,
-      barWidth: 25,
+      barWidth: calcResponsivePX(25), // 柱状图宽度也要响应式
       data: [6, 581, 41],
-      // 设置柱状图的数值
       label: {
         show: true,
         position: "top",
         color: '#30DCFF',
-        fontSize: 14,
+        fontSize: calcResponsivePX(14),
         formatter: function(params) {
           return params.value + '家';
         }
       },
       itemStyle: {
-        //纯色
         color: '#30DCFF'
       }
     }
   ]
+});
+
+// 处理图表重绘
+const handleChartResize = () => {
+  if (chart) {
+    chart.resize();
+    // 重新设置选项以更新所有响应式尺寸
+    chart.setOption(getChartOption(), true); // true 表示不合并，完全替换
+  }
+};
+
+// 初始化图表
+const initChart = () => {
+  if (!enterpriseTwoRef.value) return;
+
+  chart = echarts.init(enterpriseTwoRef.value);
+  chart.setOption(getChartOption());
 };
 
 // 生命周期钩子
 onMounted(() => {
-  if (enterpriseTwoRef.value) {
-    const chart = echarts.init(enterpriseTwoRef.value);
-    // 设置option
-    chart.setOption(option);
+  nextTick(() => {
+    initChart();
+  });
+  window.addEventListener('resize', handleChartResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleChartResize);
+  if (chart) {
+    chart.dispose();
+    chart = null;
   }
 });
 </script>
-
-<style lang="scss" scoped></style>

src/views/recruitment/card/LaborSystemTwo.vue

@@ -1,48 +1,88 @@
 <template>
   <div>
-    <div class="carcTitle">合作社位置撒点</div>
-    <div ref="map" style="width: 17vw; height: 14.5vw"></div>
+    <div class="carcTitle">省内区域劳务协作撒点</div>
+    <div ref="map" style="width: 19vw; height: 16vw"></div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from "vue";
-// 引入Echarts
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import 'echarts-gl';
-// 引入崇州市地图json数据
+import { debounce } from 'lodash';
+
+// 引入地图数据
 import sichuanJSON from "@/assets/json/sichuan.json";
-// 引入本地撒点图片
 import pointImage from "@/assets/images/recruitment/map-point1.png";
-// 获取地图DOM元素
-let map = ref();
-// 注册崇州地图
+
+// DOM 引用
+const map = ref();
+let myMap = null;
+
+// 注册地图
 echarts.registerMap("sichuan", sichuanJSON);
+
+// 响应式设计配置
+const designConfig = {
+  designWidth: 1920,
+  designHeight: 1080
+};
+
+// 计算响应式尺寸
+const calcResponsivePX = (pxValue) => {
+  const screenWidth = window.innerWidth || document.documentElement.clientWidth;
+  return (pxValue / designConfig.designWidth) * screenWidth;
+};
+
+// 初始点位数据
 const initialPoints = [
-  { name: "攀枝花", value: [101.718, 26.582, 0], count: 0 },
-  { name: "雅安",   value: [103.009, 29.988, 0], count: 0 },
-  { name: "眉山",   value: [103.848, 30.082, 0], count: 0 },
-  { name: "自贡",   value: [104.777, 29.350, 0], count: 0 },
-  { name: "泸州",   value: [105.442, 28.871, 0], count: 0 },
-  { name: "资阳",   value: [104.628, 30.122, 0], count: 0 },
-  { name: "遂宁",   value: [105.576, 30.523, 0], count: 0 },
-  { name: "广安",   value: [106.636, 30.463, 0], count: 0 },
-  { name: "德阳",   value: [104.399, 31.130, 0], count: 0 },
-  { name: "绵阳",   value: [104.684185, 31.473263, 0], count: 0 },
-  { name: "广元",   value: [105.834, 32.435, 0], count: 0 },
-  { name: "巴中",   value: [106.753, 31.857, 0], count: 0 },
-  { name: "达州",   value: [107.467, 31.209, 0], count: 0 },
-  { name: "南充",   value: [106.110, 30.837, 0], count: 0 }
+  { name: "绵阳市", value: [104.69,31.47, 0], count: 0 },
+  { name: "广元市昭化区", value: [105.97,32.33, 0], count: 0 },
+  { name: "巴中市恩阳区", value: [106.64,31.80, 0], count: 0 },
+  { name: "达州市渠县", value: [106.98,30.84, 0], count: 0 },
+  { name: "达州市开江县", value: [107.88,31.09, 0], count: 0 },
+  { name: "达州市大竹县", value: [107.21,30.74, 0], count: 0 },
+  { name: "广安市", value: [106.64,30.46, 0], count: 0 },
+  { name: "广安市岳池县", value: [106.45,30.54, 0], count: 0 },
+  { name: "广安华蓥市", value: [106.79,30.40, 0], count: 0 },
+  { name: "南充顺庆区", value: [106.10,30.80, 0], count: 0 },
+  { name: "遂宁市大英县", value: [105.24,30.60, 0], count: 0 },
+  { name: "德阳市中江县", value: [104.69,31.04, 0], count: 0 },
+  { name: "资阳市雁江区", value: [104.68,30.11, 0], count: 0 },
+  { name: "雅安市荥经县", value: [102.85,29.80, 0], count: 0 },
+  { name: "雅安市天全县", value: [102.76,30.07, 0], count: 0 },
+  { name: "眉山市青神县", value: [103.85,29.84, 0], count: 0 },
+  { name: "自贡贡井区", value: [104.72,29.35, 0], count: 0 },
+  { name: "泸州市", value: [105.45,28.88, 0], count: 0 },
+  { name: "攀枝花市", value: [101.73,26.59, 0], count: 0 },
 ];
-// 地图参数设置
-let option = {
+
+// 生成随机高度值函数
+const generateRandomHeights = (points, minHeight = 10, maxHeight = 25) => {
+  return points.map(point => ({
+    ...point,
+    value: [point.value[0], point.value[1], Math.random() * (maxHeight - minHeight) + minHeight]
+  }));
+};
+
+// 获取动态配置
+const getChartOption = () => {
+  const pointsWithRandomHeights = generateRandomHeights(initialPoints);
+
+  return {
     tooltip: {
       trigger: "item",
-    formatter: function (params) {
+      formatter: (params) => {
         if (params.seriesType === "scatter3D") {
           return `${params.name}<br/>合作社数量：${params.data.count || 0}`;
         }
         return params.name;
+      },
+      backgroundColor: "rgba(0, 0, 0, 0.8)",
+      borderColor: "#30DCFF",
+      textStyle: {
+        color: "#fff",
+        fontSize: 12
       }
     },
     geo3D: {
@@ -50,55 +90,125 @@ let option = {
       map: "sichuan",
       regionHeight: 6,
       boxHeight: 2,
-    roam: false,
+      roam: true,
       label: {
-      show: true,
-      color: "#CBF2FA",
-      fontSize: 12,
+        show: false,
+        color: "#fff",
+        fontSize: 10,
         fontWeight: "bold"
       },
       itemStyle: {
-        color: "rgba(27, 129, 150, 0.4)",
+        color: "rgba(27,129,150,0.18)",
         borderColor: "#61cfff",
         borderWidth: 2,
-        opacity: 0.75
+        opacity: 0.3
       },
       emphasis: {
-          itemStyle: { color: "rgba(27, 129, 150, 0.65)", opacity: 0.85 },
-          label: { color: "#ffff00" }
+        itemStyle: {
+          color: "rgba(27, 129, 150, 0.3)",
+          opacity: 0.5
+        },
+        label: { show: false }
       },
       light: {
-      main: { intensity: 1.6, shadow: true, shadowQuality: "high", alpha: 35, beta: 15 },
+        main: {
+          intensity: 1.6,
+          shadow: true,
+          shadowQuality: "high",
+          alpha: 35,
+          beta: 15
+        },
         ambient: { intensity: 0.35 }
       },
       shading: "lambert",
-    viewControl: { distance: 110, alpha: 45, beta: 10 },
-    groundPlane: { show: false },
-    postEffect: { enable: true, bloom: { enable: true, bloomIntensity: 0.25 } }
+      viewControl: {
+        distance: 110,
+        alpha: 45,
+        beta: 10
+      },
+      groundPlane: { show: false }
     },
     series: [
       {
         name: "城市点位(3D)",
         type: "scatter3D",
         coordinateSystem: "geo3D",
-        data: initialPoints.map(p => ({
+        data: pointsWithRandomHeights.map(p => ({
           name: p.name,
-          value: [p.value[0], p.value[1], 6],
-          count: p.count
+          value: p.value,
+          count: p.count,
+          // 关键：使用正确的 label 配置方式
+          label: {
+            show: true,
+            formatter: p.name,
+            position: [p.value[2] + 5, p.value[2] + 5, p.value[2] + 5], // [x, y, z] - 在点上方固定偏移
+            distance: 0, // 重要：设置为0，使用绝对位置
+            textStyle: {
+              backgroundColor: 'rgba(0,0,0,0.7)',
+              borderWidth: 1,
+              borderColor: '#30dcff',
+              padding: [4, 8],
+              borderRadius: 4,
+              color: '#fff',
+              fontSize: 10
+            }
+          }
         })),
-        symbol: "triangle",
-        symbolSize: 12,
+        symbol: "triangle", // 改为圆形，更明显
+        symbolSize: calcResponsivePX(12), // 增大符号尺寸
         itemStyle: { color: "#FFBE34" },
-        label: { show: false }
+        label: {
+          textStyle: {
+            backgroundColor: 'rgba(255,190,52,0.9)',
+            color: '#000',
+            fontWeight: 'bold'
+          }
+        }
       }
     ]
+  }
+};
+
+// 处理图表重绘（防抖优化）
+const handleChartResize = debounce(() => {
+  if (myMap) {
+    myMap.resize();
+    // 重新设置配置以更新响应式尺寸
+    myMap.setOption(getChartOption(), true);
+  }
+}, 300);
+
+// 初始化图表
+const initChart = () => {
+  if (!map.value) return;
+
+  myMap = echarts.init(map.value);
+  myMap.setOption(getChartOption());
+
+  // 添加点击事件（可选）
+  myMap.on('click', (params) => {
+    if (params.componentType === 'series' && params.seriesType === 'scatter3D') {
+      console.log('点击了城市:', params.name);
+      // 可以在这里添加点击后的业务逻辑
+    }
+  });
 };
 
 // 生命周期钩子
 onMounted(() => {
-  let myMap = echarts.init(map.value);
-  // 设置配置项
-  myMap.setOption(option);
+  nextTick(() => {
+    initChart();
+  });
+
+  window.addEventListener('resize', handleChartResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleChartResize);
+  if (myMap) {
+    myMap.dispose();
+    myMap = null;
+  }
 });
 </script>
 

src/views/recruitment/card/ListView.vue

@@ -4,21 +4,29 @@
     <!-- 表头保持固定 -->
     <ul class="header-list">
       <li class="singleBackground topLi">
-        <div> 序号</div>
         <div>区域</div>
         <div>入职人数</div>
+        <div>占比</div>
       </li>
     </ul>
+    <!-- 固定的“眉山”数据行，不随滚动 -->
+    <ul class="header-list" v-if="pinnedItem">
+      <li class="singleBackground" @click="visible = true">
+        <div>{{ pinnedItem.zone }}</div>
+        <div>{{ pinnedItem.count }}人</div>
+        <div>{{ pinnedItem.proportion }}%</div>
+      </li>
+    </ul>
+
     <!-- 滚动区域 -->
     <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
       <div class="scroll_list" :style="{ transform: `translate(0vw,-${scrollTop}px)` }">
         <div ref="scrollItemBox">
-          <li v-for="(item, index) in pieData" :key="index" @click="visible=true"
+          <li v-for="(item, index) in scrollData" :key="index"
             :class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
-            <div>{{ `${index + 1 >= 10 ? index + 1 : '0' + (index + 1)}` }}</div>
             <div>{{ item.zone }}</div>
             <div>{{ item.count }}人</div>
-            <div></div>
+            <div>{{ item.proportion }}%</div>
           </li>
         </div>
         <!-- 复制一份数据用于无缝滚动 -->
@@ -27,14 +35,14 @@
     </div>
   </div>
   <div class="carousel-modal-container" v-if="visible">
-    <el-carousel :interval="4000" indicator-position="none" :autoplay="false" height="14vw">
+    <el-carousel ref="carouselRef" :interval="4000" indicator-position="outside" :autoplay="true" :pause-on-hover="false" arrow="always" height="28vw">
       <el-carousel-item>
         <div class="carousel-item-content">
           <div class="carousel-item-title">
             仁寿县劳务合作社联合送工
           </div>
-          <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg5.svg" class="carousel-image">
+          <div style="height:20vw;">
+            <img src="@/assets/images/ms/scxc2.png" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
@@ -44,8 +52,8 @@
           <div class="carousel-item-title">
             批量化规模化送工现场1
           </div>
-          <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg.svg" class="carousel-image">
+          <div style="height:20vw;">
+            <img src="@/assets/images/ms/sgxc.jpg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
@@ -54,22 +62,24 @@
           <div class="carousel-item-title">
             批量化规模化送工现场2
           </div>
-          <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg4.svg" class="carousel-image">
+          <div style="height:20vw;">
+            <img src="@/assets/images/ms/sgxc1.jpg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
       <el-carousel-item>
         <div class="carousel-item-content">
           <div class="carousel-item-title">
-           仁寿县劳务合作社联合送工
+            农民工返乡慰问现场
           </div>
-          <div style="height:10vw;">
-          <img src="@/assets/recruitment/plghlhsg3.svg" class="carousel-image">
+          <div style="height:20vw;">
+            <img src="@/assets/images/ms/fxww.jpg" class="carousel-image">
           </div>
         </div>
       </el-carousel-item>
     </el-carousel>
+    <div class="nav-btn prev" @click="prevSlide">‹</div>
+    <div class="nav-btn next" @click="nextSlide">›</div>
     <div class="close-btn" @click="closeModal">X</div>
   </div>
 
@@ -79,100 +89,135 @@
 import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
 import * as echarts from "echarts";
 const pieRef = ref(null);
+const carouselRef = ref(null);
+function prevSlide() { if (carouselRef.value) carouselRef.value.prev(); }
+function nextSlide() { if (carouselRef.value) carouselRef.value.next(); }
 const pieData = [
   {
-    zone: "四川 - 成都",
-    count: 2920
+    "zone": "四川 - 成都",
+    "count": 2920,
+    "proportion": 29.87
   },
   {
-    zone: "省外",
-    count: 1490
+    "zone": "省外",
+    "count": 1490,
+    "proportion": 15.24
   },
   {
-    zone: "四川 - 南充",
-    count: 598
+    "zone": "四川 - 南充",
+    "count": 598,
+    "proportion": 6.12
   },
   {
-    zone: "四川 - 内江",
-    count: 473
+    "zone": "四川 - 内江",
+    "count": 473,
+    "proportion": 4.84
   },
   {
-    zone: "四川 - 乐山",
-    count: 421
+    "zone": "四川 - 乐山",
+    "count": 421,
+    "proportion": 4.31
   },
   {
-    zone: "四川 - 眉山",
-    count: 386
+    "zone": "四川 - 眉山",
+    "count": 386,
+    "proportion": 3.95
   },
   {
-    zone: "四川 - 巴中",
-    count: 373
+    "zone": "四川 - 巴中",
+    "count": 373,
+    "proportion": 3.82
   },
   {
-    zone: "四川 - 宜宾",
-    count: 313
+    "zone": "四川 - 宜宾",
+    "count": 313,
+    "proportion": 3.2
   },
   {
-    zone: "四川 - 达州",
-    count: 313
+    "zone": "四川 - 达州",
+    "count": 313,
+    "proportion": 3.2
   },
   {
-    zone: "四川 - 广元",
-    count: 300
+    "zone": "四川 - 广元",
+    "count": 300,
+    "proportion": 3.07
   },
   {
-    zone: "四川 - 泸州",
-    count: 294
+    "zone": "四川 - 泸州",
+    "count": 294,
+    "proportion": 3.01
   },
   {
-    zone: "四川 - 遂宁",
-    count: 278
+    "zone": "四川 - 遂宁",
+    "count": 278,
+    "proportion": 2.84
   },
   {
-    zone: "四川 - 自贡",
-    count: 276
+    "zone": "四川 - 自贡",
+    "count": 276,
+    "proportion": 2.82
   },
   {
-    zone: "四川 - 资阳",
-    count: 272
+    "zone": "四川 - 资阳",
+    "count": 272,
+    "proportion": 2.78
   },
   {
-    zone: "四川 - 绵阳",
-    count: 231
+    "zone": "四川 - 绵阳",
+    "count": 231,
+    "proportion": 2.36
   },
   {
-    zone: "四川 - 德阳",
-    count: 222
+    "zone": "四川 - 德阳",
+    "count": 222,
+    "proportion": 2.27
   },
   {
-    zone: "四川 - 凉山",
-    count: 177
+    "zone": "四川 - 凉山",
+    "count": 177,
+    "proportion": 1.81
   },
   {
-    zone: "四川 - 雅安",
-    count: 166
+    "zone": "四川 - 雅安",
+    "count": 166,
+    "proportion": 1.7
   },
   {
-    zone: "四川 - 广安",
-    count: 162
+    "zone": "四川 - 广安",
+    "count": 162,
+    "proportion": 1.66
   },
   {
-    zone: "四川 - 攀枝花",
-    count: 54
+    "zone": "四川 - 攀枝花",
+    "count": 54,
+    "proportion": 0.55
   },
   {
-    zone: "四川 - 阿坝",
-    count: 47
+    "zone": "四川 - 阿坝",
+    "count": 47,
+    "proportion": 0.48
   },
   {
-    zone: "四川 - 甘孜",
-    count: 9
+    "zone": "四川 - 甘孜",
+    "count": 9,
+    "proportion": 0.09
   }
 ]
 const visible = ref(false);
+// 固定在顶部的市州（眉山）
+const pinnedZone = "四川 - 眉山";
+const pinnedIndex = computed(() => pieData.findIndex(i => i.zone === pinnedZone));
+const pinnedItem = computed(() => (pinnedIndex.value >= 0 ? pieData[pinnedIndex.value] : null));
+// 滚动区域数据（去除固定项）
+const scrollData = computed(() => pieData.filter(i => i.zone !== pinnedZone));
+// 格式化序号
+function formattedIndex(i) {
+  return `${i + 1 >= 10 ? i + 1 : '0' + (i + 1)}`;
+}
 // 滚动相关变量
 const scrollTop = ref(0); // 列表滚动高度
-const speed = ref(15); // 滚动速度
+const speed = ref(60); // 滚动速度
 const copyHtml = ref(''); // 复制的HTML内容
 const scrollItemBox = ref(null); // 滚动项容器引用
 let timer = null;
@@ -308,26 +353,21 @@ function closeModal() {
   }
 
   >div:first-child {
-    width: 20%;
+    width: 50%;
     text-align: left;
     font-weight: bold;
   }
 
   >div:nth-child(2) {
-    width: 50%;
+    width: 25%;
     text-align: center;
   }
 
   >div:nth-child(3) {
-    width: 30%;
+    width: 25%;
     text-align: right;
     font-weight: bold;
   }
-
-  >div:nth-child(4) {
-    display: none;
-    /* 隐藏多余的div */
-  }
 }
 
 /* 数据行的悬停效果 */
@@ -382,20 +422,21 @@ function closeModal() {
 /* 轮播弹窗容器样式 */
 .carousel-modal-container {
   position: fixed;
-    top: 54%;
-    left: 71%;
+  top: 66%;
+  left: 64%;
   transform: translate(-50%, -50%);
-    width: 14vw;
+  width: 28vw;
   border-radius: 4px 4px 4px 4px;
   z-index: 100;
   border-radius: 0.104vw;
   padding: 0.26vw;
-    height: 14vw;
+  height: 28vw;
 
   .close-btn {
    position: absolute;
-    top: 14.5vw;
-    right: 5.5vw;
+   bottom: 0.6vw;
+   left: 50%;
+   transform: translateX(-50%);
    width: 2vw;
    height: 2vw;
    background-color: #171E22;
@@ -408,35 +449,58 @@ function closeModal() {
    align-items: center;
    cursor: pointer;
    z-index: 101;
-
-      // &:hover {
-      //   background-color: #1E262A;
-      //   border-color: rgba(203, 242, 250, 0.4);
-      // }
  }
 
   .carousel-item-content {
     border-radius: 5px 5px 5px 5px;
     background-color: #171E22;
     padding: 0.001vw 0.4vw 1vw;
+    position: relative;
+
     .carousel-item-title {
       background: linear-gradient(90deg, rgba(203, 242, 250, 0) 0%, rgba(203, 242, 250, 0.43) 58%, rgba(203, 242, 250, 0) 100%);
-      border-radius: 0px 0px 0px 0px;
-      opacity: 0.5;
+      //opacity: 0.5;
       width: 100%;
-      height: 0.5vw;
+      height: 1.1vw;
       margin-top: 1vw;
-      line-height: 0.5vw;
+      font-size: 0.8vw;
+      line-height: 1.1vw;
       text-align: center;
       border-radius: 4px 4px 4px 4px;
+      font-weight: bold;
+      color: #a9f0ff;
     }
+
     img {
       width: 100%;
       height: 100%;
+      object-fit: cover;
     }
   }
 }
+
+/* 手动切换按钮样式 */
+.nav-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.6vw;
+  height: 1.6vw;
+  background-color: rgba(23, 30, 34, 0.9);
+  border: 1px solid rgba(203, 242, 250, 0.2);
+  border-radius: 50%;
+  color: #C4F3FE;
+  font-size: 1.2vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  z-index: 101;
+}
+.nav-btn.prev { left: 0.3vw; }
+.nav-btn.next { right: 0.3vw; }
+
 ::deep(.el-carousel__container) {
-  height: 14vw !important;
+  height: 28vw !important;
 }
 </style>

src/views/recruitment/components/enterpriseEmploymentCard.vue

@@ -82,6 +82,7 @@ const props = defineProps({
   height: 24.6875vw;
   background: url("~@/assets/recruitment/module_bg.svg") no-repeat;
   background-size: 100% 100%;
+  overflow: hidden;
 
   .cardWrapper {
     position: relative;
@@ -103,6 +104,7 @@ const props = defineProps({
       color: #ffffff;
       margin-bottom: 0.46875vw;
       font-size: 0.729vw;
+      font-weight:700 ;
     }
 
     .modelItem1 {

src/views/recruitment/components/recruitment.scss

@@ -14,7 +14,8 @@
     color: #fff;
 
     // 头部
-.homeHead,.homeHeadsmall {
+    .homeHead,
+    .homeHeadsmall {
         display: flex;
         justify-content: space-between;
         position: fixed;
@@ -71,9 +72,11 @@
             }
         }
     }
+
     .homeHeadsmall {
         // background: url('~@/assets/images/home_head_small.png') no-repeat center center;
         height: 6.771vw;
+
         .center_head {
             position: absolute;
             top: 0.5vw;

src/views/recruitment/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="bigScrenn">
+    <div class="bg">
     <!-- 头部 -->
     <Head title="兴蜀人力数据概览"></Head>
     <div
@@ -57,27 +58,30 @@
         :description="cardFourInfo.description"
         :type1="cardFourInfo.type1"
         :type2="cardFourInfo.type2"
-        style="margin-top: 0.625vw"
-      >
-        <el-carousel
-          :interval="8000"
-          type="card"
-          height="17vw"
-          indicator-position="none"
-          :autoplay="true"
       >
+<!--        <el-carousel-->
+<!--          :interval="8000"-->
+<!--          type="card"-->
+<!--          height="17vw"-->
+<!--          indicator-position="none"-->
+<!--          :autoplay="true"-->
+<!--        >-->
           <!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
-          <el-carousel-item><LaborSystemTwo /></el-carousel-item>
+          <div class="isVisibleImg"><LaborSystemTwo /></div>
           <!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
           <!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
-        </el-carousel>
+<!--        </el-carousel>-->
       </enterprise-employment-card>
       <enterprise-employment-card
+       style="margin-top: 0.625vw"
         :title="cardThreeInfo.title"
         :description="cardThreeInfo.description"
         :type1="cardThreeInfo.type1"
         :type2="cardThreeInfo.type2"
       >
+        <template v-slot:header>
+          <div class="header_bg" style="margin-top:1vw">近2个月保供入职人员分析</div>
+        </template>
       <ListView/>
 
 
@@ -89,6 +93,7 @@
     <!-- 弹窗 -->
     <HomeDialogInfo v-model="dialogShow" />
   </div>
+  </div>
 </template>
 <script>
 export default {
@@ -136,7 +141,7 @@ const asideMeun = reactive({
   ]
 });
 const cardOneInfo = {
-  title: "服务企业用工机构分布",
+  title: "服务企业用工结构分布",
   description: "",
   type1: {
     title: "岗位种类数",
@@ -153,22 +158,22 @@ const cardTwoInfo = {
   title: "兴蜀就业生态数据",
   type1: {
     title: "第一产业",
-    count: "1.2",
+    count: "1.01",
     class: "modelItem3 first"
   },
   type2: {
     title: "第二产业",
-    count: "1.6",
+    count: "1.36",
     class: "modelItem3 seconed"
   },
   type3: {
     title: "第三产业",
-    count: "1.4",
+    count: "1.29",
     class: "modelItem3 third"
   }
 };
 const cardThreeInfo = {
-  title: "重点企业保供案例(比亚迪)",
+  title: "重点企业保供案例",
   // description: "4000+毕业生",
   type1: {
     title: "招募总人数",
@@ -176,7 +181,7 @@ const cardThreeInfo = {
     class: "modelItem2"
   },
   type2: {
-    title: "企业总人数",
+    title: "企业总人数(10/9)",
     count: "38448",
     class: "modelItem2"
   }
@@ -185,13 +190,13 @@ const cardFourInfo = {
   title: "三级劳务体系建设",
   description: "198名平台劳务经纪人",
   type1: {
-    title: "合作社",
-    count: "5",
+    title: "区域劳务协作",
+    count: "19个区县",
     class: "modelItem2"
   },
   type2: {
     title: "劳务经纪人",
-    count: "198",
+    count: "198名",
     class: "modelItem2"
   }
 };
@@ -232,6 +237,11 @@ function getWebSocketData() {
 .transition {
   transition: all 0.5s;
 }
+
+.isVisibleImg.el-carousel__item {
+  background: none !important;
+}
+
 .el-carousel {
   margin-top: 0.5vw;
 }
@@ -259,4 +269,16 @@ function getWebSocketData() {
   font-style: normal;
   text-transform: none;
 }
+.bg{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+     background: url('~@/assets/recruitment/bjtl.svg') no-repeat center center;
+    background-size: 102% 100%;
+  // background: url("~@/assets/recruitment/mbc.png") no-repeat center center;
+  // background-size: 100% 100%;
+}
 </style>

src/views/recruitment/layout/centerModel.vue

@@ -2,22 +2,15 @@
   <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="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="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>
@@ -36,12 +29,8 @@
           >
             {{ item }}
           </li> -->
-        <li
-          v-for="(item, index) in tabsDate.tabs"
-          :key="index"
-          :class="tabsActive == index ? 'active' : ''"
-          @click="tabsActive = 0"
-        >
+        <li v-for="(item, index) in tabsDate.tabs" :key="index" :class="tabsActive == index ? 'active' : ''"
+          @click="tabsActive = 0">
           {{ item }}
         </li>
       </ul>
@@ -62,8 +51,7 @@
               <span>{{ item.title }}</span>
             </div>
             <div class="count">
-              <span class="numb">{{ item.count }}</span
-              >（{{ item.unit }}）
+              <span class="numb">{{ item.count }}</span>（{{ item.unit }}）
             </div>
           </div>
         </li>
@@ -83,15 +71,13 @@
           <li>
             <div><span class="blockOne"></span><span>城镇新增就业</span></div>
             <div>
-              <span class="numb">目标7200人</span
-              ><span class="proportion">完成5445人</span>
+              <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>
+              <span class="numb">目标1900人</span><span class="proportion">完成1528人</span>
             </div>
           </li>
           <li>
@@ -99,8 +85,7 @@
               <span class="blockThree"></span><span>就业困难人员再就业</span>
             </div>
             <div>
-              <span class="numb">目标190人</span
-              ><span class="proportion">完成125人</span>
+              <span class="numb">目标190人</span><span class="proportion">完成125人</span>
             </div>
           </li>
         </ul>
@@ -120,15 +105,10 @@
           >
             {{ item }}
           </li> -->
-        <li
-          v-for="(item, index) in tabsDate2.tabs"
-          :key="index"
-          :class="tabsActive == index ? 'active' : ''"
-          @click="
+        <li v-for="(item, index) in tabsDate2.tabs" :key="index" :class="tabsActive == index ? 'active' : ''" @click="
           tabsDate2.activeIndex = index;
         tabsActive = index;
-          "
-        >
+        ">
           {{ item }}
         </li>
       </ul>
@@ -162,18 +142,54 @@
         </table>
       </div>
     </div>
-    <div class="hjrkDialogBox topSchoolsDialog" v-show="isactive == 5">
+    <div class="hjrkDialogBox" v-show="isactive == 5">
       <div class="titleBox">
-        <div class="title">合作学校TOP5</div>
+        <div class="title">部分合作学校</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 class="schoolEmploymentBoxs">
+        <div v-for="(item, idx) in topSchools" :key="idx" class="schoolItem">
+          <div class="schoolContent">
+            <img src="@/assets/images/recruitment/xuexiao.png" alt="学校" class="schoolIcon" />
+            <div class="schoolName">
+              <div class="bane"> {{ item.name }}</div>
             </div>
+          </div>
+        </div>
+        <!-- <div v-for="(item, idx) in topSchools" :key="idx" style="display: flex;">
+          <div>
+            <img src="@/assets/images/recruitment/xuexiao.png" alt="学校" class="schoolIcon" />
+            {{ item.name }}
+          </div>
+          <div>{{ item.name1 }}</div>
+        </div> -->
+        <!-- <table class="employmentTable">
+          <thead>
+          <tr>
+            <th colspan="2">部分合作学校</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="(item, idx) in topSchools" :key="idx">
+            <td>{{ item.name }}</td>
+            <td>{{ item.name1 }}</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>
@@ -181,13 +197,14 @@
       </div>
       <ul class="cooperateOrgList">
         <li v-for="(item, index) in topCoops" :key="index">
-          <img :src="coopIcon" alt="合作社" class="coopIcon" />
+          <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="overview" :class="{ active: activeView === 'overview' }"
+        @click="switchView('overview')">崇州概况</button>
       <button data-type="work" :class="{ active: activeView === 'work' }" @click="switchView('work')">兴蜀工作</button>
     </div>
   </div>
@@ -233,7 +250,7 @@ const onacitve = (index, label) => {
     // 兴蜀工作视图的弹窗映射：合作学校TOP5、合作社TOP5
     if (label === "合作学校") {
       isactive.value = 5;
-    } else if (label === "合作社") {
+    } else if (label === "合作区县") {
       isactive.value = 6;
     } else {
       isactive.value = -1;
@@ -257,8 +274,8 @@ const modelSets = {
   work: [
     { num: "628个", label: "服务企业" },
     { num: "36所", label: "合作学校" },
-     { num: "19个", label: "合作社" },
-     { num: "17期", label: "培训课程" },
+    { num: "19个", label: "合作区县" },
+    { num: "9000+", label: "培训人次" },
     { num: "870人", label: "领证人数" }
   ]
 };
@@ -285,19 +302,19 @@ const statisticData = ref([
   {
     imgURL: tongjiPxjg,
     title: "博士",
-    count: "133",
+    count: "40",
     unit: "人"
   },
   {
     imgURL: tongjiPxjg,
     title: "硕士",
-    count: "1012",
+    count: "1213",
     unit: "人"
   },
   {
     imgURL: tongjiPxjg,
     title: "本科",
-    count: "20792",
+    count: "21788",
     unit: "人"
   }
 ]);
@@ -329,15 +346,24 @@ const topSchools = ref([
   { name: "成都工业职业技术学院" },
   { name: "成都工贸职业技术学院" },
   { name: "四川师范大学" },
-  { name: "崇州市职业教育培训中心（成都市技师学院南校区）" },
-  { name: "成都矿产机电技师学院" }
+  { name: "四川水利职业技术学校" },
+  { name: "四川文化传媒职业技术学校" },
+  { name: "甘孜州职业技术学院" },
+  { name: "四川矿产机电技师学院" },
+  { name: "成都职业技术学院" },
+  // { name: "崇州市职业教育培训中心（成都市技师学院南校区）" },
+  // { name: "成都矿产机电技师学院" }
+  // { name: "成都工贸职业技术学院", name1: '成都工业职业技术学院' },
+  // { name: "四川师范大学", name1: '四川水利职业技术学校' },
+  // { name: "四川文化传媒职业技术学校", name1: '甘孜州职业技术学院' },
+  // { name: "四川矿产机电技师学院", name1: '成都职业技术学院' },
 ]);
 const topCoops = ref([
   { name: "绵阳市游仙区鑫众送劳务信息咨询农民专业合作社" },
-  { name: "成都市武侯青业劳务信息咨询农民专业合作社" },
   { name: "成都市成华青业劳务信息咨询农民专业合作社" },
   { name: "崇州市蜀洲聚力劳务信息咨询农民专业合作社" },
-  { name: "成都市蜀州兴蜀农民劳务信息咨询专业合作社" }
+  { name: "成都市蜀州兴蜀农民劳务信息咨询专业合作社" },
+  { name: "成都市武侯青业劳务信息咨询农民专业合作社" },
 ]);
 import * as echarts from "echarts";
 const enterpriseTwoRef = ref(null);
@@ -519,10 +545,12 @@ onMounted(() => {
       color: #cbf2fa;
     }
   }
+
   .modelWrapper {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+
     .modelContent {
       display: flex;
       flex-direction: column;
@@ -535,6 +563,7 @@ onMounted(() => {
       padding: 0.625vw 0;
       margin: 0 1.5vw 1.2vw;
       cursor: pointer;
+
       .num {
         font-family: PingFang SC, PingFang SC;
         font-size: 1.667vw;
@@ -557,9 +586,9 @@ onMounted(() => {
       //   margin-left: 8vw;
       // }
       &.active {
-        background: url("~@/assets/images/recruitment/model-active-bg.png")
-          no-repeat;
+        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;
@@ -568,6 +597,7 @@ onMounted(() => {
       }
     }
   }
+
   .hjrkDialogBox {
     top: 15.2vw;
     left: 50%;
@@ -578,10 +608,12 @@ onMounted(() => {
     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%;
@@ -589,20 +621,22 @@ onMounted(() => {
         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: 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;
@@ -613,11 +647,13 @@ onMounted(() => {
         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;
@@ -625,15 +661,18 @@ onMounted(() => {
     }
   }
 }
+
 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值
@@ -650,13 +689,16 @@ ul.statisticOne {
       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;
@@ -665,9 +707,11 @@ ul.statisticOne {
           font-weight: 400;
         }
       }
+
       .count {
         font-size: 1.4vw;
         padding: 0.5vw 0 0 0;
+
         span.numb {
           font-size: 2.2vw;
           display: inline-block;
@@ -677,24 +721,27 @@ ul.statisticOne {
     }
   }
 }
+
 .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: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
       background-size: 100%;
       border: 1px solid transparent;
     }
+
     .pieTitle {
       position: absolute;
       top: 50%;
@@ -705,12 +752,14 @@ ul.statisticOne {
       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;
@@ -723,10 +772,12 @@ ul.statisticOne {
       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,
@@ -736,18 +787,23 @@ ul.statisticOne {
         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;
@@ -756,11 +812,79 @@ ul.statisticOne {
     }
   }
 }
+
 /* 在崇学校就业人数列表样式 */
-.schoolEmploymentBox {
-  width: 40vw;
-  margin: 1.6vw auto 0;
+.schoolEmploymentBoxs {
+  width: 100%;
+  padding: 1vw;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+justify-content:space-between;
+  /* 学校项目容器 */
+  .schoolItem {
+    width: 50%;
+    margin-bottom: 0vw;
   }
+
+  /* 学校内容容器 */
+  .schoolContent {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    line-height: 5vw;
+justify-content:space-between;
+    .schoolIcon {
+      height: 5vw;
+      width: 5vw;
+    }
+  }
+
+  .schoolName {
+    width: 100%;
+    position: relative;
+    height: 5vw;
+    line-height: 5vw;
+
+    /* 创建模糊背景 */
+    &::before {
+      content: '';
+      position: absolute;
+      width: 50%;
+      height: 1.5vw;
+      top: 2vw;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 221, 255, 0.45);
+      border-radius: 0px;
+      filter: blur(50px);
+      z-index: 0;
+    }
+
+    .bane {
+      position: relative;
+      z-index: 1;
+      /* 确保文字在模糊背景上方 */
+      width: 100%;
+      height: 5vw;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 1.5vw;
+      line-height: 5vw;
+      letter-spacing: 3px;
+      text-align: left;
+      font-style: normal;
+      text-transform: none;
+      background: linear-gradient(270deg, #FFFFFF 0%, #75E8FF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+  }
+}
+
 .employmentTable {
   width: 100%;
   border-collapse: separate;
@@ -768,6 +892,7 @@ ul.statisticOne {
   color: #cbf2fa;
   font-size: 0.8vw;
 }
+
 .employmentTable thead th {
   height: 2vw;
   line-height: 2vw;
@@ -776,6 +901,7 @@ ul.statisticOne {
   border-radius: 0.26vw;
   text-align: center;
 }
+
 .employmentTable tbody td {
   height: 2vw;
   line-height: 2vw;
@@ -784,9 +910,11 @@ ul.statisticOne {
   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%;
@@ -796,6 +924,7 @@ ul.statisticOne {
   gap: 0.8vw;
   z-index: 100; // 保持在内容之上但不遮挡弹窗
   pointer-events: auto;
+
   button {
     min-width: 7vw;
     height: 2vw;
@@ -809,12 +938,14 @@ ul.statisticOne {
     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;
@@ -825,16 +956,19 @@ ul.statisticOne {
   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;
@@ -846,6 +980,7 @@ ul.statisticOne {
   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;
@@ -857,6 +992,7 @@ ul.statisticOne {
   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;
@@ -865,6 +1001,7 @@ ul.statisticOne {
   border-radius: 0.26vw;
   text-align: center;
 }
+
 .employmentTable tbody td {
   height: 2vw;
   line-height: 2vw;
@@ -873,9 +1010,11 @@ ul.statisticOne {
   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%;
@@ -885,6 +1024,7 @@ ul.statisticOne {
   gap: 0.8vw;
   z-index: 100; // 保持在内容之上但不遮挡弹窗
   pointer-events: auto;
+
   button {
     min-width: 7vw;
     height: 2vw;
@@ -898,12 +1038,14 @@ ul.statisticOne {
     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;
@@ -917,16 +1059,19 @@ ul.statisticOne {
   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;
@@ -947,6 +1092,7 @@ ul.statisticOne {
   gap: 0.8vw;
   z-index: 100; // 保持在内容之上但不遮挡弹窗
   pointer-events: auto;
+
   button {
     min-width: 7vw;
     height: 2vw;
@@ -960,12 +1106,14 @@ ul.statisticOne {
     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%;
@@ -975,6 +1123,7 @@ ul.statisticOne {
   gap: 0.8vw;
   z-index: 999; // 保持在内容之上但不遮挡弹窗
   pointer-events: auto;
+
   button {
     min-width: 7vw;
     height: 2vw;
@@ -988,6 +1137,7 @@ ul.statisticOne {
     padding: 0 1.2vw;
     border-radius: 0.26vw;
   }
+
   button.active {
     color: #fff;
     background: url("~@/assets/images/recruitment/tabs-active-bg2.png") no-repeat center;
@@ -997,21 +1147,23 @@ ul.statisticOne {
   .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: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
         background-size: 100%;
         border: 1px solid transparent;
       }
+
       .pieTitle {
         position: absolute;
         top: 50%;
@@ -1022,12 +1174,14 @@ ul.statisticOne {
         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;
@@ -1040,10 +1194,12 @@ ul.statisticOne {
         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,
@@ -1053,18 +1209,23 @@ ul.statisticOne {
           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;
@@ -1073,11 +1234,13 @@ ul.statisticOne {
       }
     }
   }
+
   /* 在崇学校就业人数列表样式 */
   .schoolEmploymentBox {
     width: 40vw;
     margin: 1.6vw auto 0;
   }
+
   .employmentTable {
     width: 100%;
     border-collapse: separate;
@@ -1085,6 +1248,7 @@ ul.statisticOne {
     color: #cbf2fa;
     font-size: 0.8vw;
   }
+
   .employmentTable thead th {
     height: 2vw;
     line-height: 2vw;
@@ -1093,6 +1257,7 @@ ul.statisticOne {
     border-radius: 0.26vw;
     text-align: center;
   }
+
   .employmentTable tbody td {
     height: 2vw;
     line-height: 2vw;
@@ -1101,9 +1266,11 @@ ul.statisticOne {
     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%;
@@ -1113,6 +1280,7 @@ ul.statisticOne {
     gap: 0.8vw;
     z-index: 100; // 保持在内容之上但不遮挡弹窗
     pointer-events: auto;
+
     button {
       min-width: 7vw;
       height: 2vw;
@@ -1126,12 +1294,14 @@ ul.statisticOne {
       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;
@@ -1142,16 +1312,19 @@ ul.statisticOne {
     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;
@@ -1162,6 +1335,7 @@ ul.statisticOne {
     -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;
@@ -1173,6 +1347,7 @@ ul.statisticOne {
     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;
@@ -1181,6 +1356,7 @@ ul.statisticOne {
     border-radius: 0.26vw;
     text-align: center;
   }
+
   .employmentTable tbody td {
     height: 2vw;
     line-height: 2vw;
@@ -1189,9 +1365,11 @@ ul.statisticOne {
     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%;
@@ -1201,6 +1379,7 @@ ul.statisticOne {
     gap: 0.8vw;
     z-index: 100; // 保持在内容之上但不遮挡弹窗
     pointer-events: auto;
+
     button {
       min-width: 7vw;
       height: 2vw;
@@ -1214,12 +1393,14 @@ ul.statisticOne {
       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;
@@ -1233,16 +1414,19 @@ ul.statisticOne {
     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;
@@ -1253,6 +1437,7 @@ ul.statisticOne {
     -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%;
@@ -1262,6 +1447,7 @@ ul.statisticOne {
     gap: 1.2vw;
     z-index: 10001;
   }
+
   .bottomSwitch button {
     min-width: 11vw;
     height: 2.8vw;
@@ -1276,16 +1462,19 @@ ul.statisticOne {
     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;
@@ -1295,6 +1484,7 @@ ul.statisticOne {
     pointer-events: none;
     filter: drop-shadow(0 0 0.4vw rgba(48, 220, 255, 0.45));
   }
+
   .bottomSwitch button::after {
     content: "";
     position: absolute;
@@ -1309,6 +1499,7 @@ ul.statisticOne {
     opacity: 0.9;
     pointer-events: none;
   }
+
   .bottomSwitch button.active::before {
     border-color: rgba(48, 220, 255, 0.55);
   }