<template>
  <div class="page">
    <div class="left-section">
      <CardWeather class="card-weather" />
      <CardProductionSafety class="card-production-safety" />
    </div>
    <CardMapAndAlert class="card-map-and-alert" />
    <div class="right-section">
      <CardDisasterPrevention class="card-disaster-prevention" />
      <CardEmergencyManage class="card-emergency-manage" />
      <CardTrafficSafety class="card-traffic-safety" />
      <CardSecurityConfidentiality class="card-security-confidentiality" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import CardWeather from './components/CardWeather.vue';
  import CardProductionSafety from './components/CardProductionSafety.vue';
  import CardMapAndAlert from './components/CardMapAndAlert.vue';
  import CardDisasterPrevention from './components/CardDisasterPrevention.vue';
  import CardEmergencyManage from './components/CardEmergencyManage.vue';
  import CardTrafficSafety from './components/CardTrafficSafety.vue';
  import CardSecurityConfidentiality from './components/CardSecurityConfidentiality.vue';
</script>

<style scoped lang="scss">
  .page {
    width: 100%;
    height: 1002px;
    padding: 10px;
    display: flex;
    gap: 10px;
    // background-color: #f1f7ff;
  }

  .left-section,
  .right-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card-weather {
    width: 330px;
    height: 196px;
  }

  .card-production-safety {
    width: 330px;
    height: 776px;
    background: #ffffff;
    border-radius: 8px;
  }

  .card-map-and-alert {
    // width: 1220px;
    width: 100%;
    height: 982px;
    background: #ffffff;
    border-radius: 8px;
  }

  .card-disaster-prevention {
    width: 330px;
    height: 159px;
    background: #ffffff;
    border-radius: 8px;
  }

  .card-emergency-manage {
    width: 330px;
    height: 357px;
    background: #ffffff;
    border-radius: 8px;
  }

  .card-traffic-safety {
    width: 330px;
    height: 218px;
    background: #ffffff;
    border-radius: 8px;
  }

  .card-security-confidentiality {
    width: 330px;
    height: 218px;
    background: #ffffff;
    border-radius: 8px;
  }
</style>
