yjdp-web/src/views/emergencyCommandMap/index.vue

<template>
  <div id="dashboard-container" class="dashboard-container">
    <HeaderSection />
    <div class="dashboard-content">
      <LeftSection />
      <MiddleSection />
      <RightSection />
    </div>
    <FooterSection style="position: absolute; bottom: 0; left: 0" />
  </div>
</template>

<script lang="ts" setup>
import LeftSection from './LeftSection/index.vue';
import RightSection from './RightSection/index.vue';
import MiddleSection from './MiddleSection.vue';
import autofit from 'autofit.js';

onMounted(() => {
  autofit.init(
    {
      dw: 8960,
      dh: 2520,
      el: '#dashboard-container',
      resize: false,
      ignore: ['#aMap', '#YztMap']
    },
    false
  );
});

onUnmounted(() => {
  autofit.off();
});
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 8960px;
  height: 2560px;
  font-size: 74px;
  background: url('@/assets/images/bg.jpg') no-repeat 100% 100%;
  background-size: cover;
  font-family: 'PingFang SC', sans-serif;
  position: relative;
  .dashboard-content {
    padding: 0 81px;
    display: flex;
    height: calc(2560px - 228px - 150px);
    overflow: hidden;
  }
}
</style>