FE-V2-PC/src/App.vue

<template>
  <!--<dv-full-screen-container style="display: flex;flex-direction: column;height:1080px;width:1920px;">-->
  <div id="app"
       :class="desktopWidth==1366&&windowHeight<748&&desktopHeight<=768?'appWindowSize1366_768':(
               desktopWidth==1360&&windowHeight<748&&desktopHeight<=768?'appWindowSize1366_760':(
               desktopWidth==1360&&windowHeight>758&&desktopHeight<=768?'appWindowSize1366_768_max':(
               desktopWidth==1440&&windowHeight<880&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1440_900':(
               desktopWidth==1440&&windowHeight>890&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1440_900_max':(
               desktopWidth==1400&&windowHeight<1030&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1400_1050':(
               desktopWidth==1400&&windowHeight>1040&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1400_1050_max':(
               desktopWidth==1600&&windowHeight<880&&desktopHeight>768&&desktopHeight<=900?'appWindowSize1600_900':(
               desktopWidth==1680&&windowHeight<1030&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1680_1050':(
               desktopWidth==1680&&windowHeight>1040&&desktopHeight>900&&desktopHeight<=1050?'appWindowSize1680_1050_max':(
               desktopWidth==2560&&windowHeight<1420&&desktopHeight>1080&&desktopHeight<=1440?'appWindowSize2560_1440':(
               desktopWidth==2560&&windowHeight<1580&&desktopHeight>1440&&desktopHeight<=1600?'appWindowSize2560_1600':(
               desktopWidth==2560&&windowHeight>1590&&desktopHeight>1440&&desktopHeight<=1600?'appWindowSize2560_1600_max':(
               desktopWidth==1920&&windowHeight<1060&&desktopHeight>1050&&desktopHeight<=1080?'appWindowSize1920_1080':''
               )))))))))))))">
    <router-view />
  </div>
  <!--</dv-full-screen-container>-->
</template>

<script>
  export default  {
    name:  'App',
    data() {
      return {
        windowHeight:"",
        desktopHeight:"",
        desktopWidth:"",
      }
    },
    metaInfo() {
      return {
        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
        titleTemplate: title => {
          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
        },
      }
    },
    mounted(){
      this.windowHeight = document.body.clientHeight;
      this.desktopHeight = screen.height;
      this.desktopWidth = screen.width;
      console.log("windowHeight",this.windowHeight)
      console.log("desktopHeight",this.desktopHeight)
      console.log("desktopWidth",this.desktopWidth)
      document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
      window.onresize = () => {
        return (() => {
          this.windowHeight = document.body.clientHeight;
          this.desktopHeight = screen.height;
          this.desktopWidth = screen.width;
          console.log("windowHeight",this.windowHeight)
          console.log("desktopHeight",this.desktopHeight)
          console.log("desktopWidth",this.desktopWidth)
          document.getElementById('app').style.transform = `scale(${document.body.clientWidth / 1920})`;
        })();
      };
    },
  }
</script>
<style>
  html,body{
    margin:0;
    height:100%;
    width:100%;
    overflow: hidden;
  }
  #app{
    height:1080px;
    width:1920px;
    transform-origin: left top;
    display: flex;
    flex-direction: column;
    flex:1;
  }
  .appWindowSize1366_768{
    height:calc(1080px - 200px)!important;
  }
  .appWindowSize1366_760{
    height:calc(1083px - 200px)!important;
  }
  .appWindowSize1366_768_max{
    height:142%!important;
  }
  .appWindowSize1440_900{
    height:calc(1080px - 70px)!important;
  }
  .appWindowSize1440_900_max{
    height:134%!important;
  }
  .appWindowSize1400_1050{
    height:138%!important;
  }
  .appWindowSize1400_1050_max{
    height:138%!important;
  }
  .appWindowSize1600_900{
    height:calc(1080px - 170px)!important;
  }
  .appWindowSize1680_1050{
    height:calc(1080px - 40px)!important;
  }
  .appWindowSize1680_1050_max{
    height:115%!important;
  }
  .appWindowSize1920_1080{
    height:calc(1080px - 140px)!important;
  }
  .appWindowSize2560_1440{
    height:calc(1080px - 110px)!important;
  }
  .appWindowSize2560_1600{
    /*height:calc(1080px - 120px)!important;*/
  }
  .appWindowSize2560_1600_max{
    /*height:115%!important;*/
  }
</style>