From 86492f2e506fbd8e3ce1030a52145b63853ef821 Mon Sep 17 00:00:00 2001
From: ZhengMingKing <zhengmingking@163.com>
Date: Fri, 12 Jun 2026 23:39:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/components/config/index.vue        | 39 ++++++++++++++++-
 .../detail/components/trend/index.vue         | 43 +++++++++++++++++--
 .../detail/components/config/index.vue        | 39 ++++++++++++++++-
 .../detail/components/trend/index.vue         | 43 +++++++++++++++++--
 4 files changed, 152 insertions(+), 12 deletions(-)

diff --git a/src/view/equipment/list/components/detail/components/config/index.vue b/src/view/equipment/list/components/detail/components/config/index.vue
index a0011f8..8b769b4 100644
--- a/src/view/equipment/list/components/detail/components/config/index.vue
+++ b/src/view/equipment/list/components/detail/components/config/index.vue
@@ -3,8 +3,8 @@
     <div class="left">
       <div class="title">
         <span>线路列表</span>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
       </div>
       <div>
         <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -188,6 +188,41 @@
       }
     }
 
+    :deep(.switch-action-button.el-button--success.is-plain) {
+      --el-button-text-color: #34d399;
+      --el-button-border-color: rgba(52, 211, 153, 0.72);
+      --el-button-bg-color: rgba(6, 78, 59, 0.42);
+      --el-button-hover-text-color: #d1fae5;
+      --el-button-hover-border-color: rgba(52, 211, 153, 0.9);
+      --el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
+      --el-button-active-text-color: #d1fae5;
+      --el-button-active-border-color: rgba(52, 211, 153, 0.95);
+      --el-button-active-bg-color: rgba(16, 185, 129, 0.42);
+      box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
+    }
+
+    :deep(.switch-action-button.el-button--danger.is-plain) {
+      --el-button-text-color: #f87171;
+      --el-button-border-color: rgba(248, 113, 113, 0.72);
+      --el-button-bg-color: rgba(127, 29, 29, 0.42);
+      --el-button-hover-text-color: #fee2e2;
+      --el-button-hover-border-color: rgba(248, 113, 113, 0.9);
+      --el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
+      --el-button-active-text-color: #fee2e2;
+      --el-button-active-border-color: rgba(248, 113, 113, 0.95);
+      --el-button-active-bg-color: rgba(239, 68, 68, 0.42);
+      box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
+    }
+
+    :deep(.switch-action-button.is-disabled),
+    :deep(.switch-action-button.is-disabled:hover),
+    :deep(.switch-action-button.is-disabled:focus) {
+      color: rgba(226, 232, 240, 0.48) !important;
+      border-color: rgba(148, 163, 184, 0.3) !important;
+      background: rgba(15, 23, 42, 0.68) !important;
+      box-shadow: none;
+    }
+
     .line-item {
       display: grid;
       grid-template-columns: 52px minmax(0, 1fr) auto;
diff --git a/src/view/equipment/list/components/detail/components/trend/index.vue b/src/view/equipment/list/components/detail/components/trend/index.vue
index c7a4cce..092cfec 100644
--- a/src/view/equipment/list/components/detail/components/trend/index.vue
+++ b/src/view/equipment/list/components/detail/components/trend/index.vue
@@ -18,8 +18,8 @@
     <div class="left">
       <div class="title">
         <span>线路列表</span>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
       </div>
       <div>
         <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -101,10 +101,10 @@
           </div>
           <div class="other realtime-data-panel">
             <div class="realtime-actions">
-              <el-button :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
+              <el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
                 >合闸</el-button
               >
-              <el-button :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
+              <el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
                 >分闸</el-button
               >
             </div>
@@ -572,6 +572,41 @@
         }
       }
 
+      :deep(.switch-action-button.el-button--success.is-plain) {
+        --el-button-text-color: #34d399;
+        --el-button-border-color: rgba(52, 211, 153, 0.72);
+        --el-button-bg-color: rgba(6, 78, 59, 0.42);
+        --el-button-hover-text-color: #d1fae5;
+        --el-button-hover-border-color: rgba(52, 211, 153, 0.9);
+        --el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
+        --el-button-active-text-color: #d1fae5;
+        --el-button-active-border-color: rgba(52, 211, 153, 0.95);
+        --el-button-active-bg-color: rgba(16, 185, 129, 0.42);
+        box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
+      }
+
+      :deep(.switch-action-button.el-button--danger.is-plain) {
+        --el-button-text-color: #f87171;
+        --el-button-border-color: rgba(248, 113, 113, 0.72);
+        --el-button-bg-color: rgba(127, 29, 29, 0.42);
+        --el-button-hover-text-color: #fee2e2;
+        --el-button-hover-border-color: rgba(248, 113, 113, 0.9);
+        --el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
+        --el-button-active-text-color: #fee2e2;
+        --el-button-active-border-color: rgba(248, 113, 113, 0.95);
+        --el-button-active-bg-color: rgba(239, 68, 68, 0.42);
+        box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
+      }
+
+      :deep(.switch-action-button.is-disabled),
+      :deep(.switch-action-button.is-disabled:hover),
+      :deep(.switch-action-button.is-disabled:focus) {
+        color: rgba(226, 232, 240, 0.48) !important;
+        border-color: rgba(148, 163, 184, 0.3) !important;
+        background: rgba(15, 23, 42, 0.68) !important;
+        box-shadow: none;
+      }
+
       .line-item {
         display: grid;
         grid-template-columns: 52px minmax(0, 1fr) auto;
diff --git a/src/view/masterStation/equipment/components/detail/components/config/index.vue b/src/view/masterStation/equipment/components/detail/components/config/index.vue
index 26f000b..b99f835 100644
--- a/src/view/masterStation/equipment/components/detail/components/config/index.vue
+++ b/src/view/masterStation/equipment/components/detail/components/config/index.vue
@@ -3,8 +3,8 @@
     <div class="left">
       <div class="title">
         <span>线路列表</span>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
       </div>
       <div>
         <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -188,6 +188,41 @@
       }
     }
 
