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

 1 js部分  // 本次开发场景2880*1080  配合css
 2     mounted () {
 3         this.pageResize()
 4         window.onresize = () => {
 5             setTimeout(() => {
 6                 this.pageResize()
 7             }, 200)
 8         }
 9     },
10      methods:{
11 　　　　　pageResize () {
12             // * 默认缩放值
13             let scale = {
14                  '1',
15                 height: '1'
16             }
17             // * 设计稿尺寸（px）根据实际修改
18             let baseWidth = 2880
19             let baseHeight = 1080
20             // * 需保持的比例（默认2.66667）
21             const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
22             // 当前宽高比
23             const currentRate = parseFloat(
24                 (window.innerWidth / window.innerHeight).toFixed(5)
25             )
26             if (currentRate > baseProportion) {
27                 // 表示更宽
28                 scale.width = (
29                     (window.innerHeight * baseProportion) /
30                     baseWidth
31                 ).toFixed(5)
32                 scale.height = (window.innerHeight / baseHeight).toFixed(5)
33                 this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
34             } else {
35                 // 表示更高
36                 scale.height = (
37                     window.innerWidth /
38                     baseProportion /
39                     baseHeight
40                 ).toFixed(5)
41                 scale.width = (window.innerWidth / baseWidth).toFixed(5)
42                 this.$refs.appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
43             }
44         },       
45 }

 1 HTML
 2 <template>
 3     <div id="main_box" ref="appRef" class="main_box_0121">
 4         <div class="bg">
 5             <div class="head"></div>
 6              <div class="content_left"></div>
 7              <div class="content_center"></div>
 8             <div class="content_right"></div>
 9         </div>
10     </div>
11 </template>                    

 1 CSS
 2 #main_box {
 3     position: absolute;
 4     top: 50%;
 5     left: 50%;
 6     width: 2880px;
 7     height: 1080px;
 8     transform: translate(-50%, -50%);
 9     transform-origin: left top;
10 
11     .bg {
12         position: relative;
13         width: 100%;
14         height: 100%;
15         background-image: url('../../assets/pageBg.jpg');
16         background-position: center center;
17         background-size: cover;
18         //标题
19         .head {
20             width: 100%;
21             height: 85px;
22             background: url('../../assets/head.png') no-repeat;
23             background-position: center center;
24             background-size: 100% 100%;
25             z-index: 100;
26         }
27         // left
28         .content_left {
29             position: absolute;
30             top: 58px;
31             width: 14.5%;
32             height: 1000px;
33             padding: 35px 0.5% 0 0.9%;
34             margin: 0 0.5%;
35             background: url('../../assets/left.png')  no-repeat;
36             background-position: center center;
37             background-size: 100% 100%;
38            }
39         .content_center {
40             position: absolute;
41             top: 72px;
42             left: 15.8%;
43             width: 83.5%;
44             height: 960px;
45             background: url('../../assets/bg2.png') no-repeat;
46             background-position: center center;
47             background-size: 100% 100%;
48         }
49         //right
50         .content_right {
51             position: absolute;
52             top: 82px;
53             right: 1.1%;
54             width: 30.3%;
55             height: 940px;
56             padding: 30px 40px 20px 50px;
57             background: url('../../assets/right.png') no-repeat;
58             background-position: center center;
59             background-size: 100% 100%;
60 　　　　　}
　　　}