分割 dark样式表

cpp-ui/src/assets/styles/dark-element-ui.scss

@@ -0,0 +1,140 @@
+/*element表格*/
+.el-table, .el-table tr {
+  background-color: transparent !important;
+  color: $white !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell ,.el-table__body .el-table__row.hover-row td{
+  background-color: transparent !important;
+}
+
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+  background: $table-header-background-color !important;
+  color: white !important;
+}
+
+.el-table [class*=el-table__row--level] .el-table__expand-icon {
+  color: white;
+}
+
+.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
+  border-bottom: 1px solid $table-border-color;
+}
+
+.el-table--border .el-table__cell {
+  border-right: 1px solid $table-border-color;
+}
+
+.el-table--group, .el-table--border {
+  border: 1px solid $table-border-color;
+}
+
+.el-table::before, .el-table--group::after, .el-table--border::after {
+  background-color: $table-border-color;
+}
+.el-table__fixed::before, .el-table__fixed-right::before {
+  background-color: $table-border-color !important;
+}
+.el-table th.el-table__cell > .cell,.el-table .cell{
+  padding-left: .3vw !important;
+  padding-right: .3vw !important;
+}
+.el-table__fixed-body-wrapper {
+  background: $table-fixed-background-color;
+}
+
+/*element 分頁*/
+.el-pagination__total, .el-pagination__jump {
+  color: $white !important;
+}
+
+.el-pagination .btn-prev, .el-pagination .btn-next {
+  background: transparent !important;
+  color: white !important;
+}
+
+.el-pager li {
+  background: transparent !important;
+  color: white;
+}
+
+.el-pager li:hover {
+  color: #1890ff;
+}
+
+/*element 弹窗*/
+.el-dialog__header, .el-dialog__body, .el-dialog__footer {
+  //background-color: $base-menu-background !important;
+  color: white !important;
+  background-color: #406e90 !important;
+}
+
+.el-dialog__title {
+  color: $white !important;
+}
+
+.el-form-item__label {
+  color: $white !important;
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
+  color: #083d5c;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  color: white;
+}
+
+.el-radio__label {
+  color: white;
+}
+.el-button:hover{
+  border-color: #49e9f8 !important;
+}
+.el-button:active{
+  transform: translateY(2px);
+}
+/*element-tree*/
+.el-tree {
+  background: transparent !important;
+  color: white !important;
+  border: .5px solid white;
+}
+
+.el-tree-node__content:hover {
+  background-color: $base-menu-background;
+}
+
+/*element card*/
+.el-card {
+  border: 0.001rem solid $default-border-color;
+  background-color: transparent;
+  color: #FFFFFF;
+
+  .el-table th.el-table__cell {
+    background: $table-header-background-color !important;
+  }
+}
+/*element select*/
+// 日期选择范围
+.el-date-editor .el-range-input {
+  color: white !important;
+  background: transparent;
+}
+
+.el-date-editor .el-range-separator {
+  color: $white !important;
+}
+
+.el-picker-panel__body-wrapper {
+  .el-input__inner {
+    background-color: rgba(15, 28, 49, 0.8);
+    border: 1px solid $default-border-color;
+    color: #cddef1;
+  }
+}
+
+.el-picker-panel__footer {
+  border-top: 1px solid rgba(29, 128, 218, 1) !important;
+  background: rgba(30, 84, 128, 0.8) !important;
+}

cpp-ui/src/assets/styles/dark.scss

@@ -111,102 +111,7 @@
 }
 
 
-/*element表格*/
-.el-table, .el-table tr {
-  background-color: transparent !important;
-  color: $white !important;
-}
-
-.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell ,.el-table__body .el-table__row.hover-row td{
-  background-color: transparent !important;
-}
-
-.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
-  background: $table-header-background-color !important;
-  color: white !important;
-}
-
-.el-table [class*=el-table__row--level] .el-table__expand-icon {
-  color: white;
-}
-
-.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
-  border-bottom: 1px solid $table-border-color;
-}
-
-.el-table--border .el-table__cell {
-  border-right: 1px solid $table-border-color;
-}
-
-.el-table--group, .el-table--border {
-  border: 1px solid $table-border-color;
-}
-
-.el-table::before, .el-table--group::after, .el-table--border::after {
-  background-color: $table-border-color;
-}
-.el-table__fixed::before, .el-table__fixed-right::before {
-  background-color: $table-border-color !important;
-}
-.el-table th.el-table__cell > .cell,.el-table .cell{
-  padding-left: .3vw !important;
-  padding-right: .3vw !important;
-}
-.el-table__fixed-body-wrapper {
-  background: $table-fixed-background-color;
-}
-
-/*element 分頁*/
-.el-pagination__total, .el-pagination__jump {
-  color: $white !important;
-}
-
-.el-pagination .btn-prev, .el-pagination .btn-next {
-  background: transparent !important;
-  color: white !important;
-}
 
