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

实现效果如下

成品：

代码如下：

<template><div><el-cardstyle="margin: 10px 15px 0 15px"><el-tabsv-model="activeName"@tab-click="handleClick"><el-tab-pane:label="`全部(${firstTotal})`"name="first"></el-tab-pane><el-tab-pane:label="`待评价(${secondTotal})`"name="second"></el-tab-pane><el-tab-pane:label="`已评价(${thirdTotal})`"name="third"></el-tab-pane></el-tabs><el-form:model="queryParams"ref="queryForm"label-position="right":inline="true"label-width="68px"><el-form-itemlabel="道路名称"><el-inputstyle="width: 150px"size="small"placeholder="搜索道路名称"v-model="queryParams.roadName"></el-input></el-form-item><el-form-itemlabel="所属单位"><el-selectv-model="queryParams.orgId"clearableplaceholder="请选择"size="small"style="width: 150px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-itemlabel="所属区域"><el-selectv-model="queryParams.regionId"clearableplaceholder="请选择"size="small"style="width: 150px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-itemlabel="所属任务"><el-selectv-model="queryParams.taskNameId"clearableplaceholder="请选择"size="small"style="width: 150px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item><el-form-itemlabel="巡查日期"><el-date-pickerstyle="width: 221px"size="small"v-model="dateRange"type="datetimerange"value-format="yyyy-MM-dd HH:mm:ss"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker></el-form-item><el-form-item><el-buttontype="primary"icon="el-icon-search"size="small"@click="handleQuery">查询</el-button><el-buttonicon="el-icon-refresh"size="small"@click="resetQuery">重置</el-button></el-form-item></el-form></el-card><el-row:gutter="20"style="margin-right: 15px;margin-left: -5px"type="flex"v-loading="loading"><el-colv-for="(item, index) in data":key="index":span="6"><el-cardclass="box-card"shadow="always":body-style="{ padding: '0px' }"><divslot="header"class="header"><spanclass="label">Lv1</span><spanclass="header-label">{{item.roadName}}</span><divclass="card-header-tag-green"v-show="item.status === '1' || item.status === '0'"></div><divclass="card-header-tag-blue"v-show="item.status === '2'"></div></div><divstyle="margin: 15px"><div><divclass="card-label">所属任务</div><span>{{item.taskName}}</span></div><div><divclass="card-label">巡查人</div><span>{{item.userId === null ? '无' : item.userId}}</span></div><div><divclass="card-label">巡查时间</div><span>{{item.checkTime.substring(0,10)}}</span></div><div><divclass="card-label">设备编号</div><span>{{item.equipId}}</span></div></div><divclass="footer"><divstyle="display: flex;align-items: center"><el-buttontype="text":style="item.status === '1' || item.status === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'"style="color: #18c8bd">感观质量评价</el-button><el-buttontype="text"style="color: #18c8bd;"v-show="item.status === '1' || item.status === '2'">回看</el-button></div><divstyle="display:flex;align-items: center;color: #cccccc">|</div><divstyle="display: flex;align-items: center"><el-buttontype="text":style="item.status === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'"style="color: #18c8bd">密度质量评价</el-button><el-buttontype="text"style="color: #18c8bd;"v-show="item.status === '2'">回看</el-button></div></div></el-card></el-col></el-row><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize":pageSizes="[12,24,36,48]"@pagination="getList"/></div></template>

<style scoped lang="scss">
.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;}}

</style>