<template>
<div id="home" class="h100">
  <div class="content">
    <div>
      <event-sta/>
    </div>
    <div>
      <total-handle/>
    </div>
    <div>
      <handle-status/>
    </div>
    <div>
      <handle-static/>

    </div>
    <div>
      <data-sta/>
    </div>
    <div>
      <remind-handle-s/>
    </div>
    <div>
      <unit-event-center/>
    </div>
    <div>

      <month-sta/>
    </div>
    <div>
      <EvaluateCard/>
    </div>
  </div>
</div>
</template>

<script>
import HandleStatic from "../../components/handle-static/HandleStatic";
import MonthSta from "../../components/month-sta/MonthSta";
import TotalHandle from "../../components/total-handle/TotalHandle";
import EvaluateCard from "../../components/evaluate/EvaluateCard";
import RemindHandleS from "../../components/remind-handle-sta/RemindHandleS";
import HandleStatus from "../../components/handle-status/HandleStatus";
import DataSta from "../../components/data-sta/DataSta";
import UnitEventCenter from "../../components/unit-event-center/UnitEventCenter";
import EventSta from "../../components/event-sta/EventSta";
export default {
  name: "Home",
  components:{
    HandleStatic,
    MonthSta,
    TotalHandle,
    EvaluateCard,
    RemindHandleS,
    HandleStatus,
    DataSta,
    UnitEventCenter,
    EventSta,
  }
}
</script>

<style scoped lang="scss">
#home{
  width: 100%;
  height: 100%;
  .content{
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    justify-content: space-between;
    >div{
      @media screen and (max-height: 980px) {
        background: url("../../assets/imgs/框2.png") no-repeat;
      }

      @media screen and (min-height: 980px) {
        background: url("../../assets/imgs/框1.png") no-repeat;
      }
      background-size: 100% 100% !important;

      width: 33%;
      height: 33%;
      box-sizing: border-box;
      padding: 0px 20px;
    }
  }
}
</style>
