
<template>
  <div class="flexs">
    <div class="flex">
      <div class="flex_right">
        <TopMost />
        <div class="row row-reverse">
          <CenterLeft />
          <CenterCenter />
        </div>
        <div class="row row-reverse box-three">
          <BottomLeft />
          <LowerRight />
        </div>
      </div>
    </div>
    <div class="contetn">
      <div class="contetn_lr-item">
        <TopRightCorner />
        <BottomRightCorner />
      </div>
    </div>
  </div>
</template>

<script>
import BottomRightCorner from '@/views/indexs/BottomRightCorner.vue'
import TopRightCorner from '@/views/indexs/TopRightCorner.vue'
import LowerRight from '@/views/indexs/LowerRight.vue'
import BottomLeft from '@/views/indexs/BottomLeft.vue'
import CenterCenter from '@/views/indexs/CenterCenter.vue'
import CenterLeft from '@/views/indexs/CenterLeft.vue'
import TopMost from '@/views/indexs/TopMost.vue'
export default {
  components: {
    TopMost,
    CenterLeft,
    CenterCenter,
    BottomLeft,
    LowerRight,
    TopRightCorner,
    BottomRightCorner,
  },
  data() {
    return {

    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },

  mounted() { },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
// 内容
.flexs {
  display: flex;
  width: 100%;
  height: 100%;

  .flex {

    .flex_left,
    .flex_right {
      width: 1245px;
      height: 158px;
      box-sizing: border-box;
      // padding: 0px 0px;
      // margin-right: 20px;
    }

    //左边 右边 结构一样
    .row-reverse,
    .row {
      display: flex;
      width: 603px;
      height: 422px;
      box-sizing: border-box;
    }
  }

  .contetn {
    .contetn_lr-item {
      flex-direction: column;
      width: 610px;
      height: 511px;
      box-sizing: border-box;
    }
  }
}

.box-three {
  margin: 10px 10px 10px 0px;
}
</style>


