Browse Source

导航栏样式调整

zhuth 7 years ago
parent
commit
080cfa2cad
1 changed files with 38 additions and 21 deletions
  1. 38 21
      frontend/saas-web/app/view/main/Navigation.scss

+ 38 - 21
frontend/saas-web/app/view/main/Navigation.scss

@@ -1,6 +1,8 @@
+$nav-body-background-color: #484A69;
 $nav-font-size: 16px;
 $nav-font-color: #EEEEF2;
 $nav-font-color-over: #fff;
+$menu-body-background-color: #65678C;
 
 .x-navpanel {
     overflow: visible;
@@ -18,7 +20,7 @@ $nav-font-color-over: #fff;
             overflow: visible;
     
             .x-autocontainer-outerCt {
-                background-color: #484A69;
+                background-color: $nav-body-background-color;
     
                 .x-autocontainer-innerCt {
     
@@ -38,7 +40,6 @@ $nav-font-color-over: #fff;
                             outline: none !important;
                             
                             .x-navitem-body {
-                                background: #505275;
     
                                 .nav-inner-wrap {
                                     position: relative;
@@ -74,22 +75,17 @@ $nav-font-color-over: #fff;
                         }
                         .x-navitem-over {
                             .x-navitem-body {
-                                background: #474968;
-                                box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.50);
+                                background: #65678C;
 
                                 .nav-inner-wrap {
 
-                                    &:after {
+                                    &:before {
                                         content: ' ';
-                                        width: 0;
-                                        height: 0;
-                                        border: 8px solid transparent;
-                                        border-right-color: #595B7E;
-                                        border-left: none;
                                         position: absolute;
-                                        right: 0;
-                                        top: 22px;
-                                        z-index: 999999;
+                                        width: 8px;
+                                        height: 60px;
+                                        background: #34baf6;
+                                        left: 0;
                                     }
 
                                     .nav-inner-icon {
@@ -118,6 +114,7 @@ $nav-font-color-over: #fff;
     position: absolute;
     z-index: 9999;
     top: 0;
+    border-left: 1px solid $nav-body-background-color;
     background: white;
     overflow: hidden;
 
@@ -133,23 +130,34 @@ $nav-font-color-over: #fff;
             flex-direction: column;
 
             &:nth-child(2) {
-                .menu-content {
+                .menu-title {
                     border-left: 1px solid #A4ABBC;
                     &:before {
                         content: '';
                         position: absolute;
                         width: 2px;
                         height: 22px;
-                        margin-left: -2px;
-                        background: #484A69;
+                        margin-left: -31px;
+                        background: $menu-body-background-color;
                     }
+                }
+                .menu-content {
+                    border-left: 1px solid #A4ABBC;
+                    // &:before {
+                    //     content: '';
+                    //     position: absolute;
+                    //     width: 2px;
+                    //     height: 22px;
+                    //     margin-left: -2px;
+                    //     background: $menu-body-background-color;
+                    // }
                     &:after {
                         content: '';
                         position: absolute;
                         width: 2px;
                         height: 22px;
                         margin-left: -2px;
-                        background: #484A69;
+                        background: $menu-body-background-color;
                         bottom: 0;
                     }
                 }
@@ -157,7 +165,7 @@ $nav-font-color-over: #fff;
 
             .menu-title {
                 padding-left: 30px;
-                background: #484A69;
+                background: $menu-body-background-color;
 
                 .menu-title-text {
                     height: 40px;
@@ -172,7 +180,7 @@ $nav-font-color-over: #fff;
 
             .menu-content {
                 height: 100%;
-                background: #484A69;
+                background: $menu-body-background-color;
                 
                 .menuitem {
                     padding-left: 25px;
@@ -198,7 +206,7 @@ $nav-font-color-over: #fff;
                         color: #fff;
                         display: none;
                         padding: 3px 6px;
-                        border-radius: 3px;
+                        // border-radius: 3px;
                         margin-right: 5px;
                         height: 24px;
                         margin-top: 5px;
@@ -209,9 +217,18 @@ $nav-font-color-over: #fff;
                     }
 
                     &:hover {
-                        border-radius: 4px;
+                        // border-radius: 4px;
                         background-color: #595B7E;
 
+                        &:before {
+                            content: ' ';
+                            position: absolute;
+                            width: 6px;
+                            height: 34px;
+                            background: #34baf6;
+                            margin-left: -25px;
+                        }
+
                         .item-icon {
                             display: block;
                         }