导航栏菜单样式调整

frontend/saas-web/app/view/main/Navigation.js

@@ -10,6 +10,8 @@ Ext.define('saas.view.main.Navigation', {
     navCollapsed: false,
     cls: 'x-navpanel',
 
+    menuPadding: 0,
+
     initComponent: function () {
         var me = this;
         var view = new Ext.DataView({
@@ -110,8 +112,8 @@ Ext.define('saas.view.main.Navigation', {
                         var menu = view.up('menu'),
                             menuView = view.el.dom.getElementsByClassName('x-navitem-menu')[0],
                             menuBox = menuView.getBoundingClientRect(),
-                            menuViewWidth = menuBox.width + 12,
-                            menuViewHeight = menuBox.height + 10,
+                            menuViewWidth = menuBox.width + me.menuPadding * 2,
+                            menuViewHeight = menuBox.height + me.menuPadding * 2,
                             menuItem = menuView.getElementsByClassName('menuitem');
 
                         menu.setWidth(menuViewWidth);
@@ -188,11 +190,7 @@ Ext.define('saas.view.main.Navigation', {
                 width: window.innerWidth,
                 cls: 'x-nav-menu',
                 layout: 'fit',
-                bodyPadding: 5,
-                style: {
-                    borderTopRightRadius: '4px',
-                    borderBottomRightRadius: '4px'
-                },
+                bodyPadding: me.menuPadding,
                 items: [view]
             });
         }

frontend/saas-web/app/view/main/Navigation.scss

@@ -84,7 +84,7 @@ $nav-font-color-over: #fff;
                                         width: 0;
                                         height: 0;
                                         border: 8px solid transparent;
-                                        border-right-color: #fff;
+                                        border-right-color: #595B7E;
                                         border-left: none;
                                         position: absolute;
                                         right: 0;
@@ -110,8 +110,8 @@ $nav-font-color-over: #fff;
 }
 
 .x-nav-menu {
-    // border-width: 5px;
-    // border-left: none;
+    border: none;
+    border-radius: 0 4px 4px 0;
 }
 
 .x-navitem-menu {
@@ -127,27 +127,44 @@ $nav-font-color-over: #fff;
         border-bottom-right-radius: 4px;
 
         .menu {
-            width: 200px;
+            width: 188px;
             letter-spacing: 1px;
             display: flex;
             flex-direction: column;
 
             &:nth-child(2) {
                 .menu-content {
-                    border-left: 1px dashed #dce2e4;
+                    border-left: 1px solid #A4ABBC;
+                    &:before {
+                        content: '';
+                        position: absolute;
+                        width: 2px;
+                        height: 22px;
+                        margin-left: -2px;
+                        background: #484A69;
+                    }
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        width: 2px;
+                        height: 22px;
+                        margin-left: -2px;
+                        background: #484A69;
+                        bottom: 0;
+                    }
                 }
             }
 
             .menu-title {
                 padding-left: 30px;
-                background: #EEF9FE;
+                background: #595B7E;
 
                 .menu-title-text {
                     height: 40px;
                     line-height: 40px;
                     font-size: 16px;
                     font-weight: bold;
-                    color: #4F5170;
+                    color: #eeeef2;
                     letter-spacing: 0.64px;
                     text-align: left;
                 }
@@ -155,6 +172,7 @@ $nav-font-color-over: #fff;
 
             .menu-content {
                 height: 100%;
+                background: #484A69;
                 
                 .menuitem {
                     padding-left: 25px;
@@ -163,7 +181,7 @@ $nav-font-color-over: #fff;
                     align-content: space-between;
 
                     .item-text {
-                        color: #4F5170;
+                        color: #eeeef2;
                         cursor: pointer;
                         height: 34px;
                         line-height: 34px;
@@ -192,7 +210,7 @@ $nav-font-color-over: #fff;
 
                     &:hover {
                         border-radius: 4px;
-                        background-color: #E4E4E4;
+                        background-color: #595B7E;
 
                         .item-icon {
                             display: block;