分析

页面布局 box1 box2 box3 table 四个盒子+一个table

1.需要给box1 加style:"width:100%",并获取该盒子的宽度

let width = document.getElementsByClassName('box1')[0].offsetWidth

2.需要给box2 加样式

{
// 如果加了此样式 table横向滚动条会浮动到浏览器底部。不加滚动条会table的最小面
overflow: auto hidden;
}

3.需要拿到box1里的width 通过计算 动态给box3添加 padding-left padding-right

computed:{
// 获取 padding-left padding-right 的值。次处的计算值 上接 页面自适应。
// 因为 1000 - 60 - 60 =  当前浏览器宽度（width）- copyLrWidth - copyLrWidth
copyLrWidth(){
            // 如果width大于60 取原值 小于60取60;因为上面的动态属性逻辑为 宽度小于1000 时 内容变窄 两边边距不变。
            if(this.width){
            let widths = (this.width - (1000 - 60 - 60)) / 2
                return widths > 60 ? widths : 60
            }
        }
}