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

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

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

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(() => {
  reset_font();
  reset_font();
});
window.addEventListener("resize", function () {
  reset_font();
  reset_font();
});
</script>

<style scoped lang="scss">
.content {
  background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
  // background-image: url("../assets/bgImg.png");
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // 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 {
  * {
    pointer-events: all;
  }
}
</style>
