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="">
</el-input>
</el-form-item>
<el-form-item label="所属单位">
<el-select v-model="" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key=""
:label=""
:value="">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属区域">
<el-select v-model="" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key=""
:label=""
:value="">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属任务">
<el-select v-model="" clearable placeholder="请选择" size="small" style="width: 150px">
<el-option
v-for="item in options"
:key=""
:label=""
: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">{{}}</span>
<div class="card-header-tag-green" v-show=" === '1' || === '0'"></div>
<div class="card-header-tag-blue" v-show=" === '2'"></div>
</div>
<div style="margin: 15px">
<div><div class="card-label">所属任务</div><span>{{}}</span></div>
<div><div class="card-label">巡查人</div><span>{{ === null ? '无' : }}</span></div>
<div><div class="card-label">巡查时间</div><span>{{(0,10)}}</span></div>
<div><div class="card-label">设备编号</div><span>{{}}</span></div>
</div>
<div class="footer">
<div style="display: flex;align-items: center">
<el-button type="text" :style=" === '1' || === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'" style="color: #18c8bd">感观质量评价</el-button>
<el-button type="text" style="color: #18c8bd;" v-show=" === '1' || === '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=" === '2' ? 'color: #18c8bd' : 'color: rgb(34, 125, 251)'" style="color: #18c8bd">密度质量评价</el-button>
<el-button type="text" style="color: #18c8bd;" v-show=" === '2'">回看</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
:=""
:=""
:pageSizes="[12,24,36,48]"
@pagination="getList"
/>
</div>
</template>