大屏适配window.onresize监听窗口变化，该方法已用于生产

js部分  // 本次开发场景2880*1080  配合css
    mounted () {
        this.pageResize()
        window.onresize = () => {
            setTimeout(() => {
                this.pageResize()
            }, 200)
        }
    },
     methods:{
　　　　　pageResize () {
            // * 默认缩放值
            let scale = {
                 '1',
                height: '1'
            }
            // * 设计稿尺寸（px）根据实际修改
            let baseWidth = 2880
            let baseHeight = 1080
            // * 需保持的比例（默认2.66667）
            const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
            // 当前宽高比
            const currentRate = parseFloat(
                (window.innerWidth / window.innerHeight).toFixed(5)
            )
            if (currentRate > baseProportion) {
                // 表示更宽
                scale.width = (
                    (window.innerHeight * baseProportion) /
                    baseWidth
                ).toFixed(5)
                scale.height = (window.innerHeight / baseHeight).toFixed(5)
                this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
            } else {
                // 表示更高
                scale.height = (
                    window.innerWidth /
                    baseProportion /
                    baseHeight
                ).toFixed(5)
                scale.width = (window.innerWidth / baseWidth).toFixed(5)
                this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
            }
        },       
}

HTML
<template>
    <div id="main_box" ref="appRef" class="main_box_0121">
        <div class="bg">
            <div class="head"></div>
             <div class="content_left"></div>
             <div class="content_center"></div>
            <div class="content_right"></div>
        </div>
    </div>
</template>                    

CSS
#main_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2880px;
    height: 1080px;
    transform: translate(-50%, -50%);
    transform-origin: left top;

    .bg {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url('../../assets/pageBg.jpg');
        background-position: center center;
        background-size: cover;
        //标题
        .head {
            width: 100%;
            height: 85px;
            background: url('../../assets/head.png') no-repeat;
            background-position: center center;
            background-size: 100% 100%;
            z-index: 100;
        }
        // left
        .content_left {
            position: absolute;
            top: 58px;
            width: 14.5%;
            height: 1000px;
            padding: 35px 0.5% 0 0.9%;
            margin: 0 0.5%;
            background: url('../../assets/left.png')  no-repeat;
            background-position: center center;
            background-size: 100% 100%;
           }
        .content_center {
            position: absolute;
            top: 72px;
            left: 15.8%;
            width: 83.5%;
            height: 960px;
            background: url('../../assets/bg2.png') no-repeat;
            background-position: center center;
            background-size: 100% 100%;
        }
        //right
        .content_right {
            position: absolute;
            top: 82px;
            right: 1.1%;
            width: 30.3%;
            height: 940px;
            padding: 30px 40px 20px 50px;
            background: url('../../assets/right.png') no-repeat;
            background-position: center center;
            background-size: 100% 100%;
　　　　　}
　　　}

 案例 https://cloud.njkshb.com:92/bigScreen