兴蜀人力数据概览大屏

src/assets/images/recruitment/network-tabs-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.124023 3.5L5.12402 4.44739e-08L5.12402 7L0.124023 3.5Z" fill="#31DBFF"/>
+</svg>

src/router/index.js

@@ -20,15 +20,21 @@ export const privateRoutes = [];
  * 公开路由表
  */
 export const publicRoutes = [
+  // {
+  //   path: "/",
+  //   name: "/home",
+  //   component: () => import("@/views/largeScreen/index"),
+  //   meta: {}
+  // },
+  // {
+  //   path: "/recruitment",
+  //   name: "/recruitment",
+  //   component: () => import("@/views/recruitment/index"),
+  //   meta: {}
+  // },
   {
     path: "/",
     name: "/home",
-    component: () => import("@/views/largeScreen/index"),
-    meta: {}
-  },
-  {
-    path: "/recruitment",
-    name: "/recruitment",
     component: () => import("@/views/recruitment/index"),
     meta: {}
   },

src/views/recruitment/card/LaborSystemTwo.vue

@@ -11,6 +11,8 @@ import { ref, reactive, computed, onMounted } from "vue";
 import * as echarts from "echarts";
 // 引入崇州市地图json数据
 import chongzhouJSON from "@/assets/json/510184.json";
+// 引入本地撒点图片
+import pointImage from "@/assets/images/recruitment/map-point1.png";
 // 获取地图DOM元素
 let map = ref();
 // 注册崇州地图
@@ -54,11 +56,24 @@ let option = {
         show: true,
         color: "#fff",
         fontSize: 12,
-        fontWeight: "bold"
+        fontWeight: "bold",
+        emphasis: {
+          show: true, // 确保悬停时标签显示
+          color: "#ffff00", // 鼠标悬停时的文字颜色
+          fontSize: 14, // 鼠标悬停时的文字大小
+          fontWeight: "bold" // 鼠标悬停时的文字粗细
+        }
       },
       itemStyle: {
         normal: {
-          color: "#30DCFF"
+          color: "#121516",
+          borderColor: "#3a6c80", // 地图区域描边颜色
+          borderWidth: 1 // 地图区域描边宽度
+        },
+        emphasis: {
+          color: "#2d5565", // 鼠标悬停时的地图填充颜色
+          borderColor: "#30DCFF", // 地图区域描边颜色
+          borderWidth: 1 // 地图区域描边宽度
         }
       }
     }
@@ -71,13 +86,13 @@ let option = {
       data: initialPoints,
       symbolSize: function (val) {
         // 根据数值大小动态调整点的大小
-        return val[2] / 10;
+        return val[2] / 6;
       },
       label: {
         show: false,
         formatter: "{b}"
       },
-      symbol: function (params) {}
+      symbol: "image://" + pointImage // 使用本地图片作为标记
     }
   ]
 };

src/views/recruitment/card/NetworkMap.vue

@@ -8,6 +8,8 @@ import { ref, reactive, computed, onMounted } from "vue";
 import * as echarts from "echarts";
 // 引入崇州市地图json数据
 import chongzhouJSON from "@/assets/json/510184.json";
+// 引入本地撒点图片
+import pointImage from "@/assets/images/recruitment/map-point1.png";
 // 获取地图DOM元素
 let map = ref();
 // 注册崇州地图
@@ -51,11 +53,24 @@ let option = {
         show: true,
         color: "#fff",
         fontSize: 12,
-        fontWeight: "bold"
+        fontWeight: "bold",
+        emphasis: {
+          show: true, // 确保悬停时标签显示
+          color: "#ffff00", // 鼠标悬停时的文字颜色
+          fontSize: 14, // 鼠标悬停时的文字大小
+          fontWeight: "bold" // 鼠标悬停时的文字粗细
+        }
       },
       itemStyle: {
         normal: {
-          color: "#30DCFF"
+          color: "#121516",
+          borderColor: "#3a6c80", // 地图区域描边颜色
+          borderWidth: 1 // 地图区域描边宽度
+        },
+        emphasis: {
+          color: "#2d5565", // 鼠标悬停时的地图填充颜色
+          borderColor: "#30DCFF", // 地图区域描边颜色
+          borderWidth: 1 // 地图区域描边宽度
         }
       }
     }
@@ -68,13 +83,13 @@ let option = {
       data: initialPoints,
       symbolSize: function (val) {
         // 根据数值大小动态调整点的大小
-        return val[2] / 10;
+        return val[2] / 6;
       },
       label: {
         show: false,
         formatter: "{b}"
       },
-      symbol: function (params) {}
+      symbol: "image://" + pointImage // 使用本地图片作为标记
     }
   ]
 };

src/views/recruitment/components/costomCaed.vue

@@ -1,3 +1,46 @@
+<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>-->
+
+      <!-- 横向滚动区域 -->
+      <div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
+        <div
+          v-for="(tab, index) in state.tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: state.activeIndex === index }"
+          @click="selectTab(index)"
+        >
+          {{ tab }}
+        </div>
+      </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>-->
+    </div>
+
+    <NetworkMap />
+  </div>
+</template>
+
 <script setup>
 import { ref, reactive, onMounted } from "vue";
 import NetworkMap from "../card/NetworkMap.vue";
