<template>
  <dv-full-screen-container class="app">
    <dv-loading v-show="isLoding">Loading...</dv-loading>
    <comHeader></comHeader>
    <main class="contentBox" @click="enterFullscreen">
      <router-view></router-view>
    </main>
  </dv-full-screen-container>
</template>

<script>
import comHeader from '@/components/comHeader/index.vue';
export default {
  data: () => {
    return {
      isLoding: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.isLoding = false;
    }, 1000);
  },
  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">
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: #fff;
}
.app {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/img/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  .contentBox {
    height: calc(100% - 100px);
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    padding-top: 0px;
  }
}
</style>
