VHome.vue 1.95 KB
<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>