Commit 6844c413 authored by ddcat1115's avatar ddcat1115

tweak style & move Layout.Header outside of GlobalHeader

parent 6b7221c2
import React, { PureComponent } from 'react'; 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 moment from 'moment';
import groupBy from 'lodash/groupBy'; import groupBy from 'lodash/groupBy';
import Debounce from 'lodash-decorators/debounce'; import Debounce from 'lodash-decorators/debounce';
...@@ -8,8 +8,6 @@ import NoticeIcon from '../NoticeIcon'; ...@@ -8,8 +8,6 @@ import NoticeIcon from '../NoticeIcon';
import HeaderSearch from '../HeaderSearch'; import HeaderSearch from '../HeaderSearch';
import styles from './index.less'; import styles from './index.less';
const { Header } = Layout;
export default class GlobalHeader extends PureComponent { export default class GlobalHeader extends PureComponent {
componentWillUnmount() { componentWillUnmount() {
this.triggerResizeEvent.cancel(); this.triggerResizeEvent.cancel();
...@@ -68,7 +66,7 @@ export default class GlobalHeader extends PureComponent { ...@@ -68,7 +66,7 @@ export default class GlobalHeader extends PureComponent {
); );
const noticeData = this.getNoticeData(); const noticeData = this.getNoticeData();
return ( return (
<Header className={styles.header}> <div className={styles.header}>
{isMobile && ( {isMobile && (
[ [
( (
...@@ -135,7 +133,7 @@ export default class GlobalHeader extends PureComponent { ...@@ -135,7 +133,7 @@ export default class GlobalHeader extends PureComponent {
</Dropdown> </Dropdown>
) : <Spin size="small" style={{ marginLeft: 8 }} />} ) : <Spin size="small" style={{ marginLeft: 8 }} />}
</div> </div>
</Header> </div>
); );
} }
} }
@import "~antd/lib/style/themes/default.less"; @import "~antd/lib/style/themes/default.less";
.header { .header {
height: 64px;
padding: 0 12px 0 0; padding: 0 12px 0 0;
background: #fff; background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
......
...@@ -16,7 +16,7 @@ import Authorized from '../utils/Authorized'; ...@@ -16,7 +16,7 @@ import Authorized from '../utils/Authorized';
import { getMenuData } from '../common/menu'; import { getMenuData } from '../common/menu';
import logo from '../assets/logo.svg'; import logo from '../assets/logo.svg';
const { Content } = Layout; const { Content, Header, Footer } = Layout;
const { AuthorizedRoute } = Authorized; const { AuthorizedRoute } = Authorized;
/** /**
...@@ -164,18 +164,20 @@ class BasicLayout extends React.PureComponent { ...@@ -164,18 +164,20 @@ class BasicLayout extends React.PureComponent {
onCollapse={this.handleMenuCollapse} onCollapse={this.handleMenuCollapse}
/> />
<Layout> <Layout>
<GlobalHeader <Header style={{ padding: 0 }}>
logo={logo} <GlobalHeader
currentUser={currentUser} logo={logo}
fetchingNotices={fetchingNotices} currentUser={currentUser}
notices={notices} fetchingNotices={fetchingNotices}
collapsed={collapsed} notices={notices}
isMobile={this.state.isMobile} collapsed={collapsed}
onNoticeClear={this.handleNoticeClear} isMobile={this.state.isMobile}
onCollapse={this.handleMenuCollapse} onNoticeClear={this.handleNoticeClear}
onMenuClick={this.handleMenuClick} onCollapse={this.handleMenuCollapse}
onNoticeVisibleChange={this.handleNoticeVisibleChange} onMenuClick={this.handleMenuClick}
/> onNoticeVisibleChange={this.handleNoticeVisibleChange}
/>
</Header>
<Content style={{ margin: '24px 24px 0', height: '100%' }}> <Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Switch> <Switch>
{ {
...@@ -201,29 +203,31 @@ class BasicLayout extends React.PureComponent { ...@@ -201,29 +203,31 @@ class BasicLayout extends React.PureComponent {
<Route render={NotFound} /> <Route render={NotFound} />
</Switch> </Switch>
</Content> </Content>
<GlobalFooter <Footer style={{ padding: 0 }}>
links={[{ <GlobalFooter
key: 'Pro 首页', links={[{
title: 'Pro 首页', key: 'Pro 首页',
href: 'http://pro.ant.design', title: 'Pro 首页',
blankTarget: true, href: 'http://pro.ant.design',
}, { blankTarget: true,
key: 'github', }, {
title: <Icon type="github" />, key: 'github',
href: 'https://github.com/ant-design/ant-design-pro', title: <Icon type="github" />,
blankTarget: true, href: 'https://github.com/ant-design/ant-design-pro',
}, { blankTarget: true,
key: 'Ant Design', }, {
title: 'Ant Design', key: 'Ant Design',
href: 'http://ant.design', title: 'Ant Design',
blankTarget: true, href: 'http://ant.design',
}]} blankTarget: true,
copyright={ }]}
<div> copyright={
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品 <div>
</div> Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
} </div>
/> }
/>
</Footer>
</Layout> </Layout>
</Layout> </Layout>
); );
......
...@@ -107,7 +107,6 @@ export default class Monitor extends PureComponent { ...@@ -107,7 +107,6 @@ export default class Monitor extends PureComponent {
<Col xl={12} lg={24} sm={24} xs={24}> <Col xl={12} lg={24} sm={24} xs={24}>
<Card <Card
title="各品类占比" title="各品类占比"
style={{ marginBottom: 24 }}
bordered={false} bordered={false}
className={styles.pieCard} className={styles.pieCard}
> >
...@@ -147,7 +146,7 @@ export default class Monitor extends PureComponent { ...@@ -147,7 +146,7 @@ export default class Monitor extends PureComponent {
</Row> </Row>
</Card> </Card>
</Col> </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' }}> <Card title="热门搜索" loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }}>
<TagCloud <TagCloud
data={tags} data={tags}
...@@ -155,7 +154,7 @@ export default class Monitor extends PureComponent { ...@@ -155,7 +154,7 @@ export default class Monitor extends PureComponent {
/> />
</Card> </Card>
</Col> </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}> <Card title="资源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
<WaterWave <WaterWave
height={161} height={161}
......
...@@ -268,7 +268,7 @@ class AdvancedForm extends PureComponent { ...@@ -268,7 +268,7 @@ class AdvancedForm extends PureComponent {
</Row> </Row>
</Form> </Form>
</Card> </Card>
<Card title="成员管理" className={styles.card} bordered={false}> <Card title="成员管理" bordered={false}>
{getFieldDecorator('members', { {getFieldDecorator('members', {
initialValue: tableData, initialValue: tableData,
})(<TableForm />)} })(<TableForm />)}
......
...@@ -5,7 +5,6 @@ ...@@ -5,7 +5,6 @@
} }
.tabsCard { .tabsCard {
margin-bottom: 24px;
:global { :global {
.ant-card-head { .ant-card-head {
padding: 0 16px; padding: 0 16px;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment