兴蜀大屏轮播组件部分提交

src/main.js

@@ -1,8 +1,6 @@
 import * as ElIcons from "@element-plus/icons-vue";
-import Axios from 'axios'
-import {
-  createApp
-} from "vue";
+import Axios from "axios";
+import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
@@ -11,21 +9,21 @@ import plugins from "./plugins";
 import "./assets/css/element-plus.scss";
 import "./assets/css/layout.scss";
 import "./assets/css/pulic.scss";
-import ELMessage from 'element-plus'
-import InfiniteScroll from './utils/lazyLoad'
-
+import ELMessage from "element-plus";
+import InfiniteScroll from "./utils/lazyLoad";
 
 // echart图表
-// import * as echarts from 'echarts'
+// import * as echarts from "echarts";
 // Vue.prototype.$echarts = echarts
 const app = createApp(App);
+
 //注册自定义指令
-app.use(InfiniteScroll)
+app.use(InfiniteScroll);
 Object.keys(ElIcons).forEach((key) => {
   //全局注册 element 图标
   app.component(key, ElIcons[key]);
 });
-app.config.globalProperties.$http = axios
+app.config.globalProperties.$http = axios;
 
 //告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能
 // import "default-passive-events";
@@ -46,13 +44,8 @@ import installFilter from "@/filters";
 //事件总线
 import mitt from "mitt";
 
-import {
-  resetForm
-} from "@/utils/validate";
-import {
-  getDict,
-  setCascader
-} from '@/utils/dict';
+import { resetForm } from "@/utils/validate";
+import { getDict, setCascader } from "@/utils/dict";
 import axios from "axios";
 
 //挂载全局方法
@@ -62,7 +55,6 @@ app.config.globalProperties.$message = ELMessage; //element提示组件
 app.config.globalProperties.$set = setCascader; //设置级联选择器回显
 app.config.globalProperties.mittBus = new mitt(); //配置事件总线
 
-
 installElementPlus(app);
 installFilter(app);
 installDirective(app);

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter,createWebHashHistory } from "vue-router";
+import { createRouter, createWebHashHistory } from "vue-router";
 import store from "@/store";
 
 // import Home from '../views/Home.vue'
