4.22

public/static/black.css

@@ -0,0 +1,42 @@
+.lbg_color1 {
+background-color: #757070;    
+
+}
+
+.lbg_color2{
+    background-color: #333;  
+}
+.lbg_color3{
+    background-color: #535353;  
+}
+.font_color1{
+  color: #fff;  
+}
+.el-menu-item a{
+    color: #fff;  
+}
+/* input */
+.scal .textselsect .el-input__inner{
+    background-color:#757070;
+     border-radius: 0;
+     border: none;
+     color: #d5d5d5;
+     height: 25px;
+     line-height: 25px;
+     
+   }
+  .el-input__icon{
+     line-height:25px;
+   }
+/* 表格 */
+.el-table td, .el-table th.is-leaf{
+    color: #d5d5d5;
+   background-color:#333;
+   
+  }
+ .el-table td, .el-table th.is-leaf{
+ border-bottom: 1px solid #666;
+ }
+ .el-table--enable-row-hover .el-table__body tr:hover>td{
+ background-color: #666 !important;
+ }

public/static/white.css

@@ -0,0 +1,36 @@
+.lbg_color1 {
+    background-color: #ffffff;    
+    
+    }
+    .lbg_color2{
+        background-color: #fdfdfd;  
+    }
+    .lbg_color3{
+        background-color: #eeeeee;  
+    }
+    /* input 框*/
+    /* input */
+.scal .textselsect .el-input__inner{
+    background-color:#ffffff;
+     border-radius: 0;
+     border: none;
+     color: #d5d5d5;
+     height: 25px;
+     line-height: 25px;
+     
+   }
+  .el-input__icon{
+     line-height:25px;
+   }
+   /* /* 表格 */
+.el-table td, .el-table th.is-leaf{
+    color: #333;
+   background-color:#fff;
+   
+  }
+ .el-table td, .el-table th.is-leaf{
+ border-bottom: 1px solid #eee;
+ }
+ .el-table--enable-row-hover .el-table__body tr:hover>td{
+ background-color: #666 !important;
+ } 

src/App.vue

@@ -7,7 +7,15 @@
 
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+    mounted: function () {
+        var link = document.createElement('link');
+      link.type = 'text/css';
+      link.id = "theme";  
+      link.rel = 'stylesheet';
+      link.href = './static/css/theme-default.css';
+      document.getElementsByTagName("head")[0].appendChild(link);
+    },
 }
 </script>
 

src/layout/index.vue

@@ -1,7 +1,7 @@
 /*layout模板*/
 <template>
   <div>
-    <div :class="['header',fixedHeader?'fixed-header':'']">
+    <div class="lbg_color1" :class="['header',fixedHeader?'fixed-header':'']">
   
            <router-link to="/home">
         <div class="logo">
@@ -13,6 +13,7 @@
         v-if="$route.path!='/login/index' && $route.path!='/register/index' && $route.path!='/forget/index'&& $route.path!='/protocol/index'"
       >
         <el-menu
+         class="lbg_color1 font_color1" 
           mode="horizontal"
           :unique-opened="true"
           text-color="#0470CC"
@@ -22,9 +23,9 @@
           <div class="headericon">
             <ul>
               
-              <li><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
-              <li><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
-              <li><el-tooltip class="item" effect="dark" content="设置" placement="bottom"><i class="el-icon-s-tools"></i>  </el-tooltip></li>
+              <li ><el-tooltip class="item" effect="dark" content="任务" placement="bottom"><i class="el-icon-s-fold"></i>  </el-tooltip> </li> 
+              <li ><el-tooltip class="item" effect="dark" content="团队" placement="bottom"><i class="el-icon-s-custom"></i>  </el-tooltip></li>
+              <li  @click="dialogsystem=true"><i class="el-icon-s-tools"></i></li>
 
               <li>
                 <span >  <i class="el-icon-question" style="padding:1px 0"></i>
@@ -78,6 +79,19 @@
         >备案号：渝ICP备 17006571号-1</a>
       </div>
     </div>
+      <el-dialog
+  :visible.sync="dialogsystem"
+  title="系统设置"
+  width="800px"
+  >
+  <div>
+   <button v-for="(item,index) in itemlist" :key='index'  @click="clicksel(index)">{{item.name}}</button>
+    </div>
+    <!-- <span :data-theme='theme'></span> -->
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogsystem = false">清 除</el-button>
+  </span>
+</el-dialog>
   </div>
 </template>
 
@@ -94,7 +108,17 @@ export default {
   },
   data() {
     return {
-      logo: logo
+     logo: logo,
+      dialogsystem:false,
+        itemlist:[
+     {
+       id:0,name:"黑色",
+     },
+       {
+       id:1,name:"白色",
+     }
+     ],
+     num:0,
     }
   },
   created() {
@@ -107,6 +131,11 @@ export default {
     // console.log(Reg.test(path))
     // Reg = reg2
     // console.log(Reg.test(path))
+      if(localStorage.getItem("num")==0){
+  document.getElementById('theme').href="/static/black.css"
+    }else{
+        document.getElementById('theme').href="/static/white.css"
+    }
   },
   computed: {
     fixedHeader() {
@@ -175,7 +204,23 @@ export default {
             message: '已取消'
           })
         })
