完善菜单在移动端的显示效果

src/web/components/header/header.js

@@ -7,6 +7,7 @@ import { Drawer} from 'antd';
 import { copyToClipboard,tranBase58,numToalgorithm } from '../.././../utils/util';
 import Notification from '../.././../utils/notification';
 import Message from 'flarej/lib/components/antd/message';
+import logo from '../../images/logo_color.png';
 import 'flarej/lib/components/antd/menu';
 import 'flarej/lib/components/antd/select';
 import 'flarej/lib/components/antd/icon';
@@ -55,7 +56,7 @@ export default class Header extends Component {
     //   asdf
     // </div>
     <div>
-      menu
+      <img src={logo}/>
     </div>
   )
 

src/web/components/header/header.scss

@@ -10,6 +10,22 @@
   display: flex;
   flex: auto 0 0;
 
+  .minimenu {
+    flex: 1;
+    display: none;
+    text-align: center;
+
+    .menuDr {
+      line-height: 70px;
+      color: #fff;
+      font-size: 24px;
+    }
+
+    @media (max-width:575px) {
+      display: block;
+    }
+  }
+
   .nav {
     font-size: 0.875rem;
     margin-left: 50px;
@@ -18,26 +34,24 @@
     color: #fff;
     border: 0;
     flex: 1;
-    @media (max-width:950px){
+    @media (max-width:745px){
       margin-left: 0;
+    }
+    @media (max-width:575px){
       display: none;
     }
-    // @media (max-width:500px) {
-    //   display: none;
-    //   // .menuDr {
-    //   //   display: block;
-    //   // }
-    // }
-      li {
-        color: #fff !important;
-        font-size: 16px;
-        line-height: 61px;
-        margin: 0px;
-        &:hover{
-          background: #3C4C9C !important;
+
+    li {
+      color: #fff !important;
+      font-size: 16px;
+      line-height: 61px;
+      margin: 0px;
+      &:hover {
+        background: #3C4C9C !important;
       } 
     }
   }
+
   .logo {
     margin: 16px 0 16px 24px;
     float: left;
@@ -45,35 +59,29 @@
     width: 159px;
     background-image: url('../../images/logo.png');
     background-repeat: no-repeat;
+    @media (max-width:745px) {
+      width: 36px;
+      background-image: url('../../images/logo_mini.png');
+      background-repeat: no-repeat;
+    }
   }
 
   .color {
-    color:'red'
-  }
-
-  .menuDr {
-    line-height: 62px;
-    display: none;
-    margin: 2px 0 0 10px;
-    color: #fff;
-    @media (max-width:950px) {
-      display: block;
-    }
+    color: 'red';
   }
 
   .note {
     color: #fff;
-    float:right;
+    float: right;
     padding: 15px;
     font-size: 14px;
-    color:#ADC6FF;
+    color: #ADC6FF;
     line-height: 14px;
     display: flex;
     align-items: center;
-    @media (max-width:950px) and (min-width:501px){
-      display: none;
+    @media (max-width:430px) {
+      padding-left:0; 
     }
-
     .value {
       width: 200px;
       border: 1px solid #ADC6FF;
@@ -89,6 +97,11 @@
       margin-left: 5px;
       cursor: pointer;
     }
+    .t{
+      @media (max-width:430px) {
+        display: none;
+      }
+    }
   }
   &.isMenuOpen > ul {
     padding-left: 0;
@@ -171,17 +184,19 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-family: MicrosoftYaHei;
+    font-family: 'MicrosoftYaHei';
     font-size: 12px;
     color: #999999;
+
     .linker {
       text-decoration: none;
       color: #5A77D3;
     }
+
     .linker:hover {
       color: #5A77D3;
     }
-} 
+  } 
 }
 
 .gl {
@@ -214,4 +229,21 @@
   color: #374159;
   line-height: 25px;
   margin: 30px auto 15px auto;
+}
+
+.lefmenu {
+  border-right: 0;
+}
+
+.leftdrawer {
+  .ant-drawer-body {
+    padding: 0;
+  }
+}
+
+.ledgers {
+
+  @media (max-width:1260px) {
+    width: 200px;
+  }
 }
\ No newline at end of file

src/web/components/header/header.t.html

 <header class="site-header">
   <div class="logo">
   </div>
-  <ant-Icon class="menuDr" type="menu" onClick={handleMenuShow}/>
+  <div class="minimenu">
+    <ant-Icon class="menuDr" type="menu" onClick={handleMenuShow}/>
+  </div>
   <ant-Menu mode="horizontal" class="nav" selectedKeys={store.header.selectMenu} onClick={CheckMenu}>
     <!-- <ant-MenuItem key="search"> <ant-Icon type="home" />首页</ant-MenuItem>
     <ant-MenuItem key="account"> <ant-Icon type="switcher" />数据账户</ant-MenuItem>
@@ -13,11 +15,11 @@
     </#each>
   </ant-Menu>
    <div class="note">
-    账本：
+    <span class="t">账本：</span>
     <!-- <ant-Select placeholder="请选择账本" class={styles.value} >
       <ant-Option value="64hnH4a8n48LeEP5HU2bMWmNxUPcaZ1JRCehRwvuNS8Ty" >64hnH4a8n48LeEP5HU2bMWmNxUPcaZ1JRCehRwvuNS8Ty</ant-Option>
     </ant-Select> -->
-    <ant-Select  value="{common.defaultledger}" onChange={handleSelectChange}>
+    <ant-Select  value="{common.defaultledger}" onChange={handleSelectChange} class="ledgers">
       <#each {{common.ledgers}}>
         <ant-Option key="{@index}" value="{{value}}">{{value}}</ant-Option>
       </#each>
@@ -111,16 +113,11 @@
   placement="left"
   visible={showMenu}
   onClose={handleMenuHide}
-  closable={true}
+  closable={false}
   maskClosable={true}
-  style="padding:0" 
+  class="leftdrawer"
 >
-  <ant-Menu mode="vertical" selectedKeys={store.header.selectMenu} onClick={CheckMenu}>
-    <!-- <ant-MenuItem key="search"> <ant-Icon type="home" />首页</ant-MenuItem>
-    <ant-MenuItem key="account"> <ant-Icon type="switcher" />数据账户</ant-MenuItem>
-    <ant-MenuItem key="3"> <ant-Icon type="block" />区块</ant-MenuItem>
-    <ant-MenuItem key="4"> <ant-Icon type="swap" />交易</ant-MenuItem>
-    <ant-MenuItem key="user"> <ant-Icon type="user" />用户</ant-MenuItem> -->
+  <ant-Menu mode="vertical" selectedKeys={store.header.selectMenu} onClick={CheckMenu} class="lefmenu">
     <#each {store.header.menuData}>
       <ant-MenuItem key={path}> <ant-Icon type={icon} />{name}</ant-MenuItem>
     </#each>