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() {
  
  	},
  	created() {
  		this.$nextTick(() => {
  			const $app = this.$refs.app;
  			// 设置 屏幕 百分比 尺寸 适配
  			const standardScale = "100%" / "100%";

  			window.addEventListener(
  				"resize",
  				_.debounce(function () {

  					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 <= 700) {

  							$app.style.cssText = `

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

  						}
  						else if (docHeight <= 750) {

  							$app.style.cssText = `

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

  						}
  						else {
  							$app.style.cssText = `

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

  						}
  
  					} else {
  						$app.style.cssText = '';
  					}

  				}),
  				300
  			);
  
  			if (document.createEvent) {
  				var event = document.createEvent("HTMLEvents");
  				event.initEvent("resize", true, true);
  				window.dispatchEvent(event);
  			} else if (document.createEventObject) {
  				window.fireEvent("onresize");
  			}
  		});
  	}

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