优化DCTOM样式

src/theme.scss

@@ -268,20 +268,40 @@
     color: #36f1cd;
     border-color: #36f1cd;
   }
+  .search-btn-balck-theme:hover {
+    background-color: #36f1cc7c;
+    color: #36f1cd;
+    border-color: #36f1cd;
+  }
   .reset-btn-balck-theme {
     background-color: #4e7bfa33;
     color: #4e7bfa;
     border-color: #4e7bfa;
   }
+  .reset-btn-balck-theme:hover {
+    background-color: #4e7bfa7c;
+    color: #e8eaef;
+    border-color: #4e7bfa;
+  }
   .export-btn-balck-theme {
     background-color: #f5b83d33;
     color: #f5b83d;
     border-color: #f5b83d;
   }
+  .export-btn-balck-theme:hover {
+    background-color: #f5b83d7c;
+    color: #f5b83d;
+    border-color: #f5b83d;
+  }
   .cancel-btn-balck-theme {
     background-color: #8a898933;
     color: #8a8989;
-    border-color: #8a8989;
+    border-color: #5b4f4fbd;
+  }
+  .cancel-btn-balck-theme:hover {
+    background-color: #8a89897c;
+    color: #d2cfcf;
+    border-color: #a7a3a3;
   }
 }
 .green-color {
@@ -348,4 +368,14 @@
 .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: #36f1cd !important;
   border-color: #36f1cd !important;
+}
+
+.el-input-number.is-controls-right .el-input-number__decrease {
+  background-color: #181d21 !important;
+  border-left: 1px solid #434343 !important;
+}
+.el-input-number.is-controls-right .el-input-number__increase {
+  background-color: #181d21 !important;
+  border-bottom: 1px solid #434343 !important;
+  border-left: 1px solid #434343 !important;
 }
\ No newline at end of file

src/views/AboutView/AboutView.vue

@@ -143,7 +143,7 @@
       <template #footer>
         <span class="dialog-footer ">
           <el-button type="default" class="cancel-btn-balck-theme" @click="equDialog = false">取消</el-button>
-          <el-button type="default" class="reset-btn-balck-theme" @click="equPending(ruleFormRef)">
+          <el-button type="default" class="search-btn-balck-theme" @click="equPending(ruleFormRef)">
             确认
           </el-button>
         </span>

src/views/closeManage/components/dialog.vue

@@ -10,9 +10,9 @@
       <slot></slot>
     </div>
     <template #footer>
-      <div class="dialog-footer">
-        <el-button type="default" @click="closeDialog" class="reset-btn-balck-them">关闭</el-button>
-        <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="real-btn reset-btn-balck-them" :key="item.attrKey" @click="handleBtn(item.attrKey)">
+      <div class="dialog-footer all-select-btn">
+        <el-button type="default" @click="closeDialog" class="search-btn-balck-theme">关闭</el-button>
+        <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="reset-btn-balck-theme" :key="item.attrKey" @click="handleBtn(item.attrKey)">
           {{item.label}}
         </el-button>
       </div>
@@ -103,10 +103,5 @@ const handleSave = ()=> {
     margin-right: 16px;
     cursor: pointer;
   }
-  .reset-btn-balck-them {
-    background-color: #4e7bfa33;
-    color: #4e7bfa;
-    border-color: #4e7bfa;
-  }
 }
 </style>
\ No newline at end of file

src/views/dustOverview/components/addDustCollectorDialog.vue

 <template>
   <el-dialog :model-value="modelValue" :title="editData ? '编辑除尘器' : '新增除尘器'" width="500px" :close-on-click-modal="false"
     :close-on-press-escape="false" @update:model-value="cancel">
-    <div class="add-dust-form">
+    <div class="add-dust-form all-select-btn">
       <div class="form-item">
         <div class="selector-wrap">
           <el-select v-model="formData.dustType" placeholder="除尘器选择" style="width: 238px" filterable remote
@@ -9,7 +9,7 @@
             <el-option v-for="item in dustTypeOptions" :key="item.deviceNo" :label="item.deviceName"
               :value="item.deviceNo" />
           </el-select>
