数据看板布局-transform缩放

当前页面修改

看板页面定义ref，如【appRef】，混入【屏幕适配mixin函数】

<div ref="appRef" class="school-board">
    <div class="bg">
      <div class="board-header"></div>
      <div class="board-content">
        <div class="borad-content-left"></div>
        <div class="borad-content-middle"></div>
        <div class="borad-content-right"></div>
      </div>
    </div>
  </div>

 import drawMixinApp from '@/utils/drawMixinApp';
 mixins: [drawMixinApp],

当前页面样式

• 宽高定义为设计稿的宽高

• 绝对定位，位于页面正中间

  .school-board { color: #d3d6dd; width: 1920px; height: 1080px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: left top; overflow: hidden; .bg { width: 100%; height: 100%; background-image: url('../../assets/images/d-background.png'); background-size: cover; background-position: center center; } p { font-size: 16px; color: #fff; } }

上层页面修改

<style lang="scss" scoped>
  .datav-layout {
    width: 100vw;
    height: 100vh;
    background-color: #020308;
    overflow: hidden;
  }
</style>

屏幕适配mixin函数

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
  width: '1',
  height: '1',
};

// * 设计稿尺寸（px）
const baseWidth = 1920;
const baseHeight = 1080;

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));

export default {
  data() {
    return {
      // * 定时函数
      drawTiming: null,
    };
  },
  mounted() {
    this.calcRate();
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize);
  },
  methods: {
    calcRate() {
      const appRef = this.$refs['appRef'];
      if (!appRef) return;
      // 当前宽高比
      const currentRate = parseFloat(window.innerWidth / window.innerHeight);
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = (window.innerHeight * baseProportion) / baseWidth;
          scale.height = window.innerHeight / baseHeight;
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        } else {
          // 表示更高
          scale.height = window.innerWidth / baseProportion / baseHeight;
          scale.width = window.innerWidth / baseWidth;
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
        }
      }
    },
    resize() {
      clearTimeout(this.drawTiming);
      this.drawTiming = setTimeout(() => {
        this.calcRate();
      }, 200);
    },
  },
};

===