el-card list卡片列表页面自适应布局

实现效果如下

在这里插入图片描述

成品：

在这里插入图片描述

代码如下：


  
    
      
      
      
    
    
      
        
        
      
      
        
          
          
        
      
      
        
          
          
        
      
      
        
          
          
        
      
      
        
        
      
      
        查询
        重置
      
    
  

  
    
      
        
          Lv1
          {{item.roadName}}
          
          
        
        
          所属任务{{item.taskName}}
          巡查人{{item.userId === null ? '无' : item.userId}}
          巡查时间{{item.checkTime.substring(0,10)}}
          设备编号{{item.equipId}}
        
        
          
            感观质量评价
            回看
          
          |
          
            密度质量评价
            回看
          
        
      
    
  

  0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    :pageSizes="[12,24,36,48]"
    @pagination="getList"
  />

.el-row {
  display:flex;
  flex-wrap: wrap;
  align-items: center;
}
.el-row  .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}
.el-form-item {
  margin-bottom: 0 !important;
}
.pagination-container {
  margin-top: -3px;
  margin-bottom: 30px;
}
.box-card {
  .header {
    position: relative;
    .label{
      padding: 0 3px;
      background-color: #fdf0da;
      color: #f19901;
    }
    .header-label {
      padding-left: 10px;
    }
    .card-header-tag-blue {
      position: absolute;
      width: 68px;
      height: 30px;
      top: -14px;
      right: -15px;
      background-image: url("~@/assets/images/img_dpj_t.png");
      display: inline-block;
    }
    .card-header-tag-green {
      position: absolute;
      width: 68px;
      height: 30px;
      top: -14px;
      right: -15px;
      background-image: url("~@/assets/images/img_ypj_t.png");
      display: inline-block;
    }
  }
  .footer {
    font-size: 18px !important;
    background-color: rgb(245, 247, 251);
    display: flex;
    height: 50px;
    justify-content: space-evenly;
  }
  .card-label {
    color: rgb(197, 197, 197);
    margin-right: 8px;
    width: 70px;
    display: inline-block;
    margin-bottom: 5px;
  }
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/abc2968282.html

el-card list卡片列表页面自适应布局

相关推荐