<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="18">
        <count />
        <el-row class="mt-10">
          <el-col :span="24">
            <list-check-type />
          </el-col>
        </el-row>
        <el-row class="mt-10" :gutter="10">
          <el-col :span="10">
            <risk-classification />
          </el-col>
          <el-col :span="14">
            <checklist-check />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card>
          <announcement />
          <calendar />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Count from "./components/count.vue";
import ListCheckType from "./components/list_check_type.vue";
import RiskClassification from "./components/risk_classification.vue";
import ChecklistCheck from "./components/checklist_check.vue";
import Announcement from "./components/announcement.vue";
import Calendar from "./components/calendar.vue";
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;

  :deep {
    .el-card {
      margin: 0;

      .el-card__body {
        padding: 18px;
      }
    }
  }
}
</style>
