顶部导航栏UI优化

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

@@ -66,12 +66,14 @@ Ext.define('saas.view.main.Main', {
                 },
                 {
                     iconCls:'x-fa fa-question',
+                    cls:'sa-nav-button',
                     ui: 'header',
                     arrowVisible: false,
                     tooltip: '帮助',
                     width:50, 
+                    height:45,
                     menu: {
-                        cls:'x-main-menu',
+                        cls:'x-main-menu sa-nav-menu',
                         items: [{
                             text: '新手导航',
                             iconCls:'x-fa fa-comment-o sa-navicon',
@@ -94,6 +96,7 @@ Ext.define('saas.view.main.Main', {
                             text: '客服热线',
                             iconCls:'x-fa fa-comment-o sa-navicon',
                             menu:{
+                                cls:'sa-nav-menu',
                                 items:[{
                                     text:'<span onclick="javascript:window.open(\'http://www.usoftchina.com\');" style="text-decoration:underline;color:blue;">优软科技官网</span>'
                                 },{	
@@ -127,7 +130,7 @@ Ext.define('saas.view.main.Main', {
                         html:'<img class="x-img x-box-item x-toolbar-item x-img-header" style="height:35px;width:35px;margin-top: 6px;margin-left: 14px;" src="{avatarUrl}" alt="">'
                     }, 
                     menu: {
-                        cls:'x-main-menu2',
+                        cls:'x-main-menu2 sa-nav-menu', 
                         items: [ {  
                             text: '账户中心',
                             iconCls:'x-fa fa-user-o sa-navicon',
@@ -140,7 +143,7 @@ Ext.define('saas.view.main.Main', {
                             handler:'feedbackMsg'
                         }, {
                             text: '退出',
-                            iconCls:'x-fa fa-power-off',
+                            iconCls:'x-fa fa-power-off sa-navicon',
                             handler: 'onLogout'
                         }]
                     }

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

@@ -221,32 +221,35 @@ body > .x-mask {
     filter: grayscale(100%);
     filter: gray;
 }
- .x-main-menu{
+ .sa-nav-menu{
     background: #f8fbff;
     border: 1px solid #34baf6;
     margin-top: 10px;
  }
- .x-main-menu .x-menu-item-text-default {
+ .sa-nav-button{
+    box-shadow: none !important;
+ }
+ .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.x-main-menu .x-menu-bodyWrap{
+ .x-menu.sa-nav-menu .x-menu-bodyWrap{
     margin-left: -0.5px;
  }
-.x-main-menu .x-fa.sa-navicon{
+/* .x-main-menu .x-fa.sa-navicon{
     color: #34BAF6;
-} 
-.x-main-menu .x-menu-item-text-default.x-menu-item.x-menu-item-default-focus,
-.x-main-menu .x-menu-item-text-default.x-menu-item.x-menu-item-active{
+}  */
+.sa-nav-menu .x-menu-item.x-menu-item-default-focus  .x-menu-item-text-default ,
+.sa-nav-menu .x-menu-item.x-menu-item-active  .x-menu-item-text-default,
+.sa-nav-menu .x-menu-item.x-menu-item-default-focus  .sa-navicon ,
+.sa-nav-menu .x-menu-item.x-menu-item-active  .sa-navicon{
     color: white;
 }
-.x-main-menu .x-fa.sa-navicon.x-menu-item-default-focus,
-.x-main-menu .x-fa.sa-navicon.x-menu-item-active{
-    color: #34BAF6;
-} 
+
 .x-main-menu::before{
     content: ' ';
     display: block;
@@ -268,16 +271,14 @@ body > .x-mask {
     margin-left: 16px;
 }
 .x-main-menu2::before{
-    content: ' ';
+    /* content: ' ';
     display: block;
     border-style: solid;
     box-shadow: 0px 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(15, 136, 232, 0.6);
     box-shadow: aliceblue;
     border-width: 17px;
     border-color: #cccccc;
-    /* border-color: #cccccc #6e838e #9c9d9e #bdc3c5; */
     position: fixed;
-    /* left: 100%; */
     top: 26px;
     -moz-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
     -webkit-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
@@ -286,5 +287,24 @@ body > .x-mask {
     -khtml-clip-path: polygon(100% 0px, 0 50%, 100% 100%);
     clip-path: polygon(0 100%, 50% 0, 100% 100%);
     margin-top: 25px;
-    margin-left: 47px;
+    margin-left: 47px; */
+
+    content: ' ';
+    display: block;
+    border-style: solid;
+    background-color: #f8fbff;
+    transform: rotate(45deg);
+    border-color: #34baf6;
+    position: fixed;
+    width: 15px;
+    height: 15px;
+    clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    -moz-clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    -webkit-clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    -o-clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    -ms-clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    -khtml-clip-path: polygon(0% 0, 100% 0%, 0 100%);
+    border-width: 1px 0px 0px 1px !important;
+    margin-top: -7.5px;
+    margin-left: 55px;
 }