-.el-pager li {
-  background: transparent !important;
-  color: white;
-}
-
-.el-pager li:hover {
-  color: #1890ff;
-}
-
-/*element 弹窗*/
-.el-dialog__header, .el-dialog__body, .el-dialog__footer {
-  //background-color: $base-menu-background !important;
-  color: white !important;
-  background-color: #406e90 !important;
-}
-
-.el-dialog__title {
-  color: $white !important;
-}
-
-.el-form-item__label {
-  color: $white !important;
-}
-
-.el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close {
-  color: #083d5c;
-}
-
-.el-dialog__headerbtn .el-dialog__close {
-  color: white;
-}
-
-.el-radio__label {
-  color: white;
-}
-.el-button:hover{
-  border-color: #49e9f8 !important;
-}
-.el-button:active{
-  transform: translateY(2px);
-}
 .dark-el-dialog {
   .el-input__inner {
     background-color: transparent;
@@ -250,27 +155,7 @@
   }
 }
 
-/*element-tree*/
-.el-tree {
-  background: transparent !important;
-  color: white !important;
-  border: .5px solid white;
-}
 
-.el-tree-node__content:hover {
-  background-color: $base-menu-background;
-}
-
-/*element card*/
-.el-card {
-  border: 0.001rem solid $default-border-color;
-  background-color: transparent;
-  color: #FFFFFF;
-
-  .el-table th.el-table__cell {
-    background: $table-header-background-color !important;
-  }
-}
 
 /*element input*/
 .dark-el-input {
@@ -296,29 +181,6 @@
   }
 }
 
-/*element select*/
-// 日期选择范围
-.el-date-editor .el-range-input {
-  color: white !important;
-  background: transparent;
-}
-
-.el-date-editor .el-range-separator {
-  color: $white !important;
-}
-
-.el-picker-panel__body-wrapper {
-  .el-input__inner {
-    background-color: rgba(15, 28, 49, 0.8);
-    border: 1px solid $default-border-color;
-    color: #cddef1;
-  }
-}
-
-.el-picker-panel__footer {
-  border-top: 1px solid rgba(29, 128, 218, 1) !important;
-  background: rgba(30, 84, 128, 0.8) !important;
-}
 
 .cpp-popper {
   background: rgba(30, 84, 128, 0.8);
@@ -414,3 +276,24 @@
     background: none;
   }
 }
+
+// 按钮按下后样式
+.clickAfter {
+  ::v-deep .el-button {
+    border-color: #49e9f8 !important;
+    font-weight: bold;
+  }
+  ::v-deep .el-button:hover {
+    border-color: #49e9f8 !important;
+  }
+}
+
+// 按钮按下前
+.clickBefore {
+  ::v-deep .el-button {
+    border-color: #1890ff !important;
+  }
+  ::v-deep .el-button:hover {
+    border-color: #49e9f8 !important;
+  }
+}

cpp-ui/src/assets/styles/index.scss

@@ -6,6 +6,7 @@
 @import './btn.scss';
 @import './dark';
 @import "./vxe-table";
+@import "./dark-element-ui";
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

cpp-ui/src/views/largeScreen/index.vue

@@ -1079,22 +1079,5 @@ $top-container-height: 11vh;
   }
 }
 
-.clickAfter {
-  ::v-deep .el-button {
-    border-color: #49e9f8 !important;
-    font-weight: bold;
-  }
-  ::v-deep .el-button:hover {
-    border-color: #49e9f8 !important;
-  }
-}
 
-.clickBefore {
-  ::v-deep .el-button {
-    border-color: #1890ff !important;
-  }
-  ::v-deep .el-button:hover {
-    border-color: #49e9f8 !important;
-  }
-}
 </style>

cpp-ui/样式开发规则.md

@@ -19,4 +19,8 @@ echarts.init(document.getElementById(id),'dark')
 
 vue-treeselect  样式class  custom-treeselect    
 <treeselect  class="custom-treeselect"/>
+
+
+
+element 多个按钮控制不同内容的显示 为了表明内容属于哪个按钮 设置按钮按下按钮的class .clickAfter .clickBefore 可以参考首页告警弹框页面
 ```