jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/Adaptation.vue

<template>
  <div class="Adaptation" :style="transformStyle" ref="AdaptationRef">
    <slot />
  </div>
</template>

<script>
export default {
  name: "Adaptation",
  props: {
    defaultWidth: {
      type: Number,
      default: () => 1920
    },
    defaultHeight: {
      type: Number,
      default: () => 1080
    },
    headerHeight: {
      type: Number,
      default: () => 68

    }
  },
  provide() {
    return {
      adpScale: this.getScale
    }
  },
  data() {
    return {
      scale: {
        scaleX: 1,
        scaleY: 1,
      }
    }
  },
  computed: {
    transformStyle() {
      const obj = {};
      obj["transform"] = `scaleX(${this.scale.scaleX}) scaleY(${this.scale.scaleY})`;
      obj["width"] = this.defaultWidth + "px";
      obj["height"] = this.defaultHeight - this.headerHeight + "px";
      obj["top"] = this.headerHeight + "px";
      // obj.top = `calc(50% - ${(this.defaultHeight / 2) * this.scaleY}px)`;
      // obj.left = `calc(50% - ${(this.defaultWidth / 2) * this.scaleX}px)`;

      return obj;
    },
    getScale() {
      return this.scale
    }
  },
  watch:{
    headerHeight(){
    }
  },
  methods: {
    initScale() {
      let winW = window.innerWidth;
      let winH = window.innerHeight - this.headerHeight;

      this.setScale(this.scale.scaleX = winW / this.defaultWidth, this.scale.scaleY = winH / (this.defaultHeight - this.headerHeight))
    },
    setScale(scaleX, scaleY) {
      const cssGlobalVariable = [
        [
          '--keep-ratio',
          ''
        ],
        [
          '--reverse-scale',
          ''
        ],
        [
          '--middle-scale',
          ''
        ],
      ];

      if (scaleX > scaleY) {
        cssGlobalVariable[0][1] = `scaleX(${1 / scaleX * scaleY})`;
        // cssGlobalVariable[0][1] = `scaleX(${1 - (scaleX - scaleY)})`;
        cssGlobalVariable[1][1] = `scaleY(${1 / scaleX})`;
        cssGlobalVariable[2][1] = `scaleX(${1 - (scaleX - scaleY) / 2})`;
      } else {
        cssGlobalVariable[0][1] = `scaleY(${1 / scaleY * scaleX})`;
        // cssGlobalVariable[0][1] = `scaleX(${1 - (scaleY - scaleX)})`;
        cssGlobalVariable[1][1] = `scaleX(${1 / scaleY})`;
        cssGlobalVariable[2][1] = `scaleX(${1 - (scaleY - scaleX) / 2})`;
      }

      const AdaptationDom = this.$refs.AdaptationRef;

      cssGlobalVariable.forEach((data) => {
        AdaptationDom.style.setProperty(...data);
      });

    }
  },
  mounted() {
    this.initScale();

    window.addEventListener(
      "resize",
      _.debounce(this.initScale.bind(this), 360)
    );
  },
};
</script>

<style lang="scss">
body {
  .keep-ratio {
    transform: var(--keep-ratio);
  }

  .reverse-ratio {
    transform: var(--reverse-scale);
  }

  .middle-ratio {
    transform: var(--middle-scale);
  }

  .keep-ratio,
  .reverse-ratio,
  .middle-ratio {
    transition: all .15s linear;

    &[origin="left"] {
      transform-origin: left;
    }

    &[origin="right"] {
      transform-origin: right;
    }

    &[origin="top"] {
      transform-origin: top;
    }

    &[origin="bottom"] {
      transform-origin: bottom;
    }
  }
}
</style>

<style lang="scss" scoped>
.Adaptation {
  transition: all 0.15s linear;
  position: fixed;
  transform-origin: 0 0;
}
</style>