-          <el-button type="primary" size="default" @click="selectDustType">选择</el-button>
+          <el-button type="deafault" size="default" class="search-btn-balck-theme" @click="selectDustType">选择</el-button>
         </div>
       </div>
 
@@ -73,8 +73,8 @@
 
       <div class="form-footer">
 
-        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="submitForm">确认</el-button>
+        <el-button @click="cancel" class="cancel-btn-balck-theme">取消</el-button>
+        <el-button type="default" class="search-btn-balck-theme" @click="submitForm">确认</el-button>
       </div>
     </div>
   </el-dialog>

src/views/dustOverview/components/roomSettingDialog.vue

@@ -9,7 +9,7 @@
     @open="initializeState"
   >
     <el-form :model="roomForm" label-width="120px">
-      <el-form-item label="仓室数量">
+      <el-form-item label="仓室数量：">
         <el-input
           v-model="roomForm.totalRooms"
           controls-position="right"
@@ -17,7 +17,7 @@
           disabled
         />
       </el-form-item>
-      <el-form-item label="仓室分几排">
+      <el-form-item label="仓室分几排：">
         <el-input-number
           v-model="roomForm.rows"
           :min="0"
@@ -71,10 +71,11 @@
     </div>
 
     <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
+      <span class="dialog-footer all-select-btn">
+        <el-button @click="$emit('update:modelValue', false)" class="cancel-btn-balck-theme">取消</el-button>
         <el-button
-          type="primary"
+          type="default"
+          class="search-btn-balck-theme"
           @click="handleConfirm"
           :disabled="distributionDiff > 0"
         >
@@ -185,7 +186,7 @@ const handleConfirm = () => {
 
 .distribution-table {
   margin-top: 20px;
-  border-top: 1px solid #ebeef5;
+  border-top: 1px solid rgb(51, 50, 50);
   padding-top: 20px;
 }
 
@@ -220,6 +221,6 @@ const handleConfirm = () => {
 }
 
 :deep(.distribution-table .el-table--border .el-table__cell) {
-  border-right: 1px solid #ebeef5 !important;
+  // border-right: 1px solid #ebeef5 !important;
 }
 </style>

src/views/dustOverview/components/valveSettingDialog.vue

@@ -7,13 +7,13 @@
     :close-on-press-escape="false"
     @update:model-value="cancel"
   >
-    <div class="valve-setting">
+    <div class="valve-setting all-select-btn">
       <div class="setting-row">
         <div class="input-group">
           <span>电磁阀总数量：</span>
           <el-input v-model="valveForm.total" style="width: 120px" disabled />
         </div>
-        <el-button type="primary" @click="handleAverageDistribute"
+        <el-button type="default" class="search-btn-balck-theme" @click="handleAverageDistribute"
           >平均分布生成</el-button
         >
       </div>
@@ -95,8 +95,8 @@
 
     <template #footer>
       <span class="dialog-footer">
-        <el-button @click="cancel">取消</el-button>
-        <el-button type="primary" @click="handleConfirm" :disabled="!!errorMessage">
+        <el-button @click="cancel" class="cancel-btn-balck-theme">取消</el-button>
+        <el-button type="default" class="search-btn-balck-theme" @click="handleConfirm" :disabled="!!errorMessage">
           保存
         </el-button>
       </span>
@@ -340,7 +340,7 @@ const cancel = () => {
 
       span {
         white-space: nowrap;
-        color: #606266;
+        color: #a8abb2;
       }
     }
   }
