屏幕1 ------------------standardWidth = 1920
<template> <div id="screen-inner" ref="screenInner" :style="`transform-origin: 0 0;overflow: hidden auto;background-color:${backgroundColor}`"> <router-view></router-view> </div> </template> <script> export default { data () { return {} }, computed: { backgroundColor () { return this.$route.name === 'screen' ? '#437ec7' : 'transparent' } }, methods: { // 自动缩放大屏页面 AutoSize() { let standardWidth = 1920 let clientWidth = window.innerWidth let clientHeight = window.innerHeight let scale = clientWidth / standardWidth let screenInner = document.getElementById('screen-inner') screenInner.style.width = standardWidth + 'px' screenInner.style.transform = "scale(" + scale + ")" screenInner.style.height = clientHeight / scale + 'px' } }, mounted() { window.addEventListener("resize", this.AutoSize) this.$nextTick(() => { this.AutoSize() }) }, destroyed() { window.removeEventListener("resize", this.AutoSize) } }; </script> <style> </style>
屏幕2-----------------
let standardWidth = 2880
let standarHeight = 810
<template> <div id="screen-inner"> <router-view></router-view> </div> </template> <script> export default { methods: { // 自动缩放大屏页面 AutoSize() { let standardWidth = 2880 let standarHeight = 810 let clientWidth = window.innerWidth let clientHeight = window.innerHeight let wscale = clientWidth / standardWidth let hscale = clientHeight / standarHeight let screenInner = document.getElementById('screen-inner') screenInner.style.transform = "scale(" + wscale + "," + hscale + ")" } }, mounted() { window.addEventListener("resize", this.AutoSize) this.$nextTick(() => { this.AutoSize() }) }, destroyed() { window.removeEventListener("resize", this.AutoSize) } }; </script> <style scoped> #screen-inner{ 2880px; height: 810px; overflow: hidden; transform-origin: 0 0; } </style>
屏幕3-----------------------
let standardWidth = 5760
let standarHeight = 1620
<template> <div id="screen-inner"> <router-view></router-view> </div> </template> <script> export default { methods: { // 自动缩放大屏页面 AutoSize() { let standardWidth = 5760 let standarHeight = 1620 let clientWidth = window.innerWidth let clientHeight = window.innerHeight let wscale = clientWidth / standardWidth let hscale = clientHeight / standarHeight let screenInner = document.getElementById('screen-inner') screenInner.style.transform = "scale(" + wscale + "," + hscale + ")" } }, mounted() { window.addEventListener("resize", this.AutoSize) this.$nextTick(() => { this.AutoSize() }) }, destroyed() { window.removeEventListener("resize", this.AutoSize) } }; </script> <style scoped> #screen-inner{ 5760px; height: 1620px; overflow: hidden; transform-origin: 0 0; } </style>