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