@@ -24,32 +24,32 @@ export const publicRoutes = [
     path: "/",
     name: "/home",
     component: () => import("@/views/largeScreen/index"),
-    meta: {},
+    meta: {}
   },
   {
     path: "/recruitment",
     name: "/recruitment",
     component: () => import("@/views/recruitment/index"),
-    meta: {},
+    meta: {}
   },
   {
     path: "/industry",
     name: "/industry",
     component: () => import("@/views/portraitScreen/index"),
-    meta: {},
+    meta: {}
   },
   {
     path: "/cpp",
     name: "/cpp",
     component: () => import("@/views/cpp/index"),
-    meta: {},
+    meta: {}
   },
   {
     path: "/mapCount",
     name: "/mapCount",
     component: () => import("@/views/mapCount/index"),
-    meta: {},
-  },
+    meta: {}
+  }
 ];
 
 const router = createRouter({
@@ -58,7 +58,7 @@ const router = createRouter({
 });
 //初始化路由表
 export function resetRouter() {
-  if (store.getters ?.routeReady && store.getters ?.userInfo ?.permission ?.menus) {
+  if (store.getters?.routeReady && store.getters?.userInfo?.permission?.menus) {
     const menus = store.getters.userInfo.permission.menus;
     menus.forEach((menu) => {
       router.removeRoute(menu);

src/views/manpowerScreen/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="color: #fff">额哥几个金额几个经二路佳乐家饿了就</div>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  getCurrentInstance,
+  onBeforeUnmount
+} from "vue";
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+@import "@/assets/css/manpowerScreen.scss";
+</style>

src/views/recruitment/card/CollegeTalentsOne.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- 页面的 HTML 模板部分 -->
+  <div class="custom-slide">
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第一产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第二产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第三产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+
+// 响应式数据
+const count = ref(0);
+const state = reactive({
+  name: "Vue 3"
+});
+
+// 计算属性
+const doubledCount = computed(() => count.value * 2);
+
+// 方法
+const increment = () => {
+  count.value++;
+};
+
+// 生命周期钩子
+onMounted(() => {
+  console.log("组件已挂载");
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-slide {
+  padding: 0.9vw 0.521vw;
+
+  .custom-slide-inner {
+    width: 15.99vw;
+    height: 4.323vw;
+    background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center
+      center;
+    background-size: cover;
+    margin-bottom: 1.042vw;
+
+    .custom-slide-content {
+      color: #cbf2fa;
+      font-size: 0.625vw;
+      height: 4.323vw;
+      padding: 0.417vw 1.25vw 0 5.677vw;
+
+      .title {
+        margin-bottom: 0.26vw;
+      }
+
+      .col {
+        margin-top: 0.78125vw;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/views/recruitment/card/CollegeTalentsThree.vue

@@ -0,0 +1,124 @@
+<template>
+  <div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseThreeRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "17%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: ["制造业", "服务业", "建筑业", "批发和零售业"]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "岗位种类数",
+      type: "line",
+      showBackground: true,
+      barWidth: 8,
+      data: [70, 62, 52, 41],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      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: "line",
+      showBackground: true,
+      barWidth: 8,
+      data: [54, 32, 45, 18],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#CBF2FA"
+      },
+      itemStyle: {
+        //渐变色
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(178, 217, 223, 1)" }
+            // { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (enterpriseThreeRef.value) {
+    const chart = echarts.init(enterpriseThreeRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/recruitment/card/CollegeTalentsTwo.vue

@@ -0,0 +1,124 @@
+<template>
+  <div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseTwoRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "15%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: ["微型企业", "小型企业", "中型企业", "大型企业"]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "岗位种类数",
+      type: "bar",
+      showBackground: true,
+      barWidth: 8,
+      data: [76, 32, 87, 65],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      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: [34, 15, 45, 24],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#CBF2FA"
+      },
+      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)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (enterpriseTwoRef.value) {
+    const chart = echarts.init(enterpriseTwoRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/recruitment/card/EnterpriseEmploymentOne.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- 页面的 HTML 模板部分 -->
+  <div class="custom-slide">
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第一产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第二产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="custom-slide-inner">
+      <div class="custom-slide-content tc">
+        <div>第三产业需求</div>
+        <div class="flex just-between align-center col">
+          <div class="">
+            <div class="title">岗位种类数</div>
+            <div>480人</div>
+          </div>
+          <div class="">
+            <div class="title">岗位人员数</div>
+            <div>480人</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+
+// 响应式数据
+const count = ref(0);
+const state = reactive({
+  name: "Vue 3"
+});
+
+// 计算属性
+const doubledCount = computed(() => count.value * 2);
+
+// 方法
+const increment = () => {
+  count.value++;
+};
+
+// 生命周期钩子
+onMounted(() => {
+  console.log("组件已挂载");
+});
+</script>
+
+<style lang="scss" scoped>
+.custom-slide {
+  padding: 0.9vw 0.521vw;
+
+  .custom-slide-inner {
+    width: 15.99vw;
+    height: 4.323vw;
+    background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center
+      center;
+    background-size: cover;
+    margin-bottom: 1.042vw;
+
+    .custom-slide-content {
+      color: #cbf2fa;
+      font-size: 0.625vw;
+      height: 4.323vw;
+      padding: 0.417vw 1.25vw 0 5.677vw;
+
+      .title {
+        margin-bottom: 0.26vw;
+      }
+
+      .col {
+        margin-top: 0.78125vw;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>

src/views/recruitment/card/EnterpriseEmploymentThree.vue

@@ -0,0 +1,124 @@
+<template>
+  <div ref="enterpriseThreeRef" style="width: 17vw; height: 17vw"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseThreeRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "17%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: ["制造业", "服务业", "建筑业", "批发和零售业"]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "岗位种类数",
+      type: "line",
+      showBackground: true,
+      barWidth: 8,
+      data: [70, 62, 52, 41],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      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: "line",
+      showBackground: true,
+      barWidth: 8,
+      data: [54, 32, 45, 18],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#CBF2FA"
+      },
+      itemStyle: {
+        //渐变色
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "rgba(178, 217, 223, 1)" }
+            // { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (enterpriseThreeRef.value) {
+    const chart = echarts.init(enterpriseThreeRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/recruitment/card/EnterpriseEmploymentTwo.vue

@@ -0,0 +1,124 @@
+<template>
+  <div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
+</template>
+
+<script setup>
+// Vue 3 Composition API 的 setup 语法糖
+// 在这里直接编写响应式数据和方法，无需返回
+import { ref, reactive, computed, onMounted } from "vue";
+import * as echarts from "echarts";
+const enterpriseTwoRef = ref(null);
+const option = {
+  // 设置图形位置
+  grid: {
+    top: "15%",
+    left: "15%",
+    right: "5%",
+    bottom: "10%"
+  },
+  // 设置图例
+  legend: {
+    itemWidth: 10, // 方块宽度
+    itemHeight: 10, // 方块高度
+    textStyle: {
+      color: "#B2D9DF" // 文字颜色
+    },
+    x: "center", // 图例在左（left）、右（right）、居中（center）、100px
+    y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
+    padding: [15, 50, 0, 0] // 图例[距上右下左方距离
+  },
+  xAxis: {
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+
+    type: "category",
+    data: ["微型企业", "小型企业", "中型企业", "大型企业"]
+  },
+  yAxis: {
+    //网格线
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ["#A1C7CD"], // 线颜色
+        opacity: 0.2 // 透明度
+      }
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#CBF2FA" // 文字颜色
+      }
+    },
+    type: "value"
+  },
+  series: [
+    {
+      name: "岗位种类数",
+      type: "bar",
+      showBackground: true,
+      barWidth: 8,
+      data: [76, 32, 87, 65],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#30DCFF"
+      },
+      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: [34, 15, 45, 24],
+      // 设置柱状图的数值
+      label: {
+        show: true,
+        position: "top",
+        color: "#CBF2FA"
+      },
+      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)" }
+          ]
+        }
+      }
+    }
+  ]
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (enterpriseTwoRef.value) {
+    const chart = echarts.init(enterpriseTwoRef.value);
+    // 设置option
+    chart.setOption(option);
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/recruitment/components/carousel.vue

@@ -1,68 +1,62 @@
 <template>
   <div class="swiper-container">
     <div class="swiper-wrapper">
-      <div
-        class="swiper-slide"
-        :class="getSlideClass(index)"
-        v-for="(slide, index) in slides"
-        :key="index"
-        :style="getSlideStyle(index)"
-      >
+      <div class="swiper-slide">
         <!-- 使用具名插槽传递每个slide的内容和索引 -->
         <div class="slide-content">
           <div class="slide-image">
-            <slot name="slide" :slide="slide" :index="index" />
+            <slot name="slide" />
           </div>
-<!--            <div class="slide-text">-->
-<!--              <h3>{{ slide.title }}</h3>-->
-<!--              <p>{{ slide.description }}</p>-->
-<!--            </div>-->
+          <!-- <div class="slide-text">
+            <h3>{{ slide.title }}</h3>
+            <p>{{ slide.description }}</p>
+          </div> -->
         </div>
       </div>
     </div>
 
-<!--    <div class="swiper-controls">-->
-<!--      <button class="swiper-button" @click="prevSlide">←</button>-->
-<!--      <button class="swiper-button" @click="nextSlide">→</button>-->
-<!--    </div>-->
+    <!-- <div class="swiper-controls">
+      <button class="swiper-button" @click="prevSlide">←</button>
+      <button class="swiper-button" @click="nextSlide">→</button>
+    </div> -->
 
-<!--    <div class="swiper-pagination">-->
-<!--      <div-->
-<!--        class="pagination-bullet"-->
-<!--        v-for="(slide, index) in slides"-->
-<!--        :key="index"-->
-<!--        :class="{ active: currentIndex === index }"-->
-<!--        @click="goToSlide(index)"-->
-<!--      ></div>-->
-<!--    </div>-->
+    <!-- <div class="swiper-pagination">
+      <div
+        class="pagination-bullet"
+        v-for="(slide, index) in slides"
+        :key="index"
+        :class="{ active: currentIndex === index }"
+        @click="goToSlide(index)"
+      ></div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
+import { defineComponent, onMounted, onBeforeUnmount, ref } from "vue";
 
 export default defineComponent({
-  name: 'Carousel',
+  name: "Carousel",
   props: {
     slides: {
       type: Array,
       required: true,
       default: () => [
         {
-          title: '左侧卡片',
-          description: '淡入效果从左侧进入',
-          image: 'https://via.placeholder.com/600x400/3498db/ffffff?text=Left'
-        },
-        {
-          title: '中间卡片',
-          description: '淡入效果居中放大',
-          image: 'https://via.placeholder.com/600x400/e74c3c/ffffff?text=Center'
-        },
-        {
-          title: '右侧卡片',
-          description: '淡入效果从右侧进入',
-          image: 'https://via.placeholder.com/600x400/2ecc71/ffffff?text=Right'
+          title: "左侧卡片",
+          description: "淡入效果从左侧进入",
+          image: "https://via.placeholder.com/600x400/3498db/ffffff?text=Left"
         }
+        // {
+        //   title: "中间卡片",
+        //   description: "淡入效果居中放大",
+        //   image: "https://via.placeholder.com/600x400/e74c3c/ffffff?text=Center"
+        // },
+        // {
+        //   title: "右侧卡片",
+        //   description: "淡入效果从右侧进入",
+        //   image: "https://via.placeholder.com/600x400/2ecc71/ffffff?text=Right"
+        // }
       ]
     },
     autoPlayInterval: {
@@ -71,62 +65,71 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const currentIndex = ref(0)
-    const autoPlayTimer = ref(null)
+    const currentIndex = ref(0);
+    const autoPlayTimer = ref(null);
 
     const getSlideClass = (index) => {
-      const diff = index - currentIndex.value
-      if (diff === 0) return 'center'
-      if (diff === -1 || (currentIndex.value === 0 && index === props.slides.length - 1)) return 'left'
-      if (diff === 1 || (currentIndex.value === props.slides.length - 1 && index === 0)) return 'right'
-      return ''
-    }
+      const diff = index - currentIndex.value;
+      if (diff === 0) return "center";
+      if (
+        diff === -1 ||
+        (currentIndex.value === 0 && index === props.slides.length - 1)
+      )
+        return "left";
+      if (
+        diff === 1 ||
+        (currentIndex.value === props.slides.length - 1 && index === 0)
+      )
+        return "right";
+      return "";
+    };
 
     const getSlideStyle = (index) => {
-      const diff = index - currentIndex.value
+      const diff = index - currentIndex.value;
       if (
         Math.abs(diff) > 1 &&
         !(currentIndex.value === 0 && index === props.slides.length - 1) &&
         !(currentIndex.value === props.slides.length - 1 && index === 0)
       ) {
-        return { display: 'none' }
+        return { display: "none" };
       }
-      return {}
-    }
+      return {};
+    };
 
     const prevSlide = () => {
-      currentIndex.value = (currentIndex.value - 1 + props.slides.length) % props.slides.length
-      resetAutoPlay()
-    }
+      currentIndex.value =
+        (currentIndex.value - 1 + props.slides.length) % props.slides.length;
+      resetAutoPlay();
+    };
 
     const nextSlide = () => {
-      currentIndex.value = (currentIndex.value + 1) % props.slides.length
-      resetAutoPlay()
-    }
+      currentIndex.value = (currentIndex.value + 1) % props.slides.length;
+      resetAutoPlay();
+    };
 
     const goToSlide = (index) => {
-      currentIndex.value = index
-      resetAutoPlay()
-    }
+      currentIndex.value = index;
+      resetAutoPlay();
+    };
 
     const startAutoPlay = () => {
-      pauseAutoPlay()
+      pauseAutoPlay();
       autoPlayTimer.value = window.setInterval(() => {
-        nextSlide()
-      }, props.autoPlayInterval)
-    }
+        nextSlide();
+      }, props.autoPlayInterval);
+    };
 
     const pauseAutoPlay = () => {
       if (autoPlayTimer.value) {
-        clearInterval(autoPlayTimer.value)
-        autoPlayTimer.value = null
+        clearInterval(autoPlayTimer.value);
+        autoPlayTimer.value = null;
       }
-    }
+    };
 
     const resetAutoPlay = () => {
-      pauseAutoPlay()
-      startAutoPlay()
-    }
+      pauseAutoPlay();
+      startAutoPlay();
+    };
 
     onMounted(() => {
       // const container = document.querySelector('.swiper-container')
@@ -135,16 +138,16 @@ export default defineComponent({
       //   container.addEventListener('mouseleave', startAutoPlay)
       // }
       // startAutoPlay()
-    })
+    });
 
     onBeforeUnmount(() => {
-      const container = document.querySelector('.swiper-container')
+      const container = document.querySelector(".swiper-container");
       if (container) {
-        container.removeEventListener('mouseenter', pauseAutoPlay)
-        container.removeEventListener('mouseleave', startAutoPlay)
+        container.removeEventListener("mouseenter", pauseAutoPlay);
+        container.removeEventListener("mouseleave", startAutoPlay);
       }
-      pauseAutoPlay()
-    })
+      pauseAutoPlay();
+    });
 
     return {
       currentIndex,
@@ -153,9 +156,9 @@ export default defineComponent({
       prevSlide,
       nextSlide,
       goToSlide
-    }
+    };
   }
-})
+});
 </script>
 
 <style scoped>
