样式修改

src/components/commonTable/index.vue

@@ -224,21 +224,3 @@ watch(
   }
 }
 </style>
-
-<style lang="scss">
-.el-table__header,
-.el-table__body {
-  width: 100% !important;
-}
-
-.el-table__header th { user-select: none; }
-
-.el-table {
-  // 设置表头样式
-  th.el-table__cell {
-    background-color: #f5f7fa !important;
-    color: #606266;
-    font-weight: 600;
-  }
-}
-</style>

src/css/elementUiSelf.css

 :root {
-    --table-border-color: #c6dae0;
+    --table-border-color: #434343;
     --table-head-bg-color: #fafafa;
     --table-item-border-color: #ebeef5;
 }

src/theme.scss

 .el-form-item__label {
-    font-size: 14px;
-    color: #909399 !important;
+  font-size: 14px;
+  color: #909399 !important;
 }
 
 .el-select {
   width: 230px;
+
   .el-select__placeholder {
     color: #d9dbdc !important;
   }
 
   .el-select__wrapper {
     background-color: var(--bg-secondary) !important;
-    box-shadow: 0 0 0 1px #2a2a2a inset !important;
+    box-shadow: 0 0 0 1px #434343 inset !important;
   }
+
   .el-input {
     background-color: var(--bg-secondary);
 
@@ -44,28 +46,30 @@
   }
 }
 