@@ -6,9 +49,10 @@ const state = reactive({
     "公共服务站点 300",
     "培训机构 130",
     "咨询机构 220",
-    "教育中心 150",
+    "劳务公司 300",
-    "职业介绍所 180",
+    "招聘与猎头机构 300",
-    "就业服务中心 210"
+    "⼈⼒资源服务外包机构（HRO）300",
+    "职业中介与公共就业服务机构 300"
   ],
   activeIndex: 0
 });
@@ -74,49 +118,6 @@ onMounted(() => {
 });
 </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>-->
-
-      <!-- 横向滚动区域 -->
-      <div ref="scrollContainer" class="scroll-area" @scroll="checkScroll">
-        <div
-          v-for="(tab, index) in state.tabs"
-          :key="index"
-          class="tab-item"
-          :class="{ active: state.activeIndex === index }"
-          @click="selectTab(index)"
-        >
-          {{ tab }}
-        </div>
-      </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>-->
-    </div>
-
-    <NetworkMap />
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .costomCaedWrapper {
   .echart {
@@ -150,22 +151,61 @@ onMounted(() => {
 }
 
 .tab-item {
+  position: relative;
   flex: 0 0 auto;
   margin: 0 8px;
-  width: 6.771vw;
+  padding: 0 0.5vw;
   height: 1.875vw;
   text-align: center;
   font-size: 0.729vw;
   line-height: 1.875vw;
-  background: url("~@/assets/recruitment/tabs_bg.svg") no-repeat center center;
+  border: 1px solid rgba(203, 242, 250, 0.2);
-  background-size: 100% 100%;
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    rgba(203, 242, 250, 0) 0%,
+    rgba(203, 242, 250, 0.19) 51%,
+    rgba(203, 242, 250, 0) 100%
+  );
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
+  &.active::before {
+    transform: rotate(180deg);
+    position: absolute;
+    content: "";
+    background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
+      no-repeat;
+    background-size: auto 100%;
+    width: 0.6vw;
+    height: 0.6vw;
+    left: 0;
+    top: 50%;
+    margin: -0.3vw 0 0 -0.5vw;
+  }
+  &.active::after {
+    position: absolute;
+    content: "";
+    background: url("~@/assets/images/recruitment/network-tabs-arrow.svg")
+      no-repeat;
+    background-size: auto 100%;
+    width: 0.6vw;
+    height: 0.6vw;
+    right: 0;
+    top: 50%;
+    margin: -0.3vw -0.45vw 0 0;
+  }
 }
 
 .tab-item.active {
-  background-image: url("~@/assets/recruitment/tabs_bg_active.svg");
+  border: 1px solid rgba(203, 242, 250, 0.2);
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    rgba(48, 220, 255, 0.12) 0%,
+    rgba(48, 220, 255, 0.84) 51%,
+    rgba(48, 220, 255, 0.12) 100%
+  );
   color: white;
   font-weight: 500;
 }

src/views/recruitment/layout/centerModel.vue

@@ -18,23 +18,26 @@
       <div class="num">780,000</div>
       <div class="label">人口总数</div>
     </div>
-    <div class="hjrkDialogBox" v-show="isactive != -1">
+    <transition name="fade">
-      <div class="titleBox">
+      <div class="hjrkDialogBox" v-show="isactive != -1">
-        <div class="title">户籍人口</div>
+        <div class="titleBox">
-        <div class="close" @click="isactive = -1"></div>
+          <div class="title">户籍人口</div>
+          <div class="close" @click="isactive = -1"></div>
+        </div>
+        <ul class="tabsBox">
+          <li
+            v-for="(item, index) in tabsDate.tabs"
+            :key="index"
+            :class="tabsActive == index ? 'active' : ''"
+            @click="tabsActive = index"
+          >
+            {{ item }}
+          </li>
+        </ul>
+
+        <div class="barBox" ref="enterpriseTwoRef"></div>
       </div>
-      <ul class="tabsBox">
+    </transition>
-        <li
-          v-for="(item, index) in tabsDate.tabs"
-          :key="index"
-          :class="tabsActive == index ? 'active' : ''"
-          @click="tabsActive = index"
-        >
-          {{ item }}
-        </li>
-      </ul>
-      <div class="barBox" ref="enterpriseTwoRef"></div>
-    </div>
   </div>
 </template>
 
@@ -258,8 +261,15 @@ onMounted(() => {
       &:nth-last-child(3) {
         margin-left: 8vw;
       }
-      &.active .num {
+      &.active {
-        color: red;
+        background: url("~@/assets/images/recruitment/model-active-bg.png")
+          no-repeat;
+        background-size: 100% 100%;
+        .num {
+          background: -webkit-linear-gradient(#fff4b3, #ffd901);
+          -webkit-background-clip: text;
+          color: transparent;
+        }
       }
     }
   }