From 3390281a92b635e52037922329306c649e594add Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Mon, 23 Oct 2017 11:18:01 +0800 Subject: [PATCH] fixed design of exception & detail page --- .../DescriptionList/DescriptionList.js | 7 ++- src/components/DescriptionList/index.less | 17 ++++++ src/components/Exception/index.js | 4 +- src/routes/Exception/403.js | 2 +- src/routes/Exception/404.js | 2 +- src/routes/Exception/500.js | 2 +- src/routes/Profile/AdvancedProfile.js | 57 ++++++++++++++----- src/routes/Profile/AdvancedProfile.less | 32 +++++++++++ 8 files changed, 103 insertions(+), 20 deletions(-) diff --git a/src/components/DescriptionList/DescriptionList.js b/src/components/DescriptionList/DescriptionList.js index 25a5faf3..7eca3a72 100644 --- a/src/components/DescriptionList/DescriptionList.js +++ b/src/components/DescriptionList/DescriptionList.js @@ -4,8 +4,11 @@ import { Row } from 'antd'; import styles from './index.less'; export default ({ className, title, col = 3, layout = 'horizontal', gutter = 32, - children, ...restProps }) => { - const clsString = classNames(styles.descriptionList, styles[layout], className); + children, size, ...restProps }) => { + const clsString = classNames(styles.descriptionList, styles[layout], className, { + [styles.descriptionListSmall]: size === 'small', + [styles.descriptionListLarge]: size === 'large', + }); const column = col > 4 ? 4 : col; return (
diff --git a/src/components/DescriptionList/index.less b/src/components/DescriptionList/index.less index a9855951..9f8d8ff2 100644 --- a/src/components/DescriptionList/index.less +++ b/src/components/DescriptionList/index.less @@ -49,3 +49,20 @@ } } } + +.descriptionListSmall { + .title { + margin-bottom: 12px; + } + .term { + padding-bottom: 8px; + } +} +.descriptionListLarge { + .large { + margin-bottom: 24px; + } + .term { + padding-bottom: 24px; + } +} diff --git a/src/components/Exception/index.js b/src/components/Exception/index.js index 3f4ee55b..96ff430b 100644 --- a/src/components/Exception/index.js +++ b/src/components/Exception/index.js @@ -6,11 +6,11 @@ import config from './typeConfig'; import styles from './index.less'; -export default ({ className, type, title, desc, img, actions }) => { +export default ({ className, type, title, desc, img, actions, ...rest }) => { const pageType = type in config ? type : '404'; const clsString = classNames(styles.exception, className); return ( -
+
; +export default () => ; diff --git a/src/routes/Exception/404.js b/src/routes/Exception/404.js index e114e04c..c5ac53b0 100644 --- a/src/routes/Exception/404.js +++ b/src/routes/Exception/404.js @@ -1,4 +1,4 @@ import React from 'react'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ; diff --git a/src/routes/Exception/500.js b/src/routes/Exception/500.js index 7fa97a08..61d77c1e 100644 --- a/src/routes/Exception/500.js +++ b/src/routes/Exception/500.js @@ -1,4 +1,4 @@ import React from 'react'; import Exception from '../../components/Exception'; -export default () => ; +export default () => ; diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js index c55b6bfe..94299777 100644 --- a/src/routes/Profile/AdvancedProfile.js +++ b/src/routes/Profile/AdvancedProfile.js @@ -1,14 +1,18 @@ import React, { Component } from 'react'; +import addEventListener from 'rc-util/lib/Dom/addEventListener'; +import debounce from 'lodash.debounce'; import { connect } from 'dva'; import { Button, Menu, Dropdown, Icon, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd'; +import classNames from 'classnames'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import DescriptionList from '../../components/DescriptionList'; -import EditableItem from '../../components/EditableItem'; import styles from './AdvancedProfile.less'; const { Step } = Steps; const { Description } = DescriptionList; +const getWindowWidth = () => (window.innerWidth || document.documentElement.documentElement); + const menu = ( 选项一 @@ -44,7 +48,7 @@ const extra = ( ); const description = ( - + 曲丽丽 XX 服务 2017-07-07 @@ -63,8 +67,8 @@ const tabList = [{ }]; const desc1 = ( -
-
+
+
曲丽丽
@@ -73,8 +77,8 @@ const desc1 = ( ); const desc2 = ( -
-
+
+
周毛毛
@@ -141,6 +145,7 @@ const columns = [{ export default class AdvancedProfile extends Component { state = { operationkey: 'tab1', + stepDirection: 'horizontal', } componentDidMount() { @@ -148,13 +153,39 @@ export default class AdvancedProfile extends Component { dispatch({ type: 'profile/fetchAdvanced', }); + + this.setStepDirection(); + this.resizeEvent = addEventListener(window, 'resize', debounce(this.setStepDirection, 100, { + leading: false, + })); + } + + componentWillUnmount() { + if (this.resizeEvent) { + this.resizeEvent.remove(); + } } onOperationTabChange = (key) => { this.setState({ operationkey: key }); } + setStepDirection = () => { + const { stepDirection } = this.state; + const w = getWindowWidth(); + if (stepDirection !== 'vertical' && w <= 576) { + this.setState({ + stepDirection: 'vertical', + }); + } else if (stepDirection !== 'horizontal' && w > 576) { + this.setState({ + stepDirection: 'horizontal', + }); + } + } + render() { + const { stepDirection } = this.state; const { profile } = this.props; const { advancedLoading, advancedOperation1, advancedOperation2, advancedOperation3 } = profile; const contentList = { @@ -188,7 +219,7 @@ export default class AdvancedProfile extends Component { tabList={tabList} > - + @@ -200,14 +231,13 @@ export default class AdvancedProfile extends Component { 付小小 32943898021309809423 3321944288191034921 - - - + 18112345678 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 - + 725 2017-08-08 +   某某数据 @@ -221,8 +251,9 @@ export default class AdvancedProfile extends Component { 2017-08-08 +

信息组

- + 林东东 1234567 XX公司 - YY部 @@ -244,7 +275,7 @@ export default class AdvancedProfile extends Component {
- 暂无数据 + 暂无数据
div { + margin-top: 8px; + margin-bottom: 4px; + } +} + .textSecondary { color: @text-color-secondary; } + +@media screen and (max-width: @screen-sm) { + .stepDescription { + left: 8px; + } +} -- GitLab