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 = '';
  			}
  		},
  	},
  	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 .2s ease;
  }
  
  .fade-enter,
  .fade-leave-active {
  	opacity: 0;
  }

  #nprogress .bar {

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

  }
  </style>