<template>
  <div class="page-overview">
    <div class="left-container">
      <div class="left-top">
        <EmergencyOrganization class="emergency-organization" />
        <EmergencySupplies class="emergency-supplies" />
      </div>
      <div class="left-bottom">
        <EmergencyPlan class="emergency-plan" />
        <EmergencyExercise class="emergency-exercise" />
      </div>
    </div>
    <div class="right-container">
      <EmergencyProcedure />
    </div>
  </div>
</template>

<script setup lang="ts">
  import EmergencyPlan from './components/EmergencyPlan.vue';
  import EmergencyExercise from './components/EmergencyExercise.vue';
  import EmergencyOrganization from './components/EmergencyOrganization.vue';
  import EmergencySupplies from './components/EmergencySupplies.vue';
  import EmergencyProcedure from './components/EmergencyProcedure.vue';
</script>

<style scoped lang="scss">
  .page-overview {
    width: 100%;
    height: 100%;
    display: flex;
    overflow-y: hidden;
  }

  .left-container {
    width: 70%;
    height: 100%;
    margin-right: 10px;

    .left-top {
      width: 100%;
      height: 286px;
      margin-bottom: 10px;
      display: flex;

      .emergency-organization {
        width: 55%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin-right: 10px;
      }

      .emergency-supplies {
        width: calc(45% - 10px);
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
      }
    }

    .left-bottom {
      width: 100%;
      height: calc(100% - 286px - 10px);
      display: flex;

      .emergency-plan {
        width: 55%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin-right: 10px;
      }

      .emergency-exercise {
        width: calc(45% - 10px);
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
      }
    }
  }

  .right-container {
    width: calc(30% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 4px;
  }
</style>
