3.10主题修改2.0

package.json

@@ -21,8 +21,11 @@
     "browser-md5-file": "^1.1.1",
     "echarts": "^4.9.0",
     "el-color-picker": "^1.1.0",
-    "element-ui": "2.13.0",
+    "element-ui": "^2.15.13",
     "exports-loader": "^1.1.0",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-css-wrap": "^0.1.2",
     "highcharts": "^8.2.2",
     "imports-loader": "^1.1.0",
     "js-cookie": "2.2.0",
@@ -56,15 +59,16 @@
     "bootstrap": "^5.1.3",
     "chalk": "2.4.2",
     "connect": "3.6.6",
+    "element-theme-chalk": "^2.15.13",
     "eslint": "5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
     "jquery": "^3.6.0",
     "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.9.0",
+    "node-sass": "^4.14.1",
     "popper.js": "^1.16.1",
     "runjs": "^4.3.2",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^7.3.1",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",

src/layout/headercad.vue

@@ -204,7 +204,6 @@ export default {
       height: 100%;
       border: none;
       background: $color_f;
-      color: #0470cc;
     }
     .user {
       color: inherit;

src/main.js

@@ -15,6 +15,9 @@ import VueWorker from 'vue-worker'
 import $ from 'jquery'
 import 'bootstrap'
 import '@/assets/iconfont/iconfont.js'
+// import '@/assets/custom-theme/index.css'
+// import '../theme/index.css'
+//import '../element-variables.scss'
 
 /**
  * 如果不想使用mock-server，想将MockJs用作mock api，可以执行: mockXHR()

src/store/getters.js

@@ -10,5 +10,6 @@ const getters = {
   lesseeId: state => state.user.lesseeId,
   logUrl: state => state.user.logUrl,
   proUrl: state => state.user.proUrl
+  
 }
 export default getters

src/store/index.js

@@ -16,8 +16,17 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
 }, {})
 
 const store = new Vuex.Store({
+  state:{
+    themecolor: '00a598'//默认为20a0ff
+},
+mutations:{
+    //更新主题颜色
+    setThemeColor(state,curcolor){
+        this.state.themecolor = curcolor;
+    }
+},
   modules,
-  getters
+  getters,
+ 
 })
-
 export default store // 导出store

src/utils/index.js

@@ -102,3 +102,10 @@ export function param2Obj(url) {
     '"}'
   )
 }
+//换肤加class函数
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return
+  }
+  element.className = className;
+}

src/views/home/index.vue

@@ -1,8 +1,8 @@
 /*项目列表*/
 <template>
   <div class="user lbg_color2">
-    <div class="container">
-      <div class="user-slider lbg_color3">
+    <div class="container border">
+      <div class="user-slider lbg_color3 el-menu">
         <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>
@@ -89,4 +89,7 @@ export default {
     }
   }
 }
+.border .el-menu{
+  border: none;
+}
 </style>