Support switch theme color

src/App.vue

@@ -5,4 +5,6 @@
 </template>
 <style>
     @import "../static/css/main.css";
+    @import "../static/css/color-dark.css";     /*深色主题*/
+    /*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/
 </style>

src/components/common/header.vue

@@ -42,19 +42,16 @@
     .header {
         position: relative;
         box-sizing: border-box;
-        /*padding-left: 50px;*/
         width: 100%;
         height: 70px;
         font-size: 22px;
         line-height: 70px;
         color: #fff;
-        background-color: #242f42;
     }
     .header .logo{
         float: left;
         width:250px;
         text-align: center;
-        background: #00ADF2;
     }
     .user-info {
         float: right;
@@ -66,7 +63,7 @@
         position: relative;
         display: inline-block;
         padding-left: 50px;
-        color: #03A9F4;
+        color: #fff;
         cursor: pointer;
         vertical-align: middle;
     }

src/components/page/Login.vue

@@ -2,12 +2,12 @@
     <div class="login-wrap">
         <div class="ms-title">后台管理系统</div>
         <div class="ms-login">
-            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
-                <el-form-item label="username" prop="username">
+                <el-form-item prop="username">
-                    <el-input v-model="ruleForm.username"></el-input>
+                    <el-input v-model="ruleForm.username" placeholder="username"></el-input>
                 </el-form-item>
-                <el-form-item label="password" prop="password">
+                <el-form-item prop="password">
-                    <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
+                    <el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                 </el-form-item>
                 <div class="login-btn">
                     <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
@@ -58,7 +58,6 @@
         position: relative;
         width:100%;
         height:100%;
-        background: #324157;
     }
     .ms-title{
         position: absolute;
@@ -74,10 +73,10 @@
         position: absolute;
         left:50%;
         top:50%;
-        width:350px;
+        width:300px;
         height:160px;
         margin:-150px 0 0 -190px;
-        padding:40px 20px 40px 10px;
+        padding:40px;
         border-radius: 5px;
         background: #fff;
     }
@@ -85,7 +84,7 @@
         text-align: center;
     }
     .login-btn button{
-        width:43%;
+        width:100%;
-        height:40px;
+        height:36px;
     }
 </style>

src/main.js

@@ -2,7 +2,8 @@ import Vue from 'vue';
 import App from './App';
 import router from './router';
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-default/index.css';
+import 'element-ui/lib/theme-default/index.css';    // 默认主题
+// import '../static/css/theme-green/index.css';       // 浅绿色主题
 
 Vue.use(ElementUI);
 new Vue({

static/css/color-dark.css

@@ -0,0 +1,18 @@
+.header{
+    background-color: #242f42;
+}
+.login-wrap{
+    background: #324157;
+}
+.plugins-tips{
+    background: #eef1f6;
+}
+.plugins-tips a{
+    color: #20a0ff;
+}
+.el-upload--text em {
+    color: #20a0ff;
+}
+.pure-button{
+    background: #20a0ff;
+}

static/css/main.css

@@ -28,12 +28,8 @@ a{text-decoration: none}
     text-align: right;
 }
 .plugins-tips{
-    padding:10px;
+    padding:20px 10px;
     margin-bottom: 20px;
-    background: #eef1f6;
-}
-.plugins-tips a{
-    color: #20a0ff;
 }
 .el-button+.el-tooltip {
     margin-left: 10px;
@@ -75,7 +71,6 @@ a{text-decoration: none}
     height:40px;
     line-height: 40px;
     text-align: center;
-    background: #00a2ff;
     color: #fff;
     border-radius: 3px;
 }
@@ -106,7 +101,6 @@ a{text-decoration: none}
     text-align: center;
 }
 .el-upload--text em {
-    color: #20a0ff;
     font-style: normal;
 }
 /*VueEditor*/

static/css/theme-green/color-green.css

@@ -0,0 +1,27 @@
+.header{
+    background-color: #00d1b2;
+}
+.login-wrap{
+    background: rgba(56, 157, 170, 0.82);;
+}
+.plugins-tips{
+    background: #f2f2f2;
+}
+.plugins-tips a{
+    color: #00d1b2;
+}
+.el-upload--text em {
+    color: #00d1b2;
+}
+.pure-button{
+    background: #00d1b2;
+}
+.vue-datasource .btn-primary {
+    color: #fff;
+    background-color: #00d1b2 !important;
+    border-color: #00d1b2 !important;
+}
+.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus {
+    background-color: #00d1b2 !important;
+    border-color: #00d1b2 !important;
+}