tweak style & move Layout.Header outside of GlobalHeader

src/components/GlobalHeader/index.js

 import React, { PureComponent } from 'react';
-import { Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
+import { Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider } from 'antd';
 import moment from 'moment';
 import groupBy from 'lodash/groupBy';
 import Debounce from 'lodash-decorators/debounce';
@@ -8,8 +8,6 @@ import NoticeIcon from '../NoticeIcon';
 import HeaderSearch from '../HeaderSearch';
 import styles from './index.less';
 
-const { Header } = Layout;
-
 export default class GlobalHeader extends PureComponent {
   componentWillUnmount() {
     this.triggerResizeEvent.cancel();
@@ -68,7 +66,7 @@ export default class GlobalHeader extends PureComponent {
     );
     const noticeData = this.getNoticeData();
     return (
-      <Header className={styles.header}>
+      <div className={styles.header}>
         {isMobile && (
           [
             (
@@ -135,7 +133,7 @@ export default class GlobalHeader extends PureComponent {
             </Dropdown>
           ) : <Spin size="small" style={{ marginLeft: 8 }} />}
         </div>
-      </Header>
+      </div>
     );
   }
 }

src/components/GlobalHeader/index.less

 @import "~antd/lib/style/themes/default.less";
 
 .header {
+  height: 64px;
   padding: 0 12px 0 0;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

src/layouts/BasicLayout.js

@@ -16,7 +16,7 @@ import Authorized from '../utils/Authorized';
 import { getMenuData } from '../common/menu';
 import logo from '../assets/logo.svg';
 
-const { Content } = Layout;
+const { Content, Header, Footer } = Layout;
 const { AuthorizedRoute } = Authorized;
 
 /**
@@ -164,6 +164,7 @@ class BasicLayout extends React.PureComponent {
           onCollapse={this.handleMenuCollapse}
         />
         <Layout>
+          <Header style={{ padding: 0 }}>
             <GlobalHeader
               logo={logo}
               currentUser={currentUser}
@@ -176,6 +177,7 @@ class BasicLayout extends React.PureComponent {
               onMenuClick={this.handleMenuClick}
               onNoticeVisibleChange={this.handleNoticeVisibleChange}
             />
+          </Header>
           <Content style={{ margin: '24px 24px 0', height: '100%' }}>
             <Switch>
               {
@@ -201,6 +203,7 @@ class BasicLayout extends React.PureComponent {
               <Route render={NotFound} />
             </Switch>
           </Content>
+          <Footer style={{ padding: 0 }}>
             <GlobalFooter
               links={[{
                 key: 'Pro 首页',
@@ -224,6 +227,7 @@ class BasicLayout extends React.PureComponent {
                 </div>
               }
             />
+          </Footer>
         </Layout>
       </Layout>
     );

src/routes/Dashboard/Monitor.js

@@ -107,7 +107,6 @@ export default class Monitor extends PureComponent {
           <Col xl={12} lg={24} sm={24} xs={24}>
             <Card
               title="各品类占比"
-              style={{ marginBottom: 24 }}
               bordered={false}
               className={styles.pieCard}
             >
@@ -147,7 +146,7 @@ export default class Monitor extends PureComponent {
               </Row>
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+          <Col xl={6} lg={12} sm={24} xs={24}>
             <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
               <TagCloud
                 data={tags}
@@ -155,7 +154,7 @@ export default class Monitor extends PureComponent {
               />
             </Card>
           </Col>
-          <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
+          <Col xl={6} lg={12} sm={24} xs={24}>
             <Card title="资源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
               <WaterWave
                 height={161}

src/routes/Forms/AdvancedForm.js

@@ -268,7 +268,7 @@ class AdvancedForm extends PureComponent {
             </Row>
           </Form>
         </Card>
-        <Card title="成员管理" className={styles.card} bordered={false}>
+        <Card title="成员管理" bordered={false}>
           {getFieldDecorator('members', {
             initialValue: tableData,
           })(<TableForm />)}

src/routes/Profile/AdvancedProfile.less

@@ -5,7 +5,6 @@
 }
 
 .tabsCard {
-  margin-bottom: 24px;
   :global {
     .ant-card-head {
       padding: 0 16px;