开关按钮样式美化调整，相关开关变量设置完善

src/views/system/followup/index.vue

@@ -197,9 +197,12 @@
           v-if="queryParams.nodeExecuteStatus == 'UNEXECUTED'"
         >
           <el-switch
+           class="switchStyle"
             v-model="timeSignshow"
             active-color="#1890ff"
-            inactive-color="#DCDFE6"
+            inactive-color="#5AC1A1"
+            active-text="全部"
+            inactive-text="待办"
             @change="changeswitch"
           />
         </el-form-item>
@@ -509,7 +512,7 @@ export default {
       // 是否显示弹出层
       open: false,
       // 查询参数
-      timeSignshow: true,
+      timeSignshow: false,
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -582,11 +585,11 @@ export default {
   methods: {
     changeswitch(e) {
       if (e == true) {
-        this.queryParams.timeSign = 'TODAY'
+        this.queryParams.timeSign = 'WHOLE'
         this.getList()
 
       } else {
-        this.queryParams.timeSign = 'WHOLE'
+        this.queryParams.timeSign = 'TODAY'
         this.getList()
       }
     },
@@ -867,7 +870,7 @@ export default {
         departmentId: null,
         wardId: null,
       }
-        this.timeSignshow = true
+        this.timeSignshow = false
       } else {
         this.queryParams = {
         pageNum: 1,
@@ -1044,11 +1047,62 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-::v-deep .el-table {
-  overflow: auto;
-}
+    ::v-deep .el-table {
+      overflow: auto;
+    }
 
-.app-container {
-  padding-top: 0 !important;
-}
+    .app-container {
+      padding-top: 0 !important;
+    }
+
+
+
+    // :deep(.el-switch) {
+    //   position: relative;
+    //   user-select: none;
+
+    //   .el-switch__core {
+    //     width: 45px !important;
+    //   }
+
+    //   &.is-checked .el-switch__label {
+    //     position: absolute;
+    //     top: 0px;
+    //     left: -3px;
+    //     color: #fff;
+    //   }
+
+    //   .el-switch__label {
+    //     position: absolute;
+    //     top: 0px;
+    //     left: 10px;
+    //     color: #fff;
+    //   }
+    // }
+
+    ::v-deep .el-switch
+    { 
+          .el-switch__label {
+          position: absolute !important;
+           display: none;
+           color: #fff;
+        }
+
+         .el-switch__label--left {
+          z-index: 9 !important;
+          left: 20px !important;
+        }
+         .el-switch__label--right {
+          z-index: 9;
+          left: -3px;
+        }
+        .el-switch__label.is-active {
+          display: block  !important;
+          color: #fff;
+        }
+       .el-switch__core,
+         .el-switch__label {
+          width: 60px !important;
+        }
+    }
 </style>