Commit c222d675 authored by afc163's avatar afc163

update components

parent 6375d51c
...@@ -11,7 +11,14 @@ import FooterToolbar from 'ant-design-pro/lib/FooterToolbar'; ...@@ -11,7 +11,14 @@ import FooterToolbar from 'ant-design-pro/lib/FooterToolbar';
import { Button } from 'antd'; import { Button } from 'antd';
ReactDOM.render( ReactDOM.render(
<div style={{ background: '#f7f7f7' }}> <div style={{ background: '#f7f7f7', padding: 24 }}>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p> <p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p> <p>页面内容 页面内容 页面内容 页面内容</p>
<p>页面内容 页面内容 页面内容 页面内容</p> <p>页面内容 页面内容 页面内容 页面内容</p>
......
...@@ -25,6 +25,8 @@ const links = [{ ...@@ -25,6 +25,8 @@ const links = [{
const copyright = <div>Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品</div>; const copyright = <div>Copyright <Icon type="copyright" /> 2017 蚂蚁金服体验技术部出品</div>;
ReactDOM.render( ReactDOM.render(
<GlobalFooter links={links} copyright={copyright} /> <div style={{ background: '#f5f5f5', overflow: 'hidden' }}>
<GlobalFooter links={links} copyright={copyright} />
</div>
, mountNode); , mountNode);
```` ````
...@@ -60,7 +60,10 @@ export default class HeaderSearch extends PureComponent { ...@@ -60,7 +60,10 @@ export default class HeaderSearch extends PureComponent {
[styles.show]: this.state.searchMode, [styles.show]: this.state.searchMode,
}); });
return ( return (
<span className={className} onClick={this.enterSearchMode}> <span
className={classNames(className, styles.headerSearch)}
onClick={this.enterSearchMode}
>
<Icon type="search" /> <Icon type="search" />
<AutoComplete <AutoComplete
className={inputClass} className={inputClass}
......
@import "~antd/lib/style/themes/default.less"; @import "~antd/lib/style/themes/default.less";
.input { .headerSearch {
transition: width .3s, margin-left .3s; :global(.anticon-search) {
width: 0; cursor: pointer;
background: transparent; font-size: 16px;
border-radius: 0;
:global(.ant-select-selection) {
background: transparent;
}
input {
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
} }
&, .input {
&:hover, transition: width .3s, margin-left .3s;
&:focus { width: 0;
border-bottom: 1px solid @border-color-base; background: transparent;
} border-radius: 0;
&.show { :global(.ant-select-selection) {
width: 210px; background: transparent;
margin-left: 8px; }
input {
border: 0;
padding-left: 0;
padding-right: 0;
box-shadow: none !important;
}
&,
&:hover,
&:focus {
border-bottom: 1px solid @border-color-base;
}
&.show {
width: 210px;
margin-left: 8px;
}
} }
} }
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