<el-tabs v-model="activeName" @tab-click="handleClick" class="newTabLine">
<el-tab-pane v-for="(item, index) in tabListAll" :key="index" :name="item.name">
<span slot="label">{{ item.label }}</span>
</el-tab-pane>
</el-tabs>
.newTabLine {
background-color: #f2f3f5;
border-radius: 8px 8px 0px 0px;
overflow: hidden;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
-o-user-select: none;
user-select: none;
.el-tabs__active-bar {
display: none;
}
.el-tabs__header {
margin: 0;
border: none;
.el-tabs__nav {
border: none;
.el-tabs__item {
height: 48px !important;
line-height: 48px !important;
border: none !important;
padding: 0 35px !important;
width: auto !important;
border-radius: 0;
span {
font-size: 16px !important;
color: #1d2129;
font-weight: 400;
}
&:nth-child(2) {
&::before {
display: none;
}
}
&.is-active {
background-color: #fff;
position: relative;
span {
font-weight: 500;
color: #165dff;
}
&::before {
position: absolute;
content: '';
left: -25px;
bottom: 0;
height: 48px;
width: 40px;
background-image: url('../assets/setting/tabBg.png');
transform: rotateY(180deg);
background-color: #f2f3f5;
}
&::after {
position: absolute;
content: '';
right: -25px;
bottom: 0;
height: 48px;
width: 40px;
background-image: url('../assets/setting/tabBg.png');
background-color: #f2f3f5;
}
}
}
}
}
}
修改element tab样式
于 2022-08-23 10:20:24 首次发布