diff options
| -rw-r--r-- | nezha-fronted/src/assets/css/common/tableCommon.scss | 42 | ||||
| -rw-r--r-- | nezha-fronted/src/assets/css/index.scss | 2 | ||||
| -rw-r--r-- | nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue | 40 |
3 files changed, 65 insertions, 19 deletions
diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss index 24f73b1fe..163de63a5 100644 --- a/nezha-fronted/src/assets/css/common/tableCommon.scss +++ b/nezha-fronted/src/assets/css/common/tableCommon.scss @@ -152,10 +152,19 @@ background-color: $--background-color-empty; padding: 0 70px 0 15px; height: 44px; + width: 100%; + box-sizing: border-box; } .top-tools--sub { + flex-direction: row-reverse; + overflow: hidden; .top-tool-left { height: 100%; + width: 0; // 避免计算错误 + flex: 1; + display: block; + text-align: left; + flex-direction: row; } .sub-list-title { width: 200px; @@ -165,12 +174,18 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; + flex-shrink: 0; + display: inline-block; } .sub-list-tabs { height: 100%; - display: flex; + flex: 1; + width: calc(100% - 220px); + min-width: 120px; + margin: 0 10px 0 0; + display: inline-block; + overflow: hidden; align-items: center; - .sub-list-tab { height: 100%; width: 120px; @@ -185,7 +200,28 @@ color: $--color-primary; } } - + .sub-list-tabs-nz-tabs { + .el-tabs__header{ + margin: 0; + transform: translateY(3px); + .el-tabs__item { + height: 100%; + width: 120px; + font-size: 14px; + text-align: center; + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: 40px; + cursor: pointer; + } + } + .el-tabs__nav-wrap::after{ + display: none; + } + .el-tabs__active-bar { + transition: none; + } + } } } /* 上滑resize工具条 */ diff --git a/nezha-fronted/src/assets/css/index.scss b/nezha-fronted/src/assets/css/index.scss index f712d8e07..66364822c 100644 --- a/nezha-fronted/src/assets/css/index.scss +++ b/nezha-fronted/src/assets/css/index.scss @@ -13,7 +13,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts'; // 避免ele原字体加载� } body { height: 100%; - min-width: 1400px; + min-width: 1024px; margin:0 !important; padding: 0 !important; cursor: default; diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue index 9ff6cff3b..bef6a5531 100644 --- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue +++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue @@ -1,11 +1,8 @@ <template> <div class="bottom-data-list"> <div class="top-tools top-tools--sub"> - <div class="top-tool-left"> - <div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div> - <div class="sub-list-tabs"> - <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop == targetTab }" :title='tab.name' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div> - </div> + <div v-if="customTool" class="top-tool-right"> + <slot name="top-tool-right"></slot> </div> <div class="top-tool-right" v-if="!customTool"> <div v-if="layout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20"> @@ -17,8 +14,14 @@ <i class="nz-icon-gear nz-icon"></i> </button> </div> - <div v-else class="top-tool-right"> - <slot name="top-tool-right"></slot> + <div class="top-tool-left"> + <div class="sub-list-title" v-if="showTitle">{{bottomHeaderTitle}}：<slot name="title"></slot></div> + <div class="sub-list-tabs"> + <!-- <div v-for="tab in tabs" :key="tab.prop" :class="{'sub-list-tab--active': tab.active || tab.prop == targetTab }" :title='tab.name' class="sub-list-tab" @click="changeTab(tab.prop)">{{tab.name}}</div>--> + <el-tabs v-model="activeTargetTab" @tab-click="changeTab" class="sub-list-tabs-nz-tabs"> + <el-tab-pane v-for="tab in tabs" :label="tab.name" :name="tab.prop" :key="tab.prop" class="sub-list-tab"></el-tab-pane> + </el-tabs> + </div> </div> </div> <!-- 自定义table列 --> @@ -126,7 +129,8 @@ export default { toTopBtnTop: this.$tableHeight.toTopBtnTop, // to-top按钮的top属性 tableHover: false, // 控制滚动条和top按钮同时出现 showCustomTableTitle: false // 自定义列弹框是否显示 - } + }, + activeTargetTab: '' } }, watch: { @@ -136,11 +140,16 @@ export default { this.searchInputShow = true }, 100) }, - targetTab (n) { - this.searchInputShow = false - setTimeout(() => { - this.searchInputShow = true - }, 100) + targetTab: { + immediate: true, + handler (n) { + this.searchInputShow = false + this.activeTargetTab = n + console.log(n) + setTimeout(() => { + this.searchInputShow = true + }, 100) + } }, showDeleteTableRel (n) { if (!n) { @@ -156,8 +165,9 @@ export default { this.$emit('search', searchObj) }, // 切换tab - changeTab (tab) { - this.$emit('changeTab', tab) + changeTab (tab, event) { + console.log(tab, event) + this.$emit('changeTab', tab.name) } } } |