<template>
  <div class="main">
    <div class="left">
      <chart1/>
      <chart2/>
      <chart3/>
    </div>
    <div class="middle">
      <chart4/>
    </div>
    <div class="right">
      <chart5/>
      <chart6/>
      <chart7/>
    </div>
  </div>
</template>

<script>
import chart1 from '@/components/chart/chart1.vue'
import chart2 from '@/components/chart/chart2.vue'
import chart3 from '@/components/chart/chart3.vue'
import chart4 from '@/components/chart/chart4.vue'
import chart5 from '@/components/chart/chart5.vue'
import chart6 from '@/components/chart/chart6.vue'
import chart7 from '@/components/chart/chart7.vue'

export default {
  components: {
    chart1,
    chart2,
    chart3,
    chart4,
    chart5,
    chart6,
    chart7
  }
}

</script>

<style lang="scss" scoped>
.main {
  display: flex;
  height: 920px;
  background: #16191c;
  padding: 8px;
  .left,
  .middle,
  .right {
    flex: 2;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    div {
      flex: 1;
      margin: 8px;
      background: #2c343a;
      border-radius: 5px;
      overflow: hidden;
    }
  }
  .middle {
    flex: 5;
    width: 1022px;
    height: 905px;
  }
}
</style>
