<template>
  <div class="security-confidentiality-overview">
    <div class="left-container">
      <div class="left-top">
        <OuterPerson class="outer-person" />
        <VehicleManagement class="vehicle-management" />
      </div>
      <ConfidentialityPosition class="confidentiality-position" />
    </div>
    <div class="right-container">
      <RegulationAndNotice class="regulation-and-notice" />
      <SecurityPosition class="security-position" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import OuterPerson from './components/OuterPerson.vue';
  import VehicleManagement from './components/VehicleManagement.vue';
  import RegulationAndNotice from './components/RegulationAndNotice.vue';
  import ConfidentialityPosition from './components/ConfidentialityPosition.vue';
  import SecurityPosition from './components/SecurityPosition.vue';
</script>

<style scoped lang="scss">
  .security-confidentiality-overview {
    width: 100%;
    height: 100%;
    display: flex;
  }

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

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

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

      .vehicle-management {
        width: 50%;
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
      }
    }

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

  .right-container {
    width: calc(100% - 70% - 10px);
    height: 100%;

    .regulation-and-notice {
      width: 100%;
      height: 254px;
      background-color: #fff;
      border-radius: 4px;
      margin-bottom: 10px;
    }

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