优化遮罩导航兼容小屏幕

src/components/mouseMenu/main.less

@@ -1,21 +1,23 @@
 .mouseMenu {
     .menuBody {
-        min-width: 40%;
-        margin-left: 320px;
-        // height: 400px;
+        width: 60vw;
+        margin-left: 287px;
         background: #f1f2f3;
         position: relative;
         .first_menu {
             display: flex;
+            width: 60vw;
             >div {
+                width: 140px;
                 .menu_items{
                     // justify-content: flex-start;
                     padding: 0;
                     font-size: 14px;
                     color: #333;
+                    width: 100%;
                     line-height: 40px;
                     &:hover{
-                        background: #f2f4f7;
+                        background: #f00;
                         color: #296bef;
                     }
 

src/pages/home/home.js

@@ -328,7 +328,7 @@ export default class App extends Component {
           {
             this.state.mouseMenuMask ? <div className="maskMenu"></div> : null
           }
-          <div className="header dflexaj boxs">
+          <div className="header  boxs">
             {/* logo */}
             <div className="log">
               <img
@@ -349,26 +349,23 @@ export default class App extends Component {
                 openMouseMask={this.openMouseMask.bind(this)}
               />
             </div>
+            <div className="nav-person">
               <div className="navicon">
-              {" "}
                 <img
                   src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg"
                   alt=""
-              />{" "}
-              <a
-                href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
+                />
+                <a href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
                   target="_blank"
-                className="help"
-              >
+                  className="help">
                   更新日志
                 </a>
               </div>
               <div className="navicon">
-              {" "}
                 <img
                   src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
                   alt=""
-              />{" "}
+                />
                 <a
                   href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
                   target="_blank"
@@ -377,17 +374,6 @@ export default class App extends Component {
                   帮助中心
                 </a>
               </div>
-
-            {/* 用户头像信息 */}
-            <div className="userImg dflexa">
-              {/* <Link to="https://youzan.com" target="_blank" className="mr15 helpcenter">帮助中心</Link> */}
-
-              {/* {!this.state.userInfo.head?  <Avatar   size="large"
-        src={this.state.userInfo.head}/>:
-        <Avatar   size="large"
-        src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"/>}
-                */}
-            </div>
               <Pop
                 className="exitPop"
                 trigger="hover"
@@ -438,6 +424,7 @@ export default class App extends Component {
                 </div>
               </Pop>
             </div>
+          </div>
           <Dialog
             visible={this.state.visible}
             className="questModal"

src/pages/home/home.less

@@ -28,6 +28,9 @@
   top: 0;
   width: 100%;
   z-index: 33;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
   padding: 0 20px;
 }
 .start .log{
@@ -35,7 +38,6 @@
   font-size: 20px;
   font-weight: 500;
   color: #313233;
-  width: 300px;
   display: flex;
   align-items: center;
 }
@@ -46,12 +48,21 @@
 }
 .start .log span{
   padding-left: 15px;
+  width: 200px;
   border-left: 1px solid #ccc;
 }
 .nav{
   height: 100%;
-  min-width: 300px;
+  width: 60vw;
+  // min-width: 300px;
+  // flex:1;
+}
+//导航栏个人信息
+.nav-person{
+  display: flex;  
+  min-width: 130px;
   flex: 1;
+  justify-content: flex-end;
 }
 .start .helpcenter{
   color: #666;