<template>
  <div class="maincontainer">
    <ul class="containerwrap clearfix">
      <li>
        <pdasection class="heightsmall"></pdasection>
        <div class="heightsmall margin12-0"></div>
        <div class="heightsmall"></div>
      </li>
      <li class="margin0-12">
        <div class="heightper-top"></div>
        <div class="heightper-bottom"></div>
      </li>
      <li>
        <div class="heightsmall"></div>
        <div class="heightsmall margin12-0"></div>
        <div class="heightsmall"></div>
      </li>
    </ul>
    <loadinggif :showLoading="showLoaddingGif"></loadinggif>
  </div>
</template>

<script>
import loadinggif from '../components/loading'
import pdasection from '../views/pdasection'
export default {
  name: 'mainContainer',
  components: {
    loadinggif,
    pdasection
  },
  data() {
    return {
      showLoaddingGif: false
    }
  }
}
</script>

<style scoped>
  .maincontainer {
    padding: 12px 12px;
    height:calc(100% - 101px);
  }

  .containerwrap {
    display: flex;
    height: 100%;
  }

  .containerwrap > li {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .containerwrap > li:nth-of-type(1) {
    flex: 1;
  }

  .heightsmall {
    flex: 1;
    background: #f00;
    display: flex;
    flex-direction: column;
  }

  .containerwrap > li:nth-of-type(2) {
    flex: 2;
  }

  .heightper-top {
    background: #f00;
    flex: 1;
  }

  .heightper-bottom {
    height: calc((100% - 24px) / 3);
    background: #f00;
    margin-top: 12px;
  }

  .containerwrap > li:nth-of-type(3) {
    flex: 1;
  }

</style>