-.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before {
-    background: var(--bg-secondary) !important;
-    border: 1px solid var(--bg-secondary) !important;
+.el-popper.is-light,
+.el-popper.is-light>.el-popper__arrow:before {
+  background: var(--bg-secondary) !important;
+  border: 1px solid var(--bg-secondary) !important;
 }
 
 .el-select-dropdown__item.is-hovering {
-    background-color: rgba(255, 255, 255, 0.1) !important;
+  background-color: rgba(255, 255, 255, 0.1) !important;
 }
 
 .el-select-dropdown__item {
-    color: #d9dbdc;
+  color: #d9dbdc;
 
-    &.selected {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
+  &.selected {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.05);
-    }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
   }
-  .el-select-dropdown__item.is-hovering {
-    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.el-select-dropdown__item.is-hovering {
+  background-color: rgba(255, 255, 255, 0.1);
 }
 
 .el-popper__arrow {
@@ -73,37 +77,41 @@
 }
 
 .el-range-editor {
-    background-color: var(--bg-secondary) !important;
-    border-color: var(--bg-secondary) !important;
-    .el-range__icon {
-      display: none !important;
-    }
-    .el-range-input {
-      color: #d9dbdc !important;
-      background-color: transparent !important;
-      font-size: 15px !important;
+  background-color: var(--bg-secondary) !important;
+  border-color: var(--bg-secondary) !important;
 
-      &::placeholder {
-        color: rgba(255, 255, 255, 0.5) !important;
-      }
-    }
+  .el-range__icon {
+    display: none !important;
+  }
 
-    .el-range-separator {
-      color: rgba(255, 255, 255, 0.7) !important;
+  .el-range-input {
+    color: #d9dbdc !important;
+    background-color: transparent !important;
+    font-size: 15px !important;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5) !important;
     }
   }
 
-.el-icon {
+  .el-range-separator {
     color: rgba(255, 255, 255, 0.7) !important;
   }
+}
 
+.el-icon {
+  color: rgba(255, 255, 255, 0.7) !important;
+}
 
-  .el-date-editor.el-input__wrapper {
-    box-shadow: 0 0 0 1px #2a2a2a inset !important;
+
+.el-date-editor.el-input__wrapper {
+  box-shadow: 0 0 0 1px #434343 inset !important;
 }
-  .el-popper.is-light {
-    border: 1px solid #181d21 !important;
-  }
+
+.el-popper.is-light {
+  border: 1px solid #181d21 !important;
+}
+
 .date-picker-popper {
   border: 1px solid #181d21 !important;
   box-shadow: #181d21 !important;
@@ -112,6 +120,7 @@
     background: #00000040;
     box-shadow: 0 0 0 2px #181d21 inset !important;
   }
+
   .el-input__wrapper {
     box-shadow: 0 0 0 1px #535252 inset !important;
   }
@@ -119,12 +128,15 @@
   .el-date-range-picker__time-header {
     border-bottom: 1px solid #8a9199 !important;
   }
+
   .el-picker-panel {
     color: #d9dbdc !important;
   }
+
   .el-picker-panel__body {
     background: #181d21;
   }
+
   .el-date-range-picker__content.is-left {
     border-right: 1px solid #181d21 !important;
   }
@@ -132,62 +144,151 @@
   .el-date-table th {
     border-bottom: 1px solid #181d21 !important;
   }
+
   .el-date-table th {
     color: #d9dbdc !important;
   }
+
   .el-date-table td.in-range .el-date-table-cell {
     background-color: #181d21 !important;
   }
+
   .el-date-editor .el-range__icon,
   .el-date-editor .el-range-separator,
   .el-date-editor .el-range-input {
     color: #d9dbdc !important;
     font-size: 14px !important;
   }
+
   .el-picker-panel__footer {
     background-color: #181d21 !important;
     border-top-color: #181d21 !important;
   }
+
   .el-input__wrapper {
     background-color: #181d21 !important;
   }
+
   .el-button.is-text {
     color: #d9dbdc !important;
   }
+
   .el-button.is-plain {
     color: #4e7bfa !important;
     background-color: rgba(78, 123, 250, 0.2) !important;
     border-color: #4e7bfa !important;
   }
+
   .el-button.is-text:not(.is-disabled):hover {
     background-color: #9b9a9a !important;
-}
+  }
+
   .el-select__wrapper {
     background-color: #181d21 !important;
   }
+
   .el-input__inner {
     color: #d9dbdc !important;
   }
+
   .el-picker-panel .el-time-panel {
     background-color: #181d21 !important;
     border-color: #181d21 !important;
   }
+
   .el-time-panel__footer {
     border-color: #181d21 !important;
   }
+
   .el-time-spinner__item.is-active:not(.is-disabled) {
     color: #d9dbdc !important;
   }
+
   .el-select-dropdown {
     background-color: #181d21 !important;
   }
+
   .el-select-dropdown__item {
     color: #d9dbdc !important;
   }
+
   .el-select-dropdown__item .is-hovering {
     color: #181d21 !important;
   }
+
   .date-picker-popper .el-picker-panel__body {
     background-color: #181d21 !important;
   }
+}
+
+.el-table__header,
+.el-table__body {
+  width: 100% !important;
+}
+
+.el-table__header th {
+  user-select: none;
+}
+
+.el-table {
+
+  // 设置表头样式
+  th.el-table__cell {
+    background-color: #181D21 !important;
+    color: #dce0e4;
+    font-weight: 600;
+    border-bottom: 1px solid #434343 !important;
+    border-right: 1px solid #434343 !important;
+  }
+
+  td.el-table__cell {
+    background-color: #181D21 !important;
+    color: #c5c8cc;
+    border-bottom: 1px solid #434343 !important;
+    border-right: 1px solid #434343 !important;
+  }
+
+  .el-table__border-left-patch,
+  .el-table__inner-wrapper:after,
+  .el-table__inner-wrapper:before {
+    background-color: #434343 !important;
+  }
+
+  .el-table__body-wrapper {
+    background-color: #181D21;
+  }
+}
+.el-table--border:after {
+  background-color: #434343 !important;
+}
+
+.all-select-btn {
+  .search-btn-balck-theme {
+    background-color: #36f1cd33;
+    color: #36f1cd;
+    border-color: #36f1cd;
+  }
+  .reset-btn-balck-theme {
+    background-color: #4e7bfa33;
+    color: #4e7bfa;
+    border-color: #4e7bfa;
+  }
+  .export-btn-balck-theme {
+    background-color: #f5b83d33;
+    color: #f5b83d;
+    border-color: #f5b83d;
+  }
+}
+.green-color {
+  color: #36f1cd !important;
+}
+.black-theme {
+  background-color: #181D21 !important;
+}
+
+.el-input {
+  .el-input__wrapper {
+    background-color: #181d21 !important;
+    box-shadow: 0 0 0 1px #434343 inset !important;
+  }
 }
\ No newline at end of file

src/views/equipmentManagement/components/paramsSetings.vue

 <template>
-  <div class="container" v-if="dialogVisible">
+  <div class="container el-self-container" v-if="dialogVisible">
     <div class="close-box" @click="cancelFun">
       <el-icon size="25"><Close /></el-icon>
     </div>
@@ -374,6 +374,7 @@ body {
   padding: 0.8rem 1.2rem 1.2rem;
   z-index: 100;
   // overflow-y: auto;
+  background: #181d21;
   .content-box {
     overflow: auto;
     height: 55vh;
@@ -385,11 +386,11 @@ body {
 
 
 .title {
-  color: #3b82f6;
+  color: #fff;
   font-size: 1.8rem;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
-  border-bottom: 2px solid #e2e8f0;
+  border-bottom: 2px solid rgb(51 50 50);
 }
 
 .grid-container {
@@ -402,6 +403,7 @@ body {
   padding: 0.5rem 1rem;
   background: #f8fafc;
   border-radius: 8px;
+  background: #00000080;
 }
 
 .setting-row {
@@ -410,7 +412,7 @@ body {
   align-items: center;
   margin: 0.5rem 0;
   padding: 0.4rem 0.4rem 0.4rem 0.4rem;
-  background: white;
+  background: rgb(51 50 50);
   border-radius: 6px;
   height: 35px;
 }
@@ -425,7 +427,7 @@ body {
 }
 
 .label {
-  color: #64748b;
+  color: #fff;
   font-weight: 500;
   font-size: 15px;
   min-width: 130px;
@@ -564,20 +566,20 @@ input[type="checkbox"] {
 }
 
 .btn-confirm {
-  background: #3b82f6;
-  color: white;
+  background: #4e7bfa4d;
+  color: #437bfa;
 }
 .btn-confirm:hover {
-  background: #0e53c2;
+  background: #4e7cfa88;
 }
 
 .btn-cancel {
-  background: #e2e8f0;
-  color: #64748b;
+  background: #8a89894d;
+  color: #fff;
 }
 
 .btn-cancel:hover {
-  background: #b2c3da;
+  background: #8a89899d;
 }
 
 .highlight {
@@ -589,4 +591,27 @@ input[type="checkbox"] {
   right: 20px;
   cursor: pointer;
 }
+</style>
+<style>
+.el-self-container .el-input__wrapper{
+  background: #181D21;
+  box-shadow: 0 0 0 1px #697b78b6;
+}
+.el-self-container .el-input__inner {
+  color: #fff;
+}
+.el-self-container .el-select__wrapper  {
+  color: #fff;
+  background: #181D21;
+  box-shadow: 0 0 0 1px #697b78b6 !important;
+}
+.el-self-container .el-textarea__inner  {
+  color: #fff;
+  background: #181D21;
+  box-shadow: 0 0 0 1px #697b78b6 !important;
+  border: 1px solid #697b78b6 !important;
+}
+.el-self-container .device-label {
+  color: #fff;
+}
 </style>
\ No newline at end of file

src/views/equipmentManagement/index.vue

 <template>
-  <div class="equipment-management">
+  <div class="equipment-management black-theme all-select-btn">
     <div class="search">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="工序">
@@ -48,12 +48,12 @@
         </el-form-item>
 
         <el-form-item>
-          <el-button type="default" class="default-btn" @click="onReset"
+          <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
             >重置</el-button
           >
           <el-button
-            type="primary"
-            class="search-btn margin-right-10"
+            type="default"
+            class="search-btn-balck-theme margin-right-10"
             @click="onQuery"
             >查询</el-button
           >
@@ -70,14 +70,14 @@
               token: getToken('TOKEN'),
             }"
           >
-            <el-button type="success" class="add-btn margin-right-10"
+            <el-button type="default" class="export-btn-balck-theme margin-right-10"
               >导入</el-button
             >
           </el-upload>
-          <el-button type="success" class="add-btn" @click="onExportFile"
+          <el-button type="default" class="export-btn-balck-theme" @click="onExportFile"
             >导出</el-button
           >
-          <el-button type="success" class="add-btn" @click="onDownloadTemplate"
+          <el-button type="default" class="export-btn-balck-theme" @click="onDownloadTemplate"
             >模板下载</el-button
           >
         </el-form-item>
@@ -104,7 +104,7 @@
         </template>
 
         <template #operation="{ row }">
-          <el-button text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)"> 参数设置 </el-button>
+          <el-button class="green-color" text @click="getParamsConfig(row)" v-if="[10001, 10002].includes(row.deviceTypeId)"> 参数设置 </el-button>
         </template>
       </common-table>
     </div>

src/views/equipmentManagement/suspendManagement/suspendManagement.vue

 <template>
-  <div class="page-container collectorList">
+  <div class="page-container collectorList all-select-btn">
     <div class="content-box">
       <div class="search">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
@@ -35,10 +35,10 @@
           </el-form-item>
 
           <el-form-item>
-            <el-button type="default" class="default-btn" @click="onReset"
+            <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
               >重置</el-button
             >
-            <el-button type="primary" class="search-btn" @click="onSubmit"
+            <el-button type="default"  class="search-btn-balck-theme" @click="onSubmit"
               >查询</el-button
             >
           </el-form-item>
@@ -64,7 +64,7 @@
             {{ getIndex($index) }}
           </template>
           <template #operate="{ row }">
-            <span class="health-score" @click="linkTo(row)">挂起期间告警</span>
+            <span class="health-score green-color" @click="linkTo(row)">挂起期间告警</span>
           </template>
           <!-- <template #operation="{ row }">
             <span class="view-btn" @click="handleView(row)">详情</span>