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

实现效果如下

成品：

代码如下：

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

.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;  }}