|
|
|
@ -25,8 +25,16 @@ export default class Info extends Component { |
|
|
|
key = menuMap[key] ? key : 'base'; |
|
|
|
this.state = { |
|
|
|
selectKey: key, |
|
|
|
mode: 'inline', |
|
|
|
}; |
|
|
|
} |
|
|
|
componentDidMount() { |
|
|
|
window.addEventListener('resize', this.resize); |
|
|
|
this.resize(); |
|
|
|
} |
|
|
|
componentWillUnmount() { |
|
|
|
window.removeEventListener('resize', this.resize); |
|
|
|
} |
|
|
|
getmenu = () => { |
|
|
|
return Object.keys(menuMap).map(item => ( |
|
|
|
<Item key={item}>{menuMap[item]}</Item> |
|
|
|
@ -41,16 +49,37 @@ export default class Info extends Component { |
|
|
|
selectKey: key, |
|
|
|
}); |
|
|
|
}; |
|
|
|
resize = () => { |
|
|
|
if (!this.main) { |
|
|
|
return; |
|
|
|
} |
|
|
|
let mode = 'inline'; |
|
|
|
const { offsetWidth } = this.main; |
|
|
|
if (this.main.offsetWidth < 641 && offsetWidth > 400) { |
|
|
|
mode = 'horizontal'; |
|
|
|
} |
|
|
|
if (window.innerWidth < 768 && offsetWidth > 400) { |
|
|
|
mode = 'horizontal'; |
|
|
|
} |
|
|
|
this.setState({ |
|
|
|
mode, |
|
|
|
}); |
|
|
|
}; |
|
|
|
render() { |
|
|
|
const { match, routerData, currentUser } = this.props; |
|
|
|
if (!currentUser.userid) { |
|
|
|
return ''; |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div className={styles.main}> |
|
|
|
<div |
|
|
|
className={styles.main} |
|
|
|
ref={(ref) => { |
|
|
|
this.main = ref; |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className={styles.leftmenu}> |
|
|
|
<Menu |
|
|
|
mode="inline" |
|
|
|
mode={this.state.mode} |
|
|
|
selectedKeys={[this.state.selectKey]} |
|
|
|
onClick={this.selectKey} |
|
|
|
> |
|
|
|
@ -70,7 +99,11 @@ export default class Info extends Component { |
|
|
|
exact={item.exact} |
|
|
|
/> |
|
|
|
))} |
|
|
|
<Redirect exact from="/user-profile/userinfo" to="/user-profile/userinfo/base" /> |
|
|
|
<Redirect |
|
|
|
exact |
|
|
|
from="/user-profile/userinfo" |
|
|
|
to="/user-profile/userinfo/base" |
|
|
|
/> |
|
|
|
<Redirect to="/exception/404" /> |
|
|
|
</Switch> |
|
|
|
</div> |
|
|
|
|