首页样式

frontend/saas-web/app/Application.scss

@@ -153,26 +153,6 @@ body.launching {
   }
 }
 
-.x-btn-menu-active{
-  .x-btn-wrap{
-    .x-btn-button{
-      .x-btn-inner{
-        color:#fff !important;
-      }
-    }
-  }
-}
-
-.x-main-master{
-  .x-btn-wrap{
-    .x-btn-button{
-      .x-btn-inner{
-        color:#999 !important;
-      }
-    }
-  }
-}
-
 .x-keyboard-mode .x-btn-focus.x-btn-default-toolbar-small {
   background: inherit;
   opacity: 1;

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

@@ -31,18 +31,20 @@ Ext.define('saas.view.main.Main', {
                     reference: 'mainLogo',
                     width: 180,
                     cls: 'main-logo-wrap',
-                    html: '<div class="main-logo"><img src="resources/images/default/logo-default.png"/><div class="logo-text">优企云服</div></div>',
+                    html: '<div class="main-logo"><img src="resources/images/default/logo-default.png"/><div class="logo-text">U企云服</div></div>',
                     bind: {
                         width: '{navWidth}'
                     }
                 },
                 {
-                    margin: '0 0 0 8',
+                    margin: '0 8 0 8',
+                    padding: '7 0 7 0',
                     ui: 'header',
-                    iconCls:'x-fa fa-navicon',
-                    id: 'main-navigation-btn',
+                    iconCls:'x-sa sa-arrows-left',
+                    id: 'main-navigation-toggle-btn',
                     handler: 'onToggleNavigationSize'
                 },{
+                    padding: '0 0 0 0',
                     reference: 'mainprofile',
                     arrowVisible: false,
                     cls:'x-main-master',
@@ -50,6 +52,7 @@ Ext.define('saas.view.main.Main', {
                     bind: {
                         text: '{company.name}'
                     },
+                    arrowVisible: true,
                     menu: {
                         items: [{
                             xtype: 'menuseparator'
@@ -66,7 +69,7 @@ Ext.define('saas.view.main.Main', {
                     }
                 },
                 {
-                    iconCls:'x-fa fa-question',
+                    iconCls:'x-sa sa-help',
                     cls:'sa-nav-button',
                     ui: 'header',
                     arrowVisible: false,
@@ -114,7 +117,7 @@ Ext.define('saas.view.main.Main', {
                 {
                     //margin: '0 0 0 0',
                     xtype: 'tbtext',
-                    cls:'nav-realname',
+                    cls:'sa-nav-button nav-realname',
                     bind: {
                         html: '{account.realname}'
                     },

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

@@ -66,21 +66,21 @@ $treelist-nav-ui: (
         background: #34BAF6;
 
         img {
-            width: 54px;
-            height: 54px;
-            top: 5px;
-            left: 16px;
+            width: 32px;
+            height: 32px;
+            top: 16px;
+            left: 42px;
             position: relative;
         }
 
         .logo-text {
             // font-family: 'pingFangSC-Regular';
-            font-size: 18px;
+            font-size: 14px;
             color: #FFFFFF;
             text-align: left;
-            top: 23px;
+            top: 30px;
             position: absolute;
-            right: 28px;
+            left: 76px;
         }
     }
 }
@@ -221,25 +221,34 @@ body > .x-mask {
     filter: grayscale(100%);
     filter: gray;
 }
- .sa-nav-menu{
+.sa-nav-menu {
     background: #f8fbff;
     border: 1px solid #34baf6;
     margin-top: 10px;
- }
- .sa-nav-button{
+}
+
+.sa-nav-button {
+    color: #34BAF6;
+    padding: 0;
     box-shadow: none !important;
- }
- .sa-nav-menu.x-menu-item-text-default,
- .sa-nav-menu  .sa-navicon {
+
+    .x-btn-icon-el {
+        color: #34BAF6;
+    }
+}
+
+.sa-nav-menu.x-menu-item-text-default,
+.sa-nav-menu .sa-navicon {
     //font-family: PingFangSC-Regular;
     //font-size: 14px;
     color: #34BAF6;
     letter-spacing: 0;
     text-align: center;
- }
- .x-menu.sa-nav-menu .x-menu-bodyWrap{
+}
+
+.x-menu.sa-nav-menu .x-menu-bodyWrap {
     margin-left: -0.5px;
- }
+}
 /* .x-main-menu .x-fa.sa-navicon{
     color: #34BAF6;
 }  */
@@ -365,12 +374,26 @@ body > .x-mask {
     }
 }
 
-.x-main-master{
+.x-main-master,
+.x-main-master.x-btn-menu-active,
+.x-main-master.x-btn-pressed {
     .x-btn-wrap{
+        &:after {
+            color: #34BAF6,
+        }
         .x-btn-button{
             .x-btn-inner{
-                color:#999 !important;
+                font-size: 16px;
+                padding: 0;
+                color:#34BAF6 !important;
             }
         }
     }
 }
+
+#main-navigation-toggle-btn {
+    .x-btn-icon-el-header-small {
+        font-size: 12px;
+        color: #34BAF6;
+    }
+}

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

@@ -35,54 +35,29 @@ Ext.define('saas.view.main.MainController', {
         navigationList = refs.navigationTreeList,
         navCollapsed = !navigationList.navCollapsed,
         new_width = navCollapsed ? viewModel.get('smallNavWidth') : viewModel.get('navWidth'),
-        newLogoImgStyle = navCollapsed ? {
-            width: 50,
-            height: 50,
-            top: 7,
-            left: 6
-        } : {
-            width: 54,
-            height: 54,
-            top: 5,
-            left: 16
-        },
+        newLogoImgStyle = navCollapsed ? { width: 40, height: 40, top: 10, left: 10 } : { width: 32, height: 32, top: 16, left: 42 },
         newLogoTextStyle = navCollapsed ? {
-            5: {
-                opacity: 0
-            },
-            10: {
-                opacity: 0
-            },
-            100: {
-                opacity: 0,
-                display: 'none'
-            }
-        } : {
-            25: {
-                opacity: 0 
-            },
-            50: {
-                opacity: 1
-            }
-        },
-        newNavIconStyle = navCollapsed ? {
-            marginLeft: 6,
-            fontSize: 28
-        } : {
-            marginLeft: 22,
-            fontSize: 24
-        },
-        newNavTextStyle = navCollapsed ? {
-            opacity: 0
+            5: { opacity: 0 },
+            10: { opacity: 0 },
+            100: { opacity: 0, display: 'none' }
         } : {
-            opacity: 1
+            25: { opacity: 0 },
+            50: { opacity: 1 }
         },
-        ope = navCollapsed ? 'addCls' : 'removeCls';
-        
+        newNavIconStyle = navCollapsed ? { marginLeft: 6, fontSize: 28 } : { marginLeft: 22, fontSize: 24 },
+        newNavTextStyle = navCollapsed ? { opacity: 0 } : { opacity: 1 },
+        ope = navCollapsed ? 'addCls' : 'removeCls',
+        toggleIconCls = navCollapsed ? 'sa-arrows-right' : 'sa-arrows-left';
+
         var mainLogo = refs.mainLogo;
         var logoImg = mainLogo.el.dom.getElementsByTagName('img')[0];
         var logoText = mainLogo.el.dom.getElementsByClassName('logo-text')[0];
         var navItems = navigationList.el.dom.getElementsByClassName('x-navitem');
+        var toggleIcon = Ext.getCmp('main-navigation-toggle-btn');
+
+        Ext.suspendLayouts();
+        
+        toggleIcon.setIconCls('x-sa ' + toggleIconCls);
 
         mainLogo.animate({dynamic: true, duration: 500, to: {width: new_width}});
         Ext.fly(logoImg).animate({dynamic: true, duration: 500, to: newLogoImgStyle});
@@ -102,7 +77,7 @@ Ext.define('saas.view.main.MainController', {
         navigationList.el[ope]('nav-collapsed');
 
         navigationList.navCollapsed = navCollapsed;
-
+        Ext.resumeLayouts(true);
     },
 
     selectCompany: function(item) {

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

@@ -1,5 +1,6 @@
 $nav-font-size: 16px;
-$nav-font-color: #FFFFFF;
+$nav-font-color: #9697AC;
+$nav-font-color-over: #fff;
 
 .x-navpanel {
     overflow: visible;
@@ -48,8 +49,6 @@ $nav-font-color: #FFFFFF;
                                     display: flex;
     
                                     .nav-inner-icon {
-                                        opacity: 0.4;
-
                                         color: $nav-font-color;
                                         font-size: 24px;
                                         text-align: center;
@@ -67,7 +66,6 @@ $nav-font-color: #FFFFFF;
                                         color: $nav-font-color;
                                         letter-spacing: 4px;
                                         text-align: left;
-                                        opacity: 0.46;
                                         line-height: 60px;
                                         height: 60px;
                                     }
@@ -82,11 +80,11 @@ $nav-font-color: #FFFFFF;
                                 .nav-inner-wrap {
 
                                     .nav-inner-icon {
-                                        opacity: 1;
+                                        color: $nav-font-color-over;
                                     }
 
                                     .nav-inner-text {
-                                        opacity: 1;
+                                        color: $nav-font-color-over;
                                     }
                                 }
                             }

frontend/saas-web/packages/font-saas/sass/etc/icons.scss

@@ -1,27 +1,39 @@
 
-.sa-purchase:before { content: "\e613"; }
+.sa-purchase:before { content: "\e800"; }
 
-.sa-xiu:before { content: "\e605"; }
+.sa-tuichu:before { content: "\e811"; }
 
-.sa-weibiaoti1:before { content: "\ef04"; }
+.sa-feedback:before { content: "\e810"; }
 
-.sa-document:before { content: "\e654"; }
+.sa-document:before { content: "\e804"; }
 
-.sa-switch-on:before { content: "\e622"; }
+.sa-switch-on:before { content: "\e807"; }
 
-.sa-edit:before { content: "\e6ec"; }
+.sa-edit:before { content: "\e806"; }
 
-.sa-sale:before { content: "\e638"; }
+.sa-help:before { content: "\e813"; }
 
-.sa-arrows-left:before { content: "\ef02"; }
+.sa-sale:before { content: "\e801"; }
 
-.sa-warehouse:before { content: "\e63c"; }
+.sa-userBook:before { content: "\e80b"; }
 
-.sa-setting:before { content: "\e64b"; }
+.sa-arrows-left:before { content: "\e809"; }
 
-.sa-saas:before { content: "\ef03"; }
+.sa-serviceOnline:before { content: "\e80c"; }
 
-.sa-money:before { content: "\e6fa"; }
+.sa-accountCenter:before { content: "\e812"; }
 
-.sa-arrows-right:before { content: "\ef01"; }
+.sa-warehouse:before { content: "\e802"; }
+
+.sa-setting:before { content: "\e803"; }
+
+.sa-saas:before { content: "\e808"; }
+
+.sa-money:before { content: "\e805"; }
+
+.sa-question:before { content: "\e80d"; }
+
+.sa-arrows-right:before { content: "\e80a"; }
+
+.sa-userGuite:before { content: "\e80e"; }