@@ -168,13 +171,13 @@ export default defineComponent({
 .swiper-container {
   width: 17.03125vw;
   position: relative;
-  //padding: 2.083vw 0;
+  /* padding: 2.083vw 0; */
 }
 
 .swiper-wrapper {
   display: flex;
   position: relative;
-  //height: 400px;
+  /* height: 400px; */
 }
 
 .swiper-slide {

src/views/recruitment/components/costomCaed.vue

@@ -1,95 +1,95 @@
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted } from "vue";
 
 const state = reactive({
   tabs: [
-    '公共服务站点 300', '培训机构 130', '咨询机构 220',
-    '教育中心 150', '职业介绍所 180', '就业服务中心 210'
+    "公共服务站点 300",
+    "培训机构 130",
+    "咨询机构 220",
+    "教育中心 150",
+    "职业介绍所 180",
+    "就业服务中心 210"
   ],
   activeIndex: 0
-})
+});
 
-const scrollContainer = ref(null)
-const canScrollLeft = ref(false)
-const canScrollRight = ref(false)
+const scrollContainer = ref(null);
+const canScrollLeft = ref(false);
+const canScrollRight = ref(false);
 
 // 检查滚动状态
 const checkScroll = () => {
   if (scrollContainer.value) {
-    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value
-    canScrollLeft.value = scrollLeft > 0
-    canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer.value;
+    canScrollLeft.value = scrollLeft > 0;
+    canScrollRight.value = scrollLeft < scrollWidth - clientWidth - 1;
   }
-}
+};
 
 // 滚动到指定位置
 const scrollTo = (direction) => {
-  if (!scrollContainer.value) return
+  if (!scrollContainer.value) return;
 
-  const container = scrollContainer.value
-  const scrollAmount = 300 // 每次滚动量
+  const container = scrollContainer.value;
+  const scrollAmount = 300; // 每次滚动量
 
-  if (direction === 'left') {
-    container.scrollBy({ left: -scrollAmount, behavior: 'smooth' })
+  if (direction === "left") {
+    container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
   } else {
-    container.scrollBy({ left: scrollAmount, behavior: 'smooth' })
+    container.scrollBy({ left: scrollAmount, behavior: "smooth" });
   }
 
   // 滚动结束后检查状态
-  setTimeout(checkScroll, 300)
-}
+  setTimeout(checkScroll, 300);
+};
 
 // 点击标签
 const selectTab = (index) => {
-  state.activeIndex = index
+  state.activeIndex = index;
   // 可选：自动滚动到选中标签
-  scrollToTab(index)
-}
+  scrollToTab(index);
+};
 
 // 滚动到指定标签
 const scrollToTab = (index) => {
-  if (!scrollContainer.value) return
+  if (!scrollContainer.value) return;
 
-  const container = scrollContainer.value
-  const tab = container.children[index]
-  if (!tab) return
+  const container = scrollContainer.value;
+  const tab = container.children[index];
+  if (!tab) return;
 
-  const containerWidth = container.clientWidth
-  const tabLeft = tab.offsetLeft
-  const tabWidth = tab.offsetWidth
+  const containerWidth = container.clientWidth;
+  const tabLeft = tab.offsetLeft;
+  const tabWidth = tab.offsetWidth;
 
   container.scrollTo({
     left: tabLeft - (containerWidth - tabWidth) / 2,
-    behavior: 'smooth'
-  })
-}
+    behavior: "smooth"
+  });
+};
 
 onMounted(() => {
-  checkScroll()
-  window.addEventListener('resize', checkScroll)
-})
+  checkScroll();
+  window.addEventListener("resize", checkScroll);
+});
 </script>
 
 <template>
   <div class="costomCaedWrapper">
     <div class="horizontal-scroll-container">
       <!-- 左侧滚动按钮 -->
