<!-- 环境看板- 主体-统计内容 -->
<script name="electricityTrend" lang="ts" setup>
import deviceType from './deviceType.vue'
import deviceOnline from './deviceOnline.vue'
</script>

<template>
  <div class="board-item">
    <div class="board-header">
      <div class="header-item">
        1
      </div>
      <div class="header-item">
        2
      </div>
      <div class="header-item">
        3
      </div>
      <div class="header-item">
        4
      </div>
    </div>
    <div class="board-content">
      <!-- 设备类型分析 -->
      <device-type class="content-item" />
      <!-- 设备在线状态分析 -->
      <device-online class="content-item" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.board-item {
  margin: 5px 0;
  padding: 2px 10px;
  border: 2px solid #cedaf6;
  box-sizing: content-box;

  .board-header {
    height: 75px;
    display: flex;

    .header-item {
      width: 25%;
      height: 75px;
    }
  }

  .board-content {
    height: 350px;
    display: flex;
    justify-content: space-between;

    .content-item {
      height: 340px;
      width: 49%;
    }
  }
}
</style>