@@ -369,7 +369,7 @@ const cancel = () => {
 
 .bagNum-table {
   margin-top: 20px;
-  border-top: 1px solid #ebeef5;
+  border-top: 1px solid #434343;
   padding-top: 20px;
 }
 
@@ -392,7 +392,7 @@ const cancel = () => {
   gap: 8px;
   min-height: 152px;
   padding: 12px;
-  background: #f5f7fa;
+  background: #000;
   border-radius: 4px;
 
   .valve-row {
@@ -403,16 +403,16 @@ const cancel = () => {
 
   .valve-cell {
     min-width: 41px;
-    background: white;
+    background: #181d21;
     padding: 4px 8px;
     border-radius: 4px;
     text-align: center;
-    border: 1px solid #dcdfe6;
+    border: 1px solid #434343;
     transition: all 0.3s;
     cursor: pointer;
     
     &.active-cell {
-      box-shadow: 0 0 10px 0 rgba(64, 158, 255, 0.8);
+      box-shadow: 0 0 10px 0 rgba(243, 244, 245, 0.8);
       transform: scale(1.05);
     }
 
@@ -427,7 +427,7 @@ const cancel = () => {
       justify-content: center;
       align-items: baseline;
       font-size: 16px;
-      color: #606266;
+      color: #a8abb2;
       span {
         font-size: 12px;
         line-height: 18px;

src/views/dustOverview/index.vue

 <template>
-  <div class="page-container dust-container">
+  <div class="page-container dust-container all-select-btn">
     <div class="header">
       <div class="item-box crusor-click" @click="handleDusterLeakNumClick">
         <img src="@/assets/icons/warn.png" alt="dust" />
@@ -56,15 +56,15 @@
           </el-form-item>
 
           <el-form-item>
-            <el-button type="default" class="default-btn" @click="refreshData"
+            <el-button type="default" class="reset-btn-balck-theme" @click="refreshData"
               >重置</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-button
-              type="success"
-              class="add-btn"
+              type="default"
+              class="export-btn-balck-theme"
               @click="handleAddDustCollector"
               >新增</el-button
             >
@@ -645,7 +645,7 @@ onBeforeUnmount(() => {});
         .el-input__inner {
           // background-color: #242a30;
           border-color: #2c3136;
-          color: #fff;
+          color: #a8abb2;
         } 
       }
     }
@@ -754,7 +754,7 @@ onBeforeUnmount(() => {});
     .el-textarea__inner {
       background-color: #181d21;
       border-color: #2c3136;
-      color: #fff;
+      color: #a8abb2;
     }
   }
 
@@ -774,8 +774,11 @@ onBeforeUnmount(() => {});
   :deep(.el-input-number.el-input-number--small) {
     width: 130px;
   }
-  :deep(.distribution-table .el-table--border .el-table__cell) {
-    border-right: 1px solid #ebeef5 !important;
+  // :deep(.distribution-table .el-table--border .el-table__cell) {
+  //   // border-right: 1px solid #ebeef5 !important;
+  // }
+  :deep(.distribution-table  .el-table .el-table__row td) {
+    color: #a8abb2;
   }
 
   .valve-setting {
@@ -833,7 +836,7 @@ onBeforeUnmount(() => {});
           .el-input__inner {
             background-color: #181d21;
             border-color: #2c3136;
-            color: #fff;
+            color: #a8abb2;
           }
         }
       }

src/views/equipmentManagement/components/paramsSetings.vue

 <template>
-  <div class="container el-self-container" v-if="dialogVisible">
+  <div class="container el-self-container all-select-btn" v-if="dialogVisible">
     <div class="close-box" @click="cancelFun">
       <el-icon size="25"><Close /></el-icon>
     </div>
@@ -129,8 +129,8 @@
 
     <!-- 操作按钮 -->
     <div class="button-group">
-      <button class="btn btn-confirm" @click="confirmFun">确认</button>
-      <button class="btn btn-cancel" @click="cancelFun">取消</button>
+      <button class="btn search-btn-balck-theme" @click="confirmFun">确认</button>
+      <button class="btn cancel-btn-balck-theme" @click="cancelFun">取消</button>
     </div>
   </div>
   <div class="mask" v-if="dialogVisible" @click="cancelFun"></div>
@@ -390,7 +390,7 @@ body {
   font-size: 1.8rem;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
-  border-bottom: 2px solid rgb(51 50 50);
+  border-bottom: 1px solid #434343;
 }
 
 .grid-container {
@@ -412,7 +412,7 @@ body {
   align-items: center;
   margin: 0.5rem 0;
   padding: 0.4rem 0.4rem 0.4rem 0.4rem;
-  background: rgb(51 50 50);
+  background-color: #181d21;
   border-radius: 6px;
   height: 35px;
 }