<template>
  <section id="app" @click="enterFullscreen">
    <router-view></router-view>
  </section>
</template>

<script>
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();
        }
      }
    },
  },
};
</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');
}

.panmen {
  font-family: 'PanMen';
}

.youshe {
  font-family: 'YouSheBiaoTiHei';
}

* {
  color: #fff;

  [class^="el-"] {
    color: inherit;

    * {
      color: inherit;
    }
  }

  // 思源黑体 微软雅黑 无衬线字体
  font-family: 'Source Han Sans',
  'Microsoft YaHei',
  Arial,
  sans-serif;
}

#app {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
