diff --git a/src/routes/UserProfile/Userinfo/Info.js b/src/routes/UserProfile/Userinfo/Info.js index d8b6edd7a2f34c8c4ad03b3f23083ad36c3d1f8d..ad6cdca52351503d0d385a27a7e1a91aef1a8463 100644 --- a/src/routes/UserProfile/Userinfo/Info.js +++ b/src/routes/UserProfile/Userinfo/Info.js @@ -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 => ( {menuMap[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 ( -
+
{ + this.main = ref; + }} + >
@@ -70,7 +99,11 @@ export default class Info extends Component { exact={item.exact} /> ))} - +
diff --git a/src/routes/UserProfile/Userinfo/Info.less b/src/routes/UserProfile/Userinfo/Info.less index 8d24f53a8755926825407f3083ecdb197920d935..9f1e6bda875b2c9a4be3a2c75f94df175a8c4c09 100644 --- a/src/routes/UserProfile/Userinfo/Info.less +++ b/src/routes/UserProfile/Userinfo/Info.less @@ -15,6 +15,9 @@ .ant-menu-inline { border: none; } + .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { + font-weight: bold; + } } } .right { @@ -31,6 +34,11 @@ margin-bottom: 12px; } } + :global { + .ant-list-split .ant-list-item:last-child { + border-bottom: 1px solid #e8e8e8; + } + } } :global { .ant-list-item-meta {