baoman / Ezquiz_Platform

  <template>

    <div id="app" ref="app">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>

  </template>
  
  <script>

  import _ from "lodash";

  export default {

    name: "app",
    mounted() {},
    methods: {
      _reSize() {
        const $app = this.$refs.app;

        const standardScale = "100%" / "100%";

        const docHeight = document.body.clientHeight;

        const docWidth = document.body.clientWidth;

        if (docWidth < 1700) {
          const currentScale = docHeight / docWidth;

          let [scale, translate] = [0, 0];
          if (currentScale < standardScale) {
            // 以高度计算
            scale = docHeight / 1080;

            const shouleWidth = 1920 * scale;

            const offsetWidth = docWidth - shouleWidth;

            translate =
              offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
          } else {
            // 以宽度计算
            scale = docWidth / 1920;

            const shouleHeight = 1080 * scale;

            const offsetHeight = docHeight - shouleHeight;

            translate =
              offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
          }

          if (docHeight <= 600) {
            $app.style.cssText = `

  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:830px;
            				`;

          } else if (docHeight == 610) {
            $app.style.cssText = `

  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:885px;

            				`;
          } else if (docHeight <= 606) {
            $app.style.cssText = `

  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:850px;
            				`;

          } else if (docHeight <= 650) {
            $app.style.cssText = `

  							transform: scale(${scale}) ${translate};
  							transform-origin: top left;
  							min-width: 1920px;
  							min-height:850px;
            				`;

          } else if (docHeight <= 700) {
            $app.style.cssText = `

  								transform: scale(${scale}) ${translate};
  								transform-origin: top left;
  								min-width: 1920px;

  								min-height: 890px; 

            					`;

          } else if (docHeight <= 750) {
            $app.style.cssText = `

  								transform: scale(${scale}) ${translate};
  								transform-origin: top left;
  								min-width: 1920px;

  								min-height: 910px; 

            					`;

          }
          // else {
          // 	$app.style.cssText = `
          // 				transform: scale(${scale}) ${translate};
          // 				transform-origin: top left;
          // 				min-width: 1920px;
          // 				min-height:1045px;
          // 			`;
          // }
          else {
            $app.style.cssText = `

            transform: scale(${scale}) ${translate};
  					transform-origin: top left;
            min-width: 1920px;
        		min-height:989px;

            					`;

          }
        } else {
          $app.style.cssText = "";
        }
      },
    },
    created() {
      let that = this;
  
      this.$nextTick(() => {
        if (document.createEvent) {
          that._reSize();
        } else if (document.createEventObject) {
          that._reSize();
        }
      });
    },
  };

  </script>
  
  <style lang="scss">
  body {

    margin: 0px;
    padding: 0px;
    font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC,
      Hiragino Sans GB, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;

  }
  
  #app {

    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;

  }

  
  a {

    color: #56a9ff;

  }

  .fade-enter-active,
  .fade-leave-active {

    transition: all 0.2s ease;

  }
  
  .fade-enter,
  .fade-leave-active {

    opacity: 0;

  }

  #nprogress .bar {

    height: 3px !important;
    background: #56a9ff !important; //自定义颜色

  }
  </style>