添加el-dialog样式

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(
+  mask-image: linear-gradient(90deg,
-    90deg,
+      #000000 0%,
-    #000000 0%,
+      #000000 calc(100% - 50px),
-    #000000 calc(100% - 50px),
+      transparent);
-    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;
+    // height: 200px;
-    max-height: 60vh;
+    // 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;
+  }
+}

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'
+}