From 07958c244e49e561718b97cac6a7168eeb61b5e7 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 20 十月 2021 10:32:23 +0800
Subject: [PATCH] 系统监控bug修复

---
 src/pages/settings/components/switchBar.vue |   62 ++++++++++++++++++------------
 1 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/pages/settings/components/switchBar.vue b/src/pages/settings/components/switchBar.vue
index 08aa53f..831d56c 100644
--- a/src/pages/settings/components/switchBar.vue
+++ b/src/pages/settings/components/switchBar.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="switch-bar">
     <div class="name">{{ barName }}</div>
-    <el-switch v-model="value" active-color="#4e94ff" @change="switchChange">
+    <el-switch
+      v-model="value"
+      active-color="var(--colorCard)"
+      :width="30"
+      @change="switchChange"
+    >
     </el-switch>
   </div>
 </template>
@@ -23,33 +28,40 @@
   height: 50px;
   padding: 0 25px;
   justify-content: space-between;
-  border-radius: 12px;
-  margin-bottom: 10px;
-  .el-switch {
-    display: inline-flex;
-    align-items: center;
+border-radius: 8px;
+
+  margin-bottom: 4px;
+  .el-switch.is-checked .el-switch__core::after {
+    left: 100%;
+    margin-left: -12px;
+  }
+
+  .el-switch__core {
+    margin: 0;
     position: relative;
-    font-size: 14px;
-    line-height: 14px;
+    width: 40px;
     height: 14px;
+    border: 1px solid #dcdfe6;
+    outline: 0;
+    border-radius: 10px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: #dcdfe6;
+    -webkit-transition: border-color 0.3s, background-color 0.3s;
+    transition: border-color 0.3s, background-color 0.3s;
     vertical-align: middle;
-    .el-switch__core {
-      width: 30px !important;
-      height: 14px;
-      border: 1px solid #E0E0E0;
-      border-radius: 20px;
-      background: #E0E0E0;
-    }
-    .el-switch__core:after {
-      top: 0px;
-      left: -1px;
-      width: 12px;
-      height: 12px;
-      background-color: #fff;
-    }
-    .el-switch.is-checked .el-switch__core::after {
-      margin-left: -10px;
-    }
+  }
+  .el-switch__core:after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border-radius: 100%;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
   }
   .name {
     font-size: 12px;

--
Gitblit v1.8.0