:lipstick: Updating the UI and style files.add new theme:volcano

src/page/index/top/top-color.vue

@@ -2,7 +2,8 @@
   <el-color-picker size="small"
                    class="theme-picker"
                    popper-class="theme-picker-dropdown"
-                   v-model="themeVal"></el-color-picker>
+                   v-model="themeVal"
+                   :predefine="predefineColors"></el-color-picker>
 </template>
 
 <script>
@@ -13,7 +14,16 @@ export default {
   mixins: [color()],
   data () {
     return {
-      chalk: ""
+      chalk: '',
+      predefineColors: [
+        '#ff4500',
+        '#ff8c00',
+        '#ffd700',
+        '#90ee90',
+        '#00ced1',
+        '#1e90ff',
+        '#c71585'
+      ]
     };
   }
 };

src/page/index/top/top-theme.vue

@@ -35,16 +35,19 @@ export default {
       text: '',
       list: [
         {
-          name: '默认主题',
+          name: '默认',
           value: '',
         }, {
-          name: '炫彩主题',
+          name: '炫彩',
           value: 'theme-star'
+        },{
+          name: '火山',
+          value: 'theme-volcano'
         }, {
-          name: '黑色主题',
+          name: '黑色',
           value: 'theme-black'
         }, {
-          name: '渐变主题',
+          name: '渐变',
           value: 'theme-gradual'
         }
       ]

src/styles/element-ui.scss

@@ -63,3 +63,10 @@
   text-align: center;
   display: block;
 }
+.el-dropdown-menu__item--divided:before,
+.el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal>.el-submenu
+.el-submenu__title:hover{
+  background-color: transparent!important;
+}
+

src/styles/theme/index.scss

@@ -2,5 +2,7 @@
 @import './star.scss';
 //渐变主题
 @import './gradual.scss';
-//纯色
-@import './black.scss';
+//火山
+@import './volcano.scss';
+//黑色
+@import './black.scss';

src/styles/theme/volcano.scss

@@ -0,0 +1,139 @@
+.theme-volcano {
+  .avue-header,
+  .avue-logo,
+  .tags-container {
+      background-color: #FA541C!important;
+  }
+  .avue-sidebar--tip{
+    background-color:transparent;
+    color: #fa5c25 !important;
+  }
+  .avue-header,
+  .avue-logo,
+  .avue-tags,
+  .avue-contail {
+    background-color:transparent;
+  }
+  .el-dropdown{
+    color:#fff;
+  }
+  .avue-logo_title{
+    font-weight: 400;
+    color:#fff;
+  }
+  .logo_title,
+  .avue-breadcrumb
+  {
+      color: #fff !important;
+      i {
+          color: #fff;
+      }
+  }
+  .top {
+    border-bottom: none;
+  }
+  .avue-top{
+    .el-menu-item {
+      i,
+      span {
+          color: #fff !important;
+      }
+      &:hover {
+          i,
+          span {
+              color: #fff !important;
+          }
+      }
+    }
+  }
+  .el-menu--popup{
+    background-color: #fff !important;
+    .el-menu-item{
+      background-color: #fff !important;
+      span,i {
+        color:#666 !important;
+      }
+      &.is-active{
+        background-color: #fa5c23 !important;
+        span,i {
+          color:#fff !important;
+        }
+      }
+    }
+  }
+  .avue-sidebar{
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+    .el-menu{
+      background-color: #fff !important;
+    }
+    background-color:#fff !important;
+    .el-menu-item,.el-submenu__title{
+      i,span{
+        color:#666 !important;
+      }
+      background-color:#fff !important;
+      &.is-active {
+        background-color: #fa541f !important;
+        span,
+        i {
+          color: #fff
+        }
+        &:hover {
+          background-color: #fa5220 !important;
+        }
+      }
+    }
+    .el-menu-item,.el-submenu__title{
+      &:hover{
+        background-color: transparent !important;
+        i,span{
+          color:#666 !important;
+        }
+      }
+    }
+    .el-menu-item.is-active,.el-submenu__title.is-active{
+      background-color: #fa511e !important;
+      i,span{
+        color:#fff !important;
+      }
+      &::before{
+        display: none;
+      }
+      &:hover{
+        i,span{
+          color:#fff !important;
+        }
+      }
+    }
+  }
+  .top-search {
+      .el-input__inner{
+        color: #fff;
+      }
+      input::-webkit-input-placeholder,
+      textarea::-webkit-input-placeholder {
+          /* WebKit browsers */
+          color: #fff;
+      }
+      input:-moz-placeholder,
+      textarea:-moz-placeholder {
+          /* Mozilla Firefox 4 to 18 */
+          color: #fff;
+      }
+      input::-moz-placeholder,
+      textarea::-moz-placeholder {
+          /* Mozilla Firefox 19+ */
+          color: #fff;
+      }
+      input:-ms-input-placeholder,
+      textarea:-ms-input-placeholder {
+          /* Internet Explorer 10+ */
+          color: #fff;
+      }
+  }
+  .top-bar__item {
+      i {
+          color: #fff;
+      }
+  }
+}