大屏修改

src/views/recruitment/layout/centerModel.vue

@@ -7,7 +7,7 @@
           v-for="(item, index) in modelContentList"
           :key="index"
           :class="isactive == index ? 'active' : ''"
-          @click="onacitve(index)"
+          @click="onacitve(index, item.label)"
         >
           <div class="num">{{ item.num }}</div>
           <div class="label">{{ item.label }}</div>
@@ -21,17 +21,25 @@
     <transition name="fade">
       <div class="hjrkDialogBox" v-show="isactive != -1">
         <div class="titleBox">
-          <div class="title">户籍人口</div>
+          <div class="title">{{ dialogTitle }}</div>
           <div class="close" @click="isactive = -1"></div>
         </div>
         <ul class="tabsBox">
-          <li
+          <!-- <li
             v-for="(item, index) in tabsDate.tabs"
             :key="index"
             :class="tabsActive == index ? 'active' : ''"
             @click="tabsActive = index"
           >
             {{ item }}
+          </li> -->
+          <li
+            v-for="(item, index) in tabsDate.tabs"
+            :key="index"
+            :class="tabsActive == index ? 'active' : ''"
+            @click="tabsActive = 0"
+          >
+            {{ item }}
           </li>
         </ul>
 
@@ -46,10 +54,12 @@ import { ref, reactive, onMounted } from "vue";
 
 const isactive = ref(-1);
 const tabsActive = ref(0);
-const onacitve = (index) => {
+const dialogTitle = ref("户籍人口");
+const onacitve = (index, label) => {
   console.log(index, "index");
   //将点击的元素的索引赋值给isactive变量 , 每次点击都更改变量的值
   isactive.value = index;
+  dialogTitle.value = label;
   console.log(isactive.value, "isactive");
 };
 
@@ -66,20 +76,21 @@ const modelContentList = ref([
     num: "约27万",
     label: "就业人群"
   },
+  // {
+  //   num: "13000",
+  //   label: "待就业人群"
+  // },
   {
-    num: "13000",
-    label: "待就业人群"
-  },
-  {
-    num: "11209",
-    label: "新增就业群体"
-  },
-  {
-    num: "28000",
+    num: "10.06万",
     label: "灵活就业群体"
   },
   {
-    num: "6500",
+    num: "0.54万",
+    label: "新增就业群体"
+  },
+
+  {
+    num: "0.76万",
     label: "领金人员"
   }
 ]);
@@ -126,7 +137,7 @@ const option = {
     },
 
     type: "category",
-    data: ["小学", "初中", "高中", "大专", "本科", "硕士", "博士及以上"]
+    data: ["国家级领军人才", "地方级领军型人才", "博士", "硕士", "本科"]
   },
   yAxis: {
     //网格线
@@ -150,7 +161,7 @@ const option = {
       type: "bar",
       showBackground: true,
       barWidth: 20,
-      data: [480, 340, 570, 230, 340, 120, 90],
+      data: [18, 45, 133, 1012, 20792],
       // 设置柱状图的数值
       label: {
         show: true,
@@ -227,7 +238,7 @@ onMounted(() => {
   .modelWrapper {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: center;
     .modelContent {
       display: flex;
       flex-direction: column;
@@ -238,7 +249,7 @@ onMounted(() => {
       width: 10.729vw;
       height: 6.667vw;
       padding: 0.625vw 0;
-      margin: 0 0.7vw 1.2vw;
+      margin: 0 1.1vw 1.2vw;
       cursor: pointer;
       .num {
         font-family: PingFang SC, PingFang SC;
@@ -254,13 +265,13 @@ onMounted(() => {
         color: #cbf2fa;
       }
 
-      &:nth-last-child(1) {
-        margin-right: 8vw;
-      }
+      // &:nth-last-child(1) {
+      //   margin-right: 8vw;
+      // }
 
-      &:nth-last-child(3) {
-        margin-left: 8vw;
-      }
+      // &:nth-last-child(3) {
+      //   margin-left: 8vw;
+      // }
       &.active {
         background: url("~@/assets/images/recruitment/model-active-bg.png")
           no-repeat;