修改el-card的header的背景颜色
1.修改默认样式
好处是当前页面的所有的el-card都会变化
页面卡片:
<el-card class="box-card" >
<div slot="header" class="clearfix">
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>
页面css:
.box-card .el-card__header {
background-color: #409EFF;
color: #fff;
}
2.采用自定义的方式
对body和整个card设置不同的样式就能达到相同的效果。
下面是参考代码
<el-card class="box-card" :body-style="{backgroundColor: '#fff' }" style=" background-color: #409eff;">
<div slot="header" class="clearfix" >
<span>卡片名称</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card>