<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 eBubble from "./echarts/bubble.vue";
import ePie from "./echarts/pie.vue";
import ePie2 from "./echarts/pie2.vue";
import eGraph from "./echarts/graph.vue";
import { ref, onMounted, onBeforeMount } from "vue";

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

const ismobile = ref();

// let zoom = document.body.clientWidth / 1920;
// document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
onBeforeMount(() => {
  let zoom = document.body.clientWidth / 1920;
  document.getElementsByTagName("body")[0].style.setProperty("--zoom", zoom);
  ismobile.value = false;
});
</script>

<style scoped lang="scss">
.content {
  background-color: rgba(2, 4, 27, 1);
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-size: 100%;
  overflow: hidden;
}

:root {
  --zoom: 1;
}

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