<template>
  <div id="app">
    <comHeader></comHeader>
    <main class="contentBox" @click="enterFullscreen">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
import comHeader from '@/components/comHeader/comHeader.vue';
export default {
  data: () => {
    return {
      isLoding: false,
    };
  },
  methods: {
    enterFullscreen() {
      const element = document.documentElement;
      // 请求全屏模式
      if (!this.isLoding) {
        if (element.webkitRequestFullscreen) {
          // Chrome, Safari and Opera
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          // IE/Edge
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          // Firefox
          element.mozRequestFullScreen();
        } else if (element.requestFullscreen) {
          element.requestFullscreen();
        }
      }
    },
  },
  components: {
    comHeader,
  },
};
</script>

<style lang="scss">
@font-face {
  font-family: 'PanMen';
  src: url('@/assets/fonts/PanMen.ttf') format('opentype');
}
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('opentype');
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: #fff;
  font-family: 'YouSheBiaoTiHei', Microsoft YaHei;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>
