feat new theme

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

@@ -44,6 +44,14 @@ export default {
         {
           name: "炫彩主题",
           value: "theme-star"
+        },
+        {
+          name: "iview主题",
+          value: "theme-iview"
+        },
+        {
+          name: "d2主题",
+          value: "theme-d2"
         }
       ]
     };

src/styles/avue.scss

@@ -1,15 +0,0 @@
-//修改阿里巴巴图表库样式
-.iconfont{
-  margin-right: 5px;
-  font-size: 20px !important;
-}
-.avue-icon-select__item{
-  margin-bottom: 20px;
-}
-.avue-icon-select__list .iconfont{
-  padding: 20px;
-  font-size: 24px;
-}
-.avue-icon-select__list .iconfont:hover{
- transform: scale(1.4);
-}

src/styles/common.scss

@@ -18,14 +18,11 @@
 @import './media.scss';
 //通用配置
 @import './normalize.scss';
-//通用配置
-@import './avue.scss';
 
-a {
+a{
   text-decoration: none;
-  color: #333;
+  color:#333;
 }
-
+*{
-* {
   outline: none;
-}
+}

src/styles/element-ui.scss

@@ -24,13 +24,7 @@
     display: none;
 }
 
-.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;
-}
 
 .el-message__icon,
 .el-message__content {
@@ -58,7 +52,11 @@
 .el-main {
     padding: 0 !important;
 }
+.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;
+}
+
 
 .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/sidebar.scss

@@ -1,7 +1,38 @@
+
+
+.el-menu--popup{
+    .el-menu-item{
+        background-color: #20222a;
+        i,span{
+            color:hsla(0,0%,100%,.7);
+        }
+        &:hover{
+            i,span{
+                color:#fff;
+            }
+        }
+        &.is-active {
+            background-color: rgba(0,0,0,.8);
+            &:before {
+                content: '';
+                top: 0;
+                left: 0;
+                bottom: 0;
+                width: 4px;
+                background: #409eff;
+                position: absolute;
+            }
+            i,span{
+                color:#fff;
+            }
+        }
+    }
+    
+}
 .avue-sidebar {
     user-select: none; 
     position: relative;
-    padding-top: 74px;
+    padding-top: 60px;
     height: 100%;
     position: relative;
     background-color: #20222a;
@@ -24,77 +55,29 @@
         font-size: 14px;
         background-color: rgba(0,0,0,.4);
     }
