<template>
  <div class="maincontainer">
    <ul class="containerwrap clearfix">
      <li>
        <pdasection class="sectionsmall"></pdasection>
        <dicisection class="sectionsmall margin12-0"></dicisection>
        <youdaopingsection class="sectionsmall"></youdaopingsection>
      </li>
      <li class="margin0-12">
        <div class="heightper-top"></div>
        <div class="heightper-bottom">
          <outsection style="width: 50%;float: left"></outsection>
          <outsection style="width: 50%;float: left"></outsection>
        </div>
      </li>
      <li>
        <sfysection class="sectionsmall"></sfysection>
        <berthsection class="sectionsmall margin12-0"></berthsection>
        <newssection class="sectionsmall" ></newssection>
      </li>
    </ul>
    <loadinggif :showLoading="showLoaddingGif"></loadinggif>
  </div>
</template>

<script>
import loadinggif from '../components/loading'
import pdasection from '../views/pdasection'
import dicisection from '../views/dicisection'
import youdaopingsection from '../views/youdaopingsection'
import sfysection from '../views/sfysection'
import berthsection from '../views/berthsection'
import newssection from '../views/newssection'
import outsection from '../views/outsection'


export default {
  name: 'mainContainer',
  components: {
    loadinggif,
    pdasection,
    dicisection,
    youdaopingsection,
    sfysection,
    berthsection,
    newssection,
    outsection
  },
  data() {
    return {
      showLoaddingGif: false
    }
  }
}
</script>

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

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

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

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

  .sectionsmall {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: url("../assets/img/sectionsmall.png") no-repeat;
    background-size: 100% 100%;
  }

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

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

  .heightper-bottom {
    height: calc((100% - 24px) / 3);
    margin-top: 12px;
    background: url("../assets/img/sectionsmall.png") no-repeat;
    background-size: 100% 100%;
  }

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

</style>
