适配

src/assets/css/common.css

@@ -0,0 +1,55 @@
+* {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  outline: none;
+  border: none;
+  text-decoration: none;
+  /* color: #8FFDFF; */
+}
+
+span,
+p,
+a {
+  font-size: 14px;
+}
+em {
+  font-family: dsFont;
+  font-size: 32px;
+  font-size: normal;
+  font-weight: bold;
+  color: #8FFDFF;
+}
+
+html::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
+}
+body {
+  background: none;
+  overflow: hidden;
+  /* width: 1920px;
+  height: 1080px; */
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+#app {
+  flex: 1;
+  /* height: 1080px; */
+  box-sizing: border-box;
+}
+
+.content {
+  flex: 1;
+}
+
+#m {
+  width: 1920px !important;
+  height: 1080px !important;
+  overflow: hidden;
+  position: absolute;
+  z-index: 101;
+}

src/main.js

@@ -5,6 +5,6 @@ import App from './App.vue'
 import router from "./router";
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-
+import './assets/css/common.css'
 
 createApp(App).use(router).use(ElementPlus).mount('#app')

src/view/education.vue

@@ -345,7 +345,6 @@ onBeforeMount(() => {
 .module {
   display: flex;
   width: 100%;
-  height: calc(100vh - 112px);
 }
 
 .left_bg {

src/view/home.vue

@@ -1,13 +1,11 @@
 <template>
-  <div>
+  <div id="m" class="content">
-    <div class="content">
+    <div id="container">
-      <div class="ydool_body">
+      <!-- <div id="header">
-        <!-- <div id="header">
           <img class="title" src="../assets/img_07.png" alt="" />
         </div> -->
-        <Header />
+      <Header />
-        <router-view />
+      <router-view />
-      </div>
     </div>
   </div>
 </template>
@@ -18,66 +16,119 @@ import Header from "../components/header.vue";
 import { ref, onMounted, onBeforeMount } from "vue";
 
 // 监听缩放
-window.addEventListener("resize", () =>
+// window.addEventListener("resize", () =>
-  setTimeout(function () {
+//   setTimeout(function () {
-    //监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
+//     //监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
-    location.reload();
+//     location.reload();
-    // bodyScale();
+//     // bodyScale();
-  }, 10)
+//   }, 10)
-);
+// );
 
-const insertCss = (select, styles) => {
+// const insertCss = (select, styles) => {
-  console.log(styles);
+//   console.log(styles);
-  if (document.styleSheets.length === 0) {
+//   if (document.styleSheets.length === 0) {
-    //如果没有style标签,则创建一个style标签
+//     //如果没有style标签,则创建一个style标签
-    var style = document.createElement("style");
+//     var style = document.createElement("style");
-    document.head.appendChild(style);
+//     document.head.appendChild(style);
-  }
+//   }
-  var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
+//   var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
-  var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
+//   var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
-  for (var prop in styles) {
+//   for (var prop in styles) {
-    str +=
+//     str +=
-      prop.replace(/([A-Z])/g, function (item) {
+//       prop.replace(/([A-Z])/g, function (item) {
-        //使用正则把大写字母替换成 '-小写字母'
+//         //使用正则把大写字母替换成 '-小写字母'
-        return "-" + item.toLowerCase();
+//         return "-" + item.toLowerCase();
-      }) +
+//       }) +
-      ":" +
+//       ":" +
-      styles[prop] +
+//       styles[prop] +
-      ";";
+//       ";";
-  }
+//   }
-  str += "}";
+//   str += "}";
-  styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
+//   styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
+// };
+
+// onBeforeMount(() => {
+//   let zoom = document.body.clientWidth / 1920;
+//   document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
+//   //解决zoom放大缩小导致echarts位置偏移问题
+//   let strScale = `scale(${zoom})`;
+//   var obj = {
+//     zoom: 1 / zoom,
+//     transform: strScale,
+//     transformOrigin: "0 0",
+//   };
+//   insertCss("canvas", obj);
+// });
+
+const reset_font = () => {
+  let width = document.documentElement.clientWidth || document.body.clientWidth;
+  let height =
+    document.documentElement.clientHeight || document.body.clientHeight;
+  document.querySelector("#m").style.transformOrigin = "top left";
+  document.querySelector("#m").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
-
+onMounted(() => {
-onBeforeMount(() => {
+  reset_font();
-  let zoom = document.body.clientWidth / 1920;
+  reset_font();
-  document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
+});
-  //解决zoom放大缩小导致echarts位置偏移问题
+window.addEventListener("resize", function () {
-  let strScale = `scale(${zoom})`;
+  reset_font();
-  var obj = {
+  reset_font();
-    zoom: 1 / zoom,
-    transform: strScale,
-    transformOrigin: "0 0",
-  };
-  insertCss("canvas", obj);
 });
 </script>
 
 <style scoped lang="scss">
 .content {
-  background-image: url("../assets/bgImg.png");
+  background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
-  background-size: 100% 100%;
+  // background-image: url("../assets/bgImg.png");
-  background-repeat: no-repeat;
+  // background-size: 100% 100%;
-  height: 100vh;
+  // background-repeat: no-repeat;
-  width: 100vw;
+  // height: 100vh;
+  // width: 100vw;
+  // overflow: hidden;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  // color: #ccffff;
+}
+html {
+  width: 100%;
+  height: 100%;
+}
+body {
+  width: 100%;
+  height: 100%;
+}
+#m {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  // position: absolute;
+  z-index: 101;
+
+}
+#emap {
+  width: 100%;
+  height: 980px;
+  position: absolute;
+  top: 100px;
+  left: 0;
+  z-index: 100;
+}
+#container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
   overflow: hidden;
 }
-
+.main {
-:root {
+  * {
-  --zoom: 1;
+    pointer-events: all;
-}
+  }
-
-.ydool_body {
-  zoom: var(--zoom);
 }
 </style>

src/view/hygiene.vue

@@ -139,7 +139,6 @@ const change = (name, index) => {
 .module {
   display: flex;
   width: 100%;
-  height: calc(100vh - 112px);
 }
 
 .yd_title {

src/view/yl.vue

@@ -216,7 +216,6 @@ const change = (name, index) => {
 .module {
   display: flex;
   width: 100%;
-  height: calc(100vh - 112px);
 }
 
 .yd_title {