-    .el-menu-item,
+    .el-menu-item,.el-submenu__title{
-    .el-submenu__title {
+        i,span{
-        font-size: 14px;
+            color:hsla(0,0%,100%,.7);
-        height: 56px;
-        line-height: 56px;
-    }
-    .el-menu-item {
-        span,i{
-            color:rgba(255, 255, 255, 0.7);
         }
-        &:hover {
+        &:hover{
-            background-color: transparent;
+            background: transparent;
-            color: #fff;
+            i,span{
-            span,
+               color:#fff;
-            i {
-                color: #fff;
             }
         }
         &.is-active {
-            background-color: rgba(0, 0, 0, .8);
+            &:before {
-            span,
+                content: '';
-            i {
-                color: #fff;
-            }
-            &:hover {
-                background-color: rgba(0, 0, 0, .8);
-            }
-            &::before {
-                content: " ";
                 top: 0;
                 left: 0;
                 bottom: 0;
                 width: 4px;
-                background: $mainBg;
+                background: #409eff;
-                position: absolute
+                position: absolute;
             }
-        }
+            background-color: rgba(0,0,0,.8);
-    }
+            i,span{
-    .el-submenu__title {
+                color:#fff;
-        span,i{
-            color:rgba(255, 255, 255, 0.7);
-        }
-        &:hover {
-            i,
-            span {
-                color: #fff;
-            }
-            background-color:transparent ;
-        }
-    }
-    .el-submenu .el-menu-item {
-        height: 50px;
-        line-height: 50px;
-        span,i{
-            color:rgba(255, 255, 255, 0.7);
-        }
-        &.is-active {
-            background-color: rgba(0, 0, 0, .8);
-            span,
-            i {
-                color: #fff
-            }
-            &:hover {
-                background-color: rgba(0, 0, 0, .8);
-            }
-        }
-        &:hover {
-            background-color: transparent;
-            span,
-            i {
-                color: #fff;
             }
         }
     }

src/styles/theme/d2.scss

@@ -0,0 +1,57 @@
+.theme-d2 {
+  .avue-logo{
+    color: #409EFF;
+    background-color: #ebf1f6;
+    box-shadow: none;
+    .avue-logo_title{
+      font-size: 24px;
+      font-weight: 400;
+    }
+  }
+  .avue-top{
+    background-color: #ebf1f6;
+    box-shadow: none;
+  }
+  .avue-main{
+    padding: 0 5px;
+  }
+  .avue-tags{
+    margin-left: 6px;
+    padding: 0;
+    border: 1px solid #e4e7ed;
+    border-radius: 3px;
+    background-color: #ebf1f6;
+    box-shadow: none;
+    .el-tabs__item{
+      border-left: 1px solid #cfd7e5 !important;
+      margin: 0 !important;
+      background-color: rgba(0,0,0,.03) !important;
+      color: #606266 !important;
+      font-size: 14px !important;
+      font-weight: 500 !important;
+      &:first-child{
+        border-left: none !important;
+      }
+    }
+    .is-active{
+      border-bottom:1px solid #fff !important;
+      background-color: #fff !important;
+      color: #409EFF !important;
+    }
+  }
+  .avue-sidebar{
+    background-color: #ebf1f6;
+    box-shadow: none;
+    .el-menu-item,.el-submenu__title{
+      i,span{
+          color:#606266
+      }
+      &:hover,&.is-active{
+        background: hsla(0,0%,100%,.5);
+          i,span{
+            color: #409EFF;
+          }
+      }
+    }
+  }
+}

src/styles/theme/index.scss

@@ -3,3 +3,10 @@
 
 // 炫酷主题
 @import './star.scss';
+
+
+// d2主题
+@import './d2.scss';
+
+//iview
+@import './iview.scss';

src/styles/theme/iview.scss

@@ -0,0 +1,76 @@
+.theme-iview {
+  .avue-logo{
+    background: #001529;
+    box-shadow: none;
+    text-align: center;
+    .avue-logo_title{
+      padding: 5px 8px 8px 8px;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      font-size: 25px;
+      color:#fff;
+      font-weight: 500;
+      display: inline;
+      background-color: #409EFF;
+    }
+  }
+  .avue-tags{
+    padding:  3px 5px 5px 0;
+    background: #f0f0f0;
+    box-shadow: inset 0 0 3px 2px hsla(0,0%,39.2%,.1);
+    .is-active{
+      &:before{
+        background: #409EFF !important;
+      }
+    }
+    .el-tabs__item{
+      padding: 0 15px !important;
+      position: relative;
+      height: 32px !important;
+      line-height:32px !important;
+      border: 1px solid #e8eaec!important;
+      color: #515a6e!important;
+      background: #fff!important;
+      border-radius: 3px;
+      &:before{
+        content:'';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-right:10px;
+        border-radius: 50%;
+        background: #e8eaec;
+      }
+    }
+  }
+
+  .avue-sidebar{
+    background: #001529;
+    .el-menu-item{
+      &.is-active {
+          background-color:  #000c17;
+          &:before {
+            display: none;
+          }
+          i,span{
+            color:#409EFF;
+        }
+      }
+    }
+     .el-submenu{
+        .el-menu-item{
+          &.is-active {
+            background-color:  #409EFF;
+            &:before {
+              display: none;
+            }
+            i,span{
+              color:#fff;
+          }
+        }
+      }
+    }
+  }
+}

src/styles/theme/star.scss

@@ -3,112 +3,66 @@
         background-image: url("/img/bg/star-squashed.jpg");
         background-size: 100% 100%;
     }
+    .avue-logo{
+        color: #fff;
+    }
     .avue-header,
     .avue-logo,
     .tags-container {
         background-color: transparent;
     }
-    .el-card {
+    .el-card,.error-page {
         opacity: .9;
     }
-    .top {
-        .el-dropdown {
-            color: #fff;
-            i {
-                color: #fff;
-            }
-        }
-        .top-item {
-            i {
-                color: #fff;
-            }
-        }
-    }
     .avue-tabs {
         padding: 0 20px ;
     }
-    .avue-sidebar,
+    .avue-tags{
-    .logo,
-    .el-menu-item,
-    .el-submenu__title,
-    .el-menu {
-        background-color: transparent 
-    }
-    .logo_title,
-    .avue-breadcrumb,
-    {
-        color: #fff ;
-        i {
-            color: #fff;
-        }
-    }
-    .el-menu--horizontal>.el-menu-item.is-active {
-        border-bottom: none;
-    }
-    .top {
-        border-bottom: none;
-    }
-    .avue-tags {
         background-color: transparent;
-        border: none;
+        border-top: none;
     }
-    .tag-item {
+    .avue-top{
-        color: #fff ;
+        .avue-breadcrumb{
-        border: none ;
+            color:#fff;
-        background-color: rgba(255, 255, 255, .5);
+        }
-        &.is-active {
+        .el-menu-item{
-            color: #fff ;
+            i,span{
-            border: 1px solid #fff ;
+                color:#fff;
-            background-color: rgba(0, 0, 0, .4);
+            }
-            .tag-item-icon {
+            &.is-active{
-                color: #fff ;
+                background-color: rgba(0,0,0,.4)
             }
         }
-    }
+        .el-dropdown{
-    .el-menu-item {
+            color:#fff;
-        i,
-        span {
-            color: #fff ;
         }
-        &:hover {
+    }
-            i,
+    .avue-sidebar{
-            span {
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
-                color: #409eff ;
+        background-color:transparent;
+        .el-menu-item,.el-submenu__title{
+        i,span{
+            color:#fff
+        }
+        &:hover{
+            background: transparent;
+            i,span{
+                color:#409EFF;
             }
         }
         &.is-active {
-            background-color: rgba(0, 0, 0, .4) ;
+            background-color: rgba(0,0,0,.4);
-            &:hover {
+            i,span{
-                background-color: rgba(0, 0, 0, .4) ;
+                color:#fff;
             }
         }
+        }
     }
-    .el-submenu__title {
+
-        i,
+  .top-search {
-        span {
+        .el-input__inner{
-            color: #fff ;
+        color: #333;
         }
-        &:hover {
-            i,
-            span {
-                color: #409eff ;
-            }
-            background-color:transparent ;
-        }
-    }
-    .el-submenu .el-menu-item {
-        &.is-active {
-            background-color: rgba(0, 0, 0, .4) ;
-            span,
-            i {
-                color: $mainBg ;
-            }
-            &:hover {
-                background-color: rgba(0, 0, 0, .4) ;
-            }
-        }
-    }
-    .top-search {
         input::-webkit-input-placeholder,
         textarea::-webkit-input-placeholder {
             /* WebKit browsers */

src/styles/theme/white.scss

@@ -1,4 +1,32 @@
 .theme-white {
+    .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,
   .avue-logo,
   .tags-container {
@@ -16,7 +44,7 @@
     color:#fff;
   }
   .logo_title,
-  .avue-breadcrumb,
+  .avue-breadcrumb
   {
       color: #fff ;
       i {
@@ -37,60 +65,31 @@
       }
     }
   }
-  .el-menu--popup{
-    background-color: #fff ;
-    .el-menu-item{
-      background-color: #fff ;
-      span,i {
-        color:#666 ;
-      }
-      &.is-active{
-        background-color:#409EFF ;
-        span,i {
-          color:#fff ;
-        }
-      }
-    }
-  }
   .avue-sidebar{
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
-    .el-menu{
+    background-color: #fff;
-      background-color: #fff ;
+    padding-top: 70px;
-    }
-    background-color:#fff ;
     .el-menu-item,.el-submenu__title{
       i,span{
-        color:#666 ;
+          color:#666
-      }
-      background-color:#fff ;
-    }
-    .el-menu-item,.el-submenu__title{
-      &:hover{
-        background-color: transparent ;
-        i,span{
-          color:#666 ;
-        }
-      }
-    }
-    .el-menu-item.is-active,.el-submenu__title.is-active{
-      background-color:#409EFF ;
-      i,span{
-        color:#fff ;
-      }
-      &::before{
-        display: none;
       }
       &:hover{
-        background-color: #409EFF ;
+          background: transparent;
-        i,span{
+          i,span{
-          color:#fff ;
+             color:#333;
-        }
+          }
+      }
+      &.is-active {
+          background-color: #409EFF;
+          i,span{
+              color:#fff;
+          }
       }
     }
   }
   .top-search {
       .el-input__inner{
-        color: #fff;
+        color: #333;
       }
       input::-webkit-input-placeholder,
       textarea::-webkit-input-placeholder {

src/styles/top.scss

@@ -1,7 +1,7 @@
 .avue-top {
     padding: 0 20px;
     position: relative;
-    box-shadow: 0 1px 4px rgba(0,21,41,.08);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
     color: rgba(0, 0, 0, .65);
     font-size: 28px;
     height: 64px;