element---组件

Basic

一、Layout布局

1. 基础布局
   

   bg-purple-dark"></div></el-col> </el-row> <el-row>   <el-col
   :span="12"><div class="grid-content bg-purple"></div></el-col>  
   <el-col :span="12"><div class="grid-content
   bg-purple-light"></div></el-col> </el-row> <el-row>   <el-col
   :span="8"><div class="grid-content bg-purple"></div></el-col>  
   <el-col :span="8"><div class="grid-content
   bg-purple-light"></div></el-col>   <el-col :span="8"><div
   class="grid-content bg-purple"></div></el-col> </el-row> <el-row>  
   <el-col :span="6"><div class="grid-content
   bg-purple"></div></el-col>   <el-col :span="6"><div
   class="grid-content bg-purple-light"></div></el-col>   <el-col
   :span="6"><div class="grid-content bg-purple"></div></el-col>  
   <el-col :span="6"><div class="grid-content
   bg-purple-light"></div></el-col> </el-row> <el-row>   <el-col
   :span="4"><div class="grid-content bg-purple"></div></el-col>  
   <el-col :span="4"><div class="grid-content
   bg-purple-light"></div></el-col>   <el-col :span="4"><div
   class="grid-content bg-purple"></div></el-col>   <el-col
   :span="4"><div class="grid-content bg-purple-light"></div></el-col> 
   <el-col :span="4"><div class="grid-content
   bg-purple"></div></el-col>   <el-col :span="4"><div
   class="grid-content bg-purple-light"></div></el-col> </el-row>
   
   <style>   .el-row {
       margin-bottom: 20px;
       &:last-child {
         margin-bottom: 0;
       }   }   .el-col {
       border-radius: 4px;   }   .bg-purple-dark {
       background: #99a9bf;   }   .bg-purple {
       background: #d3dce6;   }   .bg-purple-light {
       background: #e5e9f2;   }   .grid-content {
       border-radius: 4px;
       min-height: 36px;   }   .row-bg {
       padding: 10px 0;
       background-color: #f9fafc;   } </style> ```
   

2. 分栏间隔
   

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-heigh