use less variables & remove some responsive setting

src/routes/Userinfo/BaseView.js

@@ -1,7 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import { Form, Input, Upload, Select, Button } from 'antd';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import styles from './BaseView.less';
 import GeographicView from './GeographicView';
 import PhoneView from './PhoneView';
@@ -48,16 +46,8 @@ const validatorPhone = (rule, value, callback) => {
 
 @Form.create()
 export default class BaseView extends Component {
-  state = {
-    md: false,
-  };
   componentDidMount() {
     this.setBaseInfo();
-    this.resize();
-    window.addEventListener('resize', this.resize);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
   }
   setBaseInfo = () => {
     const { currentUser } = this.props;
@@ -78,24 +68,11 @@ export default class BaseView extends Component {
   getViewDom = (ref) => {
     this.view = ref;
   };
-  @Bind()
-  @Debounce(200)
-  resize() {
-    if (this.view.offsetWidth > 696) {
-      this.setState({
-        md: false,
-      });
-      return;
-    }
-    this.setState({
-      md: true,
-    });
-  }
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
       <div
-        className={`${styles.baseView} ${this.state.md ? styles.md : ''}`}
+        className={styles.baseView}
         ref={this.getViewDom}
       >
         <div className={styles.left}>

src/routes/Userinfo/BaseView.less

@@ -3,16 +3,7 @@
 .baseView {
   display: flex;
   margin-top: 12px;
-  &.md {
-    flex-direction: column-reverse;
-    .right {
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      max-width: 448px;
-    }
-  }
+
   .left {
     max-width: 448px;
     min-width: 224px;
@@ -22,8 +13,8 @@
     padding-left: 104px;
     .avatar_title {
       height: 22px;
-      font-size: 14px;
-      color: rgba(0, 0, 0, 0.85);
+      font-size: @font-size-base;
+      color: @heading-color;
       line-height: 22px;
       margin-bottom: 8px;
     }
@@ -42,3 +33,17 @@
     }
   }
 }
+
+@media screen and (max-width: @screen-xl) {
+  .baseView {
+    flex-direction: column-reverse;
+
+    .right {
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 448px;
+    }
+  }
+}

src/routes/Userinfo/Info.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Route, routerRedux, Switch, Redirect } from 'dva/router';
 import { Menu } from 'antd';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
 import styles from './Info.less';
 import { getRoutes } from '../../utils/utils';
 
@@ -27,16 +25,8 @@ export default class Info extends Component {
     key = menuMap[key] ? key : 'base';
     this.state = {
       selectKey: key,
-      meunMode: 'inline',
     };
   }
-  componentDidMount() {
-    this.resize();
-    window.addEventListener('resize', this.resize);
-  }
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
   getmenu = () => {
     return Object.keys(menuMap).map(item => (
       <Item key={item}>{menuMap[item]}</Item>
@@ -51,19 +41,6 @@ export default class Info extends Component {
       selectKey: key,
     });
   };
-  @Bind()
-  @Debounce(200)
-  resize() {
-    if (window.innerWidth > 768 || window.innerWidth < 454) {
-      this.setState({
-        meunMode: 'inline',
-      });
-      return;
-    }
-    this.setState({
-      meunMode: 'horizontal',
-    });
-  }
   render() {
     const { match, routerData, currentUser } = this.props;
     if (!currentUser.userid) {
@@ -73,7 +50,7 @@ export default class Info extends Component {
       <div className={styles.main}>
         <div className={styles.leftmenu}>
           <Menu
-            mode={this.state.meunMode}
+            mode="inline"
             selectedKeys={[this.state.selectKey]}
             onClick={this.selectKey}
           >

src/routes/Userinfo/Info.less

@@ -3,14 +3,14 @@
 .main {
   width: 100%;
   height: 100%;
-  background-color: #fff;
+  background-color: @body-background;
   display: flex;
   padding-top: 16px;
   padding-bottom: 16px;
   overflow: auto;
   .leftmenu {
     width: 224px;
-    border-right: 1px solid #e8e8e8;
+    border-right: @border-width-base @border-style-base @border-color-split;
     :global {
       .ant-menu-inline {
         border: none;
@@ -25,9 +25,9 @@
     padding-bottom: 8px;
     .title {
       font-size: 20px;
-      color: rgba(0, 0, 0, 0.85);
+      color: @heading-color;
       line-height: 28px;
-      font-weight: bold;
+      font-weight: 500;
       margin-bottom: 12px;
     }
   }
@@ -40,7 +40,7 @@
       display: block;
       font-size: 48px;
       line-height: 48px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
     .dingding {
       background-color: #2eabff;
@@ -49,25 +49,25 @@
       line-height: 32px;
       padding: 6px;
       margin: 2px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
     .alipay {
       color: #2eabff;
       font-size: 48px;
       line-height: 48px;
-      border-radius: 4px;
+      border-radius: @border-radius-base;
     }
   }
 
   // 密码强度
   font.strong {
-    color: #52c41a;
+    color: @success-color;
   }
   font.medium {
-    color: yellow;
+    color: @warning-color;
   }
   font.weak {
-    color: red;
+    color: @error-color;
   }
 }
 

src/routes/Userinfo/PhoneView.less

@@ -7,5 +7,5 @@
 }
 .phone_number {
   max-width: 312px;
-  width: ~'calc( 70% - 8px)';
+  width: ~'calc(70% - 8px)';
 }