diff --git a/mayfly_go_web/src/components/pagetable/PageTable.vue b/mayfly_go_web/src/components/pagetable/PageTable.vue index 4d72ec57..cc9b0da2 100644 --- a/mayfly_go_web/src/components/pagetable/PageTable.vue +++ b/mayfly_go_web/src/components/pagetable/PageTable.vue @@ -2,7 +2,7 @@
- + diff --git a/mayfly_go_web/src/theme/app.scss b/mayfly_go_web/src/theme/app.scss index cfbacfa9..bd2c783f 100644 --- a/mayfly_go_web/src/theme/app.scss +++ b/mayfly_go_web/src/theme/app.scss @@ -190,6 +190,18 @@ body, } } + +.flex-justify-between { + display: flex; + align-items: center; // 垂直方向水平居中 + justify-content: space-between; // 使第一个子元素靠近父容器的起始位置,最后一个子元素靠近终止位置,而其他子元素均匀分布在它们之间 +} + +.flex-align-center { + display: flex; + align-items: center; +} + /* 宽高 100% ------------------------------- */ .w100 { @@ -276,6 +288,10 @@ body, .pl#{$i} { padding-left: #{$i}px !important; } + + .pd#{$i} { + padding: #{$i}px !important; + } } @@ -335,12 +351,15 @@ body, user-select: none; } -.toolbar { - width: 100%; - padding: 4px; - overflow: hidden; - line-height: 24px; - border: 1px solid var(--el-border-color-light, #ebeef5); +/* custom card */ +.card { + box-sizing: border-box; + padding: 20px; + overflow-x: hidden; + background-color: var(--el-bg-color); + border: 1px solid var(--el-border-color-light); + border-radius: 6px; + box-shadow: 0 0 12px rgb(0 0 0 / 5%); } .fl { @@ -361,10 +380,6 @@ body, z-index: inherit !important; } -.f12 { - font-size: 12px -} - .pointer { cursor: pointer; } @@ -396,6 +411,7 @@ body, .default-theme.splitpanes--horizontal>.splitpanes__splitter { border-top: 1px solid var(--bg-main-color); } + // 竖线样式 .splitpanes.default-theme .splitpanes__splitter::before, .splitpanes.default-theme .splitpanes__splitter::after { diff --git a/mayfly_go_web/src/views/ops/component/TagTree.vue b/mayfly_go_web/src/views/ops/component/TagTree.vue index 1d62b86e..2f7c5980 100644 --- a/mayfly_go_web/src/views/ops/component/TagTree.vue +++ b/mayfly_go_web/src/views/ops/component/TagTree.vue @@ -1,7 +1,7 @@ + + -
@@ -43,7 +44,6 @@ import { NodeType, TagTreeNode } from './tag'; import TagInfo from './TagInfo.vue'; import { Contextmenu } from '@/components/contextmenu'; import { tagApi } from '../tag/api'; -import { useEventListener, useWindowSize } from '@vueuse/core'; const props = defineProps({ resourceType: { @@ -74,8 +74,6 @@ const emit = defineEmits(['nodeClick', 'currentContextmenuClick']); const treeRef: any = ref(null); const contextmenuRef = ref(); -const { height: vh } = useWindowSize(); - const state = reactive({ height: 600 as any, filterText: '', @@ -88,14 +86,7 @@ const state = reactive({ }); const { filterText } = toRefs(state); -onMounted(async () => { - setHeight(); - useEventListener(window, 'resize', setHeight); -}); - -const setHeight = () => { - state.height = vh.value - 138 + 'px'; -}; +onMounted(async () => {}); watch(filterText, (val) => { treeRef.value?.filter(val); @@ -195,8 +186,7 @@ defineExpose({ diff --git a/mayfly_go_web/src/views/ops/redis/FormatViewer.vue b/mayfly_go_web/src/views/ops/redis/FormatViewer.vue index ef5f37f8..2dd9afb0 100644 --- a/mayfly_go_web/src/views/ops/redis/FormatViewer.vue +++ b/mayfly_go_web/src/views/ops/redis/FormatViewer.vue @@ -107,10 +107,10 @@ defineExpose({ getContent }); .format-viewer-container .el-textarea textarea { font-size: 14px; - height: calc(100vh - 536px + v-bind(height)); + height: calc(100vh - 546px + v-bind(height)); } .format-viewer-container .monaco-editor-content { - height: calc(100vh - 550px + v-bind(height)) !important; + height: calc(100vh - 560px + v-bind(height)) !important; } diff --git a/mayfly_go_web/src/views/ops/tag/TagTreeList.vue b/mayfly_go_web/src/views/ops/tag/TagTreeList.vue index a564de94..da0c66ad 100644 --- a/mayfly_go_web/src/views/ops/tag/TagTreeList.vue +++ b/mayfly_go_web/src/views/ops/tag/TagTreeList.vue @@ -1,8 +1,10 @@