大屏缩放方案

#screen {
    display: block;
    width: 1920px; //设计稿的宽度
    height: 1080px; //设计稿的高度
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    // overflow: hidden;
    z-index: 10;
}
div class="bigScreenBox" id="screen">
            <div class="header">
                <p @click="jump" class="Previous " v-if="type != 'word'">
                    <img src="/img/back.png" alt="">
                </p>
                <div class="header-title">一体化智能管控平台</div>
                <div class="timeWeather">
                    <div class="time">
                        {{ currentTime }}
                    </div>
                    <div class="weather">
                        <img src="/img/weather.png" alt="">
                        17℃
                    </div>
                </div>
            </div>
            <wordBox v-if="type == 'word'" v-model="type"></wordBox>
            <chinaBox v-if="type == 'china'" v-model="type"></chinaBox>
            <conentBox v-if="type == 'company'" v-model="type"></conentBox>
        </div>

  handleScreenAuto() {
            const designDraftWidth = 1920; //设计稿的宽度
            const designDraftHeight = 1080; //设计稿的高度
            // 等比适配 有空白
            // //根据屏幕的变化适配的比例
            // const scale =
            //     document.documentElement.clientWidth /
            //         document.documentElement.clientHeight <
            //         designDraftWidth / designDraftHeight
            //         ? document.documentElement.clientWidth / designDraftWidth
            //         : document.documentElement.clientHeight / designDraftHeight;
            // //缩放比例
            // document.querySelector(
            //     "#screen"
            // ).style.transform = `scale(${scale}) translate(-50%)`;
            // 
            // 非等比缩放不留空白 
            let w = document.documentElement.clientWidth / designDraftWidth
            let h = document.documentElement.clientHeight / designDraftHeight
            //缩放比例
            document.querySelector(
                "#screen"
            ).style.transform = `scale(${w},${h}) translate(-50%)`;
        },



   this.$once('hook:beforeDestroy', () => {
            clearInterval(this.timer);
            window.onresize = null;
        })
        this.handleScreenAuto();
        window.onresize = function () {
            that.handleScreenAuto();
        }