更改大屏和三个屏幕的分辨率

src/views/recruitment/layout/centerModel.vue

@@ -14,18 +14,18 @@
         </div>
       </div>
     </div>
-    <div class="content" v-show="isactive == -1">
-      <div class="num">74.24万</div>
+    <div class="content" v-show="isactive != 0 && isactive != 5">
+      <div class="num">81.1万</div>
       <div class="label">人口总数</div>
     </div>
-    <transition name="fade">
-      <div class="hjrkDialogBox" v-show="isactive != -1">
-        <div class="titleBox">
-          <div class="title">{{ dialogTitle }}</div>
-          <div class="close" @click="isactive = -1"></div>
-        </div>
-        <ul class="tabsBox">
-          <!-- <li
+    <!-- <transition name="fade"> -->
+    <div class="hjrkDialogBox" v-show="isactive == 0">
+      <div class="titleBox">
+        <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' : ''"
@@ -33,25 +33,47 @@
           >
             {{ item }}
           </li> -->
-          <li
-            v-for="(item, index) in tabsDate.tabs"
-            :key="index"
-            :class="tabsActive == index ? 'active' : ''"
-            @click="tabsActive = 0"
-          >
-            {{ item }}
-          </li>
-        </ul>
+        <li
+          v-for="(item, index) in tabsDate.tabs"
+          :key="index"
+          :class="tabsActive == index ? 'active' : ''"
+          @click="tabsActive = 0"
+        >
+          {{ item }}
+        </li>
+      </ul>
 
-        <div class="barBox" ref="enterpriseTwoRef"></div>
+      <div class="barBox" ref="enterpriseTwoRef"></div>
+    </div>
+    <!-- </transition> -->
+    <div class="hjrkDialogBox" v-show="isactive == 5">
+      <div class="titleBox">
+        <div class="title">高终端人才</div>
+        <div class="close" @click="isactive = -1"></div>
       </div>
-    </transition>
+      <ul class="statisticOne">
+        <li v-for="(item, index) in statisticData" :key="index">
+          <img :src="item.imgURL" :alt="item.title" />
+          <div class="infoBox">
+            <div class="title">
+              <span>{{ item.title }}</span>
+            </div>
+            <div class="count">
+              <span class="numb">{{ item.count }}</span
+              >（{{ item.unit }}）
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from "vue";
-
+import tongjiPxrs from "@/assets/images/largeScreen/tongji-pxrs.png";
+import tongjiPxkc from "@/assets/images/largeScreen/tongji-pxkc.png";
+import tongjiPxjg from "@/assets/images/largeScreen/tongji-pxjg.png";
 const isactive = ref(-1);
 const tabsActive = ref(0);
 const dialogTitle = ref("户籍人口");
@@ -88,12 +110,47 @@ const modelContentList = ref([
     num: "0.54万",
     label: "新增就业群体"
   },
-
+  {
+    num: "2.2万",
+    label: "高中端人才"
+  },
   {
     num: "0.76万",
     label: "领金人员"
   }
 ]);
+const statisticData = ref([
+  {
+    imgURL: tongjiPxjg,
+    title: "国家级领军人才",
+    count: "18",
+    unit: "人"
+  },
+  {
+    imgURL: tongjiPxjg,
+    title: "地方级领军型人才",
+    count: "45",
+    unit: "人"
+  },
+  {
+    imgURL: tongjiPxjg,
+    title: "博士",
+    count: "133",
+    unit: "人"
+  },
+  {
+    imgURL: tongjiPxjg,
+    title: "硕士",
+    count: "1012",
+    unit: "人"
+  },
+  {
+    imgURL: tongjiPxjg,
+    title: "本科",
+    count: "20792",
+    unit: "人"
+  }
+]);
 const tabsDate = reactive({
   tabs: [
     "学历",
@@ -137,7 +194,7 @@ const option = {
     },
 
     type: "category",
-    data: ["国家级领军人才", "地方级领军型人才", "博士", "硕士", "本科"]
+    data: ["大专及以上", "高中(含中专)", "初中", "小学"]
   },
   yAxis: {
     //网格线
@@ -161,7 +218,7 @@ const option = {
       type: "bar",
       showBackground: true,
       barWidth: 20,
-      data: [18, 45, 133, 1012, 20792],
+      data: [71013, 105716, 266225, 210356],
       // 设置柱状图的数值
       label: {
         show: true,
@@ -342,4 +399,56 @@ onMounted(() => {
     }
   }
 }
+ul.statisticOne {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  padding-top: 3vw;
+  li {
+    // width: 450px;
+    height: 190px;
+    margin: 0 10px;
+    // 第一排的前2个元素（第一排显示2个）
+    &:nth-child(-n + 2) {
+      width: 20vw; // 减去margin值
+    }
+
+    // // 第二排的第3-5个元素（第二排显示3个）
+    // &:nth-child(n + 3):nth-child(-n + 5) {
+    //   width: calc(33.33% - 20px); // 减去margin值
+    // }
+
+    img {
+      display: block;
+      width: 7vw;
+      height: 7vw;
+      float: left;
+    }
+    .infoBox {
+      float: left;
+      padding: 0 0 0 10px;
+      .title {
+        height: 40px;
+        line-height: 40px;
+        margin-top: 36px;
+        span {
+          background: -webkit-linear-gradient(#ffffff, #75e8ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          font-size: 1.3vw;
+          font-weight: 400;
+        }
+      }
+      .count {
+        font-size: 24px;
+        padding: 18px 0 0 0;
+        span.numb {
+          font-size: 2.1vw;
+          display: inline-block;
+          padding: 0 5px 0 0;
+        }
+      }
+    }
+  }
+}
 </style>