+    :deep(.switch-action-button.el-button--success.is-plain) {
+      --el-button-text-color: #34d399;
+      --el-button-border-color: rgba(52, 211, 153, 0.72);
+      --el-button-bg-color: rgba(6, 78, 59, 0.42);
+      --el-button-hover-text-color: #d1fae5;
+      --el-button-hover-border-color: rgba(52, 211, 153, 0.9);
+      --el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
+      --el-button-active-text-color: #d1fae5;
+      --el-button-active-border-color: rgba(52, 211, 153, 0.95);
+      --el-button-active-bg-color: rgba(16, 185, 129, 0.42);
+      box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
+    }
+
+    :deep(.switch-action-button.el-button--danger.is-plain) {
+      --el-button-text-color: #f87171;
+      --el-button-border-color: rgba(248, 113, 113, 0.72);
+      --el-button-bg-color: rgba(127, 29, 29, 0.42);
+      --el-button-hover-text-color: #fee2e2;
+      --el-button-hover-border-color: rgba(248, 113, 113, 0.9);
+      --el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
+      --el-button-active-text-color: #fee2e2;
+      --el-button-active-border-color: rgba(248, 113, 113, 0.95);
+      --el-button-active-bg-color: rgba(239, 68, 68, 0.42);
+      box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
+    }
+
+    :deep(.switch-action-button.is-disabled),
+    :deep(.switch-action-button.is-disabled:hover),
+    :deep(.switch-action-button.is-disabled:focus) {
+      color: rgba(226, 232, 240, 0.48) !important;
+      border-color: rgba(148, 163, 184, 0.3) !important;
+      background: rgba(15, 23, 42, 0.68) !important;
+      box-shadow: none;
+    }
+
     .line-item {
       display: grid;
       grid-template-columns: 52px minmax(0, 1fr) auto;
diff --git a/src/view/masterStation/equipment/components/detail/components/trend/index.vue b/src/view/masterStation/equipment/components/detail/components/trend/index.vue
index 1abccf6..0fb8fc0 100644
--- a/src/view/masterStation/equipment/components/detail/components/trend/index.vue
+++ b/src/view/masterStation/equipment/components/detail/components/trend/index.vue
@@ -18,8 +18,8 @@
     <div class="left">
       <div class="title">
         <span>线路列表</span>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
-        <el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
+        <el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
       </div>
       <div>
         <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -101,10 +101,10 @@
           </div>
           <div class="other realtime-data-panel">
             <div class="realtime-actions">
-              <el-button :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
+              <el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
                 >合闸</el-button
               >
-              <el-button :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
+              <el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
                 >分闸</el-button
               >
             </div>
@@ -574,6 +574,41 @@
         }
       }
 
+      :deep(.switch-action-button.el-button--success.is-plain) {
+        --el-button-text-color: #34d399;
+        --el-button-border-color: rgba(52, 211, 153, 0.72);
+        --el-button-bg-color: rgba(6, 78, 59, 0.42);
+        --el-button-hover-text-color: #d1fae5;
+        --el-button-hover-border-color: rgba(52, 211, 153, 0.9);
+        --el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
+        --el-button-active-text-color: #d1fae5;
+        --el-button-active-border-color: rgba(52, 211, 153, 0.95);
+        --el-button-active-bg-color: rgba(16, 185, 129, 0.42);
+        box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
+      }
+
+      :deep(.switch-action-button.el-button--danger.is-plain) {
+        --el-button-text-color: #f87171;
+        --el-button-border-color: rgba(248, 113, 113, 0.72);
+        --el-button-bg-color: rgba(127, 29, 29, 0.42);
+        --el-button-hover-text-color: #fee2e2;
+        --el-button-hover-border-color: rgba(248, 113, 113, 0.9);
+        --el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
+        --el-button-active-text-color: #fee2e2;
+        --el-button-active-border-color: rgba(248, 113, 113, 0.95);
+        --el-button-active-bg-color: rgba(239, 68, 68, 0.42);
+        box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
+      }
+
+      :deep(.switch-action-button.is-disabled),
+      :deep(.switch-action-button.is-disabled:hover),
+      :deep(.switch-action-button.is-disabled:focus) {
+        color: rgba(226, 232, 240, 0.48) !important;
+        border-color: rgba(148, 163, 184, 0.3) !important;
+        background: rgba(15, 23, 42, 0.68) !important;
+        box-shadow: none;
+      }
+
       .line-item {
         display: grid;
         grid-template-columns: 52px minmax(0, 1fr) auto;