<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"></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'
export default {
  name: 'VHome',
  components: {
    VHeader,
    VMap,
    VParking
  }
}
</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>
