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

2025-10-21 17:53:57 +08:00
parent 52535df2fb
commit 0f96d81ac0
12 changed files with 429 additions and 153 deletions
--- a/src/views/integratedTrainingPlatform/index.vue
+++ b/src/views/integratedTrainingPlatform/index.vue
@ -1,75 +1,80 @@
 <template>
-  <div class="allBox">
-    <!-- 头部 -->
-    <Head title="“产教评”融合培训平台"></Head>
-    <LeftBorder></LeftBorder>
-    <RightBorder></RightBorder>
-    <BottomBorder></BottomBorder>
-    <div class="mainBox">
-      <div class="title"><span>兴蜀来了培训产品 online</span></div>
-      <div class="contentBox">
-        <StatisticOne style="margin-top: 50px"></StatisticOne>
-        <ul class="contentOne">
-          <li>
-            <div class="pubTitle">培训内容TOP10</div>
-            <ConentOneBoxOne></ConentOneBoxOne>
-          </li>
-          <li>
-            <div class="pubTitle">培训课程计划</div>
-            <ConentOneBoxTwo></ConentOneBoxTwo>
-          </li>
-        </ul>
+  <div class="scale-container">
+    <div
+      class="allBox"
+      :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
+    >
+      <!-- 头部 -->
+      <Head title="“产教评”融合培训平台"></Head>
+      <LeftBorder></LeftBorder>
+      <RightBorder></RightBorder>
+      <BottomBorder></BottomBorder>
+      <div class="mainBox">
+        <div class="title"><span>兴蜀来了培训产品 online</span></div>
+        <div class="contentBox">
+          <StatisticOne style="margin-top: 50px"></StatisticOne>
+          <ul class="contentOne">
+            <li>
+              <div class="pubTitle">培训内容TOP10</div>
+              <ConentOneBoxOne></ConentOneBoxOne>
+            </li>
+            <li>
+              <div class="pubTitle">培训课程计划</div>
+              <ConentOneBoxTwo></ConentOneBoxTwo>
+            </li>
+          </ul>
+        </div>
      </div>
-    </div>
-    <div class="mainBox">
-      <div class="title"><span>培训机构情况</span></div>
-      <div class="contentBox">
-        <StatisticTwo :tabsData="pxjgTabData"></StatisticTwo>
-        <ul class="contentTwo">
-          <li>
-            <div class="pubTitle">培训机构数量变化趋势</div>
-            <ContentTwoBoxOne></ContentTwoBoxOne>
-          </li>
-          <li>
-            <div class="pubTitle">培训用户数量统计</div>
-            <ContentTwoBoxTwo></ContentTwoBoxTwo>
-          </li>
-          <li>
-            <div class="pubTitle">各类培训课程人数统计</div>
-            <ContentTwoBoxThree></ContentTwoBoxThree>
-          </li>
-        </ul>
+      <div class="mainBox">
+        <div class="title"><span>培训机构情况</span></div>
+        <div class="contentBox">
+          <StatisticTwo :tabsData="pxjgTabData"></StatisticTwo>
+          <ul class="contentTwo">
+            <li>
+              <div class="pubTitle">培训机构数量变化趋势</div>
+              <ContentTwoBoxOne></ContentTwoBoxOne>
+            </li>
+            <li>
+              <div class="pubTitle">培训用户数量统计</div>
+              <ContentTwoBoxTwo></ContentTwoBoxTwo>
+            </li>
+            <li>
+              <div class="pubTitle">各类培训课程人数统计</div>
+              <ContentTwoBoxThree></ContentTwoBoxThree>
+            </li>
+          </ul>
+        </div>
      </div>
-    </div>
-    <div class="mainBox">
-      <div class="title"><span>证书发证情况</span></div>
-      <div class="contentBox">
-        <StatisticTwo :tabsData="zsfzTabData"></StatisticTwo>
-        <ul class="contentThree">
-          <li>
-            <div class="pubTitle">证书发证变化趋势</div>
-            <ContentThreeBoxOne></ContentThreeBoxOne>
-          </li>
-          <li>
-            <div class="pubTitle">热门证书TOP5</div>
-            <ContentThreeBoxTwo></ContentThreeBoxTwo>
-          </li>
-          <li>
-            <div class="pubTitle">各地区发证数量统计</div>
-            <ContentThreeBoxThree></ContentThreeBoxThree>
-          </li>
-          <li>
-            <div class="pubTitle">各类证书发证数量占比</div>
-            <ContentThreeBoxFour></ContentThreeBoxFour>
-          </li>
-        </ul>
+      <div class="mainBox">
+        <div class="title"><span>证书发证情况</span></div>
+        <div class="contentBox">
+          <StatisticTwo :tabsData="zsfzTabData"></StatisticTwo>
+          <ul class="contentThree">
+            <li>
+              <div class="pubTitle">证书发证变化趋势</div>
+              <ContentThreeBoxOne></ContentThreeBoxOne>
+            </li>
+            <li>
+              <div class="pubTitle">热门证书TOP5</div>
+              <ContentThreeBoxTwo></ContentThreeBoxTwo>
+            </li>
+            <li>
+              <div class="pubTitle">各地区发证数量统计</div>
+              <ContentThreeBoxThree></ContentThreeBoxThree>
+            </li>
+            <li>
+              <div class="pubTitle">各类证书发证数量占比</div>
+              <ContentThreeBoxFour></ContentThreeBoxFour>
+            </li>
+          </ul>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import Head from "../../components/largeScreen/headHome.vue";
 import LeftBorder from "../../components/largeScreen/leftBorder.vue";
 import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -127,9 +132,38 @@ const zsfzTabData = ref([
    unit: "个"
  }
 ]);
