<template>
  <div class="containerBox">
    <div class="leftBox">
      <div class="leftOne">
        <LeftOne />
      </div>
      <div class="leftTwo">
        <LeftTwo />
      </div>
      <div class="leftThree">
        <LeftThree />
      </div>
      <div class="leftFour">
        <LeftFour />
      </div>
    </div>
    <div class="centerBox">
      <div class="center">
        <Center />
      </div>
    </div>
    <div class="rightBox">
      <div class="rightOne">
        <RightOne />
      </div>
      <div class="rightTwo">
        <RightTwo />
      </div>
      <div class="rightThree">
        <RightThree />
      </div>
      <div class="rightFour">
        <RightFour />
      </div>
    </div>
  </div>
</template>

<script>
import LeftOne from './leftOne'
import LeftTwo from './leftTwo'
import LeftThree from './leftThree.vue'
import LeftFour from './leftFour'
import Center from './center'
import CenterBOne from './centerBOne'
import CenterBTwo from './centerBTwo'
import RightOne from './rightOne'
import RightTwo from './rightTwo'
import RightThree from './rightThree'
import RightFour from './rightFour'

export default {
  components: {
    LeftOne,
    LeftTwo,
    LeftThree,
    LeftFour,
    Center,
    CenterBOne,
    CenterBTwo,
    RightOne,
    RightTwo,
    RightThree,
    RightFour
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.containerBox {
  display: flex;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  .leftBox {
    width: 25%;
    .leftOne {
      height: 30%;
    }
    .leftTwo{
      height: 24%;
    }
    .leftThree {
      height: 28%;
    }

    .leftFour {
      height: 22%;
    }
  }
  .centerBox {
    width: 53%;
    .center {
      height: 100%;
    }
  }

  .rightBox {
    width: 22%;
    height: 100%;
    .rightOne {
      height: 23%;
    }

    .rightTwo {
      height: 28%;
    }

    .rightThree {
      height: 30%;
    }

    .rightFour {
      height: 22%;
    }
  }
}
</style>
