<script setup lang="ts">
onMounted(() => {
  //首先我们获得视口高度并将其乘以1%以获得1vh单位的值
  let vh = window.innerHeight * 0.01;
  // 然后，我们将——vh自定义属性中的值设置为文档的根
  document.documentElement.style.setProperty("--vh", `${vh}px`);

  // 我们监听resize事件 视图大小发生变化就重新计算1vh的值
  window.addEventListener("resize", () => {
    // 我们执行与前面相同的脚本
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  });
});
</script>

<template>
  <div class="all">
    <router-view />
  </div>
</template>

<style scoped>
@font-face {
  font-family: "Microsoft YaHei-Bold"; /* 字体名称 */
  src: url("../src/assets/font/MicrosoftYaHei-Bold.ttf"); /* 字体文件相对路径 */
}
@font-face {
  font-family: "Microsoft YaHei"; /* 字体名称 */
  src: url("../src/assets/font/MicrosoftYaHei.ttf"); /* 字体文件相对路径 */
}
.all {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  background: url(/src\assets\img\bg.png);
  background-size: 100% 100%;
  overflow: hidden;
}
* {
  font-family: "Microsoft YaHei-Bold, Microsoft YaHei";
}
</style>
