element plus el-card 如何穿透 修改里边的样式，修改边距，修改下方横线的样式变粗，修改左右间距和上下间距等。el-card实现表格上方的tab切换菜单

直接穿透：

<template>
  <el-card class="custom-card">
    <el-tabs class="custom-tabs">
      <!-- 内容 -->
    </el-tabs>
  </el-card>
</template>
<style scoped>
/* 修改 el-card__body 的 padding */
::v-deep .el-card__body {
  padding: 20px; /* 自定义值 */
}
/* 修改 el-tabs__header 的 margin */
::v-deep .el-tabs__header {
  margin: 0; /* 自定义值 */
}
</style>

增加限定作用域：

<template>
  <el-card class="custom-card">
    <el-tabs class="custom-tabs">
      <!-- 内容 -->
    </el-tabs>
  </el-card>
</template>
<style scoped>
/* 通过父级类名限定作用域 */
.custom-card ::v-deep .el-card__body {
  padding: 20px;
}
.custom-tabs ::v-deep .el-tabs__header {
  margin: 0;
}
</style>

实现一个如下效果的样子

实现样式如下：

<template>
    <div class="platform-hotpush-container">
        <div class="phc-header">
            <el-card class="custom-card" style="flex: 1">
                <div>
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="新增推荐" name="first"></el-tab-pane>
                        <el-tab-pane label="资源库推荐" name="second"></el-tab-pane>
                        <el-tab-pane label="课程推荐" name="third"></el-tab-pane>
                        <el-tab-pane label="示范性课程推荐" name="fourth"></el-tab-pane>
                    </el-tabs>
                </div>
            </el-card>
        </div>
        <div class="mt15">
            <HotpushLesson v-if="activeName == 'first'"></HotpushLesson>
            <HotpushIndex v-if="activeName == 'second'"></HotpushIndex>
            <!-- <el-card class="box-card" style="flex: 1">
            </el-card> -->
        </div>
    </div>
</template>
<style scoped="scoped" lang="scss">
/* 修改 el-card__body 的 padding */
.phc-header ::v-deep .el-card__body {
    padding: 10px 10px 0px 20px; /* 自定义值 */
}
/* 修改 el-tabs__header 的 margin */
.phc-header ::v-deep .el-tabs__header {
    margin: 0; /* 自定义值 */
}
// 修改选中时候的横线样式，变粗一点
.phc-header ::v-deep .el-tabs__active-bar{
    height: 4px;
}
/* 修改 选中的颜色和指上去的颜色 */
.phc-header ::v-deep .el-tabs__item:hover{
    color: #1890FF !important;
}
.phc-header ::v-deep .el-tabs__item.is-active{
    color: #1890FF !important;
}
/* 修改左右间距和上下间距 */
.phc-header ::v-deep .el-tabs__item{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    // font-size: 16px;
    font-size: 15px;
    // 左右的间距调整一下
    padding: 0 23px;
    // 让底部的横向和上方有一点间距
    margin-bottom: 10px;
    color: #74798C;
}
</style>