排版和些细节

src/App.css

@@ -50,9 +50,45 @@
 
 .App-Card-content {
   margin-bottom: 2vh;
-  white-space: pre;
+  white-space: pre-line;
 }
 
 .ant-layout .ant-layout-header {
   background: #404040
-}
+}
\ No newline at end of file
+.font-C-Gray{
+    color:#ccc;
+}
+.App-Poster-Content .title{
+  font-size: 2.5rem; 
+  padding: .8rem 0;
+  color: #eee
+}
+.App-Poster-Content a{
+  padding: 0 .5vw
+}
+
+.App-Poster-Content .title .sub{
+   font-size: 1rem;
+   color: #eee;
+   padding: 0 1vw
+}
+
+.ant-layout-content>p{
+  color: #eee;
+  font-size: 1.2rem
+}
+
+.ant-layout-footer{
+  text-align: right
+}
+
+.ant-card-head-title{
+  font-size:1.5rem;
+}
+
+
+.ant-timeline>.ant-timeline-item-pending,.ant-timeline>.ant-timeline-item-pending>div {
+  padding-bottom:0px;
+}
+

src/Nav.js

 import React from 'react'
-import { Menu } from 'antd'
+import { Menu ,Icon ,Dropdown} from 'antd'
 import { FormattedMessage } from 'react-intl'
+// const SubMenu = Menu.SubMenu;
+// const MenuItemGroup = Menu.ItemGroup;
 
-export default class MyComponent extends React.Component {
+export default class Nav_Mobile extends React.Component{
+
+  handleClick = (e) => {
+    console.log('click ', e);
+  }
   render() {
-    
-    return (
-      <div>
-        <div className="App-Logo">
-          <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
-          <span>MoeCube</span>           
+    const menu=(
+          <Menu style={{width:'100%'}}>
+            <Menu.Item key="0">
+              <a href="#">1st menu item</a>
+            </Menu.Item>
+            <Menu.Item key="1">
+              <a href="#">2nd menu item</a>
+            </Menu.Item>
+            <Menu.Divider />
+            <Menu.Item key="3">3d menu item</Menu.Item>
+          </Menu>
+    )
+    if(!this.props.isMobile){
+      return (
+        <div>
+          <div className="App-Logo">
+            <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
+            <span>MoeCube</span>           
+          </div>
+          <Menu
+            theme="dark"
+            mode="horizontal"
+            defaultSelectedKeys={['1']}
+            style={{ lineHeight: '64px' }}>
+
+            <Menu.Item key="1">
+              <FormattedMessage id={"Home"}/>            
+            </Menu.Item>
+            <Menu.Item key="2">
+              <a href="https://ygobbs.com/">
+                <FormattedMessage id={"BBS"}/>
+              </a>
+            </Menu.Item>
+          </Menu>
         </div>
-        <Menu
-          theme="dark"
-          mode="horizontal"
-          defaultSelectedKeys={['1']}
-          style={{ lineHeight: '64px' }}>
+      );
+    }else{
+      return (
+        <div >
+          <div className="App-Logo">
+            <img alt="img" src={require("../public/logo.png")} style={{width: '45px', margin: '10px'}}/>
+            <span>MoeCube</span>           
+          </div>
 
-          <Menu.Item key="1">
-            <FormattedMessage id={"Home"}/>            
-          </Menu.Item>
-          <Menu.Item key="2">
-            <a href="https://ygobbs.com/">
-              <FormattedMessage id={"BBS"}/>
+          <Dropdown overlay={menu} trigger={['click']}>
+            <a className="ant-dropdown-link" href="#">
+              Click me <Icon type="down" />
             </a>
-          </Menu.Item>
-        </Menu>
-      </div>
-    )
+          </Dropdown>
+
+          
+        </div>
+      )
+    }
   }
-}
+}
\ No newline at end of file