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

电脑版发表于：2025/4/2 14:25

[TOC]

### 直接穿透：
```
<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>
```

### 实现一个如下效果的样子

<img src="https://img.tnblog.net/arcimg/notebook/026ac84b3db046d99d09d74d3aac2c8c.png" style="width:599px;height:auto;">


实现样式如下：
```
<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>

			
		</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>
```

TeachingNote

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

{{item.title}}

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

{{item.title}}

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