大屏--按照1920*1080比列缩放

<template>

  <div class="screen-wrapper">

    <div

      class="scaleBox"

      :style="{

        transform: `scale(${scale}) translate(-50%, -50%)`,

        WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,

        width: width + 'px',

        height: height + 'px',

      }"

    >

      <BigScreen />

    </div>

  </div>

</template>



<script>

import BigScreen from "./components/bigScreen.vue";

export default {

  data() {

    return {

      width: 1920,

      height: 1080,

      scale: null,

    };

  },

  components: { BigScreen },

  mounted() {

    this.setScale();

    window.addEventListener("resize", this.setScale);

  },

  destroy() {

    window.removeEventListener("resize", this.setScale);

  },

  methods: {

    getScale() {

      const { width, height } = this;

      let ww = window.innerWidth / width;

      let wh = window.innerHeight / height;

      return ww < wh ? ww : wh;

    },

    setScale() {

      // this.debounce(() => {

      this.scale = this.getScale();

      // });

    },

    debounce(fn, delay) {

      let delays = delay || 500;

      let timer;

      return function () {

        let th = this;

        let args = arguments;

        if (timer) {

          clearTimeout(timer);

        }

        timer = setTimeout(function () {

          timer = null;

          fn.apply(th, args);

        }, delays);

      };

    },

  },

};

</script>



<style scoped lang="scss">

.screen-wrapper {

  background-color: #000;

  width: 100%;

  height: 100%;

}

.scaleBox {

  transform-origin: 0 0;

  transition: 0.3s;

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 999;

}

</style>