8.9改变主题色

public/static/black.css

@@ -101,4 +101,6 @@ background-color: #757070;
     .text_color{
       color: #d5d5d5;
     }
-    
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+      color: #fff;
+    }

public/static/white.css

@@ -64,4 +64,7 @@
       }
       .text_color{
         color: #747474;
+      }
+      .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
+        color: #000;
       }

src/layout/index.vue

@@ -28,8 +28,21 @@
               
               <li  class="text_color"><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
               <li class="text_color"><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
-              <li class="text_color" @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>
-
+              <!-- <li class="text_color" @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li> -->
+              <li>
+                  <el-tooltip :content="'Switch value: ' + switchvalue" placement="top">
+                <el-switch class="tableScopeSwitch"
+                @change="switchange()"
+                  v-model="switchvalue"
+                  　active-text="夜晚"
+        　　      inactive-text="白天"
+                  active-color="#efefef"
+                  inactive-color="#000"
+                  active-value="1"
+                  inactive-value="0">
+                </el-switch>
+              </el-tooltip>
+              </li>
               <li class="text_color">
                 <span >  <i class="el-icon-question" style="padding:1px 0"></i>
                 <i style="font-size:12px;padding:5px 0" class="el-icon-arrow-down"></i>
@@ -160,6 +173,7 @@ export default {
       registerShow: false,
       forgetShow: false,
       currentMenu: '',
+      switchvalue:"1",
           itemlist:[
      {
        id:0,name:"黑色",
@@ -181,10 +195,10 @@ export default {
   },
   mounted(){
  setTimeout(function(){
-if(localStorage.getItem("num")==0){
-        document.getElementById('theme').href="/static/black.css"
+ if(localStorage.getItem("switchnum")==0){
+            document.getElementById('theme').href="/static/white.css"
       }else{
-         document.getElementById('theme').href="/static/white.css"
+          document.getElementById('theme').href="/static/black.css"
       }
  },100)
 },
@@ -332,20 +346,32 @@ if(localStorage.getItem("num")==0){
     },
   
        //  主题替换
-  clicksel(index){
-      if(index==0){
-        this.num=index;
-      localStorage.setItem("num",this.num);
-        document.getElementById('theme').href="/static/black.css"
-      }else if(index==1){
-           console.log(222)
-         this.num=1;
-            localStorage.setItem("num",this.num);
-         document.getElementById('theme').href="/static/white.css"
+        switchange(){
+    console.log(this.switchvalue);
+      if(this.switchvalue==0){
+         localStorage.setItem("switchnum",this.switchvalue);
+       document.getElementById('theme').href="/static/white.css"
+      }else if(this.switchvalue==1){
+         localStorage.setItem("switchnum",this.switchvalue);
+          document.getElementById('theme').href="/static/black.css"
       }else{
 
       }
     },
+  // clicksel(index){
+  //     if(index==0){
+  //       this.num=index;
+  //     localStorage.setItem("num",this.num);
+  //       document.getElementById('theme').href="/static/black.css"
+  //     }else if(index==1){
+  //          console.log(222)
+  //        this.num=1;
+  //           localStorage.setItem("num",this.num);
+  //        document.getElementById('theme').href="/static/white.css"
+  //     }else{
+
+  //     }
+  //   },
   },
 }
 </script>
@@ -545,8 +571,44 @@ if(localStorage.getItem("num")==0){
 }
 </style>
 <style>
+.tableScopeSwitch .el-switch__label {
+    position: absolute;
+    display: none;
+    color: #fff;
+}
+/*打开时文字位置设置*/
+.tableScopeSwitch .el-switch__label--right {
+    z-index: 1;
+    right:-5px;    /*不同场景下可能不同，自行调整*/
+ 
+}
+/*关闭时文字位置设置*/
+.tableScopeSwitch .el-switch__label--left {
+    z-index: 1;
+    left: 20px;    /*不同场景下可能不同，自行调整*/
+
+}
+.tableScopeSwitch .el-switch__label--right span{
+      color:#000;
+      line-height: 1.4;
+}
+.tableScopeSwitch .el-switch__label--left span{
+    color:#fff;
+    line-height: 1.4;
+}
+/*显示文字*/
+.tableScopeSwitch .el-switch__label.is-active {
+    display: block;
+}
+.tableScopeSwitch.el-switch .el-switch__core,
+.el-switch .el-switch__label {
+    width: 56px !important;    /*开关按钮的宽度大小*/
+}
 p{
   padding: 0;
   margin: 0;
 }
+.el-switch{
+      margin-top: -3px;
+}
 </style>