el-tabs修改默认样式

奈何桥上哈啤酒

已于 2023-04-10 14:58:32 修改

阅读量396

点赞数

文章标签： java vue.js javascript

于 2023-02-22 17:36:14 首次发布

本文链接：https://blog.csdn.net/yangpengxunb/article/details/129167087

版权

该文章描述了一段前端代码，用于创建带有全部,展示审核,和拍卖审核栏目的tabs组件。CSS样式定义了活动栏目的视觉效果，包括自定义宽度、渐变背景色、阴影和圆角。此外，还调整了字体大小、字体系列和颜色以增强可读性。

摘要由CSDN通过智能技术生成

<div class="jp_tabsBox">
                    <el-tabs v-model="activeName" @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-tabs>
                </div>

.jp_tabsBox .el-tabs__nav-wrap::after{
display: none;}

.jp_tabsBox .el-tabs__active-bar{ 
width: 60px;
height: 5px;
background: linear-gradient(to right, #FA5151 1%, rgba(250,81,81,0) 100%);
box-shadow: 0px 5px 28px 0px rgba(0,131,249,0.2028);
border-radius: 98px 98px 98px 98px;
z-index: -99999;
margin-bottom: 10px;}

.jp_tabsBox .el-tabs__item{
font-size: 16px;
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
font-weight: 500 !important;
color: #3D3D3D !important;}