<template>
  <div class="index-box">
    <div class="index-row">
      <div class="top-box">
        <pie01 />
      </div>
      <div class="top-box">
        <rose />
      </div>
      <div class="top-box">
        <pie02 />
      </div>
    </div>
    <div class="index-row">
      <div class="bottom-box">
        <bar01 />
      </div>
      <div class="bottom-box">
        <line01 />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import pie01 from './components/pie01.vue'
import rose from './components/rose.vue'
import pie02 from './components/pie02.vue'
import bar01 from './components/bar01.vue'
import Line01 from './components/line01.vue'

@Component({components:{pie01,rose,pie02,bar01,Line01}})
export default class IndexView extends Vue {

  mounted(){
    
  }
}
</script>

<style lang="scss" scoped>
.index-box{
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  .index-row{
    height: 50%;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    .top-box{
      width: 33.33333%;
      height: 100%;
      box-sizing: border-box;
      padding-right:8px;
    }
    .top-box:last-child{
      padding: 0;
    }
    .bottom-box{
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding-right:8px
    }
    .bottom-box:last-child{
      padding: 0;
    }
  }
  .index-row:first-child{
    padding-bottom: 8px;
  }
  .index-row:last-child{
    padding-top: 8px;
  }
}
</style>