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

实现效果如下

成品：

代码如下：

<template>
<div>
<el-card style="margin: 10px 15px 0 15px">
<el-tabs v-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-item label="道路名称">
<el-input
style="width: 150px"
size="small"
placeholder="搜索道路名称"
v-model="queryParams.roadName">
</el-input>
</el-form-item>
<el-form-item label="所属单位">
<el-select v-model="queryParams.orgId" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属区域">
<el-select v-model="queryParams.regionId" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属任务">
<el-select v-model="queryParams.taskNameId" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="巡查日期">
<el-date-picker
style="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-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
<el-button icon="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-col v-for="(item, index) in data" :key="index" :span="6">
<el-card class="box-card" shadow="always" :body-style="{ padding: '0px' }">
<div slot="header" class="header">
<span class="label">Lv1</span>
<span class="header-label">{{item.roadName}}</span>
<div class="card-header-tag-green" v-show="item.status === '1' || item.status === '0'"></div>
<div class="card-header-tag-blue" v-show="item.status === '2'"></div>
</div>
<div style="margin: 15px">
<div><div class="card-label">所属任务</div><span>{{item.taskName}}</span></div>
<div><div class="card-label">巡查人</div><span>{{item.userId === null ? '无' : item.userId}}</span></div>
<div><div class="card-label">巡查时间</div><span>{{item.checkTime.substring(0,10)}}</span></div>
<div><div class="card-label">设备编号</div><span>{{item.equipId}}</span></div>
</div>
<div class="footer">
<div style="display: flex;align-items: center">
<el-button type="text" :style="item.status === '1' || item.status === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'" style="color: #18c8bd">感观质量评价</el-button>
<el-button type="text" style="color: #18c8bd;" v-show="item.status === '1' || item.status === '2'">回看</el-button>
</div>
<div style="display:flex; align-items: center;color: #cccccc">|</div>
<div style="display: flex;align-items: center">
<el-button type="text" :style="item.status === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'" style="color: #18c8bd">密度质量评价</el-button>
<el-button type="text" style="color: #18c8bd;" v-show="item.status === '2'">回看</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
:pageSizes="[12,24,36,48]"
@pagination="getList"
/>
</div>
</template>

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