<template>
  <div class="traffic-overview">
    <div class="traffic-overview-top">
      <ViolationStatistics class="violation" />
      <RegulationList class="regulation" />
    </div>
    <div class="traffic-overview-bottom">
      <ViolationRecords class="violation-records" />
      <AccidentRecords class="accident-records" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import ViolationStatistics from './components/ViolationStatistics.vue';
  import RegulationList from './components/RegulationList.vue';
  import ViolationRecords from './components/ViolationRecords.vue';
  import AccidentRecords from './components/AccidentRecords.vue';
</script>

<style scoped lang="scss">
  .traffic-overview {
    width: 100%;
    height: 100%;
  }

  .traffic-overview-top {
    width: 100%;
    height: 174px;
    margin-bottom: 10px;
    display: flex;

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

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

  .traffic-overview-bottom {
    width: 100%;
    height: calc(100% - 174px - 10px);
    background-color: #fff;
    border-radius: 4px;

    .violation-records {
      width: 100%;
      height: 50%;
    }

    .accident-records {
      width: 100%;
      height: 50%;
    }
  }
</style>
