<!--物联首页-->
<template>
  <div class="app-container iotHome">
    <div class="top-max-big-box">
      <number-statistics></number-statistics>
    </div>
    <div class="bottom-max-big-box">
      <div class="bottom-left-big-box">
        <class-statistics></class-statistics>
        <online-statistics></online-statistics>
      </div>
      <div class="bottom-right-big-box">
        <div class="bottom-right-top-big-box">
          <message-statistics></message-statistics>
        </div>
        <div class="bottom-right-bottom-big-box">
          <message-list></message-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import numberStatistics from "./numberStatistics.vue"
  import classStatistics from "./classStatistics.vue"
  import onlineStatistics from "./onlineStatistics.vue"
  import messageStatistics from "./messageStatistics.vue"
  import messageList from "./messageList.vue"
  export default {
    name: 'index',
    components: {
      numberStatistics,
      classStatistics,
      onlineStatistics,
      messageStatistics,
      messageList,
    },
    data(){
      return{

      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

    },
  }
</script>

<style scoped lang="scss">
  .iotHome{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top-max-big-box{
      background-color: #fff;
      box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
      border-radius: 10px;
      height:120px;
      margin:20px 20px 10px;
    }
    .bottom-max-big-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .bottom-left-big-box{
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
        border-radius: 10px;
        width:1000px;
        margin:10px 10px 20px 20px;
      }
      .bottom-right-big-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .bottom-right-top-big-box{
          background-color: #fff;
          box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
          border-radius: 10px;
          width:520px;
          height:220px;
          margin:10px 20px 10px 10px;
        }
        .bottom-right-bottom-big-box{
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          background-color: #fff;
          box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
          border-radius: 10px;
          width:520px;
          margin:10px 20px 20px 10px;
        }
      }
    }
  }
</style>