+// 缩放比例
+const scale = ref(1);
+
+// 计算缩放比例
+const calculateScale = () => {
+  const windowWidth = window.innerWidth;
+  const designWidth = 1920;
+  scale.value = windowWidth / designWidth;
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  calculateScale();
+};
+
+// 生命周期钩子
+onMounted(() => {
+  calculateScale();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
 </script>

 <style lang="scss" scoped>
+.scale-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 .pubTitle {
  height: 60px;
  line-height: 60px;
@ -144,7 +178,7 @@ const zsfzTabData = ref([
 .allBox {
  width: 1920px;
  height: 3240px;
-  margin: 0 auto;
+
  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
  background-size: 100%;
  position: relative;
@ -220,4 +254,11 @@ const zsfzTabData = ref([
 #app {
  overflow: auto !important;
 }
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>
--- a/src/views/platformBusinessData/index.scss
+++ b/src/views/platformBusinessData/index.scss
@ -1,7 +1,6 @@
 .allBox {
  width: 1920px;
  height: 3240px;
-  margin: 0 auto;
  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
  background-size: 100%;
  position: relative;
--- a/src/views/platformBusinessData/index.vue
+++ b/src/views/platformBusinessData/index.vue
@ -1,32 +1,37 @@
 <template>
-  <div class="allBox">
-    <!-- 头部 -->
-    <Head title="兴蜀来了平台业务数据"></Head>
-    <LeftBorder></LeftBorder>
-    <RightBorder></RightBorder>
-    <BottomBorder></BottomBorder>
-    <!-- 顶部统计 -->
-    <TopStatistics></TopStatistics>
-    <!-- 数据统计 -->
-    <ul class="bigBox">
-      <!-- 全职招聘情况 -->
-      <MainBoxOne></MainBoxOne>
-      <!-- 零工招聘情况 -->
-      <MainBoxTwo></MainBoxTwo>
-      <!-- 实习招聘情况 -->
-      <MainBoxThree></MainBoxThree>
-      <!-- 创业撮合情况 -->
-      <MainBoxFour></MainBoxFour>
-      <!-- 重点人群 -->
-      <MainBoxFive></MainBoxFive>
-      <!-- 技能培训 -->
-      <MainBoxSix></MainBoxSix>
-    </ul>
+  <div class="scale-container">
+    <div
+      class="allBox"
+      :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
+    >
+      <!-- 头部 -->
+      <Head title="兴蜀来了平台业务数据"></Head>
+      <LeftBorder></LeftBorder>
+      <RightBorder></RightBorder>
+      <BottomBorder></BottomBorder>
+      <!-- 顶部统计 -->
+      <TopStatistics></TopStatistics>
+      <!-- 数据统计 -->
+      <ul class="bigBox">
+        <!-- 全职招聘情况 -->
+        <MainBoxOne></MainBoxOne>
+        <!-- 零工招聘情况 -->
+        <MainBoxTwo></MainBoxTwo>
+        <!-- 实习招聘情况 -->
+        <MainBoxThree></MainBoxThree>
+        <!-- 创业撮合情况 -->
+        <MainBoxFour></MainBoxFour>
+        <!-- 重点人群 -->
+        <MainBoxFive></MainBoxFive>
+        <!-- 技能培训 -->
+        <MainBoxSix></MainBoxSix>
+      </ul>
+    </div>
  </div>
 </template>

 <script setup>
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import Head from "../../components/largeScreen/headHome.vue";
 import LeftBorder from "../../components/largeScreen/leftBorder.vue";
 import RightBorder from "../../components/largeScreen/rightBorder.vue";
@ -41,13 +46,58 @@ import MainBoxSix from "./components/mainBoxSix";

 // 定义标题名称
 const title = "三级劳务体系⼈员数据";
+// 缩放比例
+const scale = ref(1);
+
+// 计算缩放比例
+const calculateScale = () => {
+  const windowWidth = window.innerWidth;
+  const designWidth = 1920;
+  scale.value = windowWidth / designWidth;
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  calculateScale();
+};
+
+// 生命周期钩子
+onMounted(() => {
+  calculateScale();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
 </script>

 <style lang="scss" scoped>
+.scale-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.allBox {
+  width: 1920px;
+  height: 3240px;
+  // margin: 0 auto;
+  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
+  background-size: 100%;
+  position: relative;
+  transition: transform 0.3s ease; // 添加过渡效果
+}
@import "./index.scss";
 </style>
 <style lang="scss">
 #app {
  overflow: auto !important;
 }
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>
--- a/src/views/recruitment/card/EnterpriseEmploymentThree.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentThree.vue
@ -14,7 +14,7 @@ const option = {
    top: "17%",
    left: "15%",
    right: "5%",
-    bottom: "10%"
+    bottom: "20%"
  },
  // 设置图例
  legend: {
@ -33,7 +33,12 @@ const option = {
        color: "#CBF2FA" // 文字颜色
      }
    },
-
+    axisLabel: {
+      fontSize: 14, // 设置 x 轴文字大小
+      color: "#CBF2FA", // 可以同时设置文字颜色
+      rotate: 20, // 文字倾斜45度
+      margin: 20 // 增加文字与轴线的距离
+    },
    type: "category",
    data: ["制造业", "服务业", "建筑业"]
  },
@ -64,7 +69,8 @@ const option = {
      label: {
        show: true,
        position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
@ -91,7 +97,8 @@ const option = {
      label: {
        show: true,
        position: "top",
-        color: "#CBF2FA"
+        color: "#CBF2FA",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
--- a/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
+++ b/src/views/recruitment/card/EnterpriseEmploymentTwo.vue
@ -14,7 +14,7 @@ const option = {
    top: "15%",
    left: "15%",
    right: "5%",
-    bottom: "10%"
+    bottom: "20%"
  },
  // 设置图例
  legend: {
@ -33,7 +33,12 @@ const option = {
        color: "#CBF2FA" // 文字颜色
      }
    },
-
+    axisLabel: {
+      fontSize: 14, // 设置 x 轴文字大小
+      color: "#CBF2FA", // 可以同时设置文字颜色
+      rotate: 20, // 文字倾斜45度
+      margin: 20 // 增加文字与轴线的距离
+    },
    type: "category",
    data: ["微型企业", "小型企业", "中型企业", "大型企业"]
  },
@ -64,7 +69,8 @@ const option = {
      label: {
        show: true,
        position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
@ -91,7 +97,8 @@ const option = {
      label: {
        show: true,
        position: "top",
-        color: "#CBF2FA"
+        color: "#CBF2FA",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
--- a/src/views/recruitment/card/LaborSystemFour.vue
+++ b/src/views/recruitment/card/LaborSystemFour.vue
@ -17,7 +17,7 @@ const option = {
    top: "17%",
    left: "15%",
    right: "5%",
-    bottom: "10%"
+    bottom: "20%"
  },
  tooltip: {
    trigger: "axis"
@ -28,7 +28,12 @@ const option = {
        color: "#CBF2FA" // 文字颜色
      }
    },
-
+    axisLabel: {
+      fontSize: 14, // 设置 x 轴文字大小
+      color: "#CBF2FA", // 可以同时设置文字颜色
+      rotate: 30, // 文字倾斜45度
+      margin: 20 // 增加文字与轴线的距离
+    },
    type: "category",
    data: [
      "1月",
@ -67,12 +72,13 @@ const option = {
      type: "line",
      showBackground: true,
      barWidth: 8,
-      data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      // 设置柱状图的数值
      label: {
        show: true,
        position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
--- a/src/views/recruitment/card/LaborSystemOne.vue
+++ b/src/views/recruitment/card/LaborSystemOne.vue
@ -33,7 +33,9 @@ const option = {
    axisLabel: {
      textStyle: {
        color: "#CBF2FA"
-      }
+      },
+      fontSize: 14, // 设置 x 轴文字大小
+      color: "#CBF2FA" // 可以同时设置文字颜色
    }
  },
  yAxis: {
@ -62,7 +64,8 @@ const option = {
      label: {
        show: true,
        position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
--- a/src/views/recruitment/card/LaborSystemThree.vue
+++ b/src/views/recruitment/card/LaborSystemThree.vue
@ -17,7 +17,7 @@ const option = {
    top: "17%",
    left: "15%",
    right: "5%",
-    bottom: "10%"
+    bottom: "20%"
  },
  tooltip: {
    trigger: "axis"
@ -28,7 +28,12 @@ const option = {
        color: "#CBF2FA" // 文字颜色
      }
    },
-
+    axisLabel: {
+      fontSize: 14, // 设置 x 轴文字大小
+      color: "#CBF2FA", // 可以同时设置文字颜色
+      rotate: 30, // 文字倾斜45度
+      margin: 20 // 增加文字与轴线的距离
+    },
    type: "category",
    data: [
      "1月",
@ -67,12 +72,13 @@ const option = {
      type: "line",
      showBackground: true,
      barWidth: 8,
-      data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
+      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      // 设置柱状图的数值
      label: {
        show: true,
        position: "top",
-        color: "#30DCFF"
+        color: "#30DCFF",
+        fontSize: 16
      },
      itemStyle: {
        //渐变色
--- a/src/views/recruitment/card/LaborSystemTwo.vue
+++ b/src/views/recruitment/card/LaborSystemTwo.vue
@ -94,8 +94,12 @@ let option = {
        return 30;
      },
      label: {
-        show: false,
-        formatter: "{b}"
+        show: false, // 改为 true 显示标签
+        formatter: "{b}", // 显示城市名称
+        position: "right", // 标签位置在点的上方
+        color: "#fff", // 标签颜色
+        fontSize: 16, // 字体大小
+        fontWeight: "bold" // 字体粗细
      },
      symbol: "image://" + pointImage // 使用本地图片作为标记
    }
--- a/src/views/recruitment/components/costomCaed.vue
+++ b/src/views/recruitment/components/costomCaed.vue
@ -49,10 +49,10 @@ const state = reactive({
    "公共服务站点 40",
    // "培训机构 130",
    // "咨询机构 220",
-    "劳务公司 13",
-    "招聘与猎头机构 5",
-    "⼈⼒资源服务外包机构（HRO）3",
-    "职业中介与公共就业服务机构 8"
+    "培训机构 5"
+    // "招聘与猎头机构 5",
+    // "⼈⼒资源服务外包机构（HRO）3",
+    // "职业中介与公共就业服务机构 8"
  ],
  activeIndex: 0
 });
--- a/src/views/recruitment/layout/centerModel.vue
+++ b/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>
--- a/src/views/threeLaborService/index.vue
+++ b/src/views/threeLaborService/index.vue
@ -1,22 +1,28 @@
 <template>
-  <div class="allBox">
-    <!-- 头部 -->
-    <Head title="三级劳务体系⼈员数据"></Head>
-    <LeftBorder></LeftBorder>
-    <RightBorder></RightBorder>
-    <BottomBorder></BottomBorder>
-    <!-- 统计 -->
-    <Statistic></Statistic>
-    <!-- 地图 -->
-    <Map></Map>
-    <!-- 服务企业情况 -->
-    <CompanyProfile style="margin-top: 50px"></CompanyProfile>
-    <!-- 解决就业情况 -->
-    <SolveEmployment style="margin-top: 40px"></SolveEmployment>
+  <div class="scale-container">
+    <div
+      class="allBox"
+      :style="{ transform: `scale(${scale})`, transformOrigin: '0 0' }"
+    >
+      <!-- 头部 -->
+      <Head title="三级劳务体系⼈员数据"></Head>
+      <LeftBorder></LeftBorder>
+      <RightBorder></RightBorder>
+      <BottomBorder></BottomBorder>
+      <!-- 统计 -->
+      <Statistic></Statistic>
+      <!-- 地图 -->
+      <Map></Map>
+      <!-- 服务企业情况 -->
+      <CompanyProfile style="margin-top: 50px"></CompanyProfile>
+      <!-- 解决就业情况 -->
+      <SolveEmployment style="margin-top: 40px"></SolveEmployment>
+    </div>
  </div>
 </template>

 <script setup>
+import { ref, onMounted, onUnmounted } from "vue";
 import Head from "../../components/largeScreen/headHome.vue";
 import Statistic from "./components/statistic.vue";
 import Map from "./components/map.vue";
@ -27,20 +33,58 @@ import RightBorder from "../../components/largeScreen/rightBorder.vue";
 import BottomBorder from "../../components/largeScreen/bottomBorder.vue";
 // 定义标题名称
 const title = "三级劳务体系⼈员数据";
+// 缩放比例
+const scale = ref(1);
+
+// 计算缩放比例
+const calculateScale = () => {
+  const windowWidth = window.innerWidth;
+  const designWidth = 1920;
+  scale.value = windowWidth / designWidth;
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+  calculateScale();
+};
+
+// 生命周期钩子
+onMounted(() => {
+  calculateScale();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
 </script>

 <style lang="scss" scoped>
+.scale-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
 .allBox {
  width: 1920px;
  height: 3240px;
-  margin: 0 auto;
+  // margin: 0 auto;
  background: url("~@/assets/images/largeScreen/all-bg.png") no-repeat;
  background-size: 100%;
  position: relative;
+  transition: transform 0.3s ease; // 添加过渡效果
 }
 </style>
 <style lang="scss">
 #app {
  overflow: auto !important;
 }
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>