提交

# Conflicts:
#	src/views/recruitment/card/LaborSystemTwo.vue

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,6 +14985,31 @@
         }
       }
     },
+    "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"
+      },
+      "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-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/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/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

@@ -1,7 +1,7 @@
 <template>
   <div class="tableBox">
     <el-table :data="tableData" height="1540px" style="width: 100%">
-      <el-table-column label="序号" width="120px">
+      <el-table-column label="序号" width="140px">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
@@ -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>
 
@@ -92,13 +92,13 @@ const tableData = ref([
   margin: 0 0 1px 0;
 }
 ::v-deep .el-table .el-table__cell {
-  padding: 38px 0;
+  padding: 32px 0;
 }
 ::v-deep .el-table th.el-table__cell {
   background-color: rgba(31, 84, 145, 0.473);
   color: #c4f3fe;
   margin: 0 0 4px 0;
-  font-size: 40px;
+  font-size: 50px;
 }
 ::v-deep .el-table tr {
   background-color: rgba(22, 43, 85, 0);
@@ -109,7 +109,7 @@ const tableData = ref([
 ::v-deep .el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
   border-bottom: 1px solid rgba(22, 41, 85, 0);
-  font-size: 40px;
+  font-size: 50px;
 }
 ::v-deep .el-table th.el-table__cell.is-leaf {
   border-bottom: 1px solid rgba(22, 41, 85, 0.3);

src/views/portraitScreen/components/qyzpq.vue

@@ -3,7 +3,7 @@
     <el-table
       ref="tableRef"
       :data="tableData"
-      height="1360px"
+      height="1240px"
       style="width: 100%"
     >
       <el-table-column label="序号" width="200px">
@@ -11,7 +11,7 @@
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="企业名称" />
+      <el-table-column prop="name" label="企业名称" width="1000px" />
       <el-table-column prop="street" label="所在街道" />
       <el-table-column prop="position" label="招聘岗位" />
       <el-table-column prop="recruitmentNum" label="招聘人数" />
@@ -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([
@@ -533,9 +543,9 @@ const tableData = ref([
 
 <style lang="scss" scoped>
 .tableBox {
-  width: 2880px;
+  width: 2920px;
   margin: 0 auto;
-  margin-top: 50px;
+  padding: 150px 0 0 0;
 }
 ::v-deep .el-table {
   background-color: transparent;
@@ -555,7 +565,7 @@ const tableData = ref([
   background-color: #1631551f !important;
   color: #c4f3fe;
   margin: 0 0 4px 0;
-  font-size: 40px;
+  font-size: 54px;
 }
 ::v-deep .el-table tr {
   background-color: rgba(22, 43, 85, 0);
@@ -566,7 +576,7 @@ const tableData = ref([
 ::v-deep .el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
   border-bottom: 1px solid rgba(22, 41, 85, 0);
-  font-size: 40px;
+  font-size: 54px;
 }
 ::v-deep .el-table th.el-table__cell.is-leaf {
   border-bottom: 1px solid rgba(22, 41, 85, 0.3);

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,23 +77,28 @@ ul.rankList {
         color: #0a9eb5;
         font-weight: bold;
         font-size: 40px;
+
         &.red {
           color: #ff0000;
         }
+
         &.orange {
           color: #ffa500;
         }
+
         &.yellow {
           color: #ffd700;
         }
       }
+
       .name {
-        font-size: 40px;
+        font-size: 50px;
         margin: 0 0 0 200px;
         line-height: 80px;
         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>
@@ -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/card/EnterpriseEmploymentTwo.vue

@@ -3,133 +3,146 @@
 </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 = {
-  // 设置图形位置
-  grid: {
-    top: "15%",
-    left: "15%",
-    right: "5%",
-    bottom: "20%"
-  },
-  // 设置图例
-  legend: {
-    itemWidth: 10, // 方块宽度
-    itemHeight: 10, // 方块高度
+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: "#B2D9DF" // 文字颜色
+      color: '#30DCFF',
+      fontSize: calcResponsivePX(16),
+      fontWeight: 'normal'
+    }
   },
-    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
-    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
-    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  grid: {
+    top: `${calcVH(210)}%`, // 使用 vh 确保垂直方向也响应式
+    left: `${calcVW(130)}%`,
+    right: `${calcVW(120)}%`,
+    bottom: `${calcVH(170)}%`
   },
   xAxis: {
-    axisLine: {
+    show: true,
+    axisTick: {
+      show: true,
       lineStyle: {
-        color: "#CBF2FA" // 文字颜色
+        color: '#CBF2FA'
       }
     },
     axisLabel: {
-      fontSize: 22, // 设置 x 轴文字大小
-      color: "#CBF2FA", // 可以同时设置文字颜色
-      rotate: 20, // 文字倾斜45度
-      margin: 20 // 增加文字与轴线的距离
+      fontSize: calcResponsivePX(12),
+      color: '#CBF2FA',
+      rotate: 0,
+      show: true,
+      interval: 0,
+      hideOverlap: false,
+      margin: calcResponsivePX(14)
     },
     type: "category",
-    data: ["微型企业", "小型企业", "中型企业", "大型企业"]
+    data: ["第一产业", "第二产业", "第三产业"]
   },
   yAxis: {
-    //网格线
+    interval: 50,
     splitLine: {
       show: true,
       lineStyle: {
-        color: ["#A1C7CD"], // 线颜色
-        opacity: 0.2 // 透明度
+        color: ['#A1C7CD'],
+        opacity: 0.2,
+        type: 'solid'
       }
     },
     axisLine: {
-      lineStyle: {
-        color: "#CBF2FA" // 文字颜色
-      }
+      show: false
+    },
+    axisTick: {
+      show: false
     },
     axisLabel: {
-      fontSize: 20, // 设置 x 轴文字大小
-      color: "#CBF2FA" // 可以同时设置文字颜色
+      show: false
     },
     type: "value"
   },
   series: [
     {
-      name: "岗位种类数",
+      name: "企业数",
       type: "bar",
-      showBackground: true,
-      barWidth: 8,
-      data: [93, 231, 413, 451],
-      // 设置柱状图的数值
+      showBackground: false,
+      barWidth: calcResponsivePX(25), // 柱状图宽度也要响应式
+      data: [6, 581, 41],
       label: {
         show: true,
         position: "top",
-        color: "#30DCFF",
-        fontSize: 22
+        color: '#30DCFF',
+        fontSize: calcResponsivePX(14),
+        formatter: function(params) {
+          return params.value + '家';
+        }
       },
       itemStyle: {
-        //渐变色
-        color: {
-          type: "linear",
-          x: 1,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(48, 220, 255, 1)" },
-            { offset: 1, color: "rgba(48, 220, 255, 0.06)" }
-          ]
-        }
-      }
-    },
-    {
-      name: "岗位人员数",
-      type: "bar",
-      showBackground: true,
-      barWidth: 8,
-      data: [451, 2110, 19356, 57083],
-      // 设置柱状图的数值
-      label: {
-        show: true,
-        position: "top",
-        color: "#CBF2FA",
-        fontSize: 22
-      },
-      itemStyle: {
-        //渐变色
-        color: {
-          type: "linear",
-          x: 1,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(203, 242, 250, 1)" },
-            { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
-          ]
-        }
+        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,116 +1,214 @@
 <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";
-// 引入崇州市地图json数据
+import 'echarts-gl';
+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: [104.684185, 31.473263, 0],
-    count: 0
-  },
-  {
-    name: "崇州",
-    value: [103.68055, 30.634619, 0],
-    count: 0
-  },
-  {
-    name: "武侯",
-    value: [104.04777, 30.648289, 0],
-    count: 0
-  },
-  {
-    name: "成华",
-    value: [104.108719, 30.665854, 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) {
-      if (params.seriesType === "scatter") {
-        return `${params.name}<br/>合作社数量：${params.data.count}`;
+      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
       }
     },
-  geo: [
-    {
-      type: "map",
+    geo3D: {
+      type: "map3D",
       map: "sichuan",
+      regionHeight: 6,
+      boxHeight: 2,
       roam: true,
-      zoom: 1,
       label: {
-        // show: true,
+        show: false,
         color: "#fff",
-        fontSize: 12,
-        fontWeight: "bold",
-        emphasis: {
-          show: true, // 确保悬停时标签显示
-          color: "#ffff00", // 鼠标悬停时的文字颜色
-          fontSize: 14, // 鼠标悬停时的文字大小
-          fontWeight: "bold" // 鼠标悬停时的文字粗细
-        }
+        fontSize: 10,
+        fontWeight: "bold"
       },
       itemStyle: {
-        normal: {
-          color: "#121516",
-          borderColor: "#30DCFF", // 地图区域描边颜色
-          borderWidth: 2 // 地图区域描边宽度
+        color: "rgba(27,129,150,0.18)",
+        borderColor: "#61cfff",
+        borderWidth: 2,
+        opacity: 0.3
       },
       emphasis: {
-          color: "#2d5565", // 鼠标悬停时的地图填充颜色
-          borderColor: "#30DCFF", // 地图区域描边颜色
-          borderWidth: 2 // 地图区域描边宽度
-        }
-      }
-    }
-  ],
+        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
+        },
+        ambient: { intensity: 0.35 }
+      },
+      shading: "lambert",
+      viewControl: {
+        distance: 110,
+        alpha: 45,
+        beta: 10
+      },
+      groundPlane: { show: false }
+    },
     series: [
       {
-      name: "城市点位",
-      type: "scatter", // 散点图类型
-      coordinateSystem: "geo", // 使用地理坐标系
-      data: initialPoints,
-      symbolSize: function (val) {
-        // 根据数值大小动态调整点的大小
-        // return val[2] / 6;
-        return 50;
-      },
+        name: "城市点位(3D)",
+        type: "scatter3D",
+        coordinateSystem: "geo3D",
+        data: pointsWithRandomHeights.map(p => ({
+          name: p.name,
+          value: p.value,
+          count: p.count,
+          // 关键：使用正确的 label 配置方式
           label: {
-        show: false, // 改为 true 显示标签
-        formatter: "{b}", // 显示城市名称
-        position: "right", // 标签位置在点的上方
-        color: "#fff", // 标签颜色
-        fontSize: 16, // 字体大小
-        fontWeight: "bold" // 字体粗细
-      },
-      symbol: "image://" + pointImage // 使用本地图片作为标记
+            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: calcResponsivePX(12), // 增大符号尺寸
+        itemStyle: { color: "#FFBE34" },
+        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

@@ -0,0 +1,506 @@
+<template>
+  <!-- 页面的 HTML 模板部分 -->
+  <div>
+    <!-- 表头保持固定 -->
+    <ul class="header-list">
+      <li class="singleBackground topLi">
+        <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 scrollData" :key="index"
+            :class="{ 'singleBackground': index % 2 == 0, 'evenBackground': index % 2 == 1 }">
+            <div>{{ item.zone }}</div>
+            <div>{{ item.count }}人</div>
+            <div>{{ item.proportion }}%</div>
+          </li>
+        </div>
+        <!-- 复制一份数据用于无缝滚动 -->
+        <div v-html="copyHtml"></div>
+      </div>
+    </div>
+  </div>
+  <div class="carousel-modal-container" v-if="visible">
+    <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:20vw;">
+            <img src="@/assets/images/ms/scxc2.png" class="carousel-image">
+          </div>
+        </div>
+      </el-carousel-item>
+
+      <el-carousel-item>
+        <div class="carousel-item-content">
+          <div class="carousel-item-title">
+            批量化规模化送工现场1
+          </div>
+          <div style="height:20vw;">
+            <img src="@/assets/images/ms/sgxc.jpg" class="carousel-image">
+          </div>
+        </div>
+      </el-carousel-item>
+      <el-carousel-item>
+        <div class="carousel-item-content">
+          <div class="carousel-item-title">
+            批量化规模化送工现场2
+          </div>
+          <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: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>
+
+</template>
+
+<script setup>
+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,
+    "proportion": 29.87
+  },
+  {
+    "zone": "省外",
+    "count": 1490,
+    "proportion": 15.24
+  },
+  {
+    "zone": "四川 - 南充",
+    "count": 598,
+    "proportion": 6.12
+  },
+  {
+    "zone": "四川 - 内江",
+    "count": 473,
+    "proportion": 4.84
+  },
+  {
+    "zone": "四川 - 乐山",
+    "count": 421,
+    "proportion": 4.31
+  },
+  {
+    "zone": "四川 - 眉山",
+    "count": 386,
+    "proportion": 3.95
+  },
+  {
+    "zone": "四川 - 巴中",
+    "count": 373,
+    "proportion": 3.82
+  },
+  {
+    "zone": "四川 - 宜宾",
+    "count": 313,
+    "proportion": 3.2
+  },
+  {
+    "zone": "四川 - 达州",
+    "count": 313,
+    "proportion": 3.2
+  },
+  {
+    "zone": "四川 - 广元",
+    "count": 300,
+    "proportion": 3.07
+  },
+  {
+    "zone": "四川 - 泸州",
+    "count": 294,
+    "proportion": 3.01
+  },
+  {
+    "zone": "四川 - 遂宁",
+    "count": 278,
+    "proportion": 2.84
+  },
+  {
+    "zone": "四川 - 自贡",
+    "count": 276,
+    "proportion": 2.82
+  },
+  {
+    "zone": "四川 - 资阳",
+    "count": 272,
+    "proportion": 2.78
+  },
+  {
+    "zone": "四川 - 绵阳",
+    "count": 231,
+    "proportion": 2.36
+  },
+  {
+    "zone": "四川 - 德阳",
+    "count": 222,
+    "proportion": 2.27
+  },
+  {
+    "zone": "四川 - 凉山",
+    "count": 177,
+    "proportion": 1.81
+  },
+  {
+    "zone": "四川 - 雅安",
+    "count": 166,
+    "proportion": 1.7
+  },
+  {
+    "zone": "四川 - 广安",
+    "count": 162,
+    "proportion": 1.66
+  },
+  {
+    "zone": "四川 - 攀枝花",
+    "count": 54,
+    "proportion": 0.55
+  },
+  {
+    "zone": "四川 - 阿坝",
+    "count": 47,
+    "proportion": 0.48
+  },
+  {
+    "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(60); // 滚动速度
+const copyHtml = ref(''); // 复制的HTML内容
+const scrollItemBox = ref(null); // 滚动项容器引用
+let timer = null;
+
+// 生命周期钩子
+onMounted(() => {
+  if (pieRef.value) {
+    const chart = echarts.init(pieRef.value);
+    chart.setOption(option);
+  }
+
+  // 初始化滚动
+  initScroll();
+});
+
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+// 初始化滚动
+function initScroll() {
+  setTimeout(() => {
+    if (scrollItemBox.value) {
+      copyHtml.value = scrollItemBox.value.innerHTML;
+      startScroll();
+    }
+  }, 100);
+}
+
+// 鼠标移入停止滚动
+function mEnter() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+// 鼠标移出继续滚动
+function mLeave() {
+  startScroll();
+}
+
+// 开始滚动
+function startScroll() {
+  if (timer) return;
+  timer = setInterval(() => {
+    scrollTop.value++;
+    // 获取需要滚动的盒子的高度
+    if (scrollItemBox.value) {
+      const scrollHeight = scrollItemBox.value.offsetHeight;
+      // 当滚动高度大于等于盒子高度时，从头开始滚动
+      if (scrollTop.value >= scrollHeight) {
+        scrollTop.value = 0;
+      }
+    }
+  }, speed.value);
+}
+
+// 关闭弹窗
+function closeModal() {
+  visible.value = false;
+  startScroll();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.carcTitle {
+  height: 1.4vw;
+  line-height: 1.4vw;
+  font-size: 0.8vw;
+  text-align: center;
+  color: #c4f3fe;
+  background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat center;
+  background-size: auto 100%;
+  margin-top: 0.7vw;
+}
+
+.pieMain {
+  position: relative;
+
+  .pieBox {
+    margin: 0 auto;
+    width: 7.6vw;
+    height: 7.6vw;
+    // border: 1px solid #fff;
+    margin-top: 0.5vw;
+    background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat center;
+    background-size: 100%;
+  }
+
+  .pieTitle {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    text-align: center;
+    z-index: 10;
+    margin-top: -0.5vw;
+  }
+}
+
+/* 通用列表样式 - 适用于表头和数据行 */
+.header-list,
+.scroll_list>div {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+/* 统一的列表项基础样式 */
+.header-list li,
+.scroll_list li {
+  font-size: 0.9vw;
+  color: #C4F3FE;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 2vw;
+  padding: 0 0.8vw;
+  border-radius: 0.104vw;
+  transition: all 0.2s ease;
+  list-style: none;
+  margin: 0;
+
+  >div {
+    height: 100%;
+    line-height: 2vw;
+    padding: 0 0.2vw;
+  }
+
+  >div:first-child {
+    width: 50%;
+    text-align: left;
+    font-weight: bold;
+  }
+
+  >div:nth-child(2) {
+    width: 25%;
+    text-align: center;
+  }
+
+  >div:nth-child(3) {
+    width: 25%;
+    text-align: right;
+    font-weight: bold;
+  }
+}
+
+/* 数据行的悬停效果 */
+.scroll_list li {
+  &:hover {
+    background-color: rgba(203, 242, 250, 0.1);
+  }
+}
+
+/* 滚动容器样式 */
+.scroll_parent_box {
+  width: 100%;
+  height: 15vw;
+  /* 减去表头高度 */
+  overflow: hidden;
+  position: relative;
+}
+
+/* 滚动列表容器 */
+.scroll_list {
+  transition: all 0ms ease-in 0s;
+  width: 100%;
+}
+
+.singleBackground {
+  background-color: rgba(22, 65, 85, 0.5);
+}
+
+.evenBackground {
+  background-color: rgba(22, 65, 85, 0.9);
+}
+
+.topLi {
+  /* 保留表头特有的样式，但使用与数据行一致的基础样式 */
+  border: 0.026vw solid;
+  border-image: linear-gradient(180deg, rgba(203, 242, 250, 0), rgba(203, 242, 250, 0.8)) 1 1;
+}
+
+/* 统一背景色样式 - 表头和数据行使用相同的背景色机制 */
+.singleBackground {
+  background-color: rgba(22, 65, 85, 0.5);
+}
+
+.evenBackground {
+  background-color: rgba(22, 65, 85, 0.9);
+}
+
+::deep(.el-dialog__header) {
+  display: none !important;
+}
+
+/* 轮播弹窗容器样式 */
+.carousel-modal-container {
+  position: fixed;
+  top: 66%;
+  left: 64%;
+  transform: translate(-50%, -50%);
+  width: 28vw;
+  border-radius: 4px 4px 4px 4px;
+  z-index: 100;
+  border-radius: 0.104vw;
+  padding: 0.26vw;
+  height: 28vw;
+
+  .close-btn {
+   position: absolute;
+   bottom: 0.6vw;
+   left: 50%;
+   transform: translateX(-50%);
+   width: 2vw;
+   height: 2vw;
+   background-color: #171E22;
+   border: 1px solid rgba(203, 242, 250, 0.2);
+   border-radius: 50%;
+   color: #C4F3FE;
+   font-size: 1vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   cursor: pointer;
+   z-index: 101;
+ }
+
+  .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%);
+      //opacity: 0.5;
+      width: 100%;
+      height: 1.1vw;
+      margin-top: 1vw;
+      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: 28vw !important;
+}
+</style>

src/views/recruitment/components/cygjbl.vue

@@ -8,7 +8,11 @@
         </li>
       </ul>
       <ul class="inright items tc">
-        <li class="child relative right_child" v-for="it in data.right" :key="it">
+        <li
+          class="child relative right_child"
+          v-for="it in data.right"
+          :key="it"
+        >
           <div class="text">{{ it.label }}</div>
           <div class="num">{{ it.per }}</div>
         </li>
@@ -21,12 +25,12 @@
 import { reactive, ref } from "vue";
 const data = reactive({
   left: [
-    { label: "岗位需求人数", per: "12%" },
-    { label: "就业意向人数", per: "80%" },
+    { label: "岗位需求人数", per: "7.9万人" },
+    { label: "就业意向人数", per: "5.8万人" }
   ],
   right: [
-    { label: "岗位需求增幅", per: "78.3%" },
-    { label: "求职人员增幅", per: "23.1%" },
+    { label: "岗位需求增幅", per: "17.04%" },
+    { label: "求职人员增幅", per: "20.38%" }
   ]
 });
 </script>
@@ -45,8 +49,9 @@ const data = reactive({
 
 .inbox {
   width: 19vw;
-  height: 100%;
-  margin-top: 2vw;
+  height: 14vw;
+  padding-top: 2vw;
+  box-sizing:border-box;
   background: url("~@/assets/recruitment/jy.png") no-repeat;
   background-size: 100% 100%;
   img {
@@ -54,7 +59,6 @@ const data = reactive({
     height: 100%;
   }
 
-
   .items {
     width: 50%;
     height: 70%;
@@ -62,8 +66,6 @@ const data = reactive({
     .child {
       height: 100px;
       background-size: 100% 100%;
-
-
     }
 
     .left_child {
@@ -83,12 +85,11 @@ const data = reactive({
         margin-left: 1.5vw;
         font-family: "YSBTH";
         white-space: nowrap;
-        font-size: 1vw;
-        @include textColor(#5cb2f7, #48FAFC);
+        font-size: 0.9vw;
+        @include textColor(#5cb2f7, #48fafc);
       }
 
       &:nth-child(1) {
-        margin-left: 3vw;
         background: url("~@/assets/recruitment/left-one.svg") no-repeat;
       }
 
@@ -99,6 +100,7 @@ const data = reactive({
 
     .right_child {
       background-size: 100% 100%;
+      margin-top: -1vw;
 
       .text {
         margin-right: 1.5vw;
@@ -113,17 +115,22 @@ const data = reactive({
         margin-right: 1.5vw;
         font-family: "YSBTH";
         white-space: nowrap;
-        font-size: 1vw;
-        @include textColor(#5cb2f7, #ffffff);
+        font-size: 0.9vw;
+        @include textColor(#5cb2f7, #48fafc);
       }
 
       &:nth-child(1) {
-        margin-right: 3vw;
-        background: url("~@/assets/recruitment/right-one.svg") no-repeat right center;
+        background: url("~@/assets/recruitment/right-one.svg") no-repeat right;
+        .text {
+          margin-top: 34px;
+        }
       }
 
       &:nth-child(2) {
-        background: url("~@/assets/recruitment/right-two.svg") no-repeat right center;
+        background: url("~@/assets/recruitment/right-two.svg") no-repeat right;
+        .text {
+          margin-top: 34px;
+        }
       }
     }
   }

src/views/recruitment/components/enterpriseEmploymentCard.vue

@@ -33,6 +33,14 @@ const props = defineProps({
       count: "",
       class: ""
     })
+  },
+  type3: {
+    type: Object,
+    default: () => ({
+      title: "",
+      count: "",
+      class: ""
+    })
   }
 });
 </script>
@@ -53,9 +61,9 @@ const props = defineProps({
         <div class="title">{{ type2.title }}</div>
         <div class="count">{{ type2.count }}</div>
       </div>
-      <div :class="type2.class">
-        <div class="title">{{ type2.title }}</div>
-        <div class="count">{{ type2.count }}</div>
+      <div :class="type3.class">
+        <div class="title">{{ type3.title }}</div>
+        <div class="count">{{ type3.count }}</div>
       </div>
     </div>
 
@@ -74,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;
@@ -95,6 +104,7 @@ const props = defineProps({
       color: #ffffff;
       margin-bottom: 0.46875vw;
       font-size: 0.729vw;
+      font-weight:700 ;
     }
 
     .modelItem1 {
@@ -120,8 +130,6 @@ const props = defineProps({
       padding-top: 0.8vw;
       padding-left: 3.2vw;
       text-align: left;
-      // background: url("~@/assets/recruitment/model2.svg") no-repeat;
-      // background-size: auto 100%;
       width: 7vw;
       height: 4.167vw;
     }

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
@@ -20,9 +21,10 @@
           indicator-position="none"
           :autoplay="true"
         >
-          <el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
           <el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
-          <el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
+            <el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
+
+          <!-- <el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item> -->
         </el-carousel>
       </enterprise-employment-card>
       <!-- 左2 -->
@@ -32,12 +34,13 @@
         :description="cardTwoInfo.description"
         :type1="cardTwoInfo.type1"
         :type2="cardTwoInfo.type2"
+        :type3="cardTwoInfo.type3"
         style="margin-top: 0.625vw"
       >
         <template v-slot:header>
           <div style="margin-top:1vw" class="header_bg">产业求人倍率</div>
         </template>
-        <div class="header_bg">就业生态数据</div>
+        <div class="header_bg" style="margin-top:1vw">就业生态数据</div>
         <costom-caed />
       </enterprise-employment-card>
     </div>
@@ -51,50 +54,46 @@
     >
       <!-- 右1 -->
              <enterprise-employment-card
+        :title="cardFourInfo.title"
+        :description="cardFourInfo.description"
+        :type1="cardFourInfo.type1"
+        :type2="cardFourInfo.type2"
+      >
+<!--        <el-carousel-->
+<!--          :interval="8000"-->
+<!--          type="card"-->
+<!--          height="17vw"-->
+<!--          indicator-position="none"-->
+<!--          :autoplay="true"-->
+<!--        >-->
+          <!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
+          <div class="isVisibleImg"><LaborSystemTwo /></div>
+          <!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
+          <!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
+<!--        </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"
       >
-        <el-carousel
-          :interval="8000"
-          type="card"
-          height="17vw"
-          indicator-position="none"
-          :autoplay="true"
-        >
-          <el-carousel-item><CollegeTalentsOne /></el-carousel-item>
-          <el-carousel-item><CollegeTalentsTwo /></el-carousel-item>
-          <!-- <el-carousel-item><CollegeTalentsThree /></el-carousel-item> -->
-        </el-carousel>
+        <template v-slot:header>
+          <div class="header_bg" style="margin-top:1vw">近2个月保供入职人员分析</div>
+        </template>
+      <ListView/>
+
+
       </enterprise-employment-card>
       <!-- 右2 -->
-      <enterprise-employment-card
-        :title="cardFourInfo.title"
-        :description="cardFourInfo.description"
-        :type1="cardFourInfo.type1"
-        :type2="cardFourInfo.type2"
-        :type3="cardFourInfo.type3"
-        style="margin-top: 0.625vw"
-      >
-        <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>
-          <!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
-          <!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
-        </el-carousel>
-      </enterprise-employment-card>
+
     </div>
     <div class="last_icon"></div>
     <!-- 弹窗 -->
     <HomeDialogInfo v-model="dialogShow" />
   </div>
+  </div>
 </template>
 <script>
 export default {
@@ -115,7 +114,8 @@ import Carousel from "@/views/recruitment/components/carousel.vue";
 import EnterpriseEmploymentOne from "./card/EnterpriseEmploymentOne.vue";
 import EnterpriseEmploymentTwo from "./card/EnterpriseEmploymentTwo.vue";
 import EnterpriseEmploymentThree from "./card/EnterpriseEmploymentThree.vue";
-import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
+// import CollegeTalentsOne from "./card/CollegeTalentsOne.vue";
+import ListView from "./card/ListView.vue";
 import CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
 import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
 import LaborSystemOne from "./card/LaborSystemOne.vue";
@@ -141,8 +141,8 @@ const asideMeun = reactive({
   ]
 });
 const cardOneInfo = {
-  title: "企业用工结构分布",
-  description: "7万家企业(含个体工商户)",
+  title: "服务企业用工结构分布",
+  description: "",
   type1: {
     title: "岗位种类数",
     count: "765个",
@@ -158,31 +158,31 @@ 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: "高校人才供给能力",
-  description: "4000+毕业生",
+  title: "重点企业保供案例",
+  // description: "4000+毕业生",
   type1: {
-    title: "学校数",
-    count: "7",
+    title: "招募总人数",
+    count: "9775",
     class: "modelItem2"
   },
   type2: {
-    title: "促就业人数",
-    count: "2980",
+    title: "企业总人数(10/9)",
+    count: "38448",
     class: "modelItem2"
   }
 };
@@ -190,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"
   }
 };
@@ -237,6 +237,11 @@ function getWebSocketData() {
 .transition {
   transition: all 0.5s;
 }
+
+.isVisibleImg.el-carousel__item {
+  background: none !important;
+}
+
 .el-carousel {
   margin-top: 0.5vw;
 }
@@ -264,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>