修改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>