Browse Source

Adjust Header style details

pull/2551/head
afc163 8 years ago
parent
commit
1cc97f567b
  1. 4
      src/components/GlobalHeader/index.less
  2. 2
      src/components/SelectLang/index.js
  3. 4
      src/components/SelectLang/index.less
  4. 12
      src/components/TopNavHeader/index.js
  5. 7
      src/components/TopNavHeader/index.less

4
src/components/GlobalHeader/index.less

@ -4,7 +4,7 @@
.header { .header {
height: 64px; height: 64px;
padding: 0 12px 0 0; padding: 0;
background: #fff; background: #fff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative; position: relative;
@ -76,7 +76,7 @@ i.trigger {
margin: 20px 8px 20px 0; margin: 20px 8px 20px 0;
color: @primary-color; color: @primary-color;
background: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.85);
vertical-align: middle; vertical-align: top;
} }
} }
} }

2
src/components/SelectLang/index.js

@ -29,7 +29,7 @@ export default class SelectLang extends PureComponent {
</Menu> </Menu>
); );
return ( return (
<Dropdown overlay={langMenu}> <Dropdown overlay={langMenu} placement="bottomRight">
<Icon <Icon
type="global" type="global"
className={classNames(styles.dropDown, className)} className={classNames(styles.dropDown, className)}

4
src/components/SelectLang/index.less

@ -14,4 +14,8 @@
font-size: 14px; font-size: 14px;
vertical-align: top; vertical-align: top;
line-height: 64px; line-height: 64px;
> svg {
position: relative;
top: 2px;
}
} }

12
src/components/TopNavHeader/index.js

@ -5,17 +5,13 @@ import BaseMenu from '../SiderMenu/BaseMenu';
import styles from './index.less'; import styles from './index.less';
export default class TopNavHeader extends PureComponent { export default class TopNavHeader extends PureComponent {
constructor(props) { state = {
super(props); maxWidth: undefined,
};
this.state = {
maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 330 - 165 - 4 - 36,
};
}
static getDerivedStateFromProps(props) { static getDerivedStateFromProps(props) {
return { return {
maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 330 - 165 - 4 - 36, maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
}; };
} }

7
src/components/TopNavHeader/index.less

@ -2,13 +2,12 @@
width: 100%; width: 100%;
transition: background 0.3s, width 0.2s; transition: background 0.3s, width 0.2s;
height: 64px; height: 64px;
padding: 0 12px 0 0;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
position: relative; position: relative;
:global { :global {
.ant-menu-submenu.ant-menu-submenu-horizontal { .ant-menu-submenu.ant-menu-submenu-horizontal {
line-height: 64px;
height: 100%; height: 100%;
padding-top: 9px;
.ant-menu-submenu-title { .ant-menu-submenu-title {
height: 100%; height: 100%;
} }
@ -24,7 +23,7 @@
&.wide { &.wide {
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
padding-left: 4px; padding-left: 0;
} }
.left { .left {
flex: 1; flex: 1;
@ -51,7 +50,7 @@
h1 { h1 {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: top;
font-size: 16px; font-size: 16px;
margin: 0 0 0 12px; margin: 0 0 0 12px;
font-weight: 400; font-weight: 400;

Loading…
Cancel
Save