Commit 4295b186 authored by ddcat1115's avatar ddcat1115

use less variables & remove some responsive setting

parent ea38c9b9
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from 'react';
import { Form, Input, Upload, Select, Button } from 'antd'; 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 styles from './BaseView.less';
import GeographicView from './GeographicView'; import GeographicView from './GeographicView';
import PhoneView from './PhoneView'; import PhoneView from './PhoneView';
...@@ -48,16 +46,8 @@ const validatorPhone = (rule, value, callback) => { ...@@ -48,16 +46,8 @@ const validatorPhone = (rule, value, callback) => {
@Form.create() @Form.create()
export default class BaseView extends Component { export default class BaseView extends Component {
state = {
md: false,
};
componentDidMount() { componentDidMount() {
this.setBaseInfo(); this.setBaseInfo();
this.resize();
window.addEventListener('resize', this.resize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
} }
setBaseInfo = () => { setBaseInfo = () => {
const { currentUser } = this.props; const { currentUser } = this.props;
...@@ -78,24 +68,11 @@ export default class BaseView extends Component { ...@@ -78,24 +68,11 @@ export default class BaseView extends Component {
getViewDom = (ref) => { getViewDom = (ref) => {
this.view = ref; this.view = ref;
}; };
@Bind()
@Debounce(200)
resize() {
if (this.view.offsetWidth > 696) {
this.setState({
md: false,
});
return;
}
this.setState({
md: true,
});
}
render() { render() {
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
return ( return (
<div <div
className={`${styles.baseView} ${this.state.md ? styles.md : ''}`} className={styles.baseView}
ref={this.getViewDom} ref={this.getViewDom}
> >
<div className={styles.left}> <div className={styles.left}>
......
...@@ -3,16 +3,7 @@ ...@@ -3,16 +3,7 @@
.baseView { .baseView {
display: flex; display: flex;
margin-top: 12px; margin-top: 12px;
&.md {
flex-direction: column-reverse;
.right {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 448px;
}
}
.left { .left {
max-width: 448px; max-width: 448px;
min-width: 224px; min-width: 224px;
...@@ -22,8 +13,8 @@ ...@@ -22,8 +13,8 @@
padding-left: 104px; padding-left: 104px;
.avatar_title { .avatar_title {
height: 22px; height: 22px;
font-size: 14px; font-size: @font-size-base;
color: rgba(0, 0, 0, 0.85); color: @heading-color;
line-height: 22px; line-height: 22px;
margin-bottom: 8px; margin-bottom: 8px;
} }
...@@ -42,3 +33,17 @@ ...@@ -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;
}
}
}
...@@ -2,8 +2,6 @@ import React, { Component } from 'react'; ...@@ -2,8 +2,6 @@ import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Route, routerRedux, Switch, Redirect } from 'dva/router'; import { Route, routerRedux, Switch, Redirect } from 'dva/router';
import { Menu } from 'antd'; import { Menu } from 'antd';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import styles from './Info.less'; import styles from './Info.less';
import { getRoutes } from '../../utils/utils'; import { getRoutes } from '../../utils/utils';
...@@ -27,16 +25,8 @@ export default class Info extends Component { ...@@ -27,16 +25,8 @@ export default class Info extends Component {
key = menuMap[key] ? key : 'base'; key = menuMap[key] ? key : 'base';
this.state = { this.state = {
selectKey: key, selectKey: key,
meunMode: 'inline',
}; };
} }
componentDidMount() {
this.resize();
window.addEventListener('resize', this.resize);
}
componentWillUnmount() {
window.removeEventListener('resize', this.resize);
}
getmenu = () => { getmenu = () => {
return Object.keys(menuMap).map(item => ( return Object.keys(menuMap).map(item => (
<Item key={item}>{menuMap[item]}</Item> <Item key={item}>{menuMap[item]}</Item>
...@@ -51,19 +41,6 @@ export default class Info extends Component { ...@@ -51,19 +41,6 @@ export default class Info extends Component {
selectKey: key, selectKey: key,
}); });
}; };
@Bind()
@Debounce(200)
resize() {
if (window.innerWidth > 768 || window.innerWidth < 454) {
this.setState({
meunMode: 'inline',
});
return;
}
this.setState({
meunMode: 'horizontal',
});
}
render() { render() {
const { match, routerData, currentUser } = this.props; const { match, routerData, currentUser } = this.props;
if (!currentUser.userid) { if (!currentUser.userid) {
...@@ -73,7 +50,7 @@ export default class Info extends Component { ...@@ -73,7 +50,7 @@ export default class Info extends Component {
<div className={styles.main}> <div className={styles.main}>
<div className={styles.leftmenu}> <div className={styles.leftmenu}>
<Menu <Menu
mode={this.state.meunMode} mode="inline"
selectedKeys={[this.state.selectKey]} selectedKeys={[this.state.selectKey]}
onClick={this.selectKey} onClick={this.selectKey}
> >
......
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
.main { .main {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #fff; background-color: @body-background;
display: flex; display: flex;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
overflow: auto; overflow: auto;
.leftmenu { .leftmenu {
width: 224px; width: 224px;
border-right: 1px solid #e8e8e8; border-right: @border-width-base @border-style-base @border-color-split;
:global { :global {
.ant-menu-inline { .ant-menu-inline {
border: none; border: none;
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
padding-bottom: 8px; padding-bottom: 8px;
.title { .title {
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.85); color: @heading-color;
line-height: 28px; line-height: 28px;
font-weight: bold; font-weight: 500;
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
display: block; display: block;
font-size: 48px; font-size: 48px;
line-height: 48px; line-height: 48px;
border-radius: 4px; border-radius: @border-radius-base;
} }
.dingding { .dingding {
background-color: #2eabff; background-color: #2eabff;
...@@ -49,25 +49,25 @@ ...@@ -49,25 +49,25 @@
line-height: 32px; line-height: 32px;
padding: 6px; padding: 6px;
margin: 2px; margin: 2px;
border-radius: 4px; border-radius: @border-radius-base;
} }
.alipay { .alipay {
color: #2eabff; color: #2eabff;
font-size: 48px; font-size: 48px;
line-height: 48px; line-height: 48px;
border-radius: 4px; border-radius: @border-radius-base;
} }
} }
// 密码强度 // 密码强度
font.strong { font.strong {
color: #52c41a; color: @success-color;
} }
font.medium { font.medium {
color: yellow; color: @warning-color;
} }
font.weak { font.weak {
color: red; color: @error-color;
} }
} }
......
...@@ -7,5 +7,5 @@ ...@@ -7,5 +7,5 @@
} }
.phone_number { .phone_number {
max-width: 312px; max-width: 312px;
width: ~'calc( 70% - 8px)'; width: ~'calc(70% - 8px)';
} }
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment