![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4030d7a0b694a676a529e68c61f307b8.gif#pic_center)
<div class="data-wrap">
<el-tabs v-model="dataActive">
<el-tab-pane label="数据1313" name="first">
页面1
</el-tab-pane>
<el-tab-pane label="132达" name="second">
页面2
</el-tab-pane>
</el-tabs>
</div>
dataActive: "first",
.data-wrap {
width: 100%;
height: calc(48% - 10px);
.el-tabs {
height: 100%;
.el-tabs__header {
margin: 0 0 0px;
.el-tabs__nav-wrap::after {
height: 1px;
}
.el-tabs__nav-wrap {
.el-tabs__item {
color: #606266;
}
.el-tabs__item:hover {
color: #1890ff;
font-weight: 700;
transition-duration: 0.3s;
}
.el-tabs__item::after {
height: 2px;
content: "";
position: absolute;
left: 20px;
bottom: 0;
}
.el-tabs__item:nth-child(2)::after {
width: calc(100% - 20px);
left: 0px;
}
.el-tabs__item:nth-child(3)::after {
width: calc(100% - 20px);
left: 20px;
}
.el-tabs__item:hover::after {
border-bottom: 2px solid #1890ff;
animation-name: animation;
animation-duration: 0.3s;
}
.el-tabs__item:nth-child(2):hover::after {
border-bottom: 2px solid #1890ff;
animation-name: animation1;
animation-duration: 0.3s;
}
.el-tabs__item.is-active {
color: #1890ff;
font-weight: 700;
transition-duration: 0.3s;
}
@keyframes animation1 {
0% {
left: 20px;
}
25% {
left: 15px;
}
50% {
left: 10px;
}
75% {
left: 5px;
}
100% {
left: 0px;
}
}
@keyframes animation {
0% {
left: 0px;
}
25% {
left: 5px;
}
50% {
left: 10px;
}
75% {
left: 15px;
}
100% {
left: 20px;
}
}
}
}
.el-tabs__content {
height: calc(100% - 40px);
}
}
}