tabs选项卡样式全局修改
Showing
4 changed files
with
31 additions
and
2 deletions
... | @@ -71,3 +71,28 @@ ol, ul { list-style:none; } | ... | @@ -71,3 +71,28 @@ ol, ul { list-style:none; } |
71 | ::-webkit-scrollbar-track { | 71 | ::-webkit-scrollbar-track { |
72 | border-radius: 0; | 72 | border-radius: 0; |
73 | } | 73 | } |
74 | //二级菜单样式 | ||
75 | .tabs{ | ||
76 | >.is-top>.is-top>.el-tabs__nav-scroll{ | ||
77 | height: 50px; | ||
78 | background-color: #ffffff; | ||
79 | box-sizing: border-box; | ||
80 | padding-left: 20px; | ||
81 | .el-tabs__active-bar{ | ||
82 | display: none; | ||
83 | } | ||
84 | >.el-tabs__nav{ | ||
85 | >.el-tabs__item{ | ||
86 | border: 1px solid #DEDEDE; | ||
87 | height: 30px; | ||
88 | line-height: 30px; | ||
89 | padding: 0 20px; | ||
90 | margin: 9px 10px 9px 0; | ||
91 | } | ||
92 | .is-active{ | ||
93 | color: #006CFF; | ||
94 | background-color: #ffffff; | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | } | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="content_box"> | 2 | <div class="content_box"> |
3 | <el-tabs v-model="activeName" @tab-click="handleClick"> | 3 | <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"> |
4 | <el-tab-pane label="地籍调查表" name="djdcb"><zddcb></zddcb></el-tab-pane> | 4 | <el-tab-pane label="地籍调查表" name="djdcb"><zddcb></zddcb></el-tab-pane> |
5 | <el-tab-pane label="面积分摊表" name="mjftb"><mjftb></mjftb></el-tab-pane> | 5 | <el-tab-pane label="面积分摊表" name="mjftb"><mjftb></mjftb></el-tab-pane> |
6 | <el-tab-pane label="界址点" name="jzd"><jzd></jzd></el-tab-pane> | 6 | <el-tab-pane label="界址点" name="jzd"><jzd></jzd></el-tab-pane> | ... | ... |
1 | <template> | 1 | <template> |
2 | <div ref="lpb" class="content_box"> | 2 | <div ref="lpb" class="content_box"> |
3 | <el-tabs v-model="activeName" @tab-click="handleClick"> | 3 | <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"> |
4 | <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> | 4 | <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> |
5 | <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane> | 5 | <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane> |
6 | <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane> | 6 | <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane> | ... | ... |
... | @@ -53,12 +53,16 @@ export default { | ... | @@ -53,12 +53,16 @@ export default { |
53 | } | 53 | } |
54 | /deep/.el-tabs--card>.el-tabs__header{ | 54 | /deep/.el-tabs--card>.el-tabs__header{ |
55 | background-color: #FAFAFA; | 55 | background-color: #FAFAFA; |
56 | border-top: 1px solid #E4E7ED; | ||
56 | } | 57 | } |
57 | /deep/.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{ | 58 | /deep/.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{ |
58 | background-color: #fff; | 59 | background-color: #fff; |
59 | border-top: 2px solid #006CFF; | 60 | border-top: 2px solid #006CFF; |
60 | height: 42px; | 61 | height: 42px; |
61 | } | 62 | } |
63 | /deep/ .el-tabs__item{ | ||
64 | border-top: 0; | ||
65 | } | ||
62 | .el-tabs{ | 66 | .el-tabs{ |
63 | height: 100%; | 67 | height: 100%; |
64 | display: flex; | 68 | display: flex; | ... | ... |
-
Please register or sign in to post a comment