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

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>

给个采纳呗 谢谢

```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>

```

【相关推荐】

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7512530
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue - 网站接入微信扫码登录功能详细教程，完整详细流程及完整功能示例源代码（附常见问题的解决方案与二维码样式修改方案）
• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的 什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue项目微信禁止分享功能中的 一. 上面的方法好像在测试环境中可以，但是部署到线上时，屏蔽功能就会失效(所以使用下面这种方法)。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  一.1  给一个检测是否为微信环境的方法，我这里写在utils.js中
  

  // 检测是否是微信环境
    Vue.prototype.$isWeixin = () => {
      var ua = navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
              return true;
          } else {
              return false;
          }
    }
  

  一.2 然后在app.vue加载的时候判断
  

     if(this.$isWeixin()){ // 微信环境下禁用分享
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
          // 通过下面这个API隐藏右上角按钮         如果没有↓这注释，会导致eslint报错
          WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line no-undef
        });
      }
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^