Commit 6844c413 authored by ddcat1115's avatar ddcat1115

tweak style & move Layout.Header outside of GlobalHeader

parent 6b7221c2
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>
);
}
}
@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);
......
......@@ -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,18 +164,20 @@ class BasicLayout extends React.PureComponent {
onCollapse={this.handleMenuCollapse}
/>
<Layout>
<GlobalHeader
logo={logo}
currentUser={currentUser}
fetchingNotices={fetchingNotices}
notices={notices}
collapsed={collapsed}
isMobile={this.state.isMobile}
onNoticeClear={this.handleNoticeClear}
onCollapse={this.handleMenuCollapse}
onMenuClick={this.handleMenuClick}
onNoticeVisibleChange={this.handleNoticeVisibleChange}
/>
<Header style={{ padding: 0 }}>
<GlobalHeader
logo={logo}
currentUser={currentUser}
fetchingNotices={fetchingNotices}
notices={notices}
collapsed={collapsed}
isMobile={this.state.isMobile}
onNoticeClear={this.handleNoticeClear}
onCollapse={this.handleMenuCollapse}
onMenuClick={this.handleMenuClick}
onNoticeVisibleChange={this.handleNoticeVisibleChange}
/>
</Header>
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
<Switch>
{
......@@ -201,29 +203,31 @@ class BasicLayout extends React.PureComponent {
<Route render={NotFound} />
</Switch>
</Content>
<GlobalFooter
links={[{
key: 'Pro 首页',
title: 'Pro 首页',
href: 'http://pro.ant.design',
blankTarget: true,
}, {
key: 'github',
title: <Icon type="github" />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
}, {
key: 'Ant Design',
title: 'Ant Design',
href: 'http://ant.design',
blankTarget: true,
}]}
copyright={
<div>
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
</div>
}
/>
<Footer style={{ padding: 0 }}>
<GlobalFooter
links={[{
key: 'Pro 首页',
title: 'Pro 首页',
href: 'http://pro.ant.design',
blankTarget: true,
}, {
key: 'github',
title: <Icon type="github" />,
href: 'https://github.com/ant-design/ant-design-pro',
blankTarget: true,
}, {
key: 'Ant Design',
title: 'Ant Design',
href: 'http://ant.design',
blankTarget: true,
}]}
copyright={
<div>
Copyright <Icon type="copyright" /> 2018 蚂蚁金服体验技术部出品
</div>
}
/>
</Footer>
</Layout>
</Layout>
);
......
......@@ -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}
......
......@@ -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 />)}
......
......@@ -5,7 +5,6 @@
}
.tabsCard {
margin-bottom: 24px;
:global {
.ant-card-head {
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