大瓶缩放适配

<div id="main" :class="{ main2: pro }" class="main">
    <router-view></router-view>
  </div>

<script setup>


function changeSize(width = 3120, height = 1080) {
  let windowWidth = document.documentElement.clientWidth;
  let windowHeight = document.documentElement.clientHeight;
  let widthBi = windowWidth / width;
  let heightBi = windowHeight / height;
  let bi = widthBi > heightBi ? heightBi : widthBi;
  mainDom.value.style.setProperty("--scale", bi);
}

const mainDom = ref(null);
const elPopper = ref(null);

onMounted(async () => {
  mainDom.value = document.getElementById("main");
  elPopper.value = document.getElementsByClassName("el-popper");
  await nextTick(() => {
    changeSize();
  });
  window.onresize = () => {
    changeSize();
  };
});

</script>

<style lang="scss">

.main {
  height: 1080px;
  position: relative;

  --scale: 0.5;
  position: fixed;
  transform: scale(var(--scale)) translate(-50%, -50%);
  transform-origin: 0px 0px;
  width: 3120px;
  left: 50%;
  top: 50%;
  border: 1px solid #ccc;

  overflow: hidden;
}

</style>