ylrz_saas_his_scrm_companyUI/src/views/live/liveConsole/ScreenScale.vue

<template>
  <div class="container">
    <div ref="scaleContainer" class="scale-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScreenScale',
  mounted() {
    this.calculateRatio();
    window.addEventListener('resize', this.calculateRatio);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateRatio);
  },
  methods: {
    calculateRatio() {
      const baseWidth = 1920;
      const baseHeight = 1080;
      const el = this.$refs.scaleContainer;
      // 基于父容器宽高计算缩放比（而非整个窗口）
      const parentWidth = el.parentElement.clientWidth;
      const parentHeight = el.parentElement.clientHeight;
      const widthRatio = parentWidth / baseWidth;
      const heightRatio = parentHeight / baseHeight;
      const scale = Math.min(widthRatio, heightRatio); // 取最小缩放比防止溢出

      el.style.transform = `scale(${scale}) translate(-50%, -50%)`;
      el.style.transformOrigin = 'top left';
    }
  }
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  background-color: #0f172a;
}

.scale-content {
  position: relative;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
}
</style>