<template>
|
<div id="app" >
|
<!-- <img src="./assets/logo.png"> -->
|
<router-view/>
|
</div>
|
</template>
|
|
<script>
|
// import _ from 'lodash'
|
import devPixelRatio from "./devicePixelRatio.js";
|
export default {
|
name: 'App',
|
created() {
|
new devPixelRatio().init(); // 初始化页面比例
|
},
|
// mounted() {
|
// 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 < 1680) {
|
|
// const currentScale = docHeight / docWidth;
|
// let [scale, translate] = [0, 0];
|
// if (currentScale < standardScale) {
|
// console.log(11111);
|
// // 以高度计算
|
// scale = docHeight / 1080;
|
// const shouleWidth = 1920 * scale;
|
// console.log(shouleWidth);
|
// const offsetWidth = docWidth - shouleWidth;
|
// translate =
|
// offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
|
// } else {
|
// console.log(2222);
|
// // 以宽度计算
|
// scale = docWidth / 1920;
|
// const shouleHeight = 1080 * scale;
|
// console.log(docWidth);
|
// console.log(scale);
|
// console.log(shouleHeight);
|
// const offsetHeight = docHeight - shouleHeight;
|
// console.log(offsetHeight);
|
// translate =
|
// offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
|
// }
|
// console.log(translate);
|
// $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>
|
#app {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
color: #2c3e50;
|
margin-top: 60px;
|
}
|
</style>
|
