FE-V2-PC/src/App.vue

<template>
  <!--<dv-full-screen-container style="height:100%!important;">-->
    <div id="app">
      <router-view />
    </div>
  <!--</dv-full-screen-container>-->
</template>

<script>
  // import DevicePixelRatio from '@/utils/devicePixelRatio'
  export default  {
    name:  'App',
    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
        },
      }
    },
    // created() {
    //   new DevicePixelRatio().init()
    // },
    mounted(){
      let cssText1 = '.el-dialog{transform:scale('+document.documentElement.clientWidth / 1920+')}'
      let cssText2 = '.el-message-box{transform:scale('+document.documentElement.clientWidth / 1920+')}'
      let cssText3 = '.el-tooltip__popper{transform:scale('+document.documentElement.clientWidth / 1920+')}'
      this.insertCSS(cssText1);
      this.insertCSS(cssText2);
      this.insertCSS(cssText3);
      document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
      document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
      window.onresize = () => {
        return (() => {
          document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
          document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
        })();
      };
    },
    methods:{
      insertCSS (cssStyle) {
        var style = document.createElement("style");
        var theHead = document.head || document.getElementsByTagName('head')[0];
        style.type = "text/css"; //IE需要设置
        if (style.styleSheet) { //IE
          var ieInsertCSS = function() {
            try {
              style.styleSheet.cssText = cssStyle;
            } catch (e) {}
          };
          //若当前styleSheet不能使用，则放到异步中
          if (style.styleSheet.disable) {
            setTimeout(ieInsertCSS, 10);
          } else {
            ieInsertCSS();
          }
        } else { //W3c浏览器
          style.appendChild(document.createTextNode(cssStyle));
          theHead.appendChild(style);
        }
      }
    }
  }
</script>
<style>
  html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    overflow: hidden;
  }
  #app{
    transform-origin: left top;
    width:1920px;
    display: flex;
    flex-direction: column;
    flex:1;
  }
  body::-webkit-scrollbar{ display: none; }
  .v-modal{
    display: none;
  }
  .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
    background: rgba(0,0,0,0.4);
  }
</style>