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

  export default {

    name: 'VHome',
    components: {
      VHeader,
      VMap
    }

  }
  </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: 10 16 15 10 fill;
      border-width: 10px 16px 15px 10px;
      border-style: solid;
      background-clip: border-box;

    }

  
  </style>