有关商业网站的风格特征,温州高端品牌网站建设,WordPress卡密充值怎么用,google免费入口今天针对ElementUI的Tabs标签页进行了样式修改#xff0c;更改为如下图所属的样子。 在线运行地址#xff1a;JSRUN项目-ElementUI tabs标签页样式改造 大家如果有需要可以拿来修改使用#xff0c;下面我也简单的贴上代码#xff0c;代码没有注释#xff0c;很抱歉#x…今天针对ElementUI的Tabs标签页进行了样式修改更改为如下图所属的样子。 在线运行地址JSRUN项目-ElementUI tabs标签页样式改造 大家如果有需要可以拿来修改使用下面我也简单的贴上代码代码没有注释很抱歉时间比较匆忙。
HTML
div idappel-tabs typeborder-cardel-tab-pane label用户管理用户管理/el-tab-paneel-tab-pane label配置管理配置管理/el-tab-paneel-tab-pane label角色管理角色管理/el-tab-paneel-tab-pane label定时任务补偿定时任务补偿/el-tab-pane/el-tabs
/div## CSS
:root {--border-color: #d9d9d9;--primary-gradient: linear-gradient(180deg, #a1fcf0, #11aa95);--active-primary-gradient: linear-gradient(180deg, #c6ffdd, #69d192);
}.el-tabs--border-card.el-tabs__header .el-tabs__item:not(.is-disabled):hover {color: #FFFFFF;
}.el-tabs--border-card.el-tabs__header .el-tabs__item.is-active {color: #FFFFFF;background: var(--active-primary-gradient);z-index: 999;
}.el-tabs--border-card.el-tabs__header {position: relative;
}.el-tabs--border-card.el-tabs__header .el-tabs__item {color: #FFFFFF;margin: 0 30px;background: var(--primary-gradient);border: none;height: 28px;line-height: 28px;
}.el-tabs--border-card.el-tabs__header .el-tabs__item:first-child {margin-left: 22px;
}.el-tabs--border-card.el-tabs__header .el-tabs__item::before,
.el-tabs--border-card.el-tabs__header .el-tabs__item::after {content: ;height: 100%;position: absolute;background: var(--primary-gradient);border-radius: 8px 8px 0 0;width: 30px;top: 0;transition: all .3s cubic-bezier(.645, .045, .355, 1);
}.el-tabs--border-card.el-tabs__header .el-tabs__item::before {right: -16px;transform: skew(-25deg);border-radius: 0 0 8px 0;
}.el-tabs--border-card.el-tabs__header .el-tabs__item::after {transform: skew(25deg);left: -16px;border-radius: 0 0 0 8px;border-left: 1px solid var(--border-color);
}.el-tabs--border-card.el-tabs__header .el-tabs__item.is-active::before,
.el-tabs--border-card.el-tabs__header .el-tabs__item.is-active::after {background: var(--active-primary-gradient);transition: all .3s cubic-bezier(.645, .045, .355, 1);z-index: 999;
}.el-tabs--border-card.el-tabs__header .el-tabs__item.is-active::before {border-right: 1px solid var(--border-color);
}.el-tabs--border-card.el-tabs__header .el-tabs__item.is-active::after {border-left: 1px solid var(--border-color);
}JS
var app new Vue({el: #app,data() {return {}},methods: {}
});
