jim 7 лет назад
Родитель
Сommit
2a11d9ac93
2 измененных файлов с 44 добавлено и 3 удалено
  1. 36 3
      src/routes/UserProfile/Userinfo/Info.js
  2. 8 0
      src/routes/UserProfile/Userinfo/Info.less

+ 36 - 3
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 => (
       <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>

+ 8 - 0
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 {