<template>
  <div class="main_root">
    <div class="row_item">
      <div class="cell_item left_w"></div>
      <div class="cell_item right_w"></div>
    </div>
    <div class="row_item">
      <div class="cell_item left_w"></div>
      <div class="cell_item right_w"></div>
    </div>
    <div class="row_item">
      <div class="cell_item"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.main_root {
  border-radius: 0;
  border: none;
  background-color: transparent;
  .row_item {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.last-child {
      margin-bottom: 0;
    }
    .cell_item {
      width: 100%;
      height: 400px;
      border-radius: 15px;
      border: 1px solid #e9f0f9;
      background-color: #fff;
      &.left_w {
        width: 41.667%;
      }
      &.right_w {
        width: calc(58.333% - 10px);
      }
    }
  }
}
</style>
