BJ_web_developers / dyitoc

  <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>