饿了么选项卡样式修改

奈何桥上哈啤酒

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

阅读量222

点赞数

文章标签：前端 css html

于 2023-02-22 17:44:07 首次发布

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

版权

这段代码展示了如何使用HTML和CSS来创建一个具有卡片样式的tabs组件，包含产品信息和审核信息两个标签页。通过类名.jp_tabsCardBox和el-tabs的card类型属性，以及相应的样式设置，实现了特定的布局和颜色效果，如定制的边框、背景色和活动标签页的样式。

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

默认：

修改后：

代码段：

html：

<div class="jp_tabsCardBox">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="产品信息" name="first"></el-tab-pane>
                <el-tab-pane label="审核信息" name="second"></el-tab-pane>
            </el-tabs>
            <showCheckInfo :id="activeName"/>
        </div>

css：

.jp_tabsCardBox{
margin-left: 10px;
margin-top: 20px;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header{
height: 46px;
border-bottom: 1px solid #F04A4A;
background: #EFF3F7;
border-radius: 8px 0px 0px 0px !important;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header .el-tabs__nav-wrap{height: 100%;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll{height: 100%;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header .el-tabs__nav{height: 100%;border: none;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header .el-tabs__item.is-top{height: 100%;color: #3B3A3A !important;border-left: none;}

.jp_tabsCardBox .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{height: 100%;border-bottom-color:#F04A4A;border-radius: 8px 8px 0px 0px;background: #F04A4A;color: #FFFFFF !important;}