⚡ 增加多个新主题

src/page/index/logo.vue

@@ -4,19 +4,13 @@
       <span v-if="keyCollapse"
             class="avue-logo_subtitle"
             key="0">
-        <img src="img/bg/img-logo.png"
+        {{website.logo}}
-             width="30" />
       </span>
     </transition>
     <transition-group name="fade">
       <template v-if="!keyCollapse">
         <span class="avue-logo_title"
-              key="1">
+              key="1">{{website.indexTitle}} </span>
-          <div>
-            <img src="img/bg/img-logo.png"
-                 width="30"
-                 alt="">{{website.indexTitle}}</div>
-        </span>
       </template>
     </transition-group>
   </div>
@@ -66,19 +60,9 @@ export default {
     display: block;
     text-align: center;
     font-weight: 300;
-    font-size: 16px;
+    font-size: 20px;
-    div {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      img {
-        margin-right: 5px;
-      }
-    }
   }
   &_subtitle {
-    padding-top: 10px;
     display: block;
     text-align: center;
     font-size: 18px;

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

@@ -28,7 +28,7 @@
 import { setTheme } from "@/util/util";
 import { mapGetters } from "vuex";
 export default {
-  data() {
+  data () {
     return {
       box: false,
       text: "",
@@ -45,10 +45,22 @@ export default {
           name: "炫彩主题",
           value: "theme-star"
         },
+        {
+          name: "智能主题",
+          value: "theme-bule"
+        },
         {
           name: "iview主题",
           value: "theme-iview"
         },
+        {
+          name: "vip主题",
+          value: "theme-vip"
+        },
+        {
+          name: "cool主题",
+          value: "theme-cool"
+        },
         {
           name: "d2主题",
           value: "theme-d2"
@@ -56,12 +68,16 @@ export default {
         {
           name: "hey主题",
           value: "theme-hey"
+        },
+        {
+          name: "lite主题",
+          value: "theme-lite"
         }
       ]
     };
   },
   watch: {
-    text: function(val) {
+    text: function (val) {
       this.$store.commit("SET_THEME_NAME", val);
       setTheme(val);
     }
@@ -69,14 +85,14 @@ export default {
   computed: {
     ...mapGetters(["themeName"])
   },
-  mounted() {
+  mounted () {
     this.text = this.themeName;
     if (!this.text) {
       this.text = "";
     }
   },
   methods: {
-    open() {
+    open () {
       this.box = true;
     }
   }

src/styles/common.scss

@@ -25,4 +25,6 @@ a{
 }
 *{
   outline: none;
-}
+}
+//滚动条样式
+@include scrollBar;

src/styles/login.scss

@@ -5,7 +5,8 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background: url(/img/bg/cloud.jpg) 0 bottom repeat-x #049ec4;
+  background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg")
+    0 bottom repeat-x #049ec4;
   animation: animate-cloud 20s linear infinite;
 }
 .login-weaper {
@@ -159,4 +160,4 @@
   line-height: 38px;
   text-indent: 5px;
   text-align: center;
-}
+}

src/styles/media.scss

@@ -52,13 +52,18 @@
     padding: 0;
     padding-bottom: 20px;
     width: calc(100% - 240px);
-    height: calc(100% - 70px);
+    height: calc(100% - 64px);
     box-sizing: border-box;
     overflow: hidden;
+    background: #f0f2f5;
+    z-index:1026;
+    &--fullscreen{
+      width: 100%;
+      left:0;
+    }
 }
 
 .avue-view {
-    padding-bottom: 22px;
     width: 100%;
     box-sizing: border-box;
 }

src/styles/sidebar.scss

@@ -3,9 +3,6 @@
 .el-menu--popup{
     .el-menu-item{
         background-color: #20222a;
-        i{
-            margin-right: 5px;
-        }
         i,span{
             color:hsla(0,0%,100%,.7);
         }
@@ -42,6 +39,9 @@
     transition: width .2s;
     box-sizing: border-box;
     box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    .el-scrollbar__wrap {
+        overflow-x: hidden;
+    }
     &--tip{
         width:90%;
         height: 140px;
@@ -60,7 +60,7 @@
     }
     .el-menu-item,.el-submenu__title{
         i{
-            margin-right: 5px;
+            margin-right: 10px;
         }
         i,span{
             color:hsla(0,0%,100%,.7);
@@ -87,4 +87,5 @@
             }
         }
     }
+    
 }

src/styles/theme/bule.scss

@@ -0,0 +1,46 @@
+.theme-bule{
+  
+  .avue-header,.avue-logo{
+    background: #004ca7;
+  }
+  .avue-sidebar{
+    background: #004ca7;
+    .el-menu-item.is-active, .el-submenu__title.is-active {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+  .el-dropdown{
+    color: #fff;
+  }
+  .avue-logo{
+    .avue-logo_title{
+      color:#fff;
+    }
+  }
+  .avue-breadcrumb{
+    i{
+      color:#fff;
+    }
+  }
+
+  .top-bar__item {
+    i {
+      color: #fff;
+    }
+  }
+  .avue-top{
+   
+    .el-menu-item {
+        i,
+        span {
+          color: #fff;
+        }
+      &:hover {
+          i,
+          span {
+            color: #fff;
+          }
+      }
+    }
+  }
+}

src/styles/theme/cool.scss

@@ -0,0 +1,146 @@
+.theme-cool {
+  .el-menu--popup{
+      .el-menu-item{
+          background-color: #fff;
+          i,span{
+              color:#666;
+          }
+          &:hover{
+              i,span{
+                  color:#333;
+              }
+          }
+          &.is-active {
+              background-color: #409EFF;
+              &:before {
+                  content: '';
+                  top: 0;
+                  left: 0;
+                  bottom: 0;
+                  width: 4px;
+                  background: #409eff;
+                  position: absolute;
+              }
+              i,span{
+                  color:#fff;
+              }
+          }
+      }
+  }
+.avue-header{
+  background: linear-gradient(120deg,#25aff3,#008ad3);
+}
+.avue-tags {
+  padding: 0 3px;
+  margin: 8px 0;
+  box-shadow: none;
+  background-color: transparent;
+  .el-tabs__header .el-tabs__item{
+    padding: 0 10px !important;
+    background-color: #fff;
+    margin-right: 5px;
+    color: #909399;
+    border-radius: 3px;
+    height:30px;
+    font-size: 12px;
+    line-height: 30px;
+     &.is-active {
+      border: none;
+      color:#008ad3;
+     }
+  }
+}
+.avue-logo{
+  background: #fff;
+  box-shadow: none;
+}
+.avue-sidebar--tip{
+  background-color:transparent;
+  color:#333;
+}
+.el-dropdown{
+  color:#fff;
+}
+.avue-logo_title{
+  font-weight: 400;
+  color:#008ad3;
+}
+.logo_title,
+.avue-breadcrumb
+{
+    color: #fff ;
+    i {
+        color: #fff;
+    }
+}
+.avue-top{
+  .el-menu-item {
+    i,
+    span {
+        color: #fff ;
+    }
+    &:hover {
+        i,
+        span {
+            color: #fff ;
+        }
+    }
+  }
+}
+.avue-sidebar{
+  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+  background-color: #fff;
+  padding-top: 70px;
+  .el-menu-item,.el-submenu__title{
+    font-size: 13px;
+    i,span{
+        color:#000;
+    }
+    &:hover{
+        background: transparent;
+        i,span{
+           color:#000;
+        }
+    }
+    &.is-active {
+      background-color: #e5f1fb;
+      &::before{
+        width: 0;
+      }
+        i,span{
+          color: #25aff3;
+        }
+    }
+  }
+}
+.top-search {
+    .el-input__inner{
+      color: #333;
+    }
+    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;
+    }
+}
+}

src/styles/theme/d2.scss

@@ -4,7 +4,7 @@
     background-color: #ebf1f6;
     box-shadow: none;
     .avue-logo_title{
-      font-size: 22px;
+      font-size: 20px;
       font-weight: 400;
     }
   }

src/styles/theme/hey.scss

@@ -29,7 +29,7 @@
     box-shadow: none;
     .avue-logo_title{
       color:#409eff;
-      font-size: 24px;
+      font-size: 20px;
     }
   }
   .avue-tags{

src/styles/theme/index.scss

@@ -1,15 +1,27 @@
-// 白色主题
+// white
 @import './white.scss';
 
-// 炫酷主题
+// star
 @import './star.scss';
 
+// vip
+@import './vip.scss';
 
-// d2主题
+// d2
 @import './d2.scss';
 
+// bule
+@import './bule.scss';
+
 //iview
 @import './iview.scss';
 
 //heyui
 @import './hey.scss';
+
+
+//lite
+@import './lite.scss';
+
+//cool
+@import './cool.scss';

src/styles/theme/iview.scss

@@ -4,19 +4,16 @@
     box-shadow: none;
     text-align: center;
     .avue-logo_title{
-      div{
+      padding: 5px 8px 8px 8px;
-        border-top-left-radius: 5px;
+      border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
+      border-top-right-radius: 5px;
-        border-bottom-left-radius: 3px;
+      border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
+      border-bottom-right-radius: 3px;
-        font-size: 22px;
+      font-size: 20px;
-        color:#fff;
+      color:#fff;
-        font-weight: 500;
+      font-weight: 500;
-        margin:  10px auto;
+      display: inline;
-        width: 180px;
+      background-color: #409EFF;
-        height: 45px;
-        background-color: #409EFF;
-      }
     }
   }
   .avue-tags{

src/styles/theme/lite.scss

@@ -0,0 +1,36 @@
+.theme-lite {
+  .avue-logo{
+    background-color: #409EFF;
+    .avue-logo_title{
+      font-weight: 500;
+      font-size: 20px;
+      color:#fff;
+    }
+  }
+  .avue-tags{
+    .el-tabs__item{
+      font-size: 12px !important;
+      font-weight: 500 !important;
+    }
+  }
+  .avue-sidebar{
+    background-color: #263238;
+      .el-menu-item,.el-submenu__title{
+        i,span{
+          color: #8a979e;
+        }
+        &:hover{
+            background-color: #2b373d;
+        }
+        &.is-active {
+            &:before {
+              display: none;
+            }
+            background-color: #2b373d;
+            i,span{
+                color:#fff;
+            }
+        }
+    }
+  }
+}

src/styles/theme/star.scss

@@ -1,4 +1,7 @@
 .theme-star {
+  .avue-main{
+    background: transparent;
+  }
     .avue-contail {
         background-image: url("/img/bg/star-squashed.jpg");
         background-size: 100% 100%;

src/styles/theme/vip.scss

@@ -0,0 +1,92 @@
+.theme-vip {
+  $color:rgba(246,202,157,.7);
+  $is_active_color:#f6ca9d;
+  .avue-header{
+    background-color: #20222a;
+  }
+  .el-dropdown{
+    color: $color;
+  }
+  .avue-logo{
+    .avue-logo_title{
+      background-image:-webkit-gradient(linear,left top,left bottom,from($color),to( $is_active_color)); 
+      -webkit-background-clip:text; 
+      -webkit-text-fill-color:transparent; 
+      font-weight: 400;
+    }
+  }
+  .avue-breadcrumb{
+    i{
+      color: $color;
+    }
+  }
+  .avue-sidebar{
+    .el-menu-item{
+      &.is-active {
+          &:before {
+           background: $color;
+          }
+          i,span{
+            color: $is_active_color;
+        }
+      }
+    }
+  }
+  .avue-tags{
+    .el-tabs__item{
+      color: rgba(0, 0, 0, 0.4)  !important;
+      &.is-active{
+        color:$is_active_color !important;
+        border-color: $is_active_color !important;
+      }
+      &:before{
+        background: $is_active_color;
+      }
+    } 
+  }
+  .top-search {
+    .el-input__inner{
+      color: $color;
+    }
+    input::-webkit-input-placeholder,
+    textarea::-webkit-input-placeholder {
+        /* WebKit browsers */
+        color: $color;
+    }
+    input:-moz-placeholder,
+    textarea:-moz-placeholder {
+        /* Mozilla Firefox 4 to 18 */
+        color: $color;
+    }
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+        /* Mozilla Firefox 19+ */
+        color: $color;
+    }
+    input:-ms-input-placeholder,
+    textarea:-ms-input-placeholder {
+        /* Internet Explorer 10+ */
+        color: $color;
+    }
+}
+  .top-bar__item {
+    i {
+      color: $color;
+    }
+  }
+  .avue-top{
+   
+    .el-menu-item {
+        i,
+        span {
+          color: $color;
+        }
+      &:hover {
+          i,
+          span {
+            color:$is_active_color;
+          }
+      }
+    }
+  }
+}

src/styles/top.scss

@@ -1,10 +1,12 @@
+$height:64px;
 .avue-top {
     padding: 0 20px;
     position: relative;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     color: rgba(0, 0, 0, .65);
     font-size: 28px;
-    height: 64px;
+    height: $height;
+    line-height: $height;
     box-sizing: border-box;
     white-space: nowrap;
     .el-menu-item{
@@ -12,6 +14,10 @@
             font-size: 13px;
         }
     }
+    .el-menu--horizontal>.el-menu-item {
+      height: $height;
+      line-height: $height;
+    }
 }
 .avue-breadcrumb {
     height: 100%;
@@ -32,7 +38,7 @@
 }
 
 .top-search {
-    line-height: 64px;
+    line-height: $height;
     position: absolute !important;
     left: 20px;
     top:0;
@@ -57,11 +63,11 @@
 
 .top-bar__left,
 .top-bar__right {
-    height: 64px;
+    height: $height;
     position: absolute;
     top: 0;
     i{
-        line-height: 64px;
+        line-height: $height;
     }
 }
 
@@ -78,7 +84,7 @@
 .top-bar__item {
     position: relative;
     display: inline-block;
-    height: 64px;
+    height: $height;
     margin:0 10px;
     font-size: 16px;
     &--show {