diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 741e01ee2..6654b6160 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -1071,33 +1071,68 @@ li{ overflow-x: hidden !important; } .el-scrollbar__thumb { - background-color: #aaa; + background-color: #ccc; cursor: default; } +.el-scrollbar__thumb:hover { + background-color: #bbb; +} +/*大中小三个尺寸,默认中*/ .el-scrollbar__bar.is-vertical { - width: 11px; + width: 8px; } .el-scrollbar__bar.is-horizontal { + height: 8px; +} +/*.el-scrollbar__bar.is-vertical:hover { + width: 11px; +} +.el-scrollbar__bar.is-horizontal:hover { + height: 11px; +}*/ +.el-scrollbar-large .el-scrollbar__bar.is-vertical { + width: 11px; +} +.el-scrollbar-large .el-scrollbar__bar.is-horizontal { height: 11px; } +.el-scrollbar-normal .el-scrollbar__bar.is-vertical { + width: 8px; +} +.el-scrollbar-normal .el-scrollbar__bar.is-horizontal { + height: 8px; +} +/*.el-scrollbar-normal .el-scrollbar__bar.is-vertical:hover { + width: 11px; +} +.el-scrollbar-normal .el-scrollbar__bar.is-horizontal:hover { + height: 11px; +}*/ +.el-scrollbar-small .el-scrollbar__bar.is-vertical { + width: 5px; +} +.el-scrollbar-small .el-scrollbar__bar.is-horizontal { + height: 5px; +} +/*.el-scrollbar-small .el-scrollbar__bar.is-vertical:hover { + width: 8px; +} +.el-scrollbar-small .el-scrollbar__bar.is-horizontal:hover { + height: 8px; +}*/ .new-search .el-scrollbar__bar.is-horizontal { height: 4px; } .new-search .el-scrollbar__view { height: calc(100% - 4px); } -.app>.el-scrollbar__bar.is-vertical { - width: 5px; -} .el-scrollbar__bar { border-radius: 6px; } .el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap { margin-bottom: 0 !important; } -.el-scrollbar__thumb:hover { - background-color: #999; -} + .right-box-form { width: calc(100% - 30px); } @@ -1519,31 +1554,83 @@ li{ background-color: rgba(255, 99, 71, .85); } -/*滚动条相关*/ -.ps__thumb-y { +/*滚动条相关, 11px/8px/5px, 默认8px*/ +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y, +.ps__thumb-y, +.ps__rail-y { + width: 8px; +} +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x, +.ps__rail-x, +.ps__thumb-x { + height: 8px; +} +.ps-scroll-small.ps__rail-y:hover > .ps__thumb-y, +.ps-scroll-small.ps__rail-y:focus > .ps__thumb-y, +.ps-scroll-small.ps__rail-y.ps--clicking .ps__thumb-y, +.ps-scroll-small .ps__thumb-y, +.ps-scroll-small .ps__rail-y { + width: 5px; +} +.ps-scroll-small.ps__rail-x:hover > .ps__thumb-x, +.ps-scroll-small.ps__rail-x:focus > .ps__thumb-x, +.ps-scroll-small.ps__rail-x.ps--clicking .ps__thumb-x, +.ps-scroll-small .ps__rail-x, +.ps-scroll-small .ps__thumb-x { + height: 5px; +} +.ps-scroll-normal.ps__rail-y:hover > .ps__thumb-y, +.ps-scroll-normal.ps__rail-y:focus > .ps__thumb-y, +.ps-scroll-normal.ps__rail-y.ps--clicking .ps__thumb-y, +.ps-scroll-normal .ps__thumb-y, +.ps-scroll-normal .ps__rail-y { + width: 8px; +} +.ps-scroll-normal.ps__rail-x:hover > .ps__thumb-x, +.ps-scroll-normal.ps__rail-x:focus > .ps__thumb-x, +.ps-scroll-normal.ps__rail-x.ps--clicking .ps__thumb-x, +.ps-scroll-normal .ps__rail-x, +.ps-scroll-normal .ps__thumb-x { + height: 8px; +} +.ps-scroll-large.ps__rail-y:hover > .ps__thumb-y, +.ps-scroll-large.ps__rail-y:focus > .ps__thumb-y, +.ps-scroll-large.ps__rail-y.ps--clicking .ps__thumb-y, +.ps-scroll-large .ps__thumb-y, +.ps-scroll-large .ps__rail-y { width: 11px; } -.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { - width: 11px; +.ps-scroll-large.ps__rail-x:hover > .ps__thumb-x, +.ps-scroll-large.ps__rail-x:focus > .ps__thumb-x, +.ps-scroll-large.ps__rail-x.ps--clicking .ps__thumb-x, +.ps-scroll-large .ps__rail-x, +.ps-scroll-large .ps__thumb-x { + height: 11px; } .ps__thumb-y { - right: 0px; - background-color: #888; + right: 0; + background-color: #bbb; } -.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { - height: 6px; +.ps__thumb-x { + bottom: 0; +} +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y, +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x{ + background-color: #bbb; } .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking { background-color: transparent; } -.ps__rail-y { - width: 6px; -} -.ps__rail-x { - height: 6px; -} .el-table__fixed-right { - right: 0px !important; + right: 0 !important; } .asset .ps__rail-y { z-index: 2000; diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue index 35a903ceb..1b27930b6 100644 --- a/nezha-fronted/src/components/page/config/mibBrowser.vue +++ b/nezha-fronted/src/components/page/config/mibBrowser.vue @@ -143,7 +143,7 @@ - +
- +
Name
{{currentWalk.name}}
@@ -218,7 +218,7 @@
+ class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false">
{{row.name ? row.name : row.oid}}
@@ -554,7 +554,7 @@ ) } catch (e) {} return out - }, + } }, mounted() { this.getWalkData(); diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue index 9758f9baa..475de26d0 100644 --- a/nezha-fronted/src/components/page/project/project.vue +++ b/nezha-fronted/src/components/page/project/project.vue @@ -104,7 +104,7 @@ border class="nz-table endpoint-table" :height="mainTableHeight" - v-scrollBar:el-table + v-scrollBar:el-table="'normal'" v-show="mainResizeShow" ref="endpointTable" style="width: 100%;"> diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js index a4ad1895d..5431ef2fd 100644 --- a/nezha-fronted/src/tools.js +++ b/nezha-fronted/src/tools.js @@ -125,14 +125,13 @@ export const scrollBar = { el = el.querySelector(".el-cascader__tags"); !el && console.warn("未发现className为el-cascader__tags的dom"); } - el.classList.add("ps"); - el.addEventListener("ps-scroll-y", () => - el.classList.add("ps") - ); - el.addEventListener("ps-scroll-x", () => - el.classList.add("ps") - ); + el.addEventListener("ps-scroll-y", () => { + el.classList.add("ps"); + }); + el.addEventListener("ps-scroll-x", () => { + el.classList.add("ps"); + }); //el上挂一份属性 el_scrollBar(el); }); @@ -148,10 +147,17 @@ export const scrollBar = { } }, componentUpdated(el, binding, vnode, oldVnode) { - const { arg } = binding; + const { arg, value } = binding; if (arg === "el-table") { el = el.querySelector(".el-table__body-wrapper"); !el && console.warn("未发现className为el-table__body-wrapper的dom"); + // 滚动条尺寸 large/normal/small 默认normal + vnode.context.$nextTick(() => { + if (value) { + el.querySelector(".ps__rail-x").classList.add("ps-scroll-" + value); + el.querySelector(".ps__rail-y").classList.add("ps-scroll-" + value); + } + }); } else if (arg === "el-dropdown") { el = el.querySelector(".el-dropdown-menu"); !el && console.warn("未发现className为el-dropdown-menu的dom"); @@ -165,6 +171,7 @@ export const scrollBar = { el = el.querySelector(".table-scroll"); !el && console.warn("未发现className为table-scroll的dom"); } + setTimeout(() => { el.classList.add("ps"); el.classList.add("ps--active-y");