-    }
+    },
+    //  主题替换
+  clicksel(index){
+      if(index==0){
+        console.log(111)
+        this.num=0;
+      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>
@@ -209,7 +254,7 @@ export default {
   min-width: 1000px;
 //background: $color_f;
   box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.04);
-      background-color:#757070;
+      // background-color:#757070;
   .logo {
     @include w_h(100px);
    .el-image{
@@ -224,8 +269,6 @@ export default {
     .el-menu {
       height: 100%;
       border: none;
-   background-color:#757070;
-      color: #fff;
     }
     .user {
       color: inherit;

src/views/home/index.vue

@@ -1,11 +1,11 @@
 /*个人中心入口*/
 <template>
-  <div class="user">
+  <div class="user lbg_color2">
     <div class="container">
-      <div class="user-slider">
-        <el-menu :default-active="activeIndex" @select="Select">
-          <el-menu-item index="/home/myproject">我的项目</el-menu-item>
-          <el-menu-item index="/home/openproject" >公开项目</el-menu-item>
+      <div class="user-slider lbg_color3">
+        <el-menu class="lbg_color3" :default-active="activeIndex" @select="Select">
+          <el-menu-item   index="/home/myproject">我的项目</el-menu-item>
+          <el-menu-item   index="/home/openproject" >公开项目</el-menu-item>
 
         </el-menu>
       </div>
@@ -58,13 +58,11 @@ export default {
 // @import '@/styles/transition.scss';
 .user {
   @include w_h(100%, 100%);
-  background: #333333;
   .container {
     @include flex();
     @include w_h(100%, 100%);
     .user-slider {
       @include w_h(180px, 100%);
-      background: #535353;
       padding-top: 20px;
     }
     .user-main {
@@ -84,7 +82,6 @@ export default {
       font-size: 14px;
       text-align: center;
       color: #b6b6b6;
-           background: #535353;
       &.is-active {
         color: $color_f;
         background: $color_on;

src/views/home/myproject/index.vue

@@ -31,6 +31,7 @@
      <template>
     <el-table
       :data="tableData"
+      class="lbg_color2"
       @row-click="rowclinck"
       style="width: 100%">
       <el-table-column
@@ -56,7 +57,7 @@
   title="创建新项目"
   :visible.sync="dialogVisible"
   width="30%"
-  :before-close="handleClose">
+>
        <el-form>
    <el-form-item>
       <span class="sblock">项目类型</span>
@@ -185,9 +186,9 @@ position:relative;
   flex:1;
 }
 
- .el-table, .el-table__expanded-cell{
-  background-color:#333;
- }
+//  .el-table, .el-table__expanded-cell{
+//   background-color:#333;
+//  }
  
 </style>
 <style >
@@ -198,17 +199,7 @@ position:relative;
   color: #d5d5d5;
   
 }
-.el-table td, .el-table th.is-leaf{
-   color: #d5d5d5;
-  background-color:#333;
-  
- }
-.el-table td, .el-table th.is-leaf{
-border-bottom: 1px solid #666;
-}
-.el-table--enable-row-hover .el-table__body tr:hover>td{
-background-color: #666 !important;
-}
+
 </style>
 
 

src/views/index/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="scal">
-      <div class="toolbar-part-detail">
+      <div class="toolbar-part-detail lbg_color1 ">
          <!-- <div class="toolbar-content"> -->
              <!-- <div class="imgcontent">
                  
@@ -45,12 +45,12 @@
     <div class="content">
          
      <transition name="slide-fade">
-    <div class="left" v-show="showtrue">
+    <div class="left lbg_color3" v-show="showtrue">
  
     </div>
          </transition>
-    <div class="right">
-        <div class="part-panel-collapse-handle" @click="showtrue=!showtrue">
+    <div class="right lbg_color2">
+        <div class="part-panel-collapse-handle lbg_color3" @click="showtrue=!showtrue">
             <i class="el-icon-arrow-left"></i>
   </div>
     </div>
@@ -164,7 +164,7 @@ methods:{
 @import '@/styles/mixin.scss';
 .scal{
 .toolbar-part-detail{
-background-color: #757070;
+// background-color: #757070;
 
 .toolbar-content{
     padding: 5px;
@@ -195,11 +195,12 @@ html,body{
     width: 200px;
     height: 100%;
     flex-direction: column;
-    background: #535353;
     padding: 15px;
     position: relative;
     height: 88vh;
-   
+   box-shadow: 2px 0 15px 0 var(--box-shadow1);
+    -webkit-box-shadow: 2px 0 15px 0 var(--box-shadow1);
+    -moz-box-shadow: 2px 0 15px 0 var(--box-shadow1);
              
     }
      .part-panel-collapse-handle {
@@ -222,7 +223,6 @@ html,body{
     .right{
         padding: 15px;
         flex: 1;
-        background-color: #333;
          height: 100%;
           height: 88vh;
           position: relative;
@@ -339,7 +339,7 @@ transform: scale(1.3);
 .textselsect{
       position: absolute;
     z-index: 9;
-    bottom: 0;
+    bottom: 1px;
     right: 7px;
     z-index: 9;
 }
@@ -348,20 +348,20 @@ transform: scale(1.3);
  /deep/.toolbar-part-detail{
   position: relative;
 }
-.scal .textselsect{
- /deep/.el-input__inner{
-  background-color:#757070;
-  border-radius: 0;
-  border: none;
-  color: #d5d5d5;
-  height: 25px;
-  line-height: 25px;
+// .scal .textselsect{
+//  /deep/.el-input__inner{
+//   // background-color:#757070;
+//   border-radius: 0;
+//   border: none;
+//   color: #d5d5d5;
+//   height: 25px;
+//   line-height: 25px;
   
-}
- /deep/ .el-input__icon{
-  line-height:25px;
-}
-}
+// }
+//  /deep/ .el-input__icon{
+//   line-height:25px;
+// }
+// }
 .el-form-item{
       margin-bottom: 5px;
 }