<template>
  <div id="dashboard-container" class="dashboard-container">
    <HeaderSection />
    <div class="dashboard-content">
      <LeftSection />
      <MiddleSection />
      <RightSection />
    </div>
  </div>
</template>

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

onMounted(() => {
/*  autofit.init(
    {
      dw: 8960,
      dh: 2520,
      el: '#dashboard-container',
      resize: true
    },
    false
  );*/
});

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

<style lang="scss" scoped>
.dashboard-container {
  //width: 100%;
  //height: 100vh;
  width: 8960px;
  height: 2560px;
  background-color: #f2f2f2;
  font-size: 74px;
  .dashboard-content {
    padding: 69px;
    display: flex;
    height: calc(2560px - 207px);
  }
}
</style>
