<template>
  <div>
    <!--        1920×1080-->
    <v-scale-screen :width="windowWidth<1920?windowWidth:1920" :height="windowHeight<1080?windowHeight:1080"
                    v-if="isShowScreen" >
      <div class="main">
        <router-view></router-view>
      </div>
    </v-scale-screen>
  </div>

</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      isShowScreen: false,
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
    }
  },

  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
      this.$store.commit('setWindowHeight', this.windowHeight);
    }
  },
  mounted() {
    setTimeout(() => {
      this.isShowScreen = true
    }, 100)
    window.addEventListener('resize', this.handleResize);
  },

  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
}
</script>
<style lang="scss" scoped>

.header {
  user-select: none;
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
}

.main {
  user-select: none;
  position: relative;
  width: 100%;
  height: 100%;
  //background: linear-gradient( 270deg, #0A362A 0%, #0F4433 54%, #0A362A 100%);
}

.footer {
  user-select: none;
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  margin: 0 auto;
  justify-content: center;
}


</style>
