布局 用element ui代码 ! ! ! !

img


要代码然后布局,用到elementui 布局 ,就像图片布局就行,不需要修改内容!!


<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple" style="height:300px"></div>
      </el-col>
      <el-col :span="4">
        <div>
            <div class="grid-content bg-purple" style="height:140px"></div>
            <div class="grid-content bg-purple" style="margin-top:20px;height:140px"></div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" style="height:300px"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple" style="height:300px"></div>
      </el-col>
    </el-row>
  </div>
</template>

使用layout布局,根据大小设定比例。