修改整体页面风格以及新增机型字段

.env.dev

@@ -7,7 +7,7 @@
  # @FilePath: /performance-test/.env.dev
 #这里需要在router/index.js 文件中进行判断cockpitComponent；
 #VUE_APP_HOME_COM="../views/admin/cockpitManage/Index.vue"
-VUE_APP_THEM="green"
+VUE_APP_THEM="tech-blue"
 VUE_APP_ISSHOWHD='default'
 VUE_APP_Helath='dev'
 VUE_APP_TITLE='机组功率曲线异常检测数据分析系统'

src/components/HeaderCom.vue

@@ -115,6 +115,7 @@ export default {
       currentDate: "",
       currentTheme: this.$store.state.themes.theme,
       colorData: [
+        { lable: "科技蓝", value: "tech-blue", color: "#1890ff" },
         { lable: "黄色", value: "light", color: "#82780ccf" },
         { lable: "深色", value: "dark", color: "#607d8b" },
         { lable: "绿色", value: "green", color: "#008080" },
@@ -221,6 +222,7 @@ export default {
   .personalCenter {
     display: flex;
     align-items: center;
+    color: var(--text-cyan, #52c8f2);
 
     .current-time {
       font-size: 12px;

src/styles/base.css

@@ -99,7 +99,7 @@ summary {
 
 a {
   background-color: transparent;
-  color: #333;
+  color: var(--primary-color, #1890ff);
 }
 
 a:active,
@@ -130,7 +130,8 @@ small {
 }
 
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px white inset;
+  -webkit-box-shadow: 0 0 0 1000px #000c17 inset !important;
+  -webkit-text-fill-color: #52c8f2 !important;
 }
 
 sub,
@@ -220,9 +221,8 @@ input {
 }
 
 body {
-  background: #ffffff;
-  /* font-size: 22px; */
-  color: #333;
+  background: var(--content-bg, #000510);
+  color: var(--text-cyan, #52c8f2);
   font-family: "HYQiHei", "Helvetica Neue", Helvetica, Arial, "PingFang SC",
     "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",
     sans-serif;
@@ -249,18 +249,19 @@ body {
 
 /* ................................... */
 
-/* 外边框 */
+/* 外边框 — 具体样式见 tech-theme.scss */
 .global-variable {
   margin: 18px;
-  padding: 10px;
-  background: #ffffff;
+  padding: 16px;
+  background: var(--panel-bg, #000c17);
+  /* border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.45)); */
   min-height: 88vh;
-  /* height: 89vh; */
+  color: var(--text-cyan, #52c8f2);
 }
 
 /* 列表点击 */
 .Hit {
-  color: #409eff;
+  color: var(--primary-color, #1890ff);
 }
 
 /* 分页 */
@@ -299,6 +300,6 @@ body {
   margin-bottom: 10px;
 }
 
-.search-input{
+.search-input {
   width: 150px;
-}
+}

src/styles/global.scss

@@ -1,9 +1,3 @@
-.el-button--primary,
-.el-button--primary:focus {
-  background-color: var(--primary-color) !important;
-  border-color: var(--primary-color) !important;
-  color: var(--text-color) !important;
-}
 .el-menu-item.is-active {
   color: var(--primary-color) !important;
 }
@@ -28,23 +22,21 @@
   color: var(--text-color) !important;
 }
 
-.el-dropdown-menu__item:hover,
-.el-button--primary:hover {
-  opacity: 0.7 !important;
+.el-dropdown-menu__item:hover {
+  opacity: 0.85 !important;
   border-color: var(--primary-color) !important;
   background-color: var(--bgopacity-color) !important;
   color: var(--primary-color) !important;
-  // color: var(--primary-color) !important;
 }
 
-.el-button--text {
-  color: var(--primary-color) !important;
-}
-.el-button--default:focus,
-.el-button--default:hover {
-  border-color: var(--primary-color) !important;
-  background-color: var(--bgopacity-color) !important;
-  color: var(--primary-color) !important;
+.el-button--text,
+.el-button--text:hover,
+.el-button--text:focus {
+  color: var(--table-cell-text, var(--text-cyan, #b7dff5)) !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
 }
 
 // 改变振动分析边框色
@@ -53,10 +45,12 @@
   border-bottom: 2px solid var(--primary-color) !important;
 }
 
+::v-deep .el-table .current-row > td.el-table__cell,
 ::v-deep .current-row td {
-  background-color: rgba(160, 169, 171, 0.286) !important; /* 高亮的背景颜色 */
-  color: var(--primary-color) !important;
-  font-weight: 600;
+  background-color: var(--table-row-hover-bg, #071525) !important;
+  color: var(--table-cell-text, #c8d4df) !important;
+  font-weight: 500;
+  box-shadow: inset 1px 0 0 var(--table-row-hover-line, rgba(0, 140, 200, 0.28)) !important;
 }
 
 .el-menu {
@@ -65,11 +59,18 @@
 }
 
 .el-table th.el-table__cell {
-  background-color: var(--background-color) !important;
-  color: var(--text-color) !important;
+  background: var(--table-header-bg, #001a33) !important;
+  color: var(--table-header-text, #ffffff) !important;
+}
+
+.el-table td.el-table__cell {
+  color: var(--table-cell-text, #d1d1d1) !important;
 }
+
 .el-pager li.active {
-  color: var(--primary-color) !important;
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #fff !important;
 }
 
 .el-tag:not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info) {
@@ -95,8 +96,13 @@
 }
 
 .el-dialog__body .el-table th.el-table__cell {
-  background-color: var(--text-color) !important;
-  color: #67696d !important;
+  background: var(--table-header-bg, #001a33) !important;
+  color: var(--table-header-text, #ffffff) !important;
+}
+
+.el-dialog__body .el-table td.el-table__cell {
+  color: var(--table-cell-text, #c8d4df) !important;
+  background-color: var(--table-row-bg, #020810) !important;
 }
 .el-checkbox__input.is-checked .el-checkbox__inner,
 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
@@ -105,7 +111,7 @@
   // color: var(--text-color);
 }
 .is-checked > .el-checkbox__label {
-  color: var(--primary-color) !important;
+  color: #ffffff !important;
 }
 .el-tabs__active-bar {
   background-color: var(--primary-color) !important;
@@ -148,7 +154,7 @@
 }
 
 ::v-deep .el-loading-spinner .path {
-  stroke: #009688 !important;
+  stroke: var(--primary-color) !important;
 }
 ::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
@@ -166,14 +172,14 @@
 }
 
 .scroller::-webkit-scrollbar-track {
-  background: #f1f1f1; /* 滚动条轨道颜色 */
+  background: rgba(0, 10, 30, 0.5);
 }
 
 .scroller::-webkit-scrollbar-thumb {
-  background: #888; /* 滚动条颜色 */
+  background: rgba(0, 170, 255, 0.35);
   border-radius: 4px;
 }
 
 .scroller::-webkit-scrollbar-thumb:hover {
-  background: #555; /* 滚动条悬停颜色 */
+  background: rgba(0, 170, 255, 0.55);
 }

src/styles/index.scss

@@ -2,9 +2,10 @@
 @import "./element-ui.scss";
 @import "./tailwind.css";
 @import "./base.css";
+@import "./tech-theme.scss";
 
 body {
-  background-color: #eef1f3;
+  background-color: var(--content-bg, #000510);
 }
 
 img,

src/styles/tech-theme.scss

@@ -0,0 +1,1547 @@
+/* 科技蓝全局 UI — 与 themes/tech-blue.scss 变量一致，始终生效 */
+@import "../themes/tech-blue.scss";
+
+html,
+body,
+#app {
+  background-color: var(--content-bg) !important;
+  color: var(--text-cyan);
+}
+
+body {
+  color: var(--text-cyan);
+}
+
+a {
+  color: var(--primary-color);
+}
+
+/* 页面容器：发光边框面板 */
+.global-variable {
+  margin: 18px;
+  padding: 16px;
+  background: var(--panel-bg) !important;
+  // border: 1px solid var(--panel-border);
+  box-shadow: var(--panel-glow);
+  border-radius: 4px;
+  min-height: calc(100vh - 120px);
+  color: var(--text-cyan);
+}
+
+.pagination-container {
+  margin-top: 20px;
+  padding: 12px 0;
+}
+
+/* ========== Element UI 表单 ========== */
+.el-form-item__label {
+  color: var(--text-cyan) !important;
+}
+
+.el-input__inner,
+.el-textarea__inner {
+  background-color: var(--input-bg) !important;
+  border-color: var(--input-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: var(--text-muted) !important;
+}
+
+.el-input.is-disabled .el-input__inner,
+.el-textarea.is-disabled .el-textarea__inner {
+  background-color: rgba(0, 12, 23, 0.6) !important;
+  border-color: rgba(0, 170, 255, 0.15) !important;
+  color: var(--text-muted) !important;
+}
+
+.el-select .el-input__inner {
+  background-color: var(--input-bg) !important;
+}
+
+/* 日期 / 时间选择器输入框（含 daterange、datetimerange、month） */
+.el-date-editor.el-input__inner,
+.el-range-editor.el-input__inner {
+  background-color: var(--input-bg) !important;
+  border-color: var(--input-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-date-editor.el-input .el-input__inner {
+  background-color: var(--input-bg) !important;
+  border-color: var(--input-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-date-editor .el-range-input {
+  background-color: transparent !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-date-editor .el-range-input::placeholder {
+  color: var(--text-muted) !important;
+}
+
+.el-date-editor .el-range-separator {
+  color: var(--text-cyan) !important;
+}
+
+.el-date-editor .el-range__icon,
+.el-date-editor .el-range__close-icon,
+.el-date-editor .el-input__prefix,
+.el-date-editor .el-input__suffix,
+.el-date-editor .el-input__icon {
+  color: rgba(183, 223, 245, 0.65) !important;
+}
+
+.el-range-editor.is-active,
+.el-range-editor.is-active:hover,
+.el-date-editor.is-active .el-input__inner,
+.el-date-editor.is-active.el-input__inner {
+  border-color: var(--primary-color, #1890ff) !important;
+}
+
+.el-range-editor.is-disabled,
+.el-date-editor.is-disabled.el-input__inner,
+.el-date-editor.is-disabled .el-input__inner {
+  background-color: rgba(0, 12, 23, 0.6) !important;
+  border-color: rgba(0, 170, 255, 0.15) !important;
+}
+
+.el-range-editor.is-disabled .el-range-input,
+.el-date-editor.is-disabled .el-range-input {
+  background-color: transparent !important;
+  color: var(--text-muted) !important;
+}
+
+.el-range-editor.is-disabled .el-range-separator {
+  color: var(--text-muted) !important;
+}
+
+.el-select-dropdown {
+  background-color: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border) !important;
+}
+
+.el-select-dropdown__item {
+  color: var(--text-cyan) !important;
+}
+
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: var(--bgopacity-color) !important;
+}
+
+.el-select-dropdown__item.selected {
+  color: var(--primary-color) !important;
+  font-weight: 600;
+}
+
+.el-popper[x-placement^="bottom"] .popper__arrow::after {
+  border-bottom-color: var(--panel-bg) !important;
+}
+
+/* ========== 大屏按钮（type="text" 除外）：主按钮实心 + 其余描边 ========== */
+@mixin dt-btn-reset-decor {
+  background-image: none !important;
+  text-shadow: none !important;
+  box-shadow: none !important;
+
+  &::before,
+  &::after {
+    display: none !important;
+  }
+}
+
+@mixin dt-btn-outline {
+  @include dt-btn-reset-decor;
+  border-radius: var(--btn-radius) !important;
+  padding: 7px 16px !important;
+  min-height: 32px;
+  font-weight: 400;
+  background-color: var(--btn-outline-bg) !important;
+  border: 1px solid var(--btn-outline-border) !important;
+  color: var(--btn-outline-text) !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease,
+    color 0.15s ease;
+
+  &:hover,
+  &:focus {
+    background-color: var(--btn-outline-bg-hover) !important;
+    border-color: var(--btn-outline-border-hover) !important;
+    color: #d8eeff !important;
+    opacity: 1 !important;
+  }
+
+  &:active {
+    background-color: rgba(0, 20, 40, 0.98) !important;
+  }
+}
+
+@mixin dt-btn-primary {
+  @include dt-btn-reset-decor;
+  border-radius: var(--btn-radius) !important;
+  padding: 7px 16px !important;
+  min-height: 32px;
+  font-weight: 400;
+  background-color: var(--btn-primary-bg) !important;
+  border: 1px solid var(--btn-primary-border) !important;
+  color: #ffffff !important;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+
+  &:hover,
+  &:focus {
+    background-color: var(--btn-primary-bg-hover) !important;
+    border-color: var(--btn-primary-bg-hover) !important;
+    color: #ffffff !important;
+    opacity: 1 !important;
+  }
+
+  &:active {
+    background-color: #1565c0 !important;
+    border-color: #1565c0 !important;
+  }
+}
+
+.el-button--primary:not(.el-button--text) {
+  @include dt-btn-primary;
+}
+
+.el-button--default:not(.el-button--text),
+.el-button--info:not(.el-button--text),
+.el-button--success:not(.el-button--text),
+.el-button--warning:not(.el-button--text),
+.el-button--danger:not(.el-button--text) {
+  @include dt-btn-outline;
+}
+
+.el-button.is-disabled:not(.el-button--text),
+.el-button.is-disabled:not(.el-button--text):hover,
+.el-button.is-disabled:not(.el-button--text):focus {
+  background: rgba(0, 16, 32, 0.5) !important;
+  background-image: none !important;
+  border-color: rgba(0, 120, 200, 0.18) !important;
+  color: rgba(183, 223, 245, 0.35) !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  cursor: not-allowed;
+  opacity: 1 !important;
+}
+
+.el-button.is-loading:not(.el-button--text) {
+  pointer-events: none;
+}
+
+.el-button--text,
+.el-button--text:hover,
+.el-button--text:focus,
+.el-button--text:active {
+  background: transparent !important;
+  background-image: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  border-radius: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  min-height: auto !important;
+
+  &::before,
+  &::after {
+    display: none !important;
+  }
+}
+
+.el-message-box__btns .el-button:not(.el-button--text),
+.el-dialog__footer .el-button:not(.el-button--text) {
+  min-width: 72px;
+}
+
+.el-button--mini:not(.el-button--text) {
+  padding: 5px 12px !important;
+  min-height: 28px;
+  font-size: 12px;
+}
+
+.el-button--small:not(.el-button--text) {
+  padding: 6px 14px !important;
+  min-height: 30px;
+}
+
+/* ========== 大屏表格 ========== */
+.list-page {
+  position: relative;
+  margin-top: 8px;
+  padding: 16px 12px 12px;
+  background: var(--table-frame-bg);
+  border-radius: 4px;
+
+  .el-table {
+    border: none !important;
+    border-radius: 4px;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+}
+
+.el-table {
+  background-color: var(--table-frame-bg) !important;
+  color: var(--table-cell-text) !important;
+  border: none !important;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: none !important;
+}
+
+.el-table::before,
+.el-table::after {
+  background-color: var(--table-border) !important;
+}
+
+.el-table th.el-table__cell {
+  background: var(--table-header-bg) !important;
+  color: var(--table-header-text) !important;
+  border-color: var(--table-border) !important;
+  font-weight: 500;
+  padding: 0 !important;
+
+  .cell {
+    color: var(--table-header-text) !important;
+    padding: 14px 10px !important;
+    line-height: 1.4;
+    font-weight: 500;
+  }
+}
+
+.el-table td.el-table__cell {
+  background-color: var(--table-row-bg) !important;
+  color: var(--table-cell-text) !important;
+  border-color: var(--table-border) !important;
+
+  .cell {
+    color: var(--table-cell-text) !important;
+  }
+}
+
+/* stripe 属性保留，视觉与普行一致（无斑马纹） */
+.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background-color: var(--table-row-bg) !important;
+}
+
+/* 行 hover：淡青蒙层 + 左侧细光条（覆盖 Element 默认浅灰） */
+.el-table tbody tr:hover > td.el-table__cell,
+.el-table.el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell,
+.el-table__body tr.hover-row > td.el-table__cell {
+  background-color: var(--table-row-hover-bg) !important;
+  color: var(--table-row-hover-text) !important;
+  transition: background-color 0.18s ease;
+
+  .cell {
+    color: var(--table-row-hover-text) !important;
+  }
+}
+
+.el-table tbody tr:hover > td.el-table__cell:first-child,
+.el-table.el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell:first-child,
+.el-table__body tr.hover-row > td.el-table__cell:first-child {
+  box-shadow: inset 1px 0 0 var(--table-row-hover-line) !important;
+}
+
+.el-table--striped
+  .el-table__body
+  tr.el-table__row--striped:hover
+  > td.el-table__cell,
+.el-table--striped
+  .el-table__body
+  tr.el-table__row--striped.hover-row
+  > td.el-table__cell {
+  background-color: var(--table-row-hover-bg) !important;
+}
+
+.el-table__fixed-body-wrapper tr:hover > td.el-table__cell,
+.el-table__fixed-body-wrapper tr.hover-row > td.el-table__cell {
+  background-color: var(--table-row-hover-bg) !important;
+  color: var(--table-row-hover-text) !important;
+}
+
+.el-table__fixed-body-wrapper tr:hover > td.el-table__cell:first-child,
+.el-table__fixed-body-wrapper tr.hover-row > td.el-table__cell:first-child {
+  box-shadow: inset 1px 0 0 var(--table-row-hover-line) !important;
+}
+
+.el-table__fixed-right-patch {
+  background: var(--table-header-bg) !important;
+}
+
+.el-table__fixed-right::before,
+.el-table__fixed::before {
+  background-color: var(--table-border) !important;
+}
+
+.el-table__empty-text {
+  color: var(--text-muted) !important;
+}
+
+.el-table--border,
+.el-table--group {
+  border-color: var(--table-border) !important;
+}
+
+.el-table--border .el-table__cell {
+  border-color: var(--table-border) !important;
+}
+
+.el-table__body-wrapper,
+.el-table__header-wrapper {
+  background: var(--table-frame-bg) !important;
+}
+
+.el-table__fixed-header-wrapper th.el-table__cell {
+  background: var(--table-header-bg, #001a33) !important;
+}
+
+.el-table__fixed-body-wrapper td.el-table__cell {
+  background-color: var(--table-row-bg, #020810) !important;
+}
+
+/* 操作列 text 按钮：与表格正文同色，覆盖 inline style="#666" 等 */
+.el-table .cell .el-button--text,
+.el-table .el-button--text {
+  color: var(--table-cell-text) !important;
+  padding: 0 6px !important;
+  font-size: 13px;
+  vertical-align: middle;
+  font-weight: 400;
+
+  &:hover,
+  &:focus {
+    color: var(--text-cyan, #b7dff5) !important;
+    background: transparent !important;
+  }
+
+  &.is-disabled,
+  &.is-disabled:hover,
+  &.is-disabled:focus {
+    color: rgba(200, 212, 223, 0.42) !important;
+    background: transparent !important;
+  }
+}
+
+.el-table .el-button--text + .el-button--text {
+  margin-left: 0 !important;
+  padding-left: 10px !important;
+  border-left: 1px solid var(--table-border) !important;
+  border-radius: 0 !important;
+}
+
+/* 状态列绿点：span 加 class="dt-status-on" */
+.dt-status-on::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: var(--success-color);
+  box-shadow: 0 0 8px rgba(82, 196, 26, 0.85);
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
+.dt-status-off::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 6px;
+  border-radius: 50%;
+  background: #666;
+  box-shadow: 0 0 4px rgba(120, 120, 120, 0.5);
+  vertical-align: middle;
+  transform: translateY(-1px);
+}
+
+/* ========== 分页 ========== */
+.el-pagination {
+  color: var(--text-cyan) !important;
+}
+
+.el-pagination button,
+.el-pagination span:not([class*="suffix"]) {
+  color: var(--text-cyan) !important;
+  background: transparent !important;
+}
+
+.el-pagination .btn-prev,
+.el-pagination .btn-next {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-pager li {
+  background: var(--input-bg) !important;
+  border: 1px solid var(--input-border) !important;
+  color: var(--text-cyan) !important;
+  margin: 0 3px;
+  min-width: 32px;
+  border-radius: 2px;
+}
+
+.el-pager li.active {
+  background-color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+  color: #fff !important;
+}
+
+.el-pager li:hover {
+  color: var(--primary-hover) !important;
+}
+
+/* ========== 卡片 / 主区域 ========== */
+.el-card {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-card__header {
+  border-bottom-color: var(--table-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-main {
+  background-color: var(--content-bg) !important;
+  color: var(--text-cyan);
+}
+
+/* ========== 弹窗 ========== */
+.el-dialog {
+  background-color: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border);
+  box-shadow: 0 0 24px rgba(0, 100, 255, 0.2);
+}
+
+.el-dialog__header {
+  background: linear-gradient(90deg, #001529 0%, #002a5c 100%) !important;
+  border-bottom: 1px solid var(--panel-border);
+}
+
+.el-dialog__title {
+  color: #ffffff !important;
+}
+
+.el-dialog__headerbtn .el-dialog__close {
+  color: #b7dff5 !important;
+}
+
+.el-dialog__headerbtn:hover .el-dialog__close {
+  color: #ffffff !important;
+}
+
+.el-dialog__body {
+  color: #ffffff !important;
+  background-color: var(--panel-bg) !important;
+}
+
+.el-dialog__footer {
+  border-top: 1px solid var(--table-border);
+  background-color: var(--panel-bg) !important;
+}
+
+/* ========== 抽屉 ========== */
+.el-drawer {
+  background-color: var(--panel-bg) !important;
+  border-left: 1px solid var(--panel-border);
+  box-shadow: -4px 0 24px rgba(0, 100, 255, 0.15);
+}
+
+.el-drawer__header {
+  background: linear-gradient(90deg, #001529 0%, #002a5c 100%) !important;
+  border-bottom: 1px solid var(--panel-border);
+  margin-bottom: 0 !important;
+  padding: 16px 20px !important;
+  color: #ffffff !important;
+}
+
+.el-drawer__header > :first-child {
+  color: #ffffff !important;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.el-drawer__close-btn {
+  color: #b7dff5 !important;
+}
+
+.el-drawer__close-btn:hover {
+  color: #ffffff !important;
+}
+
+.el-drawer__body {
+  background-color: var(--panel-bg) !important;
+  color: #ffffff;
+  padding: 16px 20px;
+}
+
+.overview-drawer {
+  .el-tabs--border-card {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__content {
+    padding: 16px 0 0;
+  }
+}
+
+.overview-dialog {
+  .el-dialog__body {
+    color: #ffffff !important;
+  }
+
+  .el-tabs__item {
+    color: #b7dff5 !important;
+  }
+
+  .el-tabs__item.is-active {
+    color: #ffffff !important;
+  }
+}
+
+/* ========== 消息 / 下拉 / 气泡 ========== */
+.el-message-box {
+  background-color: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border) !important;
+}
+
+.el-message-box__title,
+.el-message-box__content {
+  color: var(--text-cyan) !important;
+}
+
+.el-dropdown-menu {
+  background-color: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border) !important;
+}
+
+.el-dropdown-menu__item {
+  color: var(--text-cyan) !important;
+}
+
+.el-dropdown-menu__item:hover {
+  background-color: var(--bgopacity-color) !important;
+  color: var(--primary-color) !important;
+}
+
+.el-popover {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+  color: #ffffff !important;
+
+  .el-descriptions-item__label.is-bordered-label {
+    background-color: var(--table-header-bg) !important;
+    color: var(--table-header-text, #ffffff) !important;
+  }
+
+  .el-descriptions-item__content.is-bordered-content {
+    background-color: var(--panel-bg) !important;
+    color: #ffffff !important;
+  }
+}
+
+.el-divider {
+  background-color: var(--table-border) !important;
+}
+
+/* ========== Tabs / Tree / Tag ========== */
+.el-tabs__item {
+  color: rgba(183, 223, 245, 0.75) !important;
+}
+
+.el-tabs__item.is-active {
+  color: #ffffff !important;
+}
+
+.el-tabs__item:hover {
+  color: #ffffff !important;
+}
+
+.el-tabs__active-bar {
+  background-color: #00aaff !important;
+}
+
+.el-tabs__nav-wrap::after {
+  background-color: var(--table-border) !important;
+}
+
+.el-tabs--border-card {
+  background: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+}
+
+.el-tabs--border-card > .el-tabs__header {
+  background-color: var(--table-header-bg) !important;
+  border-bottom-color: var(--table-border) !important;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item {
+  border-color: var(--table-border) !important;
+  color: var(--text-cyan, #b7dff5) !important;
+  background-color: transparent !important;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+  color: #ffffff !important;
+  background-color: rgba(24, 144, 255, 0.22) !important;
+  border-color: var(--panel-border) !important;
+}
+
+.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
+  color: #ffffff !important;
+  background-color: rgba(24, 144, 255, 0.12) !important;
+}
+
+.el-tabs--border-card > .el-tabs__content {
+  background-color: var(--panel-bg) !important;
+  color: #ffffff;
+}
+
+.el-dialog__body,
+.el-drawer__body {
+  .el-tabs--border-card {
+    background: transparent !important;
+    border-color: var(--panel-border) !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header {
+    background-color: rgba(0, 16, 32, 0.85) !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
+    color: #ffffff !important;
+    background-color: rgba(24, 144, 255, 0.22) !important;
+  }
+
+  .el-tabs--border-card > .el-tabs__content {
+    background-color: transparent !important;
+    color: #ffffff;
+  }
+
+  .el-descriptions__title {
+    color: #ffffff !important;
+  }
+}
+
+.el-tree {
+  background: transparent !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-tree-node__content:hover {
+  background-color: var(--bgopacity-color) !important;
+}
+
+.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  background-color: var(--bgopacity-color) !important;
+  color: var(--primary-color) !important;
+}
+
+/* ========== Loading ========== */
+.el-loading-mask {
+  background-color: rgba(0, 5, 16, 0.75) !important;
+}
+
+.el-loading-spinner .path {
+  stroke: var(--primary-color) !important;
+}
+
+/* ========== 滚动条 ========== */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 170, 255, 0.35);
+  border-radius: 3px;
+}
+
+/* ========== 日期 / 级联 / 消息 ========== */
+.el-picker-panel,
+.el-date-picker,
+.el-date-range-picker,
+.el-time-panel {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-picker-panel__footer {
+  background-color: var(--panel-bg) !important;
+  border-top-color: var(--table-border) !important;
+}
+
+.el-picker-panel__icon-btn,
+.el-date-picker__header-label,
+.el-date-range-picker__header div {
+  color: var(--text-cyan) !important;
+}
+
+.el-picker-panel__icon-btn:hover {
+  color: #ffffff !important;
+}
+
+.el-date-range-picker__content.is-left {
+  border-right-color: var(--table-border) !important;
+}
+
+.el-date-table th,
+.el-date-table td.available span,
+.el-month-table td .cell,
+.el-year-table td .cell {
+  color: var(--text-cyan) !important;
+}
+
+.el-date-table td.available:hover span,
+.el-month-table td .cell:hover,
+.el-year-table td .cell:hover {
+  color: #ffffff !important;
+}
+
+.el-date-table td.in-range div,
+.el-date-table td.in-range div:hover {
+  background-color: rgba(24, 144, 255, 0.15) !important;
+}
+
+.el-date-table td.start-date span,
+.el-date-table td.end-date span {
+  background-color: var(--primary-color, #1890ff) !important;
+  color: #ffffff !important;
+}
+
+.el-date-table td.today span {
+  color: #00aaff !important;
+}
+
+.el-time-panel__content::before,
+.el-time-panel__content::after {
+  border-top-color: var(--table-border) !important;
+  border-bottom-color: var(--table-border) !important;
+}
+
+.el-time-spinner__item {
+  color: var(--text-cyan) !important;
+}
+
+.el-time-spinner__item:hover:not(.disabled):not(.active) {
+  background-color: var(--bgopacity-color) !important;
+}
+
+.el-time-spinner__item.active:not(.disabled) {
+  color: #ffffff !important;
+}
+
+.el-time-panel__btn {
+  color: var(--text-cyan) !important;
+}
+
+.el-time-panel__btn.confirm {
+  color: var(--primary-color, #1890ff) !important;
+}
+
+.el-cascader-menu {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--table-border) !important;
+  color: var(--text-cyan) !important;
+}
+
+.el-cascader-node:not(.is-disabled):hover,
+.el-cascader-node:not(.is-disabled):focus {
+  background-color: var(--bgopacity-color) !important;
+}
+
+/* ========== Vue Treeselect（上级目录等树形选择） ========== */
+.vue-treeselect {
+  color: var(--text-cyan) !important;
+}
+
+.vue-treeselect__control {
+  background-color: var(--input-bg) !important;
+  border-color: var(--input-border) !important;
+  color: #ffffff !important;
+}
+
+.vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused)
+  .vue-treeselect__control:hover {
+  border-color: rgba(0, 170, 255, 0.55) !important;
+}
+
+.vue-treeselect--focused:not(.vue-treeselect--open) .vue-treeselect__control {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.18) !important;
+}
+
+.vue-treeselect--open .vue-treeselect__control {
+  border-color: var(--input-border) !important;
+}
+
+.vue-treeselect--disabled .vue-treeselect__control {
+  background-color: rgba(0, 12, 23, 0.6) !important;
+  border-color: rgba(0, 170, 255, 0.15) !important;
+}
+
+.vue-treeselect__placeholder {
+  color: rgba(183, 223, 245, 0.55) !important;
+}
+
+.vue-treeselect__single-value {
+  color: #ffffff !important;
+}
+
+.vue-treeselect__input {
+  color: #ffffff !important;
+}
+
+.vue-treeselect__control-arrow,
+.vue-treeselect__option-arrow {
+  color: rgba(183, 223, 245, 0.65) !important;
+}
+
+.vue-treeselect:not(.vue-treeselect--disabled)
+  .vue-treeselect__control-arrow-container:hover
+  .vue-treeselect__control-arrow,
+.vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow {
+  color: #ffffff !important;
+}
+
+.vue-treeselect__menu {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
+}
+
+.vue-treeselect--open-below .vue-treeselect__menu {
+  border-top-color: var(--panel-border) !important;
+}
+
+.vue-treeselect--open-above .vue-treeselect__menu {
+  border-bottom-color: var(--panel-border) !important;
+}
+
+.vue-treeselect__option {
+  color: #ffffff !important;
+}
+
+.vue-treeselect__label {
+  color: #ffffff !important;
+}
+
+.vue-treeselect__option--highlight {
+  background-color: var(--bgopacity-color) !important;
+}
+
+.vue-treeselect--single .vue-treeselect__option--selected,
+.vue-treeselect--single .vue-treeselect__option--selected:hover {
+  background-color: rgba(24, 144, 255, 0.22) !important;
+  color: #ffffff !important;
+}
+
+.vue-treeselect__option--disabled .vue-treeselect__label-container {
+  color: rgba(183, 223, 245, 0.35) !important;
+}
+
+.vue-treeselect__tip,
+.vue-treeselect__limit-tip-text {
+  color: rgba(183, 223, 245, 0.65) !important;
+}
+
+.vue-treeselect__checkbox--unchecked {
+  border-color: var(--input-border) !important;
+  background: var(--input-bg) !important;
+}
+
+.vue-treeselect__label-container:hover .vue-treeselect__checkbox--unchecked {
+  border-color: var(--primary-color) !important;
+  background: var(--input-bg) !important;
+}
+
+.vue-treeselect__checkbox--indeterminate,
+.vue-treeselect__checkbox--checked,
+.vue-treeselect__label-container:hover .vue-treeselect__checkbox--indeterminate,
+.vue-treeselect__label-container:hover .vue-treeselect__checkbox--checked {
+  border-color: var(--primary-color) !important;
+  background: var(--primary-color) !important;
+}
+
+.vue-treeselect__multi-value-item {
+  background: rgba(0, 170, 255, 0.18) !important;
+  border-color: rgba(0, 170, 255, 0.35) !important;
+  color: #ffffff !important;
+}
+
+.vue-treeselect__value-remove {
+  color: #ffffff !important;
+  border-left-color: rgba(0, 170, 255, 0.25) !important;
+}
+
+.vue-treeselect__x-container {
+  color: rgba(183, 223, 245, 0.65) !important;
+}
+
+.vue-treeselect__x-container:hover {
+  color: #ff7875 !important;
+}
+
+.el-message {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+}
+
+.el-message__content {
+  color: var(--text-cyan) !important;
+}
+
+.el-notification {
+  background-color: var(--panel-bg) !important;
+  border-color: var(--panel-border) !important;
+}
+
+.el-notification__title,
+.el-notification__content {
+  color: var(--text-cyan) !important;
+}
+
+.el-breadcrumb__inner,
+.el-breadcrumb__separator {
+  color: var(--text-muted) !important;
+}
+
+.el-breadcrumb__item:last-child .el-breadcrumb__inner {
+  color: var(--text-cyan) !important;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 10, 30, 0.5);
+}
+
+/* 兜底：压掉 Element UI 默认 #F5F7FA 行 hover（必须匹配其完整选择器） */
+.el-table__body tr.hover-row > td.el-table__cell,
+.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
+.el-table__body tr.hover-row.current-row > td.el-table__cell,
+.el-table__body
+  tr.hover-row.el-table__row--striped.current-row
+  > td.el-table__cell,
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell,
+.el-table--enable-row-hover .el-table__body tr.hover-row > td.el-table__cell {
+  background-color: var(--table-row-hover-bg) !important;
+  color: var(--table-row-hover-text) !important;
+}
+
+.el-table--enable-row-hover .el-table__body tr:hover > td,
+.el-table--enable-row-hover .el-table__body tr.hover-row > td {
+  background-color: var(--table-row-hover-bg) !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background: var(--table-row-bg) !important;
+}
+
+.el-table--striped .el-table__body tr.el-table__row--striped:hover > td,
+.el-table--striped .el-table__body tr.el-table__row--striped.hover-row > td {
+  background: var(--table-row-hover-bg) !important;
+}
+
+/* ========== Descriptions / Empty / Alert ========== */
+.el-descriptions {
+  color: #ffffff !important;
+}
+
+.el-descriptions__title {
+  color: #ffffff !important;
+}
+
+.el-descriptions__body {
+  background-color: transparent !important;
+  color: #ffffff !important;
+}
+
+.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
+  color: #ffffff !important;
+  background-color: transparent !important;
+}
+
+.el-descriptions-item__label {
+  color: var(--text-cyan, #b7dff5) !important;
+}
+
+.el-descriptions__body .el-descriptions-item__label {
+  color: var(--text-cyan, #b7dff5) !important;
+}
+
+.el-descriptions-item__content {
+  color: #ffffff !important;
+}
+
+.el-descriptions__body .el-descriptions-item__content {
+  color: #ffffff !important;
+}
+
+.el-descriptions .is-bordered .el-descriptions-item__cell {
+  border-color: var(--table-border) !important;
+}
+
+.el-descriptions-item__label.is-bordered-label {
+  background-color: var(--table-header-bg) !important;
+  color: var(--table-header-text, #ffffff) !important;
+}
+
+.el-descriptions-item__content.is-bordered-content {
+  background-color: var(--panel-bg) !important;
+  color: #ffffff !important;
+}
+
+.el-empty__description,
+.el-empty__description p {
+  color: var(--text-cyan, #b7dff5) !important;
+  font-size: 14px;
+}
+
+.el-empty__image {
+  opacity: 0.8;
+}
+
+.el-empty__image svg {
+  fill: rgba(0, 170, 255, 0.45) !important;
+}
+
+.el-empty__image img {
+  filter: brightness(0.85) saturate(0.6);
+  opacity: 0.7;
+}
+
+.el-alert {
+  background-color: rgba(0, 16, 32, 0.72) !important;
+  border: 1px solid var(--panel-border) !important;
+}
+
+.el-alert__title,
+.el-alert__description {
+  color: #ffffff !important;
+}
+
+.el-alert--info.is-light {
+  background-color: rgba(0, 16, 32, 0.72) !important;
+  color: #ffffff !important;
+}
+
+/* ========== 横向菜单 ========== */
+.el-menu--horizontal {
+  background-color: transparent !important;
+  border-bottom-color: var(--panel-border) !important;
+}
+
+.el-menu--horizontal > .el-menu-item,
+.el-menu--horizontal > .el-submenu .el-submenu__title {
+  color: var(--text-cyan, #b7dff5) !important;
+  background-color: transparent !important;
+  border-bottom: 2px solid transparent !important;
+}
+
+.el-menu--horizontal > .el-menu-item:hover,
+.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+  background-color: var(--bgopacity-color) !important;
+  color: #ffffff !important;
+}
+
+.el-menu--horizontal > .el-menu-item.is-active {
+  color: #ffffff !important;
+  border-bottom-color: var(--primary-color) !important;
+  background-color: transparent !important;
+}
+
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  color: #ffffff !important;
+  border-bottom-color: var(--primary-color) !important;
+}
+
+.el-menu--horizontal .el-menu--popup {
+  background-color: var(--panel-bg) !important;
+  border: 1px solid var(--panel-border) !important;
+}
+
+.el-menu--horizontal .el-menu--popup .el-menu-item {
+  color: var(--text-cyan, #b7dff5) !important;
+  background-color: transparent !important;
+}
+
+.el-menu--horizontal .el-menu--popup .el-menu-item:hover,
+.el-menu--horizontal .el-menu--popup .el-menu-item:focus {
+  background-color: rgba(24, 144, 255, 0.35) !important;
+  color: #ffffff !important;
+}
+
+.el-menu--horizontal .el-menu--popup .el-menu-item.is-active {
+  color: #ffffff !important;
+  background-color: rgba(24, 144, 255, 0.45) !important;
+}
+
+/* 概览页顶部下拉菜单（挂到 body） */
+.overview-menu-popup {
+  .el-menu--popup {
+    background-color: #141414 !important;
+    border: 1px solid rgba(0, 170, 255, 0.35) !important;
+    padding: 4px 0;
+    min-width: 140px;
+  }
+
+  .el-menu-item {
+    color: #b7dff5 !important;
+    margin: 4px 8px;
+    border-radius: 4px;
+    height: 40px;
+    line-height: 40px;
+
+    span {
+      color: #b7dff5 !important;
+    }
+  }
+
+  .el-menu-item:hover,
+  .el-menu-item:focus {
+    background-color: #1890ff !important;
+    color: #ffffff !important;
+
+    span {
+      color: #ffffff !important;
+    }
+  }
+
+  .el-menu-item.is-active {
+    background-color: rgba(24, 144, 255, 0.45) !important;
+    color: #ffffff !important;
+
+    span {
+      color: #ffffff !important;
+    }
+  }
+}
+
+/* ========== 分析概览页 ========== */
+.overview-page {
+  color: #ffffff;
+
+  .headerMessage {
+    color: #ffffff !important;
+    font-weight: 600;
+  }
+
+  .filterChart {
+    h3 {
+      color: #ffffff;
+    }
+  }
+
+  .type-variable {
+    color: #ffffff;
+
+    .left {
+      color: #ffffff;
+    }
+  }
+
+  .el-form-item__label {
+    color: var(--text-cyan, #b7dff5) !important;
+  }
+
+  .el-descriptions__body {
+    background-color: transparent !important;
+  }
+
+  /* 暂无数据 / 暂无分析记录 */
+  .el-empty {
+    padding: 40px 0;
+  }
+
+  .el-empty__image {
+    width: 140px;
+    opacity: 0.85;
+  }
+
+  .el-empty__image svg {
+    fill: rgba(0, 170, 255, 0.55) !important;
+  }
+
+  .el-empty__description,
+  .el-empty__description p {
+    color: #ffffff !important;
+    font-size: 14px;
+    margin-top: 16px;
+  }
+
+  .titleCharts {
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 20px;
+  }
+
+  /* 左侧树选中：固定亮蓝底 + 白字，避免主题 primary 过暗 */
+  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
+  .el-tree-node.is-current > .el-tree-node__content {
+    background-color: #1890ff !important;
+    color: #ffffff !important;
+    border-radius: 4px;
+  }
+
+  .el-tree-node.is-current > .el-tree-node__content .el-tree-node__label {
+    color: #ffffff !important;
+  }
+
+  /* 顶部 Tab 选中：浅蓝底 + 青色下划线 + 白字 */
+  .overview-top-menu.el-menu--horizontal {
+    > .el-menu-item.is-active {
+      color: #ffffff !important;
+      background-color: rgba(24, 144, 255, 0.22) !important;
+      border-bottom-color: #00aaff !important;
+    }
+
+    > .el-submenu.is-active > .el-submenu__title {
+      color: #ffffff !important;
+      background-color: rgba(24, 144, 255, 0.22) !important;
+      border-bottom-color: #00aaff !important;
+    }
+
+    > .el-menu-item:hover,
+    > .el-menu-item:focus,
+    > .el-submenu .el-submenu__title:hover,
+    > .el-submenu .el-submenu__title:focus {
+      background-color: rgba(24, 144, 255, 0.12) !important;
+      color: #ffffff !important;
+    }
+  }
+}
+
+/* ========== 自定义分析 / 图表配置页 ========== */
+.custom-analysis-page,
+.drag-chart-page,
+.analysis-event-page,
+.transition-page {
+  color: #ffffff;
+
+  .el-collapse {
+    border-color: var(--panel-border) !important;
+  }
+
+  .el-collapse-item__header {
+    background-color: rgba(0, 16, 32, 0.85) !important;
+    color: #ffffff !important;
+    border-bottom-color: var(--panel-border) !important;
+  }
+
+  .el-collapse-item__wrap {
+    background-color: transparent !important;
+    border-bottom-color: var(--panel-border) !important;
+  }
+
+  .el-collapse-item__content {
+    color: #ffffff !important;
+  }
+
+  .el-select .el-input__inner {
+    color: #ffffff !important;
+  }
+
+  .el-input__inner::placeholder {
+    color: rgba(183, 223, 245, 0.55) !important;
+  }
+
+  .el-empty__description,
+  .el-empty__description p {
+    color: #ffffff !important;
+  }
+
+  .el-checkbox__label {
+    color: #ffffff !important;
+  }
+
+  .el-checkbox.is-checked .el-checkbox__label {
+    color: #ffffff !important;
+  }
+}
+
+/* ========== Checkbox / Radio ========== */
+.el-checkbox {
+  color: #ffffff !important;
+}
+
+.el-checkbox__label {
+  color: #ffffff !important;
+}
+
+.el-checkbox.is-checked .el-checkbox__label,
+.el-checkbox__input.is-checked + .el-checkbox__label,
+.is-checked > .el-checkbox__label {
+  color: #ffffff !important;
+}
+
+.el-radio {
+  color: #ffffff !important;
+}
+
+.el-radio__label {
+  color: #ffffff !important;
+}
+
+.el-radio__input.is-checked + .el-radio__label {
+  color: #ffffff !important;
+}
+
+.analysis-event-drawer {
+  .drawer-section-title {
+    color: #ffffff;
+  }
+}
+
+.transition-drawer,
+.transition-dialog {
+  .scrollable-list {
+    color: #ffffff;
+
+    li span {
+      color: #ffffff;
+    }
+  }
+
+  .scrollable-list::-webkit-scrollbar-track {
+    background: rgba(0, 16, 32, 0.6);
+  }
+
+  .scrollable-list::-webkit-scrollbar-thumb {
+    background: rgba(0, 170, 255, 0.35);
+  }
+
+  .scrollable-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 170, 255, 0.55);
+  }
+}
+
+/* ========== 故障诊断页 malfunction ========== */
+.malfunction-page {
+  .gear-container {
+    .gear-header {
+      background: rgba(0, 16, 32, 0.85) !important;
+      border: 1px solid var(--panel-border) !important;
+      box-shadow: none !important;
+
+      .title {
+        color: #ffffff !important;
+      }
+
+      .sub-title {
+        color: #b7dff5 !important;
+      }
+
+      .stat-content {
+        .label {
+          color: #b7dff5 !important;
+        }
+
+        .count {
+          color: #ffffff !important;
+        }
+
+        .ratio {
+          color: rgba(183, 223, 245, 0.65) !important;
+        }
+      }
+
+      .header-divider.el-divider--vertical {
+        background-color: rgba(0, 170, 255, 0.25) !important;
+      }
+    }
+
+    h4 {
+      color: #ffffff !important;
+    }
+
+    .monitor-panel {
+      background: rgba(0, 16, 32, 0.45) !important;
+      border: 1px solid var(--panel-border) !important;
+      box-shadow: none !important;
+    }
+
+    .monitor-empty {
+      background: rgba(0, 12, 23, 0.55) !important;
+      border: 1px solid var(--panel-border) !important;
+      border-radius: 10px;
+    }
+
+    .monitor-item {
+      background: rgba(0, 16, 32, 0.65) !important;
+      border-color: var(--panel-border) !important;
+
+      &.is-active {
+        background: rgba(24, 144, 255, 0.15) !important;
+      }
+
+      &.is-active::before {
+        background: #00aaff !important;
+      }
+    }
+
+    .item-main {
+      .item-name {
+        color: #ffffff !important;
+      }
+
+      .item-line {
+        color: #b7dff5 !important;
+      }
+    }
+
+    .detail-btn {
+      color: #b7dff5 !important;
+    }
+
+    .bottomBox {
+      background: rgba(0, 16, 32, 0.45) !important;
+      border: 1px solid var(--panel-border) !important;
+      box-shadow: none !important;
+    }
+
+    .status-legend {
+      color: #b7dff5 !important;
+
+      .legend-label {
+        color: #b7dff5 !important;
+      }
+    }
+
+    .mpoint-chart-item {
+      background: rgba(0, 12, 23, 0.45) !important;
+      border-color: var(--panel-border) !important;
+    }
+
+    .mpoint-chart-title {
+      color: #ffffff !important;
+    }
+  }
+
+  .MAXdiv {
+    .bottomBox {
+      border-color: var(--panel-border) !important;
+      background: rgba(0, 16, 32, 0.45) !important;
+    }
+  }
+}

src/themes/green.scss

@@ -1,5 +1,5 @@
-$primary-color: #008080;
-$background-color: #008080;
+$primary-color: #090a0f;
+$background-color: #090a0f;
 $text-color: #ffffff;
 $bgopacity-color: #00968730;
 :root {
@@ -7,6 +7,6 @@ $bgopacity-color: #00968730;
   --background-color: #{$background-color};
   --text-color: #{$text-color};
   --bgopacity-color: #{$bgopacity-color};
-  --header-bg: #008080;
-  --content-bg: #008080b4;
+  --header-bg: #111627;
+  --content-bg: #090a0f;
 }

src/themes/tech-blue.scss

@@ -0,0 +1,48 @@
+/* 科技蓝大屏主题变量 */
+$primary-color: #1890ff;
+$background-color: #001529;
+$text-color: #ffffff;
+$bgopacity-color: rgba(0, 170, 255, 0.12);
+
+:root {
+  --primary-color: #1890ff;
+  --primary-hover: #40a9ff;
+  --background-color: #001529;
+  --text-color: #ffffff;
+  --text-cyan: #b7dff5;
+  --text-muted: #3f4755;
+  --bgopacity-color: rgba(0, 170, 255, 0.12);
+  --header-bg: #001529;
+  --content-bg: #000510;
+  --panel-bg: #000c17;
+  --panel-border: rgba(0, 170, 255, 0.45);
+  --panel-glow: 0 0 15px rgba(0, 120, 255, 0.12),
+    inset 0 0 30px rgba(0, 40, 100, 0.08);
+  --table-header-bg: #001a33;
+  --table-row-bg: #020810;
+  --table-row-stripe: rgba(0, 24, 48, 0.55);
+  --table-border: rgba(0, 80, 140, 0.28);
+  --table-frame-bg: #00050a;
+  --table-frame-border: rgba(0, 170, 255, 0.48);
+  --table-accent: #00aaff;
+  --table-cell-text: #c8d4df;
+  --table-header-text: #ffffff;
+  /* hover：略提亮深色底，不用浅灰/高亮青（避免扎眼） */
+  --table-row-hover-bg: #071525;
+  --table-row-hover-text: #c8d4df;
+  --table-row-hover-line: rgba(0, 140, 200, 0.28);
+  --input-bg: #000c17;
+  --input-border: rgba(0, 170, 255, 0.35);
+  --sidebar-bg: #141414;
+  --success-color: #52c41a;
+  /* 按钮：克制的大屏风格（无霓虹发光） */
+  --btn-radius: 4px;
+  --btn-outline-bg: rgba(0, 16, 32, 0.92);
+  --btn-outline-bg-hover: rgba(0, 28, 52, 0.96);
+  --btn-outline-border: rgba(0, 120, 200, 0.42);
+  --btn-outline-border-hover: rgba(0, 160, 255, 0.55);
+  --btn-outline-text: #b7dff5;
+  --btn-primary-bg: #177ddc;
+  --btn-primary-bg-hover: #1d8cff;
+  --btn-primary-border: #177ddc;
+}

src/views/health/index.vue

@@ -400,9 +400,13 @@ export default {
 <style lang="scss" scoped>
 .searchbox {
   display: flex;
+  align-items: center;
   margin: 0 0 20px 0;
+  color: #ffffff;
+
   p {
     margin-right: 10px;
+    color: #b7dff5;
   }
   .el-select {
     width: 180px;
@@ -429,12 +433,13 @@ export default {
     display: flex;
     flex-direction: column;
     margin-bottom: 20px;
-    border: 1px solid var(--header-bg);
+    border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+    background: rgba(0, 16, 32, 0.45);
 
     .title {
-      padding: 5px 0;
+      padding: 8px 10px;
       width: 100%;
-      border-bottom: 1px solid var(--header-bg);
+      border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
       text-align: left;
 
       display: flex;
@@ -451,15 +456,26 @@ export default {
       }
 
       h4 {
-        width: 175px;
-        color: var(--header-bg);
-        font-size: 1.1em;
+        flex: 1;
+        min-width: 0;
+        color: #ffffff;
+        font-size: 14px;
         font-weight: 600;
         margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
+
       .mill {
+        flex-shrink: 0;
         font-size: 12px;
-        color: rgb(43, 42, 42);
+        color: #b7dff5;
+        background: rgba(0, 170, 255, 0.12);
+        border: 1px solid rgba(0, 170, 255, 0.35);
+        padding: 2px 8px;
+        border-radius: 4px;
+        line-height: 1.4;
       }
     }
 
@@ -512,16 +528,18 @@ export default {
             display: block;
             text-align: center;
             line-height: 1.3;
+
             &:first-child {
               font-size: 0.9em;
               font-weight: 600;
               margin-bottom: 2px;
+              color: #b7dff5;
+            }
+
+            &:last-child {
+              color: #ffffff;
+              font-weight: 600;
             }
-          }
-        }
-        li span {
-          &:last-child {
-            color: var(--header-bg);
           }
         }
       }

src/views/health/malfunction.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="global-variable">
+  <div class="global-variable malfunction-page">
     <!-- 查询条件 -->
     <div class="searchbox">
       <p>
@@ -478,72 +478,21 @@ export default {
 .global-variable {
   padding: 10px;
 }
-.head {
-  padding: 5px 0;
-  display: flex;
-  justify-content: space-between;
-
-  ul {
-    display: flex;
-    width: 500px;
-    height: 65px;
-    justify-content: space-between;
-    li {
-      cursor: pointer;
-      padding: 8px 12px 0 12px;
-      border-radius: 4px;
-      transition: all 0.3s;
-
-      &:hover {
-        background-color: #f0f0f0;
-      }
-
-      &.active {
-        background-color: #e6f7ff;
-        border-bottom: 2px solid var(--header-bg);
-
-        span {
-          color: var(--header-bg);
-          font-weight: bold;
-        }
-      }
 
-      .Simg {
-        width: 30px;
-        height: 30px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin: 0 auto;
-
-        img {
-          max-width: 100%;
-          max-height: 100%;
-        }
-      }
-
-      span {
-        display: block;
-        font-size: 12px;
-        font-weight: 600;
-        text-align: center;
-        margin-top: 5px;
-      }
-    }
-  }
-}
 .searchbox {
   display: flex;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   align-items: center;
   flex-wrap: wrap;
-  // padding-top: 10px;
+  color: #ffffff;
+
   p {
     margin-right: 10px;
     margin-bottom: 0;
-    margin-top: 10px;
+    margin-top: 8px;
     display: flex;
     align-items: center;
+    color: #b7dff5;
 
     .el-select,
     .el-date-picker {
@@ -554,22 +503,47 @@ export default {
   .el-select {
     width: 180px;
   }
+
   .search-btn {
-    margin-top: 10px;
+    margin-top: 8px;
   }
 }
+
 .main-body {
-  margin-top: 10px;
-  // border: 1px solid #ebeef5;
+  margin-top: 8px;
   border-radius: 4px;
-  padding: 10px;
-  background: #fff;
+  padding: 0;
+  background: transparent;
 }
 
 .el-range-editor.el-input__inner {
   width: 370px;
 }
 
+::v-deep .el-tabs__header {
+  margin-bottom: 8px;
+}
+
+::v-deep .el-tabs__item {
+  color: rgba(183, 223, 245, 0.75) !important;
+}
+
+::v-deep .el-tabs__item.is-active {
+  color: #ffffff !important;
+}
+
+::v-deep .el-tabs__item:hover {
+  color: #ffffff !important;
+}
+
+::v-deep .el-tabs__active-bar {
+  background-color: #00aaff !important;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: rgba(0, 170, 255, 0.25) !important;
+}
+
 /* 放在你的组件 <style scoped> 或全局样式里 */
 .custom-loading-style .el-loading-spinner i {
   font-size: 26px;

src/views/home/Index.vue

@@ -81,7 +81,7 @@ export default {
     min-width: 800px;
     // min-height: 88vh;
     height: 100%;
-    background-color: #f7f7f8;
+    background-color: #090a0f;
     padding: 0;
     overflow: hidden;
     .main-content {
@@ -113,7 +113,9 @@ export default {
   }
 }
 .headerBox {
-  background: #fff;
+  background: var(--header-bg, #001529) !important;
+  // border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+  color: var(--text-cyan, #52c8f2);
 }
 .slide-fade-enter-active {
   transition: all 0.3s ease-out;

src/views/home/components/MenuDt.vue

@@ -31,6 +31,7 @@
           "
           :index="normalizedMenuParentIndex(item)"
           :popper-append-to-body="true"
+          popper-class="menu-dt-dark-popup"
         >
           <template slot="title">
             <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
@@ -692,3 +693,77 @@ $dt-radius: 8px;
 
 /* 旧版侧栏左缩进由 ::v-deep 内 margin 统一控制 */
 </style>
+
+<!-- 收起侧栏时子菜单弹出层挂到 body，需非 scoped 样式 -->
+<style lang="scss">
+$dt-bg: #141414;
+$dt-item-blue: #1890ff;
+$dt-active-bg: #1890ff;
+$dt-text-inactive: #999999;
+$dt-radius: 8px;
+
+.menu-dt-dark-popup {
+  .el-menu--popup {
+    background-color: $dt-bg !important;
+    border: 1px solid rgba(0, 170, 255, 0.25);
+    min-width: 160px;
+    padding: 4px 0;
+  }
+
+  .el-menu-item {
+    color: $dt-text-inactive !important;
+    border-radius: $dt-radius;
+    margin: 4px 8px;
+    height: 44px;
+    line-height: 44px;
+
+    span {
+      color: $dt-text-inactive !important;
+    }
+
+    .el-icon-menu,
+    .svnIcon {
+      color: $dt-item-blue !important;
+    }
+
+    .svnIcon svg {
+      fill: $dt-item-blue;
+    }
+  }
+
+  .el-menu-item.is-active,
+  .el-menu-item.dt-menu-leaf-active {
+    background-color: $dt-active-bg !important;
+    color: #fff !important;
+
+    span {
+      color: #fff !important;
+    }
+
+    .el-icon-menu,
+    .svnIcon {
+      color: #fff !important;
+    }
+
+    .svnIcon svg {
+      fill: #fff !important;
+    }
+  }
+
+  .el-menu-item.is-active:hover,
+  .el-menu-item.is-active:focus,
+  .el-menu-item.dt-menu-leaf-active:hover,
+  .el-menu-item.dt-menu-leaf-active:focus {
+    background-color: $dt-active-bg !important;
+    color: #fff !important;
+
+    span {
+      color: #fff !important;
+    }
+  }
+
+  .el-menu-item:hover:not(.is-active):not(.dt-menu-leaf-active) {
+    background-color: rgba(255, 255, 255, 0.06) !important;
+  }
+}
+</style>

src/views/ledger/maintain.vue

@@ -482,7 +482,7 @@ export default {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning",
-        }
+        },
       )
         .then(() => {
           // Proceed with deletion after confirmation
@@ -493,7 +493,7 @@ export default {
           delUnitDict(params).then((res) => {
             if (res.status === true) {
               this.tableData = this.tableData.filter(
-                (item) => item.id !== row.id
+                (item) => item.id !== row.id,
               );
               this.GETquery();
               this.$message({
@@ -546,7 +546,7 @@ export default {
       };
       delUnitDictProperty(params).then((res) => {
         this.nothaveData = this.nothaveData.filter(
-          (item) => item.id !== row.id
+          (item) => item.id !== row.id,
         );
       });
     },
@@ -648,11 +648,11 @@ export default {
           this.parameterVisible = false;
           this.$message({
             type: "success",
-          showClose: true,
-          message: '提交成功'
-        });
+            showClose: true,
+            message: "提交成功",
+          });
           this.fetchData();
-          this.drawer=true
+          this.drawer = true;
         })
         .catch(() => {
           this.$message.error("提交失败");
@@ -749,7 +749,7 @@ export default {
                 message: "删除成功!",
               });
               this.relevanceData = this.relevanceData.filter(
-                (item) => item.id !== row.id
+                (item) => item.id !== row.id,
               );
             } else {
               this.$message({
@@ -830,7 +830,7 @@ export default {
     display: flex;
 
     p {
-      width: 80px;
+      // width: 80px;
       line-height: 32px;
     }
 
@@ -889,4 +889,4 @@ export default {
     margin-left: 10px;
   }
 }
-</style>
+</style>

src/views/ledger/milltype.vue

@@ -184,13 +184,13 @@
       :title="title"
       :visible.sync="nuedialog"
       :before-close="handleClose"
-      width="800px"
+      width="1000px"
     >
       <el-form
         :model="ruleForm"
         :rules="rules"
         ref="ruleForm"
-        label-width="120px"
+        label-width="170px"
         class="demo-ruleForm form-grid"
       >
         <div class="form-row">
@@ -226,7 +226,7 @@
           <el-form-item label="叶片长度:" prop="vaneLong">
             <el-input v-model="ruleForm.vaneLong"></el-input>
           </el-form-item>
-          <el-form-item label="叶轮直径:" prop="rotorDiameter">
+          <el-form-item label="叶轮直径（风轮直径）:" prop="rotorDiameter">
             <el-input v-model="ruleForm.rotorDiameter"></el-input>
           </el-form-item>
         </div>
@@ -247,6 +247,14 @@
           </el-form-item>
         </div>
         <div class="form-row">
+          <el-form-item label="发电机额定转速:" prop="generatorRatedSpeed">
+            <el-input v-model="ruleForm.generatorRatedSpeed"></el-input>
+          </el-form-item>
+          <el-form-item label="叶轮额定转速:" prop="impellerRatedSpeed">
+            <el-input v-model="ruleForm.impellerRatedSpeed"></el-input>
+          </el-form-item>
+        </div>
+        <div class="form-row">
           <!-- <el-form-item label="厂商编号:" prop="manufacturerCode">
             <el-input
               v-model="ruleForm.manufacturerCode"
@@ -311,7 +319,7 @@
           <span>{{ particularsdata.vaneLong }}(米)</span>
         </div>
         <div class="condition">
-          <p>叶轮直径:</p>
+          <p>叶轮直径（风轮直径）:</p>
           <span>{{ particularsdata.rotorDiameter }}(米)</span>
         </div>
         <div class="condition">
@@ -330,6 +338,14 @@
           <p>切出风速:</p>
           <span>{{ particularsdata.ratedCutOutWindspeed }} m/s</span>
         </div>
+        <div class="condition">
+          <p>发电机额定转速:</p>
+          <span>{{ particularsdata.generatorRatedSpeed }}</span>
+        </div>
+        <div class="condition">
+          <p>叶轮额定转速:</p>
+          <span>{{ particularsdata.impellerRatedSpeed }}</span>
+        </div>
       </div>
       <!-- <div class="attachment">
         <p class="model-center" @click="downloadfile">下载标准功率曲线附件</p>
@@ -420,6 +436,8 @@ export default {
         ratedWindSpeed: "",
         ratedCutInWindspeed: "",
         ratedCutOutWindspeed: "",
+        generatorRatedSpeed: "",
+        impellerRatedSpeed: "",
       },
       curvedMotionTypeOptions: [],
       rules: {
@@ -442,7 +460,11 @@ export default {
           { validator: this.validateNumber, trigger: ["blur", "change"] },
         ],
         rotorDiameter: [
-          { required: true, message: "请输入叶轮直径", trigger: "blur" },
+          {
+            required: true,
+            message: "请输入叶轮直径（风轮直径）",
+            trigger: "blur",
+          },
           { validator: this.validateNumber, trigger: ["blur", "change"] },
         ],
         rotationalSpeedRatio: [
@@ -450,6 +472,18 @@ export default {
           { required: true, message: "请输入传动比", trigger: "blur" },
           { validator: this.validateNumber, trigger: ["blur", "change"] }, // 假设您也有验证数字的自定义验证器
         ],
+        generatorRatedSpeed: [
+          {
+            validator: this.validateNumberOptional,
+            trigger: ["blur", "change"],
+          },
+        ],
+        impellerRatedSpeed: [
+          {
+            validator: this.validateNumberOptional,
+            trigger: ["blur", "change"],
+          },
+        ],
       },
       particularsdata: [],
       // 新增信息
@@ -560,6 +594,12 @@ export default {
           ratedWindSpeed: this.ruleForm.ratedWindSpeed,
           ratedCutInWindspeed: this.ruleForm.ratedCutInWindspeed,
           ratedCutOutWindspeed: this.ruleForm.ratedCutOutWindspeed,
+          generatorRatedSpeed: this.parseSpeedValue(
+            this.ruleForm.generatorRatedSpeed,
+          ),
+          impellerRatedSpeed: this.parseSpeedValue(
+            this.ruleForm.impellerRatedSpeed,
+          ),
         };
 
         if (this.isEdit) {
@@ -606,6 +646,21 @@ export default {
       }
     },
 
+    validateNumberOptional(rule, value, callback) {
+      if (value === "" || value === null || value === undefined) {
+        callback();
+        return;
+      }
+      this.validateNumber(rule, value, callback);
+    },
+
+    parseSpeedValue(value) {
+      if (value === "" || value === null || value === undefined) {
+        return undefined;
+      }
+      return Number(value);
+    },
+
     // 删除
     deleted(row) {
       console.log(row, "row");
@@ -809,7 +864,7 @@ export default {
     display: flex;
 
     p {
-      width: 100px;
+      width: 150px;
       text-align: right;
       line-height: 40px;
       margin-right: 10px;

src/views/login/Index.vue

@@ -140,10 +140,10 @@ export default {
   transform: translate(-50%, -50%);
   padding: 0 50px;
   width: 450px;
-  background: #fff;
-  border: 1px solid rgb(231, 231, 231);
-  border-radius: 5px;
-  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.4);
+  background: var(--panel-bg, #000c17);
+  border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.45));
+  border-radius: 4px;
+  box-shadow: var(--panel-glow, 0 0 20px rgba(0, 120, 255, 0.2));
   margin: auto;
 
   .leftLogin {
@@ -155,41 +155,31 @@ export default {
       line-height: 50px;
       font-size: 20px;
       font-weight: 600;
-      color: #00baad;
+      color: var(--text-cyan, #52c8f2);
       margin-top: 20px;
     }
 
     .el-divider--horizontal {
       margin: 10px 0;
-      height: 4px;
-      background: #ba2200;
+      height: 2px;
+      background: var(--primary-color, #1890ff);
     }
 
     .loginText {
       .custom-button {
         width: 300px;
         margin-bottom: 10px;
-        background-color: #00baad;
-        color: white;
-        border: 2px solid #00baad;
-      }
-
-      .custom-button:hover {
-        background-color: #00baad;
-        color: white;
-        border: 2px solid #00baad;
       }
     }
 
     .forgot {
       font-size: 12px;
-      color: rgb(143, 143, 143);
+      color: var(--text-muted, rgba(82, 200, 242, 0.65));
       margin-top: 20px;
     }
 
     .forgot:hover {
-      font-size: 12px;
-      color: rgb(0, 0, 0);
+      color: var(--text-cyan, #52c8f2);
       margin-top: 20px;
     }
 

src/views/overview/components/analysis_information/index.vue

@@ -149,7 +149,7 @@
                     class="WindPower3"
                     width="40px"
                     height="42px"
-                    color="#222"
+                    color="#b7dff5"
                   ></SvgIcons>
                   <span>{{ itemData.engineName }}机组</span>
                 </div>
@@ -302,47 +302,46 @@ export default {
   }
 
   ::v-deep .el-tag--warning {
-    background-color: #0080803a !important;
-    border-color: #0080803a !important;
-    color: #008080 !important;
+    background-color: rgba(0, 170, 255, 0.12) !important;
+    border-color: rgba(0, 170, 255, 0.35) !important;
+    color: #ffffff !important;
   }
 }
 
-.el-card__body {
+::v-deep .el-card__body {
   width: 100%;
   height: 100%;
-  // margin-bottom: 20px !important;
+  background: transparent !important;
 }
 
 .content {
   width: 100%;
   display: flex;
   justify-content: space-between;
-  // align-items: flex-start;
-  /* 上对齐 */
   height: 100%;
-  border-bottom: 1px solid #ebeef5;
-  /* 确保内容区域有高度 */
+  border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
 }
+
 .box-min {
   padding: 10px;
-
-  color: #303133;
+  color: #ffffff;
 
   h4 {
-    color: #303133;
-    // border-bottom: 1px solid #ebeef5;
+    color: #ffffff;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 10px;
   }
+
   ::v-deep .analysisTypes {
     h6 {
       font-weight: 500 !important;
       font-size: 12px;
       margin: 5px 0;
+      color: var(--text-cyan, #b7dff5);
     }
   }
+
   .analysisTypes:last-child {
     margin-bottom: 50px;
   }
@@ -351,15 +350,12 @@ export default {
 .left {
   width: 70%;
 
-  // flex: 1;
   .box-content-min {
     padding: 10px;
-    // border-bottom: 1px solid #ebeef5;
-    color: #303133;
+    color: #ffffff;
 
     h4 {
-      color: #303133;
-      // border-bottom: 1px solid #ebeef5;
+      color: #ffffff;
       font-size: 14px;
       font-weight: 500;
       margin-bottom: 10px;
@@ -375,13 +371,25 @@ export default {
     .itemAnalysisCompletionUnit {
       text-align: center;
       margin-bottom: 10px;
-      border: #eaeef6 solid 1px;
+      border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+      background: rgba(0, 16, 32, 0.55);
       margin-right: 10px;
       border-radius: 10px;
       padding: 10px 5px;
+      color: #ffffff;
+      cursor: pointer;
+      transition: background-color 0.2s ease, border-color 0.2s ease;
+
+      &:hover {
+        background: var(--bgopacity-color, rgba(0, 170, 255, 0.12));
+        border-color: rgba(0, 170, 255, 0.55);
+      }
+
       span {
         font-size: 12px;
+        color: #ffffff;
       }
+
       .WindPower3 {
         padding: 10px 5px;
         text-align: center;
@@ -393,8 +401,6 @@ export default {
 .right {
   width: 30%;
   height: 100%;
-  /* 确保容器高度为100% */
-  // flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -402,61 +408,80 @@ export default {
 
 .right .map-ditu {
   width: 100%;
-  /* 设置地图的宽度 */
   height: 40vh;
   border-radius: 90px;
-
-  /* 设置地图的高度 */
 }
 
 .box-card {
   width: 100%;
   height: 100%;
   overflow-y: scroll;
-  /* 滚动条整体样式 */
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+
   &::-webkit-scrollbar {
-    width: 6px; /* 滚动条宽度 */
+    width: 6px;
   }
 
-  /* 滚动条轨道 */
   &::-webkit-scrollbar-track {
-    background: #f5f7fa;
     border-radius: 3px;
   }
 
-  /* 滚动条滑块 */
   &::-webkit-scrollbar-thumb {
-    background: #c0c4cc;
     border-radius: 3px;
   }
 
-  /* 滚动条滑块悬停时 */
-  &::-webkit-scrollbar-thumb:hover {
-    background: #909399;
-  }
-
   .box-header {
     padding: 10px;
-    border-bottom: 1px solid #ebeef5;
-    color: #303133;
+    border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
+    color: #ffffff;
 
     h4 {
-      color: #303133;
+      color: #ffffff;
       font-size: 14px;
       font-weight: 500;
-      // margin-bottom: 10px;
     }
   }
 
   .box-header-min {
     padding: 10px;
     font-size: 14px;
-    color: #606266;
+    color: #ffffff;
     line-height: 22px;
 
     .headerMessage {
       font-size: 16px;
+      color: #ffffff !important;
+      font-weight: 600;
     }
   }
+
+  ::v-deep .el-descriptions {
+    color: #ffffff;
+  }
+
+  ::v-deep .el-descriptions__body {
+    background-color: transparent !important;
+    color: #ffffff !important;
+  }
+
+  ::v-deep .el-descriptions__body .el-descriptions-item__cell {
+    color: #ffffff !important;
+    background-color: transparent !important;
+  }
+
+  ::v-deep .el-descriptions-item__label {
+    color: var(--text-cyan, #b7dff5) !important;
+  }
+
+  ::v-deep .el-descriptions-item__content {
+    color: #ffffff !important;
+  }
+
+  ::v-deep .el-empty__description,
+  ::v-deep .el-empty__description p {
+    color: #ffffff !important;
+  }
 }
 </style>

src/views/overview/components/cp/index.vue

@@ -91,6 +91,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/cp_trend/index.vue

@@ -41,6 +41,7 @@
         ></BoxMarkersCharts>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/cp_windspeed/index.vue

@@ -91,6 +91,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/data_integrity_minute/index.vue

@@ -53,6 +53,7 @@
         v-if="generalFilesDatas.length === 0"
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/data_integrity_second/index.vue

@@ -52,6 +52,7 @@
       </template>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/dicCard/index.vue

@@ -14,7 +14,11 @@
         <svg-icon icon-class="pl4" style="width: 35px; height: 35px" />
       </div>
     </el-tooltip>
-    <el-drawer :visible.sync="drawer" title="分析评论">
+    <el-drawer
+      :visible.sync="drawer"
+      title="分析评论"
+      custom-class="overview-drawer"
+    >
       <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
         <el-tab-pane label="当前评论" name="current">
           <template
@@ -128,19 +132,23 @@ export default {
   position: fixed;
   right: 40px;
   bottom: 20%;
-  background: rgb(255, 255, 255);
+  background: var(--panel-bg, #000c17);
+  border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.45));
   border-radius: 50%;
   width: 50px;
   height: 50px;
-  color: #707070;
+  color: var(--text-cyan, #b7dff5);
   font-size: 30px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
+  box-shadow: 0 0 12px rgba(0, 100, 255, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
+
 .drawerDescription:hover {
-  background: rgb(196, 199, 206);
+  background: var(--bgopacity-color, rgba(0, 170, 255, 0.12));
+  color: #ffffff;
 }
 .el-tabs--border-card {
   height: 100%;

src/views/overview/components/fault_all/index.vue

@@ -98,6 +98,7 @@
       <el-empty description="暂无分析记录" v-else></el-empty>
 
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/fault_unit/index.vue

@@ -93,6 +93,7 @@
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/filterChart/index.vue

@@ -167,7 +167,7 @@ export default {
     // 保证只有在通过事件传递数据时才更新
     if (this.setUpimg.length > 0) {
       this.form.dgeneratorSpeed = this.form.dgeneratorSpeed.filter(
-        (item) => this.setUpimg.includes(item.label) // 过滤出label在setUpimg中的项
+        (item) => this.setUpimg.includes(item.label), // 过滤出label在setUpimg中的项
       );
     } else {
       this.form.dgeneratorSpeed = [];
@@ -192,10 +192,14 @@ export default {
 </script>
 <style scoped lang="scss">
 .filterChart {
+  padding: 12px 0;
+  color: #ffffff;
+
   h3 {
     font-size: 16px;
     font-weight: 500;
-    margin-top: 10px 0;
+    margin: 10px 0;
+    color: #ffffff;
   }
 }
 // ::v-deep.el-input--small .el-input__inner {

src/views/overview/components/min_pitch/index.vue

@@ -49,6 +49,7 @@
         ></ColorbarInitTwoDmarkersChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/min_pitch1/index.vue

@@ -58,6 +58,7 @@
         ></BarChart>
       </VirtualList> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/min_pitch2/index.vue

@@ -65,6 +65,7 @@
         </lineScatter>
       </VirtualList> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/min_pitch3/index.vue

@@ -96,6 +96,7 @@
         "
       ></el-empty> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/pitch_generator_speed/index.vue

@@ -49,6 +49,7 @@
         ></powerMarkers2DCharts>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/pitch_power/index.vue

@@ -64,6 +64,7 @@
         </Time3DChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/pitch_tsr_cp/index.vue

@@ -47,6 +47,7 @@
         ></TwoDMarkersChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/power_curve/index.vue

@@ -141,6 +141,7 @@
         <el-empty v-else description="暂无分图"></el-empty>
       </div>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/power_scatter/index.vue

@@ -55,6 +55,7 @@
       </VirtualList>
 
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/power_scatter_2D/index.vue

@@ -56,6 +56,7 @@
       </VirtualList>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/production_indicator1/index.vue

@@ -75,6 +75,7 @@
       <!-- </div> -->
       <!-- <el-empty description="暂无分析记录" v-else></el-empty> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/production_indicator2/index.vue

@@ -98,6 +98,7 @@
       <el-empty description="暂无分析记录" v-else></el-empty>
       <!-- <el-empty description="暂无分析记录" v-else></el-empty> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/production_indicator_all/index.vue

@@ -74,6 +74,7 @@
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/production_indicator_unit/index.vue

@@ -164,6 +164,7 @@
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"
@@ -199,6 +200,7 @@
         </el-row>
       </el-dialog>
       <el-dialog
+        custom-class="overview-dialog"
         title="雷达图表"
         :visible="radarIsShow"
         width="450px"

src/views/overview/components/rated_power_windspeed/index.vue

@@ -50,6 +50,7 @@
         </BoxLineCharts>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/rated_windspeed/index.vue

@@ -51,6 +51,7 @@
         </BarChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/speed_power/index.vue

@@ -76,6 +76,7 @@
       </VirtualList>
 
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/speed_torque/index.vue

@@ -66,6 +66,7 @@
       </VirtualList>
 
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_environment/index.vue

@@ -52,6 +52,7 @@
         </div>
       </div>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_Winding_tem/index.vue

@@ -99,6 +99,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_adriven/index.vue

@@ -99,6 +99,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_hig/index.vue

@@ -101,6 +101,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_low/index.vue

@@ -100,6 +100,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_mid/index.vue

@@ -101,6 +101,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_min/index.vue

@@ -102,6 +102,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_tem_deviation/index.vue

@@ -68,6 +68,7 @@
         </GeneratorTemperature>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/temperature_large_components_undriven/index.vue

@@ -102,6 +102,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/tsr/index.vue

@@ -88,6 +88,7 @@
       ></el-empty>
 
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/tsr_cp_power/index.vue

@@ -88,6 +88,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/tsr_cp_power_scatter/index.vue

@@ -49,6 +49,7 @@
         </TwoDMarkersChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/tsr_trend/index.vue

@@ -48,6 +48,7 @@
         </BoxMarkersCharts>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/tsr_windspeed/index.vue

@@ -88,6 +88,7 @@
         "
       ></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/wind_direction_frequency/index.vue

@@ -75,6 +75,7 @@
       </div>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/wind_speed/index.vue

@@ -57,6 +57,7 @@
         ></BarChart> -->
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/wind_speed_frequency/index.vue

@@ -49,6 +49,7 @@
       </VirtualList>
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error/index.vue

@@ -91,6 +91,7 @@
         ></el-empty>
       </div>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error1/index.vue

@@ -71,6 +71,7 @@
       </VirtualList> -->
       <el-empty v-else description="暂无分析记录"></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error2/index.vue

@@ -61,6 +61,7 @@
         </lineScatter>
       </VirtualList> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error3/index.vue

@@ -75,6 +75,7 @@
         "
       ></el-empty> -->
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error4/index.vue

@@ -52,6 +52,7 @@
 
       <el-empty description="暂无分析记录" v-else></el-empty>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/components/yaw_error_density/index.vue

@@ -49,6 +49,7 @@
         </ColorbarInitTwoDmarkersChart>
       </VirtualList>
       <el-dialog
+        custom-class="overview-dialog"
         v-if="isShowDescription"
         title="添加评论"
         :visible="isShow"

src/views/overview/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="global-variable" v-loading="loading">
+  <div class="global-variable overview-page" v-loading="loading">
     <div class="left">
       <div class="leftTitle">
         <el-input
@@ -40,14 +40,18 @@
     <div class="right">
       <el-menu
         :default-active="activeIndex"
-        class="el-menu-demo"
+        class="el-menu-demo overview-top-menu"
         mode="horizontal"
+        background-color="transparent"
+        text-color="#b7dff5"
+        active-text-color="#ffffff"
         @select="handleSelect"
       >
         <template v-for="menuItem in assetssTypeData">
           <el-submenu
             :index="menuItem.typeCode + menuItem.typeName"
             v-if="menuItem.children && menuItem.children.length"
+            popper-class="overview-menu-popup"
           >
             <template slot="title">{{ menuItem.typeName }}</template>
 
@@ -123,6 +127,7 @@
       :title="'分析主题：' + batchTitle"
       :visible="isShowComment"
       width="40%"
+      custom-class="overview-dialog"
       v-dialogDrag
       :modal="false"
       :lock-scroll="false"
@@ -384,7 +389,7 @@ export default {
                   if (child.typeCode === "speed_torque_power") {
                     return (
                       self.findIndex(
-                        (c) => c.typeCode === "speed_torque_power"
+                        (c) => c.typeCode === "speed_torque_power",
                       ) === index
                     );
                   }
@@ -427,7 +432,7 @@ export default {
       this.isShowComment = true;
       this.dialogInitBatchCode = val;
       const batchObj = this.batchList.find((item) =>
-        item.batchCode === val ? item.batchName : ""
+        item.batchCode === val ? item.batchName : "",
       );
       this.batchTitle = batchObj.batchName;
     },
@@ -458,123 +463,137 @@ export default {
   display: flex;
   height: 89vh;
   overflow: hidden;
+  color: #ffffff;
+
   .left {
     width: 200px;
-    border-right: 1px solid #ebeef5;
     padding-right: 20px;
     margin-bottom: 20px;
     overflow-y: scroll;
+    border-right: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
+
     .leftTitle {
       display: flex;
       align-items: center;
       justify-content: space-between;
+
+      .el-dropdown-link {
+        color: var(--text-cyan, #b7dff5);
+        cursor: pointer;
+      }
+
       .el-icon-more-outline {
         margin-left: 10px;
         transform: rotate(90deg);
       }
     }
-    /* 滚动条整体样式 */
-    &::-webkit-scrollbar {
-      width: 0px; /* 滚动条宽度 */
-    }
 
-    /* 滚动条轨道 */
-    &::-webkit-scrollbar-track {
-      background: #f5f7fa;
-      border-radius: 3px;
-    }
-
-    /* 滚动条滑块 */
-    &::-webkit-scrollbar-thumb {
-      background: #c0c4cc;
-      border-radius: 3px;
+    &::-webkit-scrollbar {
+      width: 0;
     }
 
-    /* 滚动条滑块悬停时 */
-    &::-webkit-scrollbar-thumb:hover {
-      background: #909399;
-    }
     .filterInput {
       margin: 20px 0;
     }
   }
+
   .right {
     flex: 1;
     padding-left: 20px;
     overflow: hidden;
 
-    /* 横向滚动设置 */
     .el-menu-demo {
-      max-width: 100%; /* 容器宽度为100% */
-      white-space: nowrap; /* 阻止换行 */
-      overflow-x: auto; /* 允许横向滚动 */
-      display: flex; /* 让子菜单元素保持在同一行 */
-
-      /* 滚动条整体样式 */
-      &::-webkit-scrollbar {
-        height: 6px; /* 滚动条宽度 */
-      }
-
-      /* 滚动条轨道 */
-      &::-webkit-scrollbar-track {
-        background: #f5f7fa;
-        border-radius: 3px;
-      }
-
-      /* 滚动条滑块 */
-      &::-webkit-scrollbar-thumb {
-        background: #c0c4cc;
-        border-radius: 3px;
-      }
-
-      /* 滚动条滑块悬停时 */
-      &::-webkit-scrollbar-thumb:hover {
-        background: #909399;
-      }
+      max-width: 100%;
+      white-space: nowrap;
+      overflow-x: auto;
+      display: flex;
     }
   }
-  .tousutiwen_box {
+
+  .tousutiwen_box,
+  .tousutiwen_box1 {
     position: fixed;
-    right: 40px;
-    bottom: 10%;
-    background: rgb(255, 255, 255);
     border-radius: 50%;
     width: 50px;
     height: 50px;
-    color: rgb(132, 145, 165);
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
     display: flex;
     align-items: center;
     justify-content: center;
+    background: var(--panel-bg, #000c17);
+    border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.45));
+    color: var(--text-cyan, #b7dff5);
+    box-shadow: 0 0 12px rgba(0, 100, 255, 0.18);
+    cursor: pointer;
   }
+
+  .tousutiwen_box {
+    right: 40px;
+    bottom: 10%;
+  }
+
   .tousutiwen_box1 {
-    position: fixed;
     right: 80px;
     bottom: 25%;
-    background: rgb(255, 255, 255);
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    color: rgb(132, 145, 165);
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
+
   .tousutiwen_box:hover,
   .tousutiwen_box1:hover {
-    background: rgb(196, 199, 206);
+    background: var(--bgopacity-color, rgba(0, 170, 255, 0.12));
+    color: #ffffff;
   }
-  .el-menu-demo {
-    border-bottom: 1px solid #ebeef5;
+
+  ::v-deep .overview-top-menu {
+    border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+    background: transparent !important;
   }
+
   ::v-deep .el-submenu__title {
     padding: 0 10px !important;
   }
+
+  ::v-deep
+    .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: #1890ff !important;
+    color: #ffffff !important;
+    border-radius: 4px;
+  }
+
+  ::v-deep
+    .el-tree-node.is-current
+    > .el-tree-node__content
+    .el-tree-node__label {
+    color: #ffffff !important;
+  }
+
+  ::v-deep .overview-top-menu.el-menu--horizontal {
+    > .el-menu-item.is-active {
+      color: #ffffff !important;
+      background-color: rgba(24, 144, 255, 0.22) !important;
+      border-bottom-color: #00aaff !important;
+    }
+
+    > .el-submenu.is-active > .el-submenu__title {
+      color: #ffffff !important;
+      background-color: rgba(24, 144, 255, 0.22) !important;
+      border-bottom-color: #00aaff !important;
+    }
+
+    > .el-menu-item:hover,
+    > .el-menu-item:focus,
+    > .el-submenu .el-submenu__title:hover,
+    > .el-submenu .el-submenu__title:focus {
+      background-color: rgba(24, 144, 255, 0.12) !important;
+      color: #ffffff !important;
+    }
+  }
 }
+
 .el-dialog__wrapper {
   position: relative !important;
 }
+
 ::v-deep .el-dialog {
   position: fixed !important;
   z-index: 999 !important;
@@ -582,13 +601,9 @@ export default {
   left: 50%;
   transform: translate(0, -50%);
 }
+
 ::v-deep .el-dialog__body {
   overflow-y: scroll;
   height: 80vh;
 }
-
-.is-current > .el-tree-node__content {
-  // background-color: #f0f7ff !important;
-  background-color: #f90 !important;
-}
 </style>

src/views/performance/components/analysisEvent.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:13:51
- * @LastEditTime: 2025-09-04 17:07:30
- * @LastEditors: bogon
+ * @LastEditTime: 2026-05-25 14:42:38
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
 -->
 <template>
   <!-- 分析事件页面 -->
-  <div v-loading="loading">
+  <div class="analysis-event-page" v-loading="loading">
     <el-form
       ref="form"
       :model="form"
@@ -330,12 +330,13 @@
       :visible.sync="drawer"
       :direction="direction"
       :before-close="handleClose"
+      custom-class="analysis-event-drawer"
       class="drawerOption"
     >
       <el-row>
         <el-col :span="12"
           ><div class="drawerLeft">
-            <div style="text-align: center; font-size: 16px">常用功能设置</div>
+            <div class="drawer-section-title">常用功能设置</div>
             <el-checkbox
               :indeterminate="isIndeterminate"
               v-model="checkAll"
@@ -364,7 +365,7 @@
         >
         <el-col :span="12">
           <div class="drawerRight">
-            <div style="text-align: center; font-size: 16px">已选中功能</div>
+            <div class="drawer-section-title">已选中功能</div>
             <ul>
               <li v-for="func in checkedCities" :key="func">
                 {{ func }}
@@ -805,18 +806,67 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+.analysis-event-page {
+  color: #ffffff;
+
+  ::v-deep .el-form-item__label {
+    color: #b7dff5 !important;
+  }
+
+  ::v-deep .el-form-item__content {
+    color: #ffffff;
+  }
+
+  ::v-deep .el-collapse {
+    // border-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+    background: transparent;
+    margin: 0 10px;
+  }
+
+  ::v-deep .el-collapse-item__header {
+    background: linear-gradient(90deg, #001529 0%, #002a5c 100%) !important;
+    color: #ffffff !important;
+    border-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+    font-size: 15px;
+    padding: 0px 16px;
+    font-weight: 500;
+  }
+
+  ::v-deep .el-collapse-item__wrap {
+    background: var(--panel-bg, #000c17) !important;
+    // border-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+  }
+
+  ::v-deep .el-collapse-item__content {
+    color: #ffffff !important;
+    padding: 16px 12px;
+  }
+
+  ::v-deep .setting {
+    color: #b7dff5;
+    cursor: pointer;
+
+    &:hover {
+      color: #ffffff;
+    }
+  }
+}
+
 .box-card {
   margin: 10px 0;
   width: 100%;
   font-size: 14px;
   height: 100%;
+  background: transparent !important;
+  // border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+  box-shadow: none !important;
+
   .filedView {
     height: 60px;
-    // line-height: 60px;
-    background-color: #fff;
-    color: #303133;
+    background: linear-gradient(90deg, #001529 0%, #002a5c 100%);
+    color: #ffffff;
     cursor: pointer;
-    border-bottom: 1px solid #ebeef5;
+    // border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
     font-size: 16px;
     text-align: center;
     display: flex;
@@ -824,19 +874,26 @@ export default {
     align-items: center;
     font-weight: 500;
     margin-bottom: 10px;
+    padding: 0 16px;
   }
-  .el-card__body {
+
+  ::v-deep .el-card__body {
     width: 100%;
     height: 100% !important;
+    background: var(--panel-bg, #000c17) !important;
+    color: #ffffff;
+
     .left {
       > div {
         line-height: 3;
       }
     }
+
     .el-row {
       height: 100%;
       width: 100%;
     }
+
     .el-col {
       min-height: 500px;
     }
@@ -844,6 +901,10 @@ export default {
     .right {
       height: 500px;
       width: 100%;
+      // border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
+      border-radius: 4px;
+      overflow: hidden;
+
       iframe {
         width: 100%;
         height: 100%;
@@ -894,39 +955,54 @@ export default {
   .el-drawer {
     width: 33% !important;
   }
+
   .el-checkbox-group {
     line-height: 40px !important;
   }
+
   .drawerLeft {
     margin-left: 20px;
-    color: #606266 !important;
+    color: #ffffff !important;
   }
+
+  .drawer-section-title {
+    text-align: center;
+    font-size: 16px;
+    color: #ffffff;
+    margin-bottom: 8px;
+  }
+
   .checkFromRow {
     .el-col-12 {
-      color: #606266 !important;
+      color: #ffffff !important;
       font-size: 14px;
     }
+
     .el-col-12:nth-child(even) {
       text-align: end !important;
     }
   }
+
   .drawerRight {
     margin-right: 20px;
-    color: #606266 !important;
+    color: #ffffff !important;
     font-size: 14px;
+
     ul {
       list-style-type: none;
       padding: 0;
-      color: #606266 !important;
+      color: #ffffff !important;
+
       li {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0px 10px;
+        padding: 0 10px;
         line-height: 40px !important;
       }
     }
   }
+
   .demo-drawer__footer {
     display: flex;
     margin-top: 50px;

src/views/performance/components/custonAsCom/dragChart/components/chartConfig/form/chartTitle.vue

@@ -1451,13 +1451,17 @@ export default {
 ::v-deep .el-form-item {
   width: 100% !important;
   margin-bottom: 5px;
+
   .el-form-item__label {
     width: 100% !important;
+    color: #ffffff !important;
   }
+
   .attributeItemData {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    color: #ffffff;
   }
 }
 .el-divider--horizontal {

src/views/performance/components/custonAsCom/dragChart/components/chartsAttributes.vue

@@ -209,25 +209,52 @@ export default {
 </script>
 <style scoped lang="scss">
 .chartContiner {
-  background-color: pink;
   width: 268px;
-  // width: 200px;
   height: 100%;
+  background: var(--panel-bg, #000c17);
+  color: #ffffff;
 
   ::v-deep .card {
     height: 100%;
     border-radius: 0 !important;
     overflow: scroll;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
   }
+
+  ::v-deep .el-card__body {
+    background: transparent !important;
+    color: #ffffff;
+  }
+
+  ::v-deep .el-tabs__item {
+    color: #b7dff5 !important;
+  }
+
+  ::v-deep .el-tabs__item.is-active {
+    color: #ffffff !important;
+  }
+
+  ::v-deep .el-form-item__label {
+    color: #ffffff !important;
+  }
+
+  ::v-deep .el-divider {
+    background-color: rgba(0, 170, 255, 0.25) !important;
+  }
+
   .toolbox {
     width: 50px;
     text-align: center;
   }
 }
+
 ::v-deep .el-divider--horizontal {
   margin: 5px 0;
   height: 2px;
 }
+
 ::v-deep .el-form--label-top .el-form-item__label {
   padding: 0;
 }

src/views/performance/components/custonAsCom/dragChart/components/chartsContent.vue

@@ -14,9 +14,9 @@
       :unit="10"
       :scale="1"
       :precision="0"
-      :rulerColor="'#00aaff'"
-      :bgColor="'#ffffff'"
-      :cornerColor="'#333'"
+      :rulerColor="'#3a6ea5'"
+      :bgColor="'#061020'"
+      :cornerColor="'#b7dff5'"
       :guidelineColor="'#f00'"
       :cornerSize="10"
       :scrollLeft="0"
@@ -241,25 +241,24 @@ export default {
 </script>
 <style scoped lang="scss">
 .chartContiner {
-  //   background-color: #fff;
   flex: 1;
   height: 100%;
   width: 1800px;
   overflow: scroll;
-  ::v-deep .vue-ruler-wrapper {
-    // width: 100% !important;
-  }
+  background: var(--content-bg, #000510);
+
   .canvas-wrapper {
     position: relative;
     width: var(--canvasWidth);
     height: var(--canvasHeight);
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 0 10px #d6dce0;
-    outline: 10px solid #d6dce0;
-    outline-offset: 0px;
+    background: #0a1628;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 170, 255, 0.35);
+    box-shadow: inset 0 0 24px rgba(0, 25, 50, 0.35);
+
     .info {
       opacity: 0;
+
       .icon-wrapper {
         position: absolute;
         bottom: -35px;

src/views/performance/components/custonAsCom/dragChart/components/chartsData.vue

@@ -196,23 +196,40 @@ export default {
 <style scoped lang="scss">
 .el-tree {
   overflow: hidden !important;
+  background: transparent !important;
+  color: #ffffff !important;
 }
+
 .chartContiner {
-  background-color: skyblue;
   width: 300px;
   height: 100%;
+  background: var(--panel-bg, #000c17);
+  color: #ffffff;
+
   ::v-deep .card {
     height: 100%;
     border-radius: 0 !important;
-    // .el-card__body {
     overflow: scroll;
-    // }
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
   }
+
+  ::v-deep .el-card__body {
+    background: transparent !important;
+    color: #ffffff;
+  }
+
+  ::v-deep .el-tree-node__content {
+    color: #ffffff !important;
+  }
+
+  ::v-deep .el-tree-node__content:hover {
+    background-color: rgba(24, 144, 255, 0.12) !important;
+  }
+
   ::v-deep .el-radio {
     margin: 0;
-    .el-radio__label {
-      // padding: 0;
-    }
   }
 }
 </style>

src/views/performance/components/custonAsCom/dragChart/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chartsBox">
+  <div class="chartsBox drag-chart-page">
     <!-- 主内容区 -->
     <ChartsContent :addChartType="addChartType" :config="config" />
 
@@ -104,66 +104,78 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  gap: 5px; /* 控制抽屉之间的间距 */
+  gap: 5px;
   align-items: flex-start;
-  background-color: #fff;
+  background-color: var(--content-bg, #000510);
+  color: #ffffff;
 }
 
-/* 每组按钮 + 抽屉的容器 */
 .drawer-box {
   display: flex;
   align-items: flex-start;
-  gap: 0px;
+  gap: 0;
   height: 100%;
   overflow: scroll;
+
   .drawer-text {
-    background-color: #eef1f3;
-    writing-mode: vertical-rl; /* 从上到下，从右到左 */
-    text-orientation: upright; /* 保证文字不倒置 */
+    background: linear-gradient(180deg, #001529 0%, #002a5c 100%);
+    border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+    color: #ffffff;
+    writing-mode: vertical-rl;
+    text-orientation: upright;
     height: 100%;
-    // display: inline-block; /* 必须加，否则transform无效 */
-    // transform: rotate(90deg);
-    // transform-origin: left top; /* 设置旋转基准点，可根据需求调整 */
+    padding: 12px 8px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background: rgba(24, 144, 255, 0.18);
+    }
   }
 }
 
-/* 控制按钮 */
 .drawer-btn {
-  // padding: 6px 12px;
-  // background: #409eff;
-  color: #000;
+  color: #ffffff;
+  background: transparent;
   border: none;
   border-radius: 4px;
   cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
   transition: 0.2s;
 }
-.drawer-btn:hover {
-  background: #eef1f3;
-}
 
-/* 抽屉内容区 */
 .drawer-panel {
   width: 270px;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-  border: 1px #eef1f3 solid;
-  // padding: 10px;
+  background: var(--panel-bg, #000c17);
+  box-shadow: 0 0 16px rgba(0, 100, 255, 0.12);
+  border-radius: 4px;
+  border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
   height: 100%;
   transition: all 0.3s ease;
+  overflow: hidden;
+
   .titleBox {
     display: flex;
-    padding: 10px;
+    padding: 12px 14px;
     justify-content: space-between;
     align-items: center;
+    background: linear-gradient(90deg, #001529 0%, #002a5c 100%);
+    border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+    cursor: pointer;
+
+    .el-icon-s-fold {
+      color: #b7dff5;
+      font-size: 16px;
+    }
   }
 }
 
-/* 抽屉动画 */
 .drawer-slide-enter-active,
 .drawer-slide-leave-active {
   transition: all 0.3s ease;
 }
+
 .drawer-slide-enter,
 .drawer-slide-leave-to {
   opacity: 0;

src/views/performance/customAnalysis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content custom-analysis-page">
     <el-tabs
       ref="tabs"
       tab-position="left"
@@ -660,20 +660,42 @@ export default {
 .content {
   width: 100%;
   height: 88vh;
+  background: var(--content-bg, #000510);
+  color: #ffffff;
+
   ::v-deep .el-tabs__active-bar {
-    // height: 50px !important;
-    transition: transform 0.3s ease; // 添加过渡效果
+    transition: transform 0.3s ease;
+  }
+
+  ::v-deep .el-tabs--left .el-tabs__header {
+    background: var(--panel-bg, #000c17);
+    border-right: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
   }
+
   ::v-deep .el-tabs--left .el-tabs__item {
     height: 55px;
     line-height: 55px;
+    color: #b7dff5 !important;
+  }
+
+  ::v-deep .el-tabs--left .el-tabs__item.is-active {
+    color: #ffffff !important;
+    background: rgba(24, 144, 255, 0.18);
   }
+
   ::v-deep .el-tabs__item {
     padding: 0;
   }
+
+  ::v-deep .el-tabs__content {
+    height: 100% !important;
+    background: var(--content-bg, #000510);
+  }
+
   .popover-footer {
     text-align: right;
   }
+
   ::v-deep .iconFont {
     padding: 0 20px;
     width: 100% !important;
@@ -681,34 +703,37 @@ export default {
     display: inline-block;
   }
 
-  ::v-deep .el-tabs__content {
-    height: 100% !important;
-  }
   .chartsTab {
     width: 100%;
     height: 100%;
   }
+
   .el-tab-pane {
     height: 100%;
     overflow: scroll !important;
   }
+
   .demo-input-suffix {
     display: flex;
+
     .line {
       display: flex;
       justify-content: center;
+      color: #ffffff;
     }
   }
+
   .el-input--small {
-    // font-size: 13px;
     width: 190px !important;
   }
 }
+
 .uploadBoxContent {
   margin: 5px;
   display: flex;
-  flex-direction: 1;
+  flex: 1;
   align-items: center;
   cursor: pointer;
+  color: #ffffff;
 }
 </style>

src/views/system/userMag/index.vue

@@ -39,7 +39,6 @@
       <div class="newly">
         <el-button
           v-hasPermi="['system:users:add']"
-   
           @click="newnuedialog"
           size="small"
           >新增</el-button
@@ -47,7 +46,6 @@
       </div>
     </div>
     <div class="list-page">
-    
       <el-table
         v-loading="loading"
         class="center-align-table"
@@ -76,7 +74,12 @@
         </el-table-column>
         <el-table-column prop="state" align="center" label="状态" width="100">
           <template slot-scope="scope">
-            <span>
+            <span
+              :class="{
+                'dt-status-on': scope.row.state == 1,
+                'dt-status-off': scope.row.state == 0 || scope.row.state == 2,
+              }"
+            >
               {{
                 scope.row.state == 0
                   ? "停用"
@@ -663,7 +666,8 @@ export default {
     margin-bottom: 25px;
   }
 }
-.condition {display: flex;
-justify-content: space-between;
+.condition {
+  display: flex;
+  justify-content: space-between;
 }
 </style>

src/views/transition/index.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="kernel">
-    <el-collapse v-model="activeNames">
+  <div class="transition-page">
+    <el-collapse v-model="activeNames" class="transition-collapse">
       <el-collapse-item title="基础信息" name="1">
         <p @click="database" class="CPC">
-          数据入库风场统计数: <span>{{ windFarmCount }}</span
-          >个
+          数据入库风场统计数: <span>{{ windFarmCount || 0 }}</span>个
         </p>
 
-        <el-drawer title="入库统计" :visible.sync="drawer">
+        <el-drawer
+          title="入库统计"
+          :visible.sync="drawer"
+          custom-class="transition-drawer"
+        >
           <div class="card" v-for="(item, index) in Rklist" :key="index">
             <p>{{ item.windFarmName }}</p>
 
@@ -27,7 +30,12 @@
           </div>
         </el-drawer>
 
-        <el-dialog title="统计信息" :visible.sync="dialogVisible" width="50%">
+        <el-dialog
+          title="统计信息"
+          :visible.sync="dialogVisible"
+          width="50%"
+          custom-class="transition-dialog"
+        >
           <ul class="scrollable-list">
             <li v-for="(item, index) in dataset" :key="index">
               任务名称： <span>{{ item.taskName }}</span> 时间跨度：<span>{{
@@ -38,41 +46,49 @@
           </ul>
         </el-dialog>
 
-        <el-descriptions title="最新入库详情">
+        <el-descriptions
+          class="incoming-desc"
+          title="最新入库详情"
+          :column="4"
+          size="small"
+          border
+        >
           <el-descriptions-item label="任务名称">{{
-            this.incoming.taskName
+            incoming.taskName || "--"
           }}</el-descriptions-item>
           <el-descriptions-item label="数据类型">{{
-            this.incoming.transferTypeName
+            incoming.transferTypeName || "--"
           }}</el-descriptions-item>
-          <el-descriptions-item label="时间颗粒度"
-            >{{ this.incoming.timeGranularity }}(秒)</el-descriptions-item
-          >
-          <el-descriptions-item label="时间范围"
-            >{{ this.incoming.dataMinTime }}~{{
-              this.incoming.dataMaxTime
-            }}</el-descriptions-item
-          >
+          <el-descriptions-item label="时间颗粒度">
+            {{ incoming.timeGranularity ? `${incoming.timeGranularity}(秒)` : "--" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="时间范围">
+            {{
+              incoming.dataMinTime && incoming.dataMaxTime
+                ? `${incoming.dataMinTime}~${incoming.dataMaxTime}`
+                : "--"
+            }}
+          </el-descriptions-item>
           <el-descriptions-item label="风场名称">{{
-            this.incoming.windFarmName
+            incoming.windFarmName || "--"
           }}</el-descriptions-item>
           <el-descriptions-item label="机组数量">{{
-            this.incoming.engineCount
+            incoming.engineCount || "--"
           }}</el-descriptions-item>
           <el-descriptions-item label="入库时间">{{
-            this.incoming.transferFinishTime
+            incoming.transferFinishTime || "--"
           }}</el-descriptions-item>
           <el-descriptions-item label="收资人">{{
-            this.incoming.dataCollector
+            incoming.dataCollector || "--"
           }}</el-descriptions-item>
         </el-descriptions>
       </el-collapse-item>
     </el-collapse>
 
     <div class="condition">
-      <p>
-        风场名称：
-        <el-select v-model="windvalue" placeholder="请选择">
+      <div class="condition-item">
+        <span class="condition-label">风场名称</span>
+        <el-select v-model="windvalue" placeholder="请选择" size="small" clearable>
           <el-option
             v-for="item in windoptions"
             :key="item.fieldCode"
@@ -81,10 +97,10 @@
           >
           </el-option>
         </el-select>
-      </p>
-      <p>
-        导入类型：
-        <el-select v-model="typevalue" placeholder="请选择">
+      </div>
+      <div class="condition-item">
+        <span class="condition-label">导入类型</span>
+        <el-select v-model="typevalue" placeholder="请选择" size="small" clearable>
           <el-option
             v-for="item in typeoptions"
             :key="item.paramKey"
@@ -93,10 +109,10 @@
           >
           </el-option>
         </el-select>
-      </p>
-      <p>
-        导入状态:
-        <el-select v-model="statevalue" placeholder="请选择">
+      </div>
+      <div class="condition-item">
+        <span class="condition-label">导入状态</span>
+        <el-select v-model="statevalue" placeholder="请选择" size="small" clearable>
           <el-option
             v-for="item in stateoptions"
             :key="item.transferStatus"
@@ -105,16 +121,21 @@
           >
           </el-option>
         </el-select>
-      </p>
+      </div>
 
-      <div>
-        <el-button @click="query">查询</el-button>
-        <el-button @click="reset">重置</el-button>
-        <el-button @click="newtransition" type="primary">新增转换</el-button>
+      <div class="condition-actions">
+        <el-button size="small" @click="query">查询</el-button>
+        <el-button size="small" @click="reset">重置</el-button>
+        <el-button size="small" @click="newtransition" type="primary">新增转换</el-button>
       </div>
     </div>
 
-    <el-dialog title="转换" :visible.sync="transitionShow" width="30%">
+    <el-dialog
+      title="转换"
+      :visible.sync="transitionShow"
+      width="30%"
+      custom-class="transition-dialog"
+    >
       <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
         <el-form-item label="选择风场" prop="wind">
           <el-select v-model="form.wind" clearable placeholder="请选择风场">
@@ -156,6 +177,7 @@
         title="提交"
         :visible.sync="innerVisible"
         append-to-body
+        custom-class="transition-dialog"
       >
         <div class="renwu">
           <p>
@@ -171,7 +193,7 @@
       </el-dialog>
     </el-dialog>
 
-    <template>
+    <div class="table-section">
       <el-table :data="tableData" style="width: 100%">
         <el-table-column type="expand">
           <template slot-scope="props">
@@ -251,7 +273,7 @@
         layout="total, prev, pager, next"
         :total="total"
       ></el-pagination>
-    </template>
+    </div>
   </div>
 </template>
 
@@ -549,35 +571,108 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.CPC {
-  border: 1px solid #008080;
-  background: #00808057;
-  display: inline-block;
-  padding: 10px;
-  color: #000000;
-  border-radius: 5px;
-  cursor: pointer;
-}
-.kernel {
-  min-height: 100vh;
+.transition-page {
+  min-height: calc(100vh - 120px);
   width: 100%;
-  background: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-  padding: 0 40px;
+  padding: 12px 16px;
+  background: var(--panel-bg, #000c17);
+  color: #ffffff;
+  box-sizing: border-box;
+
+  ::v-deep .transition-collapse {
+    border-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+
+    .el-collapse-item__header {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 12px;
+      font-weight: 600;
+      font-size: 15px;
+      background: linear-gradient(90deg, #001529 0%, #002a5c 100%) !important;
+      color: #ffffff !important;
+      border-bottom-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+    }
 
-  h3 {
-    font-size: 40px;
-    font-weight: 600;
-    text-align: center;
+    .el-collapse-item__wrap {
+      background: transparent !important;
+      border-bottom-color: var(--panel-border, rgba(0, 170, 255, 0.35)) !important;
+    }
+
+    .el-collapse-item__content {
+      padding: 10px 12px 6px;
+      color: #ffffff;
+    }
+  }
+
+  .incoming-desc {
+    margin-top: 8px;
+
+    ::v-deep .el-descriptions__header {
+      margin-bottom: 8px;
+    }
+
+    ::v-deep .el-descriptions__title {
+      font-size: 14px;
+    }
+
+    ::v-deep .el-descriptions-item__cell {
+      padding: 6px 10px !important;
+    }
   }
 
   .condition {
     display: flex;
-    padding: 20px 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px 16px;
+    padding: 10px 0 8px;
+    margin-top: 4px;
+    border-bottom: 1px solid var(--panel-border, rgba(0, 170, 255, 0.25));
+  }
 
-    p {
-      margin-right: 20px;
-    }
+  .condition-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .condition-label {
+    color: var(--text-cyan, #b7dff5);
+    white-space: nowrap;
+    font-size: 14px;
+  }
+
+  .condition-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+  }
+
+  .table-section {
+    margin-top: 8px;
+  }
+}
+
+.CPC {
+  border: 1px solid rgba(0, 170, 255, 0.45);
+  background: rgba(0, 170, 255, 0.12);
+  display: inline-block;
+  padding: 6px 12px;
+  margin: 0 0 4px;
+  color: #ffffff;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.4;
+
+  span {
+    color: #00aaff;
+    font-weight: 600;
+  }
+
+  &:hover {
+    background: rgba(0, 170, 255, 0.22);
   }
 }
 
@@ -587,7 +682,7 @@ export default {
 
 .demo-table-expand label {
   width: 90px;
-  color: #99a9bf;
+  color: var(--text-cyan, #b7dff5);
 }
 
 .demo-table-expand .el-form-item {
@@ -596,39 +691,50 @@ export default {
   width: 50%;
 }
 
-::v-deep .el-collapse-item__header {
-  font-weight: 600;
-  font-size: 18px;
-}
-
 .fenye {
   display: flex;
   justify-content: center;
-  padding: 20px 0;
+  padding: 12px 0 4px;
 }
 .card {
-  margin: 10px 30px;
+  margin: 8px 16px;
   border-radius: 4px;
-  padding: 20px;
-  border: 1px solid #b3b3b3;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  padding: 12px 16px;
+  border: 1px solid var(--panel-border, rgba(0, 170, 255, 0.35));
+  background: rgba(0, 16, 32, 0.6);
+  color: #ffffff;
+  box-shadow: none;
+
   p {
     font-weight: 600;
-    font-size: 16px;
+    font-size: 15px;
+    margin: 0 0 8px;
   }
+
   ul {
-    padding-left: 10px;
+    padding-left: 0;
+    margin: 0;
+    list-style: none;
+
+    li {
+      padding: 6px 8px;
+      border-radius: 4px;
+    }
+
     li:hover {
-      background: #008080;
-      color: #fff;
+      background: rgba(0, 170, 255, 0.25);
+      color: #ffffff;
       cursor: pointer;
     }
+
     span {
       display: inline-block;
     }
+
     .sp1 {
       width: 120px;
     }
+
     .sp2 {
       width: 50px;
     }
@@ -702,32 +808,35 @@ export default {
 .scrollable-list {
   height: 400px;
   overflow-y: auto;
-  /* 其他样式 */
+  color: #ffffff;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
-/* 自定义滚动条 */
 .scrollable-list::-webkit-scrollbar {
-  width: 8px; /* 设置滚动条的宽度 */
+  width: 8px;
 }
 
 .scrollable-list::-webkit-scrollbar-track {
-  background: #f1f1f1; /* 设置滚动条轨道的背景颜色 */
+  background: rgba(0, 16, 32, 0.6);
   border-radius: 4px;
 }
 
 .scrollable-list::-webkit-scrollbar-thumb {
-  background: #888; /* 设置滚动条滑块的颜色 */
+  background: rgba(0, 170, 255, 0.35);
   border-radius: 4px;
 }
 
 .scrollable-list::-webkit-scrollbar-thumb:hover {
-  background: #555; /* 鼠标悬停时滑块的颜色 */
+  background: rgba(0, 170, 255, 0.55);
 }
 
-::v-deep .el-drawer__header > :first-child {
-  font-size: 18px;
-  font-weight: 800;
-  color: #000000;
+::v-deep .transition-drawer .el-drawer__header > :first-child,
+::v-deep .transition-dialog .el-dialog__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #ffffff;
 }
 
 .demo-table-expand {