-<!--      <button-->
-<!--        class="scroll-button left"-->
-<!--        :class="{ visible: canScrollLeft }"-->
-<!--        @click="scrollTo('left')"-->
-<!--      >-->
-<!--        <svg viewBox="0 0 24 24">-->
-<!--          <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
-<!--        </svg>-->
-<!--      </button>-->
+      <!--      <button-->
+      <!--        class="scroll-button left"-->
+      <!--        :class="{ visible: canScrollLeft }"-->
+      <!--        @click="scrollTo('left')"-->
+      <!--      >-->
+      <!--        <svg viewBox="0 0 24 24">-->
+      <!--          <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/>-->
+      <!--        </svg>-->
+      <!--      </button>-->
 
       <!-- 横向滚动区域 -->
-      <div
-        ref="scrollContainer"
-        class="scroll-area"
-        @scroll="checkScroll"
-      >
+      <div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
         <div
           v-for="(tab, index) in state.tabs"
           :key="index"
@@ -102,24 +102,23 @@ onMounted(() => {
       </div>
 
       <!-- 右侧滚动按钮 -->
-<!--      <button-->
-<!--        class="scroll-button right"-->
-<!--        :class="{ visible: canScrollRight }"-->
-<!--        @click="scrollTo('right')"-->
-<!--      >-->
-<!--        <svg viewBox="0 0 24 24">-->
-<!--          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
-<!--        </svg>-->
-<!--      </button>-->
+      <!--      <button-->
+      <!--        class="scroll-button right"-->
+      <!--        :class="{ visible: canScrollRight }"-->
+      <!--        @click="scrollTo('right')"-->
+      <!--      >-->
+      <!--        <svg viewBox="0 0 24 24">-->
+      <!--          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>-->
+      <!--        </svg>-->
+      <!--      </button>-->
     </div>
 
-    <img class="echart" src="~@/assets/recruitment/echart.svg" alt="">
+    <img class="echart" src="~@/assets/recruitment/echart.svg" alt="" />
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .costomCaedWrapper {
-
   .echart {
     margin-top: 1.5vw;
     width: 100%;

src/views/recruitment/components/enterpriseEmploymentCard.vue

@@ -1,5 +1,9 @@
 <script setup>
-import { defineProps } from 'vue';
+import { defineProps } from "vue";
+import { ref, reactive, onMounted, getCurrentInstance } from "vue";
+onMounted(() => {
+  console.log(props.type1, "ceshi");
+});
 import Carousel from "@/views/recruitment/components/carousel.vue";
 const props = defineProps({
   title: {
@@ -13,8 +17,24 @@ const props = defineProps({
   description: {
     type: String,
     default: ""
+  },
+  type1: {
+    type: Object,
+    default: () => ({
+      title: "",
+      count: "",
+      class: ""
+    })
+  },
+  type2: {
+    type: Object,
+    default: () => ({
+      title: "",
+      count: "",
+      class: ""
+    })
   }
-})
+});
 </script>
 
 <template>
@@ -25,19 +45,19 @@ const props = defineProps({
     </div>
 
     <div class="row">
-      <div class="modelItem1">
-        <div class="title">岗位种类数</div>
-        <div class="count">200.000</div>
+      <div :class="type1.class">
+        <div class="title">{{ type1.title }}</div>
+        <div class="count">{{ type1.count }}</div>
       </div>
-      <div class="modelItem2">
-        <div class="title">岗位人员数</div>
-        <div class="count">1246</div>
+      <div :class="type2.class">
+        <div class="title">{{ type2.title }}</div>
+        <div class="count">{{ type2.count }}</div>
       </div>
     </div>
 
     <div class="cardWrapper">
-      <slot name="card">
-        <carousel />
+      <slot>
+        <!-- <carousel /> -->
       </slot>
     </div>
   </div>
@@ -53,13 +73,8 @@ const props = defineProps({
 
   .cardWrapper {
     position: relative;
-    left: 50%;
-    top: 0.78125vw;
-    transform: translateX(-50%);
-    //background: url("~@/assets/recruitment/card_bg.svg") no-repeat;
-    //background-size: 100% 100%;
-    width: 17.03125vw;
-    height: 16.615vw;
+    height: calc(100% - 6.2vw);
+    margin: 0 1vw;
   }
 
   .row {
@@ -68,31 +83,32 @@ const props = defineProps({
 
     .count {
       font-size: 1.042vw;
-      color: #48FAFC;
+      color: #48fafc;
     }
 
     .title {
-      color: #FFFFFF;
+      color: #ffffff;
       margin-bottom: 0.46875vw;
       font-size: 0.729vw;
     }
 
     .modelItem1 {
       padding-top: 1.09375vw;
-      text-align: right;
+      padding-left: 4vw;
+      text-align: left;
       background: url("~@/assets/recruitment/model1.svg") no-repeat;
-      background-size: 100% 100%;
-      width: 7.823vw;
+      background-size: auto 100%;
+      width: 9.823vw;
       height: 4.167vw;
-      margin-right: 3.021vw;
     }
 
     .modelItem2 {
       padding-top: 1.09375vw;
-      text-align: right;
+      padding-left: 4vw;
+      text-align: left;
       background: url("~@/assets/recruitment/model2.svg") no-repeat;
-      background-size: 100% 100%;
-      width: 6.823vw;
+      background-size: auto 100%;
+      width: 9.823vw;
       height: 4.167vw;
     }
   }
@@ -110,12 +126,12 @@ const props = defineProps({
       text-align: left;
       font-style: normal;
       text-transform: none;
-      color: #A9F0FF;
+      color: #a9f0ff;
     }
 
     .right {
       margin-right: 1.042vw;
-      color: #A9F0FF;
+      color: #a9f0ff;
     }
   }
 }

src/views/recruitment/index.vue

@@ -2,97 +2,103 @@
   <div class="bigScrenn">
     <!-- 头部 -->
     <Head title="兴蜀人力数据概览"></Head>
-    <div class="asidemodel transition modelImgleft " :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }">
-      <enterprise-employment-card title="企业用工结构分布" description="200.000 家企业注册">
-        <template #card>
-          <carousel>
-            <!-- 自定义slide内容 -->
-            <template #slide="{ slide, index }">
-              <div class="custom-slide">
-                <div class="custom-slide-inner">
-                  <div class="custom-slide-content tc">
-                    <div>第一产业需求</div>
-                    <div class="flex just-between align-center col">
-                      <div class="">
-                        <div class="title">岗位种类数</div>
-                        <div>480人</div>
-                      </div>
-                      <div class="">
-                        <div class="title">岗位人员数</div>
-                        <div>480人</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="custom-slide-inner">
-                  <div class="custom-slide-content tc">
-                    <div>第二产业需求</div>
-                    <div class="flex just-between align-center col">
-                      <div class="">
-                        <div class="title">岗位种类数</div>
-                        <div>480人</div>
-                      </div>
-                      <div class="">
-                        <div class="title">岗位人员数</div>
-                        <div>480人</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="custom-slide-inner">
-                  <div class="custom-slide-content tc">
-                    <div>第三产业需求</div>
-                    <div class="flex just-between align-center col">
-                      <div class="">
-                        <div class="title">岗位种类数</div>
-                        <div>480人</div>
-                      </div>
-                      <div class="">
-                        <div class="title">岗位人员数</div>
-                        <div>480人</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </carousel>
-        </template>
+    <div
+      class="asidemodel transition modelImgleft"
+      :style="{ left: isOpen_L ? '1vw' : '-22.369vw' }"
+    >
+      <!-- 左1 -->
+      <enterprise-employment-card
+        :title="cardOneInfo.title"
+        :description="cardOneInfo.description"
+        :type1="cardOneInfo.type1"
+        :type2="cardOneInfo.type2"
+      >
+        <el-carousel
+          :interval="4000"
+          type="card"
+          height="17vw"
+          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>
+      </enterprise-employment-card>
+      <!-- 左2 -->
+      <enterprise-employment-card
+        :title="cardTwoInfo.title"
+        :description="cardTwoInfo.description"
+        :type1="cardTwoInfo.type1"
+        :type2="cardTwoInfo.type2"
+        style="margin-top: 0.625vw"
+      >
+        <costom-caed />
       </enterprise-employment-card>
-      <div style="margin-top: 0.625vw">
-        <enterprise-employment-card title="服务网络覆盖情况" description="5000 家人力资源行业机构">
-          <template #card>
-            <costom-caed />
-          </template>
-        </enterprise-employment-card>
-      </div>
     </div>
 
     <!-- 中间 -->
     <CenterModel></CenterModel>
 
-    <div class="asidemodel asidemodelR transition modelImgright" :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }">
-      <enterprise-employment-card title="高校人才供给能力" description="10,000 毕业生" />
-      <div style="margin-top: 0.625vw">
-        <enterprise-employment-card title="三级劳务体系建设" description="10,000 名平台劳务经纪人" />
-      </div>
+    <div
+      class="asidemodel asidemodelR transition modelImgright"
+      :style="{ right: isOpen_R ? '1vw' : '-22.369vw' }"
+    >
+      <!-- 右1 -->
+      <enterprise-employment-card
+        :title="cardThreeInfo.title"
+        :description="cardThreeInfo.description"
+        :type1="cardThreeInfo.type1"
+        :type2="cardThreeInfo.type2"
+      >
+        <el-carousel
+          :interval="4000"
+          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>
+      </enterprise-employment-card>
+      <!-- 右2 -->
+      <enterprise-employment-card
+        :title="cardFourInfo.title"
+        :description="cardFourInfo.description"
+        :type1="cardFourInfo.type1"
+        :type2="cardFourInfo.type2"
+        style="margin-top: 0.625vw"
+      />
     </div>
-
     <div class="last_icon"></div>
     <!-- 弹窗 -->
     <HomeDialogInfo v-model="dialogShow" />
   </div>
 </template>
-
+<script>
+export default {
+  components: {
+    EnterpriseEmploymentCard
+  }
+};
+</script>
 <script setup>
-import Head from './layout/headHome.vue'
-import CenterModel from './layout/centerModel.vue'
+import Head from "./layout/headHome.vue";
+import CenterModel from "./layout/centerModel.vue";
 import HomeDialogInfo from "@/components/homeDialogInfo/index.vue";
 import openWebSocket from "@/utils/webSocket.js";
 import { ref, reactive, onMounted, getCurrentInstance } from "vue";
 import EnterpriseEmploymentCard from "@/views/recruitment/components/enterpriseEmploymentCard.vue";
 import CostomCaed from "@/views/recruitment/components/costomCaed.vue";
 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 CollegeTalentsTwo from "./card/CollegeTalentsTwo.vue";
+import CollegeTalentsThree from "./card/CollegeTalentsThree.vue";
 
 const { proxy } = getCurrentInstance();
 const isOpen_L = ref(true); //展开菜单-左边
@@ -102,18 +108,74 @@ const asideMeun = reactive({
   leftMeun: [
     { mkMc: "产业产值、岗位缺口趋势", mkLydz: "cycz_gwqk_card" },
     { mkMc: "重点保供企业分布", mkLydz: "zdbgqy_card" },
-    { mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" },
+    { mkMc: "缺口岗位TOP10", mkLydz: "zdqyqkxq_card" }
   ],
   rightMeun: [
     { mkMc: "用工供需风险预警", mkLydz: "yggxfxyj_card" },
     { mkMc: "劳务市场异常预警", mkLydz: "lwscycyj_card" },
     { mkMc: "合规监管预警", mkLydz: "hgjgyj_card" },
     { mkMc: "服务质量预警", mkLydz: "fwzlyj_card" }
-  ],
-})
+  ]
+});
+const cardOneInfo = {
+  title: "企业用工结构分布",
+  description: "200.000 家企业注册",
+  type1: {
+    title: "岗位种类数",
+    count: "200",
+    class: "modelItem1"
+  },
+  type2: {
+    title: "岗位人员数",
+    count: "200",
+    class: "modelItem2"
+  }
+};
+const cardTwoInfo = {
+  title: "服务网络覆盖情况",
+  description: "5000 家人力资源行业机构",
+  type1: {
+    title: "公共服务站点",
+    count: "200",
+    class: "modelItem1"
+  },
+  type2: {
+    title: "其他服务机构",
+    count: "200",
+    class: "modelItem1"
+  }
+};
+const cardThreeInfo = {
+  title: "高校人才供给能力",
+  description: "10000 毕业生",
+  type1: {
+    title: "高校数",
+    count: "23",
+    class: "modelItem2"
+  },
+  type2: {
+    title: "促就业人数",
+    count: "100000",
+    class: "modelItem2"
+  }
+};
+const cardFourInfo = {
+  title: "三级劳务体系建设",
+  description: "10000 名平台劳务经纪人",
+  type1: {
+    title: "合作社",
+    count: "400",
+    class: "modelItem2"
+  },
+  type2: {
+    title: "劳务经纪人",
+    count: "100000",
+    class: "modelItem2"
+  }
+};
 onMounted(() => {
-  getWebSocketData()
-})
+  getWebSocketData();
+});
 // 获取WebSocket数据
 function getWebSocketData() {
   let dws = openWebSocket.getInstance();
@@ -121,7 +183,7 @@ function getWebSocketData() {
     // 接收发送消息
     dws.ws.onmessage = (e) => {
       let dataInfo = JSON.parse(e.data).data;
-      console.log(dataInfo, 'dataInfo');
+      console.log(dataInfo, "dataInfo");
       if (dataInfo == 1) {
         dialogShow.value = true;
       } else {
@@ -135,37 +197,6 @@ function getWebSocketData() {
 <style lang="scss" scoped>
 @import "components/recruitment.scss";
 
-.custom-slide {
-  padding: 0.521vw;
-
-  .custom-slide-inner {
-    width: 15.99vw;
-    height: 4.323vw;
-    background: url("~@/assets/recruitment/card_item_bg.svg") no-repeat center center;
-    background-size: cover;
-    margin-bottom: 1.042vw;
-
-    .custom-slide-content {
-      color: #CBF2FA;
-      font-size: 0.625vw;
-      height: 4.323vw;
-      padding: 0.417vw 1.25vw 0 5.677vw;
-
-      .title {
-        margin-bottom: 0.26vw;
-      }
-
-      .col {
-        margin-top: 0.78125vw;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
 .last_icon {
   position: fixed;
   left: 0;
@@ -179,4 +210,19 @@ function getWebSocketData() {
 .transition {
   transition: all 0.5s;
 }
+.el-carousel {
+  margin-top: 0.5vw;
+}
+.el-carousel__item {
+  height: 100%;
+  background: url("~@/assets/images/recruitment/card-bg.png") no-repeat #000;
+  background-size: 100% 100%;
+}
+.el-carousel__item.is-active {
+  width: 17vw;
+  margin-left: -3.85vw;
+}
+:deep(.el-carousel__mask) {
+  display: none;
+}
 </style>

src/views/recruitment/layout/centerModel.vue

@@ -19,34 +19,38 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
 
 const modelContentList = ref([
   {
-    num: '780,000',
-    label: '户籍人口',
+    num: "780,000",
+    label: "户籍人口"
   },
   {
-    num: '780,000',
-    label: '流动人口',
+    num: "780,000",
+    label: "流动人口"
   },
   {
-    num: '780,000',
-    label: '就业人群',
+    num: "780,000",
+    label: "就业人群"
   },
   {
-    num: '780,000',
-    label: '待就业人群',
+    num: "780,000",
+    label: "待就业人群"
   },
   {
-    num: '780,000',
-    label: '新增就业群体',
+    num: "780,000",
+    label: "新增就业群体"
   },
   {
-    num: '780,000',
-    label: '灵活就业群体',
+    num: "780,000",
+    label: "灵活就业群体"
+  },
+  {
+    num: "780,000",
+    label: "领金人员"
   }
-])
+]);
 </script>
 
 <style lang="scss" scoped>
@@ -77,7 +81,7 @@ const modelContentList = ref([
     .num {
       font-family: PingFang SC, PingFang SC;
       font-size: 2.667vw;
-      color: #30DCFF;
+      color: #30dcff;
     }
 
     .label {
@@ -85,7 +89,7 @@ const modelContentList = ref([
       font-family: PingFang SC, PingFang SC;
       font-weight: 400;
       font-size: 0.833vw;
-      color: #CBF2FA;
+      color: #cbf2fa;
     }
   }
 
@@ -93,7 +97,6 @@ const modelContentList = ref([
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-
     .modelContent {
       display: flex;
       flex-direction: column;
@@ -104,11 +107,12 @@ const modelContentList = ref([
       width: 10.729vw;
       height: 6.667vw;
       padding: 0.625vw 0;
+      margin: 0 0.7vw 1.2vw;
 
       .num {
         font-family: PingFang SC, PingFang SC;
         font-size: 1.667vw;
-        color: #30DCFF;
+        color: #30dcff;
       }
 
       .label {
@@ -116,17 +120,15 @@ const modelContentList = ref([
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         font-size: 0.833vw;
-        color: #CBF2FA;
+        color: #cbf2fa;
       }
 
-      &:nth-last-child(-n+1) {
-        margin-top: 2.34375vw;
-        margin-right: 13.8vw;
+      &:nth-last-child(1) {
+        margin-right: 8vw;
       }
 
-      &:nth-last-child(2) {
-        margin-top: 2.34375vw;
-        margin-left: 13.8vw;
+      &:nth-last-child(3) {
+        margin-left: 8vw;
       }
     }
   }