FE-daPengDaPing-55/src/App.vue

<template>
    <div id="app" :class="$route.path == '/codeHtml'?'codeHtmlPage':''"
         :style="$route.path == '/codeHtml'?'width:'+innerWidth+'px!important;height:'+innerHeight+'px!important;':''">
      <router-view/>
    </div>
</template>

<script>
  import axios from 'axios'
  import { MessageBox } from 'element-ui'
  export default  {
    name:  'App',
    data(){
      return{
        innerHeight:window.innerHeight,
        innerWidth:window.innerWidth,
        timer:null,
      }
    },
    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.banZoom();
      //根据当前浏览器宽度与额定尺寸计算transform缩放值
      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';
        })();
      };
      // this.inspectRenewal();
    },
    methods:{
      banZoom(){
        // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
        document.addEventListener('keydown', function (event) {
          if ((event.ctrlKey === true || event.metaKey === true) &&
            (event.which === 61 || event.which === 107 ||
              event.which === 173 || event.which === 109 ||
              event.which === 187 || event.which === 189)) {
            event.preventDefault()
          }
        }, false)
        // Chrome IE 360
        window.addEventListener('mousewheel', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
        // firefox
        window.addEventListener('DOMMouseScroll', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
      },
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
  }
</script>
<style>
  .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
    background: rgba(0,0,0,0.4);
  }
  .codeHtmlPage{
    transform: scale(1)!important;
  }
  @font-face {
    font-family: 'alimmFonts';
    src: url('./assets/fonts/alimm.ttf') format('truetype'); /* 根据实际路径调整 */
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'ysFonts';
    src: url('./assets/fonts/ys.ttf') format('truetype'); /* 根据实际路径调整 */
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'AlimamaShuHeiTi';
    src: url('./assets/fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype'); /* 标题 */
    font-weight: normal;
    font-style: normal;
    /*
    font-family: AlimamaShuHeiTi;
    */
  }
  @font-face {
    font-family: 'YouSheBiaoTiHei';
    src: url('./assets/fonts/YouSheBiaoTiHei.ttf') format('truetype'); /* 数字 */
    font-weight: normal;
    font-style: normal;
    /*
    font-family: YouSheBiaoTiHei;
    */
  }
  @font-face {
    font-family: 'SOURCEHANSANSCN';
    src: url('./assets/fonts/SOURCEHANSANSCN.OTF') format('truetype'); /* 正文 */
    font-weight: normal;
    font-style: normal;
    /*
    font-family: SOURCEHANSANSCN;
    */
  }
</style>