<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>
