ggfwjsc/src/view/home.vue

<template>
  <div>
    <div class="content">
      <div class="ydool_body">
        <!-- <div id="header">
          <img class="title" src="../assets/img_07.png" alt="" />
        </div> -->
        <Header />
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "../components/header.vue";

import { ref, onMounted, onBeforeMount } from "vue";

// 监听缩放
window.addEventListener("resize", () =>
  setTimeout(function () {
    //监测分辨率发生改变就对页面进行刷新，可以改变zoom的值
    location.reload();
    // bodyScale();
  }, 10)
);

const insertCss = (select, styles) => {
  console.log(styles);
  if (document.styleSheets.length === 0) {
    //如果没有style标签,则创建一个style标签
    var style = document.createElement("style");
    document.head.appendChild(style);
  }
  var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
  var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
  for (var prop in styles) {
    str +=
      prop.replace(/([A-Z])/g, function (item) {
        //使用正则把大写字母替换成 '-小写字母'
        return "-" + item.toLowerCase();
      }) +
      ":" +
      styles[prop] +
      ";";
  }
  str += "}";
  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);
});
</script>

<style scoped lang="scss">
.content {
  background-image: url("../assets/bgImg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

:root {
  --zoom: 1;
}

.ydool_body {
  zoom: var(--zoom);
}
</style>