处理适配问题

package.json

@@ -50,6 +50,7 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "leaflet": "^1.9.4",
+    "lodash": "^4.17.21",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

src/App.vue

@@ -1,17 +1,19 @@
 <template>
+    <ScaleBox>
   <div id="app">
     <router-view />
     <theme-picker />
   </div>
+</ScaleBox>
 </template>
 
 <script>
 import ThemePicker from "@/components/ThemePicker";
-
+import ScaleBox from "@/components/scaleBox";
 export default {
   mounted() {},
   name: "App",
-  components: { ThemePicker },
+  components: { ThemePicker,ScaleBox },
   metaInfo() {
     return {
       title:

src/components/NavigationBar/index.vue

@@ -110,7 +110,7 @@ export default {
     .main-title {
       font-size: 36px;
       color: #ffffff;
-      letter-spacing: 3px;
+      letter-spacing: 2px;
       text-shadow: #333 2px 2px 2px;
       font-family: "xiniu";
     }
@@ -148,7 +148,7 @@ export default {
     .user-data {
       display: flex;
       align-items: center;
-      padding-top: 5px;
+      padding-top: 8px;
       cursor: pointer;
       .user-icon {
         height: 19px;
@@ -171,7 +171,8 @@ export default {
     color: #cdfbff;
     font-weight: 400;
     background: url("~@/assets/images/ui/btn_bg.png");
-    padding: 10px 28px;
+    background-size: 100% 100%;
+    padding: 12px 20px 14px 20px;
     font-family: "Alibaba-PuHuiTi-Regular.otf";
   }
 

src/components/scaleBox/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div v-bind:style="styleObject" class="scale-box">
+      <slot></slot>
+    </div>
+  </template>
+   
+  <script>
+  import debounce from "lodash.debounce";
+  const that = this;
+  export default {
+    components: {},
+    data() {
+      return {
+        width: 1920,
+        height: 1080,
+        scaleX: null,
+        scaleY: null,
+      };
+    },
+    computed: {
+      styleObject() {
+        let obj = {
+          transform: `scale(${this.scaleX},${this.scaleY}) translate(-50%, -50%)`,
+          WebkitTransform: `scale(${this.scaleX},${this.scaleY}) translate(-50%, -50%)`,
+          width: this.width + "px",
+          height: this.height + "px",
+        };
+        return obj;
+      },
+    },
+    mounted() {
+      this.getScale();
+      window.addEventListener("resize", this.setScale);
+    },
+    methods: {
+      getScale() {
+        // 分别计算X轴和Y轴的缩放比例
+        this.scaleX = window.innerWidth / this.width;
+        this.scaleY = window.innerHeight / this.height;
+      },
+   
+      setScale: debounce(function () {
+        // 获取到缩放比，设置它
+        this.getScale();
+      }, 500),
+    },
+    beforeDestroy() {
+      window.addEventListener("resize", this.setScale);
+    },
+  };
+  </script>
+   
+  <style scoped lang="scss">
+  .scale-box {
+    transform-origin: 0 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transition: 0.3s;
+  }
+  </style>
+   

src/views/index.vue

@@ -1,18 +1,24 @@
 <template>
+  
+
+
   <div class="pc-container">
     <NavigationBar></NavigationBar>
     <LeafletMap />
   </div>
+
 </template>
 
 <script>
 import NavigationBar from "@/components/NavigationBar/index.vue";
 import LeafletMap from "@/components/LeafletMap";
+
 export default {
   name: "Index",
   components: {
     NavigationBar,
     LeafletMap,
+   
   },
   data() {
     return {