zhgdyun/src/views/projectAdmin/zjsj/command/index.vue

<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="centerTop">
        <Center />
      </div>
      <div class="centerBot">
        <div class="one">
          <CenterBOne />
        </div>
        <div class="two">
          <CenterBTwo />
        </div>
      </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'
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: url(../assets/temp/1.png) no-repeat;
  background-size: 100% 100%;
  .leftBox {
    width: 25%;
    .leftOne {
      width: 100%;
      height: 30%;
    }
    .leftTwo,
    .leftThree,
    .leftFour {
      height: 25%;
    }
  }
  .centerBox {
    width: 50%;
    margin-left: 2%;
    margin-right: 2%;
    .centerTop {
      height: 78%;
      background-color: #11a0a6;
    }
    .centerBot {
      margin-top: 2%;
      display: flex;
      .one {
        width: 100%;
      }
      .two {
        width: 100%;
      }
    }
  }
  .rightBox {
    width: 25%;
    .rightOne {
      width: 100%;
      height: 30%;
    }
    .rightTwo,
    .rightThree,
    .rightFour {
      height: 25%;
    }
  }
}
</style>