修改el-card的header的背景颜色

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