Modify the background color of the el-card header
1. Modify the default style
The advantage is that all el-cards on the current page will change
Page 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>Page css:
.box-card .el-card__header {
background-color: #409EFF;
color: #fff;
}
2. Adopt a customized approach
Setting different styles for the body and the entire card can achieve the same effect.
Below is the reference code
<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>