BJ_web_developers / lzsandtable

  <template>

    <div class="main-content">
      <v-header></v-header>
      <ul class="main-wrap">

        <li class="main-left">

          <div class="frame-wrap">
            <v-parking></v-parking>
          </div>

          <div class="frame-wrap frame-wrap-center">
            <v-toll></v-toll>
          </div>

          <div class="frame-wrap">
            <v-inout></v-inout>
          </div>

        </li>

        <li class="main-center">
          <v-map></v-map>
        </li>

        <li class="main-right">

          <div class="frame-wrap">
            <v-income></v-income>
          </div>

          <div class="frame-wrap frame-wrap-center">
            <v-berth></v-berth>
          </div>

          <div class="frame-wrap"></div>
        </li>

      </ul>
    </div>

  </template>
  
  <script>

  import VHeader from '../components/VHeader'
  import VMap from '../components/VMap'

  import VParking from '../components/VParking'

  import VToll from '../components/VToll'

  import VInout from '../components/VInout'

  import VIncome from '../components/VIncome'

  import VBerth from '../components/VBerth'

  export default {

    name: 'VHome',
    components: {
      VHeader,

      VMap,

      VParking,

      VToll,

      VInout,

      VIncome,
      VBerth

    }

  }
  </script>
  

  <style scoped lang="scss">
    .main-content{
      width: 100%;
      height: 100%;
    }
    .main-wrap{
      height: calc(100% - 65px);
      padding: 10px 10px;
      li{
        float: left;
        height: 100%;
      }
    }
    .main-left,.main-right{

      width: 25%;
    }
    .main-center{
      width: calc(50% - 20px);
      margin: 0 10px;
      border:1px solid #1679de;
    }

    .frame-wrap-center{
      margin: 10px 0;
    }
    .frame-wrap{
      height: calc((100% - 20px)/3);

      background: url("../images/content/frame-wrap.png");
      background-size: 100% 100%;

      overflow: hidden;

      /*border-image-source: url("../images/content/frame-wrap.png");*/
      /*border-image-slice: 3 16 11 3 fill;*/
      /*border-width: 3px 18px 11px 3px;*/
      /*border-style: solid;*/
      /*background-clip: border-box;*/

    }

  
  </style>