大屏使用scale自适应任意屏，非常规屏拉伸宽高

<!-- 大屏 -->
<template>
  <div class="dataScreenBox" ref="dataScreenBox">
    <div class="dataScreenBoxChild" :style="{ width: width + 'px', height: height + 'px' }">
        内容
    </div>
  </div>
</template>
<script>
export default {
  name: 'Screen',
  components:{
  },
  data() {
    return {
      width: 1920,
      height: 1080,
      scale: 1,
    }
  },
  created() {
  },
  mounted() {
    this.setScale()
    window.addEventListener("resize", this.setScale)
  },
  destroyed(){

  },
  methods: {
    getScale() {
      const { width, height } = this
      let ww = window.innerWidth / width
      let wh = window.innerHeight / height
      return `${ww},${wh}`
    },
    setScale() {
      this.scale = this.getScale()
      if (this.$refs.dataScreenBox) {
        this.$refs.dataScreenBox.style.setProperty("--scale", this.scale)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
// 父容器
.dataScreenBox {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
// 子容器
.dataScreenBoxChild {
  position: absolute;
  transform-origin: left top 0px;
  transform: scale(var(--scale));
  transition: 0;
  z-index: 999;
  background: #012469;
  display: flex;
  flex-direction: column;
}
</style>