根据scale缩放扩大比例来实现大屏适配,只需要把内容放在组件里就可以实现

<scaleBox>
    <componentA></componentA>
    <componentB></componentB>
    <componentC></componentC>
<scaleBox/>

<template>
  <div :style="{ width: width + 'px', height: height + 'px'}" ref="scaleBox" class="scaleBox">
    <slot></slot>
  </div>
</template>


<script>
export default {
  name: 'ScaleBox',
  components: {},
  data () {
    return {
      width: 1920,
      height: 1080,
      scale: ''
    }
  },
  mounted () {
    this.setScale()
    window.addEventListener('resize', this.debounce(this.setScale, 100))
  },
  methods: {
    setScale () {
      console.log(window.innerWidth)
      console.log(window.innerHeight)
      if (window.innerHeight === this.height) {
        this.height = 1080
      } else {
        this.height = 937
      }
      this.scale = this.getScale()
      if (this.$refs.scaleBox) {
        this.$refs.scaleBox.style.setProperty('--scale', this.scale)
      }
    },
    getScale () {
      const { width, height } = this
      const ww = window.innerWidth / width
      const wh = window.innerHeight / height
      console.log(ww < wh ? ww : wh)
      return ww < wh ? ww : wh
    },
    debounce (fn, delay = 500) {
      let timer = null
      return function () {
        const that = this
        const args = arguments
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(that, args)
        }, delay)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
#scaleBox {
  --scale: 1
}
.scaleBox{
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
}
</style>