BJ_web_developers / dyitoc

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

          <mapsection class="heightper-top"></mapsection>

          <div class="heightper-bottom">

            <outsection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></outsection>
            <vehiclesection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></vehiclesection>

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

  import vehiclesection from '../views/vehiclesection'

  import mapsection from '../views/mapsection'

  export default {

    name: 'mainContainer',

    components: {
      loadinggif,

      pdasection,

      dicisection,

      youdaopingsection,

      sfysection,

      berthsection,

      newssection,

      outsection,

      vehiclesection,
      mapsection

    },

    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 {

      border: 1px solid #2391FA;

      flex: 1;

      display: flex;
      flex-direction: column;
      position: relative;

    }

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