vue如何同时实现页面左中右及上下分区

Question

vue如何同时实现页面左中右及上下分区，想实现如下图页面布局效果！

当前代码实现效果如图

代码如下：麻烦指导一下 这么设定页面布局如第一张图呢？只做分区即可

<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="查询字段">
              <el-select v-model="listQuery.condition" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词">
              <el-input v-model="listQuery.keyword" placeholder="请输入关键词查询" clearable
                @keyup.enter.native="search()" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">
                {{$t('common.search')}}</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="box">
          <div class="box-zuo" title="左" style="background-color: rgb(121, 56, 106)">
            <div>
              <el-button type="primary" icon="el-icon-download" @click="exportForm">导出</el-button>
              <el-button type="text" icon="el-icon-upload2" @click="uploadForm">导入</el-button>
            </div>
            <div class="JNPF-common-head-right">
              <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                         @click="initData()" />
              </el-tooltip>
            </div>
          </div>
          <div class="you1-box" title="右1" style="background-color: rgb(57, 107, 179)"></div>
          <div class="you2-box" title="右2" style="background-color: rgb(57, 123, 179)"></div>
<div class="you3-box" title="右3" style="background-color: rgb(57, 107, 123)"></div>
        </div>
      </div>
      <ExportForm v-if="exportFormVisible" ref="exportForm" />
      <ImportForm v-if="importFormVisible" ref="importForm" @refresh="reset()" />
    </div>
  </div>
</template>



<style lang='postcss'>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}
/*.box-zuo {*/
/*  width: 100px;*/
/*  height: 100%;*/

/*}*/
/*.you1-box {*/
/*  width: 500px;*/
/*  height: 100%;*/

/*}*/
/*.you2-box {*/
/*  width: 500px;*/
/*  height: 100%;*/

/*}*/
/*.you3-box {*/
/*  width: 400px;*/
/*  height: 100%;*/

/*}*/
.box > div {
  height: 100%;
  flex: 1;
}
</style>

Answer 1

给个采纳呗 谢谢

```html
<template>
  <div>
    <el-row>
      <el-col :span="4" style="background: red; height: 100vh">111</el-col>
      <el-col :span="20" style="background: yellow; height: 100vh">
        <el-row><el-col :span="24" style="background: blue; height: 10vh">222</el-col></el-row>
        <el-row><el-col :span="24" style="background: green; height: 10vh">333</el-col></el-row>
        <el-row>
          <el-col :span="24" style="height: 80vh">
            <el-row>
              <el-col :span="14" style="background: pink; height: 80vh">
                444
              </el-col>
              <el-col :span="10" style="height: 80vh">
                <el-row>
                  <el-col :span="24" style="background: #fffeee; height: 50vh">5555</el-col>
                  <el-col :span="24" style="background: yellowgreen; height: 30vh">6666</el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

```