mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

Improve layout spec demo style

Browse Source
This commit is contained in:
afc163 2016-12-23 17:58:37 +08:00
parent 4b08601f0f
commit cee6fa49e8
5 changed files with 138 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
docs/spec/layout/demo/aside-collapse.md
View File

@ -24,9 +24,9 @@ const AsideCollapse = React.createClass({
render() { render() {
const collapse = this.state.collapse; const collapse = this.state.collapse;
return ( return (
<div className={collapse ? "ant-layout-aside ant-layout-aside-collapse" : "ant-layout-aside"}> <div className={collapse ? "layout-aside layout-aside-collapse" : "layout-aside"}>
<aside className="ant-layout-sider"> <aside className="layout-sider">
<div className="ant-layout-logo"></div> <div className="layout-logo"></div>
<Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}> <Menu mode="inline" theme="dark" defaultSelectedKeys={['user']}>
<Menu.Item key="user"> <Menu.Item key="user">
<Icon type="user" /> <Icon type="user" />
@ -49,27 +49,25 @@ const AsideCollapse = React.createClass({
{!collapse && <span className="nav-text">导航五</span>} {!collapse && <span className="nav-text">导航五</span>}
</Menu.Item> </Menu.Item>
</Menu> </Menu>
<div className="ant-aside-action" onClick={this.onCollapseChange}> <div className="aside-action" onClick={this.onCollapseChange}>
{collapse ? <Icon type="right" /> : <Icon type="left" />} {collapse ? <Icon type="right" /> : <Icon type="left" />}
</div> </div>
</aside> </aside>
<div className="ant-layout-main"> <div className="layout-main">
<div className="ant-layout-header"></div> <div className="layout-header"></div>
<div className="ant-layout-breadcrumb"> <div className="layout-container">
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item> <Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> <Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
</div> <div className="layout-content">
<div className="ant-layout-container">
<div className="ant-layout-content">
<div style={{ height: 220 }}> <div style={{ height: 220 }}>
内容区域 内容区域
</div> </div>
</div> </div>
</div> </div>
<div className="ant-layout-footer"> <div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div> </div>
</div> </div>
@ -82,78 +80,77 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
```` ````
````css ````css
.ant-layout-aside { .layout-aside {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
.ant-layout-aside .ant-layout-logo { .layout-aside .layout-logo {
width: 150px;
height: 32px; height: 32px;
background: #333; background: #333;
border-radius: 6px; border-radius: 4px;
margin: 16px 24px 16px 28px; margin: 16px 24px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside-collapse .ant-layout-logo { .layout-aside-collapse .layout-logo {
width: 32px; width: 32px;
margin: 16px; margin: 16px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside .ant-layout-sider { .layout-aside .layout-sider {
width: 224px; width: 224px;
background: #404040; background: #404040;
position: absolute; position: absolute;
overflow: visible; overflow: visible;
padding-bottom: 24px; padding-bottom: 24px;
height: 100%; height: 100%;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside-collapse .ant-layout-sider { .layout-aside-collapse .layout-sider {
width: 64px; width: 64px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside .ant-layout-sider > .ant-menu { .layout-aside .layout-sider > .menu {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item { .layout-aside .layout-sider > .menu > .menu-item {
margin: 16px 0; margin: 16px 0;
} }
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { .layout-aside .layout-sider > .menu > .menu-item .nav-text {
vertical-align: baseline; vertical-align: baseline;
display: inline-block; display: inline-block;
} }
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { .layout-aside .layout-sider > .menu > .menu-item > .anticon {
transition: font-size .3s; transition: font-size .3s;
} }
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item { .layout-aside-collapse .layout-sider > .menu > .menu-item {
transition: all 0s ease; transition: all 0s ease;
} }
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon { .layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
font-size: 16px; font-size: 16px;
display: inline-block; display: inline-block;
} }
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text { .layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
display: none; display: none;
} }
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover { .layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
background: #2db7f5; background: #2db7f5;
color: #fff; color: #fff;
transition: all 0s ease; transition: all 0s ease;
} }
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text { .layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
background: #2db7f5; background: #2db7f5;
@ -163,7 +160,7 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
} }
/* 实际使用中需要改成 position: fixed */ /* 实际使用中需要改成 position: fixed */
.ant-layout-aside .ant-aside-action { .layout-aside .aside-action {
height: 42px; height: 42px;
width: 224px; width: 224px;
position: absolute; position: absolute;
@ -173,44 +170,42 @@ ReactDOM.render(<BrowserDemo><AsideCollapse /></BrowserDemo>, mountNode);
text-align: center; text-align: center;
line-height: 42px; line-height: 42px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside-collapse .ant-aside-action { .layout-aside-collapse .aside-action {
width: 64px; width: 64px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside .ant-layout-header { .layout-aside .layout-header {
background: #fff; background: #fff;
height: 64px; height: 64px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
} }
.ant-layout-aside .ant-layout-breadcrumb { .layout-aside .layout-main {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px; margin-left: 224px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside-collapse .ant-layout-main { .layout-aside-collapse .layout-main {
margin-left: 64px; margin-left: 64px;
transition: all 0.3s ease; transition: all .3s;
} }
.ant-layout-aside .ant-layout-container { .layout-aside .layout-container {
margin: 24px 16px; margin: 12px 16px 24px;
} }
.ant-layout-aside .ant-layout-content { .layout-aside .layout-content {
background: #fff; background: #fff;
padding: 24px; padding: 24px;
margin-top: 12px;
border-radius: 4px;
} }
.ant-layout-aside .ant-layout-footer { .layout-aside .layout-footer {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
text-align: center; text-align: center;

49
docs/spec/layout/demo/aside.md
View File

@ -14,9 +14,9 @@ const SubMenu = Menu.SubMenu;
ReactDOM.render( ReactDOM.render(
<BrowserDemo> <BrowserDemo>
<div className="ant-layout-aside"> <div className="layout-aside">
<aside className="ant-layout-sider"> <aside className="layout-sider">
<div className="ant-layout-logo"></div> <div className="layout-logo"></div>
<Menu mode="inline" theme="dark" <Menu mode="inline" theme="dark"
defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}> defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}> <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
@ -39,23 +39,21 @@ ReactDOM.render(
</SubMenu> </SubMenu>
</Menu> </Menu>
</aside> </aside>
<div className="ant-layout-main"> <div className="layout-main">
<div className="ant-layout-header"></div> <div className="layout-header"></div>
<div className="ant-layout-breadcrumb"> <div className="layout-container">
<Breadcrumb> <Breadcrumb>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item> <Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> <Breadcrumb.Item>某应用</Breadcrumb.Item>
</Breadcrumb> </Breadcrumb>
</div> <div className="layout-content">
<div className="ant-layout-container">
<div className="ant-layout-content">
<div style={{ height: 590 }}> <div style={{ height: 590 }}>
内容区域 内容区域
</div> </div>
</div> </div>
</div> </div>
<div className="ant-layout-footer"> <div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div> </div>
</div> </div>
@ -65,20 +63,19 @@ ReactDOM.render(
```` ````
````css ````css
.ant-layout-aside { .layout-aside {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
} }
.ant-layout-aside .ant-layout-logo { .layout-aside .layout-logo {
width: 150px;
height: 32px; height: 32px;
background: #333; background: #333;
border-radius: 6px; border-radius: 4px;
margin: 16px 24px 16px 28px; margin: 16px 24px;
} }
.ant-layout-aside .ant-layout-sider { .layout-aside .layout-sider {
width: 224px; width: 224px;
background: #404040; background: #404040;
position: absolute; position: absolute;
@ -87,34 +84,32 @@ ReactDOM.render(
height: 100%; height: 100%;
} }
.ant-layout-aside .ant-layout-sider > .ant-menu { .layout-aside .layout-sider > .menu {
margin-bottom: 20px; margin-bottom: 20px;
} }
.ant-layout-aside .ant-layout-header { .layout-aside .layout-header {
background: #fff; background: #fff;
height: 64px; height: 64px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
} }
.ant-layout-aside .ant-layout-breadcrumb { .layout-aside .layout-main {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px; margin-left: 224px;
} }
.ant-layout-aside .ant-layout-container { .layout-aside .layout-container {
margin: 24px 16px; margin: 12px 16px 24px;
} }
.ant-layout-aside .ant-layout-content { .layout-aside .layout-content {
background: #fff; background: #fff;
padding: 24px; padding: 24px;
margin-top: 12px;
border-radius: 4px;
} }
.ant-layout-aside .ant-layout-footer { .layout-aside .layout-footer {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
text-align: center; text-align: center;

32
docs/spec/layout/demo/ceiling.md
View File

@ -13,9 +13,9 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
ReactDOM.render( ReactDOM.render(
<BrowserDemo> <BrowserDemo>
<div className="ant-layout-ceiling-demo"> <div className="layout-ceiling-demo">
<div className="ant-layout-ceiling"> <div className="layout-ceiling">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<ul className="right"> <ul className="right">
<li>xxx@example.com</li> <li>xxx@example.com</li>
<li>|</li> <li>|</li>
@ -25,9 +25,9 @@ ReactDOM.render(
</ul> </ul>
</div> </div>
</div> </div>
<div className="ant-layout-header"> <div className="layout-header">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<div className="ant-layout-logo"></div> <div className="layout-logo"></div>
</div> </div>
</div> </div>
</div> </div>
@ -36,11 +36,11 @@ ReactDOM.render(
```` ````
````css ````css
.ant-layout-ceiling-demo { .layout-ceiling-demo {
height: 100%; height: 100%;
} }
.ant-layout-ceiling { .layout-ceiling {
font-size: 12px; font-size: 12px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
@ -48,31 +48,31 @@ ReactDOM.render(
color: #ddd; color: #ddd;
} }
.ant-layout-ceiling .right { .layout-ceiling .right {
float: right; float: right;
} }
.ant-layout-ceiling ul li { .layout-ceiling ul li {
display: inline-block; display: inline-block;
margin: 0 4px; margin: 0 4px;
} }
.ant-layout-ceiling-demo .ant-layout-wrapper { .layout-ceiling-demo .layout-wrapper {
padding: 0 50px; padding: 0 50px;
} }
.ant-layout-ceiling-demo .ant-layout-header { .layout-ceiling-demo .layout-header {
background: #fff; background: #fff;
height: 64px; height: 64px;
border-bottom: 1px solid #d9d9d9; border-bottom: 1px solid #e9e9e9;
} }
.ant-layout-ceiling-demo .ant-layout-logo { .layout-ceiling-demo .layout-logo {
width: 120px; width: 120px;
height: 32px; height: 32px;
background: #eee; background: #eee;
border-radius: 6px; border-radius: 4px;
margin: 16px 28px 16px 0; margin: 16px 24px 16px 0;
float: left; float: left;
} }
```` ````

64
docs/spec/layout/demo/top-aside.md
View File

@ -12,10 +12,10 @@ const SubMenu = Menu.SubMenu;
ReactDOM.render( ReactDOM.render(
<BrowserDemo> <BrowserDemo>
<div className="ant-layout-topaside"> <div className="layout-topaside">
<div className="ant-layout-header"> <div className="layout-header">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<div className="ant-layout-logo"></div> <div className="layout-logo"></div>
<Menu theme="dark" mode="horizontal" <Menu theme="dark" mode="horizontal"
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}> defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
<Menu.Item key="1">导航一</Menu.Item> <Menu.Item key="1">导航一</Menu.Item>
@ -24,8 +24,8 @@ ReactDOM.render(
</Menu> </Menu>
</div> </div>
</div> </div>
<div className="ant-layout-subheader"> <div className="layout-subheader">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<Menu mode="horizontal" <Menu mode="horizontal"
defaultSelectedKeys={['1']} style={{marginLeft: 124}}> defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
<Menu.Item key="1">二级导航</Menu.Item> <Menu.Item key="1">二级导航</Menu.Item>
@ -34,16 +34,14 @@ ReactDOM.render(
</Menu> </Menu>
</div> </div>
</div> </div>
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<div className="ant-layout-breadcrumb"> <Breadcrumb>
<Breadcrumb> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item> <Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> </Breadcrumb>
</Breadcrumb> <div className="layout-container">
</div> <aside className="layout-sider">
<div className="ant-layout-container">
<aside className="ant-layout-sider">
<Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}> <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']}>
<SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}> <SubMenu key="sub1" title={<span><Icon type="user" />导航一</span>}>
<Menu.Item key="1">选项1</Menu.Item> <Menu.Item key="1">选项1</Menu.Item>
@ -65,13 +63,13 @@ ReactDOM.render(
</SubMenu> </SubMenu>
</Menu> </Menu>
</aside> </aside>
<div className="ant-layout-content"> <div className="layout-content">
<div style={{ height: 240 }}> <div style={{ height: 240 }}>
<div style={{clear: 'both'}}>内容区域</div> <div style={{clear: 'both'}}>内容区域</div>
</div> </div>
</div> </div>
</div> </div>
<div className="ant-layout-footer"> <div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div> </div>
</div> </div>
@ -81,52 +79,50 @@ ReactDOM.render(
```` ````
````css ````css
.ant-layout-topaside { .layout-topaside {
height: 100%; height: 100%;
} }
.ant-layout-topaside .ant-layout-wrapper { .layout-topaside .layout-wrapper {
padding: 0 50px; padding: 0 50px;
} }
.ant-layout-topaside .ant-layout-header { .layout-topaside .layout-header {
background: #404040; background: #404040;
height: 64px; height: 64px;
} }
.ant-layout-topaside .ant-layout-logo { .layout-topaside .layout-logo {
width: 120px; width: 120px;
height: 32px; height: 32px;
background: #333; background: #333;
border-radius: 6px; border-radius: 4px;
margin: 16px 28px 16px 0; margin: 16px 24px 16px 0;
float: left; float: left;
} }
.ant-layout-topaside .ant-layout-subheader { .layout-topaside .layout-subheader {
height: 48px; height: 48px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
background: #fff; background: #fff;
margin-bottom: 12px;
} }
.ant-layout-topaside .ant-layout-breadcrumb { .layout-topaside .layout-container {
margin: 7px 0 -17px 24px;
}
.ant-layout-topaside .ant-layout-container {
background: #fff; background: #fff;
margin: 24px 0 0; margin: 12px 0 0;
position: relative; position: relative;
padding: 24px 0; padding: 24px 0;
overflow: hidden; overflow: hidden;
border-radius: 4px;
} }
.ant-layout-topaside .ant-layout-sider { .layout-topaside .layout-sider {
width: 224px; width: 224px;
float: left; float: left;
} }
.ant-layout-topaside .ant-layout-content { .layout-topaside .layout-content {
border-left: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9;
padding: 0 24px; padding: 0 24px;
overflow: auto; overflow: auto;
@ -134,7 +130,7 @@ ReactDOM.render(
left: -1px; left: -1px;
} }
.ant-layout-topaside .ant-layout-footer { .layout-topaside .layout-footer {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
text-align: center; text-align: center;

56
docs/spec/layout/demo/top.md
View File

@ -15,10 +15,10 @@ import BrowserDemo from 'site/theme/template/BrowserDemo';
ReactDOM.render( ReactDOM.render(
<BrowserDemo> <BrowserDemo>
<div className="ant-layout-top"> <div className="layout-top">
<div className="ant-layout-header"> <div className="layout-header">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<div className="ant-layout-logo"></div> <div className="layout-logo"></div>
<Menu theme="dark" mode="horizontal" <Menu theme="dark" mode="horizontal"
defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}> defaultSelectedKeys={['2']} style={{lineHeight: '64px'}}>
<Menu.Item key="1">导航一</Menu.Item> <Menu.Item key="1">导航一</Menu.Item>
@ -27,8 +27,8 @@ ReactDOM.render(
</Menu> </Menu>
</div> </div>
</div> </div>
<div className="ant-layout-subheader"> <div className="layout-subheader">
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<Menu mode="horizontal" <Menu mode="horizontal"
defaultSelectedKeys={['1']} style={{marginLeft: 124}}> defaultSelectedKeys={['1']} style={{marginLeft: 124}}>
<Menu.Item key="1">二级导航</Menu.Item> <Menu.Item key="1">二级导航</Menu.Item>
@ -37,19 +37,17 @@ ReactDOM.render(
</Menu> </Menu>
</div> </div>
</div> </div>
<div className="ant-layout-wrapper"> <div className="layout-wrapper">
<div className="ant-layout-breadcrumb"> <Breadcrumb>
<Breadcrumb> <Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>首页</Breadcrumb.Item> <Breadcrumb.Item>应用列表</Breadcrumb.Item>
<Breadcrumb.Item>应用列表</Breadcrumb.Item> <Breadcrumb.Item>某应用</Breadcrumb.Item>
<Breadcrumb.Item>某应用</Breadcrumb.Item> </Breadcrumb>
</Breadcrumb> <div className="layout-container">
</div>
<div className="ant-layout-container">
<div style={{ height: 210 }}></div> <div style={{ height: 210 }}></div>
</div> </div>
</div> </div>
<div className="ant-layout-footer"> <div className="layout-footer">
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持 Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
</div> </div>
</div> </div>
@ -58,47 +56,45 @@ ReactDOM.render(
```` ````
````css ````css
.ant-layout-top { .layout-top {
height: 100%; height: 100%;
} }
.ant-layout-top .ant-layout-wrapper { .layout-top .layout-wrapper {
padding: 0 50px; padding: 0 50px;
} }
.ant-layout-top .ant-layout-header { .layout-top .layout-header {
background: #404040; background: #404040;
height: 64px; height: 64px;
} }
.ant-layout-top .ant-layout-logo { .layout-top .layout-logo {
width: 120px; width: 120px;
height: 32px; height: 32px;
background: #333; background: #333;
border-radius: 6px; border-radius: 4px;
margin: 16px 28px 16px 0; margin: 16px 24px 16px 0;
float: left; float: left;
} }
.ant-layout-top .ant-layout-subheader { .layout-top .layout-subheader {
height: 48px; height: 48px;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9;
background: #fff; background: #fff;
margin-bottom: 12px;
} }
.ant-layout-top .ant-layout-breadcrumb { .layout-top .layout-container {
margin: 7px 0 -17px 24px;
}
.ant-layout-top .ant-layout-container {
background: #fff; background: #fff;
margin: 24px 0 0; margin: 12px 0 0;
position: relative; position: relative;
padding-top: 24px; padding-top: 24px;
overflow: hidden; overflow: hidden;
border-radius: 4px;
} }
.ant-layout-top .ant-layout-footer { .layout-top .layout-footer {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
text-align: center; text-align: center;