From 3857528d121efdab0b31f295d8bd25524f63781f Mon Sep 17 00:00:00 2001 From: GGJ <357021191@qq.com> Date: Mon, 21 Oct 2024 13:37:27 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0el-dialog=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/element.scss | 100 +++++++++++++++++++++++++----- frontend/src/utils/elementBind.ts | 18 ++++++ 2 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 frontend/src/utils/elementBind.ts diff --git a/frontend/src/styles/element.scss b/frontend/src/styles/element.scss index ef03c73..cdfeab1 100644 --- a/frontend/src/styles/element.scss +++ b/frontend/src/styles/element.scss @@ -11,6 +11,7 @@ /* 当前页面最大化 css */ .main-maximize { + .aside-split, .el-aside, .el-header, @@ -23,12 +24,10 @@ /* mask image */ .mask-image { padding-right: 50px; - mask-image: linear-gradient( - 90deg, - #000000 0%, - #000000 calc(100% - 50px), - transparent - ); + mask-image: linear-gradient(90deg, + #000000 0%, + #000000 calc(100% - 50px), + transparent); } /* custom card */ @@ -51,6 +50,7 @@ border-radius: 0; box-shadow: none; } + .table-search { padding: 18px 0 0 !important; margin-bottom: 0 !important; @@ -63,18 +63,22 @@ flex-direction: column; align-items: center; height: 100%; + .text { margin: 20px 0 30px; font-size: 23px; font-weight: bold; color: var(--el-text-color-regular); } + .el-descriptions { width: 100%; padding: 40px 0 0; + .el-descriptions__title { font-size: 18px; } + .el-descriptions__label { width: 200px; } @@ -84,6 +88,7 @@ /* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */ .main-box { display: flex; + .table-box { // 这里减去的 230px 是 treeFilter 组件宽度 width: calc(100% - 230px); @@ -103,8 +108,9 @@ .table-search { padding: 18px 18px 0; margin-bottom: 10px; + .el-form { - .el-form-item__content > * { + .el-form-item__content>* { width: 100%; } @@ -113,6 +119,7 @@ padding: 0 10px; } } + .operation { display: flex; align-items: center; @@ -126,9 +133,11 @@ .header-button-lf { float: left; } + .header-button-ri { float: right; } + .el-button { margin-bottom: 15px; } @@ -144,6 +153,7 @@ table { width: 100%; } + .el-table__header th, .el-table-fixed-column--left th, .el-table-fixed-column--right th { @@ -161,8 +171,10 @@ // height: 45px; height: 40px; font-size: 14px; + .move { cursor: move; + .el-icon { cursor: move; } @@ -170,7 +182,7 @@ } // 设置 el-table 中 header 文字不换行，并省略 - .el-table__header .el-table__cell > .cell { + .el-table__header .el-table__cell>.cell { // white-space: nowrap; white-space: wrap; } @@ -181,6 +193,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + .table-empty { line-height: 30px; } @@ -208,16 +221,19 @@ height: 40px !important; font-size: 14px !important; } + .el-table__row { height: 40px !important; font-size: 13px !important; } } + .el-table--large { .el-table__header th { height: 50px !important; font-size: 16px !important; } + .el-table__row { height: 50px !important; font-size: 15px !important; @@ -230,12 +246,14 @@ padding: 16px 20px; margin-bottom: 0; border-bottom: 1px solid var(--el-border-color-lighter); + span { font-size: 17px; line-height: 17px; color: var(--el-text-color-primary) !important; } } + .el-drawer__footer { border-top: 1px solid var(--el-border-color-lighter); } @@ -244,15 +262,19 @@ .el-select { width: 100%; } + .el-select-dropdown__item:hover { background: red !important; } + // drawer-form 中存在两列 form-item 样式 .drawer-multiColumn-form { display: flex; flex-wrap: wrap; + .el-form-item { width: 47%; + &:nth-child(2n-1) { margin-right: 5%; } @@ -276,18 +298,21 @@ .el-dialog { padding: 0px !important; border: 2px solid #3665a0; + .el-dialog__header { background: var(--el-color-primary); - padding: 15px; + padding: 10px; margin-right: 0px; // font-family:; .el-dialog__headerbtn { top: 5px; + .el-icon { color: var(--el-color-white); } } + .el-dialog__headerbtn:hover { .el-icon { color: #409eff; @@ -302,9 +327,11 @@ margin-left: 10px !important; } } + .el-dialog__body { - height: 200px; - max-height: 60vh; + // height: 200px; + // max-height: 60vh; + min-height: 200px; overflow-y: auto; padding: 10px 15px; @@ -312,6 +339,7 @@ .el-form { .el-form-item { margin-bottom: 20px; + .el-select, .el-input, .el-date-picker { @@ -321,37 +349,56 @@ } } } + .el-dialog__footer { - padding: 15px; + padding: 8px 10px; box-shadow: var(--el-box-shadow); border-top: 1px solid #cccccc; width: 100%; bottom: 0; - } + + + .el-button { + font-size: 12px ; + + padding: 5px 11px; + height: 24px; + + } + .el-button + .el-button { + margin-left: 10px; + } + } } + //全局el-form-item间距 .el-form-item { margin-right: 10px !important; margin-bottom: 20px !important; } + .el-tree-node__content:hover { // background-color: var(--el-color-primary) !important; // color: #fff; } -.el-tree-node is-expanded is-current is-focusable is-checked{ + +.el-tree-node is-expanded is-current is-focusable is-checked { background-color: var(--el-color-primary) !important; color: #fff; } + .el-table__body-wrapper, .el-scrollbar { /* scroll bar */ z-index: 2001; + &::-webkit-scrollbar { width: 8px !important; height: 200px !important; // background-color: var(--el-color-primary); z-index: 3001; } + /* 滚动条实际可拖动部分的颜色 */ ::-webkit-scrollbar-thumb { width: 8px; @@ -367,6 +414,7 @@ /* ---el-table滚动条公共样式--- */ .el-scrollbar { + // 横向滚动条 .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb { opacity: 1; // 默认滚动条自带透明度 @@ -375,6 +423,7 @@ background-color: var(--el-color-primary); // 滑块背景色 box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影 } + // 纵向滚动条 .el-scrollbar__bar.is-vertical .el-scrollbar__thumb { opacity: 1; @@ -384,3 +433,26 @@ box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); } } + +.el-dialog { + + + +} +.dialog-small{ + .el-dialog__body{ + + + max-height: 250px; + } +} +.dialog-middle{ + .el-dialog__body{ + max-height: 400px; + } +} +.dialog-big{ + .el-dialog__body{ + max-height: 620px; + } +} \ No newline at end of file diff --git a/frontend/src/utils/elementBind.ts b/frontend/src/utils/elementBind.ts new file mode 100644 index 0000000..d4acf8e --- /dev/null +++ b/frontend/src/utils/elementBind.ts @@ -0,0 +1,18 @@ +export const dialogSmall = { + width:'520px', + closeOnClickModal:false, + draggable:true, + class:'dialog-small' +} +export const dialogMiddle = { + width:'800px', + closeOnClickModal:false, + draggable:true, + class:'dialog-middle' +} +export const dialogBig = { + width:'1200px', + closeOnClickModal:false, + draggable:true, + class:'dialog-big' +} \ No newline at end of file