修改element-ui中的el-card标签的头部默认样式

在Element UI中，el-card 组件的头部默认是没有样式的，它是通过一个名为 .el-card__header 的类来定义样式的。如果你想要修改这个头部的默认样式，你可以通过自定义CSS来覆盖默认的样式。

以下是一个简单的例子，展示了如何通过自定义CSS来修改el-card头部的样式：

<template>
  <el-card class="my-card">
    <template #header>
      <div class="card-header">
        自定义头部
      </div>
    </template>
    <div>
      <!-- 卡片内容 -->
    </div>
  </el-card>
</template>
 
<style>
.my-card .el-card__header {
  background-color: #f5f7fa; /* 修改背景颜色 */
  color: #909399; /* 修改文本颜色 */
  padding: 10px; /* 修改内边距 */
  border-bottom: 1px solid #ebeef5; /* 添加底部边框 */
}
 
.card-header {
  /* 在这里添加更多自定义样式 */
}
</style>

在这个例子中，.my-card .el-card__header 选择器用于选中所有.my-card 下的el-card头部元素，并应用了新的样式。.card-header 类用于直接定位头部模板内的元素，并可以根据需要添加更多样式。