From 4295b186d18d6d9ecf8044fbc25ee49b29c45532 Mon Sep 17 00:00:00 2001 From: ddcat1115 Date: Tue, 13 Feb 2018 17:54:32 +0800 Subject: [PATCH] use less variables & remove some responsive setting --- src/routes/Userinfo/BaseView.js | 25 +------------------------ src/routes/Userinfo/BaseView.less | 29 +++++++++++++++++------------ src/routes/Userinfo/Info.js | 25 +------------------------ src/routes/Userinfo/Info.less | 20 ++++++++++---------- src/routes/Userinfo/PhoneView.less | 2 +- 5 files changed, 30 insertions(+), 71 deletions(-) diff --git a/src/routes/Userinfo/BaseView.js b/src/routes/Userinfo/BaseView.js index b73275c8..1fecd6df 100644 --- a/src/routes/Userinfo/BaseView.js +++ b/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 (
diff --git a/src/routes/Userinfo/BaseView.less b/src/routes/Userinfo/BaseView.less index 81566c6d..f82aba56 100644 --- a/src/routes/Userinfo/BaseView.less +++ b/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; + } + } +} diff --git a/src/routes/Userinfo/Info.js b/src/routes/Userinfo/Info.js index 17a7852f..135b337d 100644 --- a/src/routes/Userinfo/Info.js +++ b/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 => ( {menuMap[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 {
diff --git a/src/routes/Userinfo/Info.less b/src/routes/Userinfo/Info.less index 60b967aa..8d24f53a 100644 --- a/src/routes/Userinfo/Info.less +++ b/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; } } diff --git a/src/routes/Userinfo/PhoneView.less b/src/routes/Userinfo/PhoneView.less index 6fdf84df..5c85970d 100644 --- a/src/routes/Userinfo/PhoneView.less +++ b/src/routes/Userinfo/PhoneView.less @@ -7,5 +7,5 @@ } .phone_number { max-width: 312px; - width: ~'calc( 70% - 8px)'; + width: ~'calc(70% - 8px)'; } -- GitLab