<template>
<div id="bigScreen">
</div>
</template>
<script>
export default {
name: "bigScreen",
data(){
return{
}
},
mounted() {
this.setBodyCss();
this.resize();
window.addEventListener("resize", () => {
this.resize();
});
},
methods:{
setBodyCss() {
document.body.style.width = "1920px";
document.body.style.height = "1080px";
document.body.style.transform = "scale(1, 1)";
document.body.style.transformOrigin = "left top 0px";
document.body.style.overflow = "hidden";
},
resize() {
this.resizeCenter();
this.resizeFullBak();
},
resizeCenter() {
if (!window.screen.height || !window.screen.width)
return this.resizeCenterBak();
let ratio = window.innerHeight / window.screen.height;
document.body.style.transform = "scale(" + ratio + ")";
document.body.style.transformOrigin = "left top";
},
resizeCenterBak() {
let ratioX = window.innerWidth / document.body.offsetWidth;
let ratioY = window.innerHeight / document.body.offsetHeight;
let ratio = Math.min(ratioX, ratioY);
document.body.style.transform = "scale(" + ratio + ")";
document.body.style.transformOrigin = "left top";
},
resizeFullBak() {
let ratioX = window.innerWidth / document.body.offsetWidth;
let ratioY = window.innerHeight / document.body.offsetHeight;
document.body.style.transform = "scale(" + ratioX + ", " + ratioY + ")";
document.body.style.transformOrigin = "left top";
},
}
}
</script>
<style scoped>
#bigScreen {
width: 1920px;
height: 1080px;
/*background-image: url("./images/bigScreen.png");*/
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;
}
</style>
vue可视化大屏自适应
最新推荐文章于 2024-08-05 18:19:35 发布