From f9abf2254bdefba9e96d7b56ced1a1eff386ddc1 Mon Sep 17 00:00:00 2001
From: smallwei <1634566606@qq.com>
Date: Wed, 6 Mar 2019 14:27:36 +0800
Subject: [PATCH] feat new theme

---
 src/page/index/top/top-theme.vue |   8 ++
 src/styles/avue.scss             |  15 ----
 src/styles/common.scss           |  11 +--
 src/styles/element-ui.scss       |  14 ++--
 src/styles/sidebar.scss          | 109 ++++++++++++---------------
 src/styles/theme/d2.scss         |  57 +++++++++++++++
 src/styles/theme/index.scss      |   7 ++
 src/styles/theme/iview.scss      |  76 +++++++++++++++++++
 src/styles/theme/star.scss       | 122 ++++++++++---------------------
 src/styles/theme/white.scss      |  87 +++++++++++-----------
 src/styles/top.scss              |   2 +-
 11 files changed, 286 insertions(+), 222 deletions(-)
 delete mode 100644 src/styles/avue.scss
 create mode 100644 src/styles/theme/d2.scss
 create mode 100644 src/styles/theme/iview.scss

diff --git a/src/page/index/top/top-theme.vue b/src/page/index/top/top-theme.vue
index d85d620..d8e48ab 100644
--- a/src/page/index/top/top-theme.vue
+++ b/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"
         }
       ]
     };
diff --git a/src/styles/avue.scss b/src/styles/avue.scss
deleted file mode 100644
index de8c026..0000000
--- a/src/styles/avue.scss
+++ /dev/null
@@ -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);
-}
\ No newline at end of file
diff --git a/src/styles/common.scss b/src/styles/common.scss
index fb71706..82a1d0b 100644
--- a/src/styles/common.scss
+++ b/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;
-}
+}
\ No newline at end of file
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 1b5fbe2..c7e52e2 100644
--- a/src/styles/element-ui.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 83cfa50..998233b 100644
--- a/src/styles/sidebar.scss
+++ b/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-submenu__title {
-        font-size: 14px;
-        height: 56px;
-        line-height: 56px;
-    }
-    .el-menu-item {
-        span,i{
-            color:rgba(255, 255, 255, 0.7);
+    .el-menu-item,.el-submenu__title{
+        i,span{
+            color:hsla(0,0%,100%,.7);
         }
-        &:hover {
-            background-color: transparent;
-            color: #fff;
-            span,
-            i {
-                color: #fff;
+        &:hover{
+            background: transparent;
+            i,span{
+               color:#fff;
             }
         }
         &.is-active {
-            background-color: rgba(0, 0, 0, .8);
-            span,
-            i {
-                color: #fff;
-            }
-            &:hover {
-                background-color: rgba(0, 0, 0, .8);
-            }
-            &::before {
-                content: " ";
+            &:before {
+                content: '';
                 top: 0;
                 left: 0;
                 bottom: 0;
                 width: 4px;
-                background: $mainBg;
-                position: absolute
+                background: #409eff;
+                position: absolute;
             }
-        }
-    }
-    .el-submenu__title {
-        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;
+            background-color: rgba(0,0,0,.8);
+            i,span{
+                color:#fff;
             }
         }
     }
diff --git a/src/styles/theme/d2.scss b/src/styles/theme/d2.scss
new file mode 100644
index 0000000..e78c9b8
--- /dev/null
+++ b/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;
+          }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/theme/index.scss b/src/styles/theme/index.scss
index f2771b2..a7fdfb3 100644
--- a/src/styles/theme/index.scss
+++ b/src/styles/theme/index.scss
@@ -3,3 +3,10 @@
 
 // 炫酷主题
 @import './star.scss';
+
+
+// d2主题
+@import './d2.scss';
+
+//iview
+@import './iview.scss';
diff --git a/src/styles/theme/iview.scss b/src/styles/theme/iview.scss
new file mode 100644
index 0000000..016c1a1
--- /dev/null
+++ b/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;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/theme/star.scss b/src/styles/theme/star.scss
index 6cf5c76..b593fb2 100644
--- a/src/styles/theme/star.scss
+++ b/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,
-    .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 {
+    .avue-tags{
         background-color: transparent;
-        border: none;
+        border-top: none;
     }
-    .tag-item {
-        color: #fff ;
-        border: none ;
-        background-color: rgba(255, 255, 255, .5);
-        &.is-active {
-            color: #fff ;
-            border: 1px solid #fff ;
-            background-color: rgba(0, 0, 0, .4);
-            .tag-item-icon {
-                color: #fff ;
+    .avue-top{
+        .avue-breadcrumb{
+            color:#fff;
+        }
+        .el-menu-item{
+            i,span{
+                color:#fff;
+            }
+            &.is-active{
+                background-color: rgba(0,0,0,.4)
             }
         }
-    }
-    .el-menu-item {
-        i,
-        span {
-            color: #fff ;
+        .el-dropdown{
+            color:#fff;
         }
-        &:hover {
-            i,
-            span {
-                color: #409eff ;
+    }
+    .avue-sidebar{
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.15);
+        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) ;
-            &:hover {
-                background-color: rgba(0, 0, 0, .4) ;
+            background-color: rgba(0,0,0,.4);
+            i,span{
+                color:#fff;
             }
         }
+        }
     }
-    .el-submenu__title {
-        i,
-        span {
-            color: #fff ;
+
+  .top-search {
+        .el-input__inner{
+        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 */
diff --git a/src/styles/theme/white.scss b/src/styles/theme/white.scss
index 30bced2..ed81bc2 100644
--- a/src/styles/theme/white.scss
+++ b/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 ;
+    background-color: #fff;
+    padding-top: 70px;
     .el-menu-item,.el-submenu__title{
       i,span{
-        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;
+          color:#666
       }
       &:hover{
-        background-color: #409EFF ;
-        i,span{
-          color:#fff ;
-        }
+          background: transparent;
+          i,span{
+             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 {
diff --git a/src/styles/top.scss b/src/styles/top.scss
index ad8b0a9..a39bb81 100644
--- a/src/styles/top.scss
+++ b/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;