bonus-ui/src/views/home/components/ProvincialChart.vue

<template>
  <div class="viewport">
    <div class="screen" :style="screenStyle">
      <div class="app-container">
        <div style="height: 90px"></div>
        <div class="top">
          <div class="top-1">
            <Top1 />
          </div>
          <div class="top-2">
            <Top2 />
          </div>
          <div class="top-3">
            <Top3 />
          </div>
        </div>

        <div class="center">
          <div class="center-1">
            <Center1 />
          </div>
          <div class="center-2">
            <Center2 />
          </div>
        </div>

        <div class="bottom">
          <div class="bottom-1">
            <div class="bottom-1-1">
              <Bottom11 />
            </div>
            <div class="bottom-1-2">
              <Bottom12 />
            </div>
          </div>
          <div class="bottom-2">
            <Bottom2 />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Top1 from './provincial/Top1'
import Top2 from './provincial/Top2'
import Top3 from './provincial/Top3'
import Center1 from './provincial/Center1'
import Center2 from './provincial/Center2'
import Bottom11 from './provincial/Bottom1-1'
import Bottom12 from './provincial/Bottom1-2'
import Bottom2 from './provincial/Bottom2'

export default {
  name: 'provincialChart',
  components: {
    Top1,
    Top2,
    Top3,
    Center1,
    Center2,
    Bottom11,
    Bottom12,
    Bottom2,
  },
  data() {
    return {
      scale: 1,
    }
  },
  computed: {
    screenStyle() {
      return {
        width: '1920px',
        height: '1080px',
        transform: `scale(${this.scale})`,
        transformOrigin: '0 0',
      }
    },
  },
  mounted() {
    this.calcScale()
    window.addEventListener('resize', this.calcScale)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calcScale)
  },
  methods: {
    calcScale() {
      const baseW = 1920
      const vw = document.documentElement.clientWidth

      // ✅ 永远以当前可视宽度为准
      this.scale = vw / baseW
    },
  },
}
</script>

<style lang="scss" scoped>
/* 外层视口：锁满屏 */
.viewport {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #e1ebf7;
}

/* 被缩放的 1920×1080 画布 */
.screen {
  position: absolute;
  top: 0;
  left: 0;
}

.app-container {
  width: 1920px;
  height: 1080px;
  background: #e1ebf7;
}

.top {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .top-1,
  .top-2,
  .top-3 {
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }
  .top-1,
  .top-3 {
    width: 480px;
    height: 518px;
  }
  .top-2 {
    flex: 1;
    margin: 0 15px;
    height: 518px;
    background-image: url('~@/assets/images/map-img.png');
    background-size: 100% 100%;
  }
}

.center {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .center-1,
  .center-2 {
    width: 928px;
    height: 405px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }

  .center-1 {
    margin-right: 7.5px;
  }
  .center-2 {
    margin-left: 7.5px;
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .bottom-1 {
    width: 928px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .bottom-1-1,
    .bottom-1-2 {
      padding: 24px;
      width: 50%;
      height: 350px;
      background: rgba(255, 255, 255, 0.91);
      border-radius: 5px;
      overflow: hidden;
    }

    .bottom-1-1 {
      margin-right: 7.5px;
    }
    .bottom-1-2 {
      margin-left: 7.5px;
    }
  }
  .bottom-2 {
    width: 928px;
    height: 350px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.91);
    border-radius: 5px;
  }

  .bottom-1 {
    margin-right: 7.5px;
  }
  .bottom-2 {
    margin-left: 7.5px;
  }
}
</style>