大屏的计算scale适应当前电脑屏幕

 

屏幕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{
  width: 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{
  width: 5760px;
  height: 1620px;
  overflow: hidden;
  transform-origin: 0 0;
}
</style>