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"></div>
        </li>

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

        <li class="main-right">
          <div class="frame-wrap"></div>
          <div class="frame-wrap frame-wrap-center"></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'

  export default {

    name: 'VHome',
    components: {
      VHeader,

      VMap,

      VParking,
      VToll

    }

  }
  </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);

      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>