From 05ca4cf82b08f05d548267d627950e5348c32fb5 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Tue, 17 Oct 2017 15:39:48 +0800 Subject: [PATCH] update list style --- mock/api.js | 32 +++++++--------- mock/rule.js | 3 +- src/components/AvatarList/index.less | 2 +- src/components/StandardTable/index.js | 20 +++++++--- src/routes/List/BasicList.js | 5 ++- src/routes/List/BasicList.less | 6 +++ src/routes/List/CardList.js | 6 +-- src/routes/List/CardList.less | 6 +-- src/routes/List/CoverCardList.js | 55 ++++++++++++++------------- src/routes/List/CoverCardList.less | 7 ++-- src/routes/List/FilterCardList.js | 31 ++++++++++----- src/routes/List/FilterCardList.less | 25 +++--------- src/routes/List/SearchList.js | 12 ++++-- src/routes/List/SearchList.less | 5 ++- 14 files changed, 118 insertions(+), 97 deletions(-) diff --git a/mock/api.js b/mock/api.js index 75fb66ae..e53d1824 100644 --- a/mock/api.js +++ b/mock/api.js @@ -2,13 +2,13 @@ import { imgMap, getUrlParams } from './utils'; export function fakeList(count) { const titles = [ - '凤蝶', + 'Vue', 'AntDesignPro', 'DesignLab', - 'Basement', + 'Angular', 'AntDesign', - '云雀', - '体验云', + 'React', + 'Alipay', 'AntDesignMobile', ]; const avatars = [ @@ -18,10 +18,10 @@ export function fakeList(count) { 'https://gw.alipayobjects.com/zos/rmsportal/VcmdbCBcwPTGYgbYeMzX.png', // DesignLab ]; const covers = [ - 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png', - 'https://gw.alipayobjects.com/zos/rmsportal/xMPpMvGSIXusgtgUPAdw.png', - 'https://gw.alipayobjects.com/zos/rmsportal/hQReiajgtqzIVFjLXjHp.png', - 'https://gw.alipayobjects.com/zos/rmsportal/nczfTaXEzhSpvgZZjBev.png', + 'https://gw.alipayobjects.com/zos/rmsportal/nQIAJyTLNeVJfUpTskWk.png', + 'https://gw.alipayobjects.com/zos/rmsportal/pnhtvpOTzypPvmHVrfKN.png', + 'https://gw.alipayobjects.com/zos/rmsportal/SVrKVZEFDnhDTNpkplZj.png', + 'https://gw.alipayobjects.com/zos/rmsportal/bUIOUkPTHgfGdDhgsAgE.png', ]; const list = []; @@ -48,20 +48,16 @@ export function fakeList(count) { content: '段落示意：蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。', members: [ { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', - name: '王昭君', - }, - { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', - name: '王昭君', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png', + name: '曲丽丽', }, { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png', name: '王昭君', }, { - avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WPOxPBHGyqsgKPsFtVlJ.png', - name: '王昭君', + avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png', + name: '董娜娜', }, ], }); @@ -136,7 +132,7 @@ export const getNotice = [ logo: imgMap.c, description: '这是一条描述信息这是一条描述信息', updatedAt: new Date('2017-07-23 06:23:00'), - member: '成都超级小分队', + member: '成都小分队', }, ]; diff --git a/mock/rule.js b/mock/rule.js index 1c494ca3..ad046b80 100644 --- a/mock/rule.js +++ b/mock/rule.js @@ -5,6 +5,7 @@ let tableListDataSource = []; for (let i = 0; i < 46; i += 1) { tableListDataSource.push({ key: i, + disabled: ((i % 6) === 0), href: 'https://ant.design', avatar: ['https://gw.alipayobjects.com/zos/rmsportal/eeHMaZBwmTvLdIwMfBpg.png', 'https://gw.alipayobjects.com/zos/rmsportal/udxAbMEhpwthVVcjLXik.png'][i % 2], no: `TradeCode ${i}`, @@ -12,7 +13,7 @@ for (let i = 0; i < 46; i += 1) { owner: '曲丽丽', description: '这是一段描述', callNo: Math.floor(Math.random() * 1000), - status: Math.floor(Math.random() * 10) % 2, + status: Math.floor(Math.random() * 10) % 4, updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`), createdAt: new Date(`2017-07-${Math.floor(i / 2) + 1} ${Math.floor(i / 2) + 1}:00:00`), progress: Math.ceil(Math.random() * 100), diff --git a/src/components/AvatarList/index.less b/src/components/AvatarList/index.less index ba720535..531e673d 100644 --- a/src/components/AvatarList/index.less +++ b/src/components/AvatarList/index.less @@ -10,8 +10,8 @@ } .avatarItem { + border: 1px solid #fff; display: inline-block; - overflow: hidden; font-size: @font-size-base; margin-left: -8px; width: @avatar-size-base; diff --git a/src/components/StandardTable/index.js b/src/components/StandardTable/index.js index ef855758..80979b75 100644 --- a/src/components/StandardTable/index.js +++ b/src/components/StandardTable/index.js @@ -3,6 +3,7 @@ import moment from 'moment'; import { Table, Alert, Badge } from 'antd'; import styles from './index.less'; +const statusMap = ['default', 'processing', 'success', 'error']; class StandardTable extends PureComponent { state = { selectedRowKeys: [], @@ -43,7 +44,7 @@ class StandardTable extends PureComponent { const { selectedRowKeys, totalCallNo } = this.state; const { data: { list, pagination }, loading } = this.props; - const status = ['关闭', '运行中']; + const status = ['关闭', '运行中', '已上线', '异常']; const columns = [ { @@ -76,13 +77,17 @@ class StandardTable extends PureComponent { text: status[1], value: 1, }, + { + text: status[2], + value: 2, + }, + { + text: status[3], + value: 3, + }, ], render(val) { - if (val === 0) { - return ; - } else { - return ; - } + return ; }, }, { @@ -112,6 +117,9 @@ class StandardTable extends PureComponent { const rowSelection = { selectedRowKeys, onChange: this.handleRowSelectChange, + getCheckboxProps: record => ({ + disabled: record.disabled, + }), }; return ( diff --git a/src/routes/List/BasicList.js b/src/routes/List/BasicList.js index c6f89a3a..87c370c8 100644 --- a/src/routes/List/BasicList.js +++ b/src/routes/List/BasicList.js @@ -112,10 +112,11 @@ export default class BasicList extends PureComponent { - - 这是一个标题 + 这是一个标题 ); @@ -58,12 +58,12 @@ export default class CardList extends PureComponent { (item ? ( - 操作一, 操作二]}> + 操作一, 操作二]}> } title={item.title} diff --git a/src/routes/List/CardList.less b/src/routes/List/CardList.less index b6780136..8a5c958c 100644 --- a/src/routes/List/CardList.less +++ b/src/routes/List/CardList.less @@ -2,6 +2,7 @@ @import "../../utils/utils.less"; .cardList { + margin-bottom: -24px; :global { .ant-card-meta-content { margin-top: 0; @@ -19,14 +20,11 @@ } .newButton { - background-color: transparent; + background-color: #fff; border-color: @border-color-base; color: @text-color-secondary; width: 100%; height: 178px; - &:hover { - background-color: transparent; - } } .cardDescription { diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index 19916d7d..0ad34b5d 100644 --- a/src/routes/List/CoverCardList.js +++ b/src/routes/List/CoverCardList.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import moment from 'moment'; import { connect } from 'dva'; -import { routerRedux } from 'dva/router'; +import { Link, routerRedux } from 'dva/router'; import { Row, Col, Form, Card, Select, List, Input } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; @@ -74,34 +74,37 @@ export default class CoverCardList extends PureComponent { ( - } - > - -
- {moment(item.updatedAt).fromNow()} -
- - { - item.members.map((member, i) => ( - - )) - } - + + } + > + +
+ {moment(item.updatedAt).fromNow()} +
+ + { + item.members.map((member, i) => ( + + )) + } + +
-
- + + )} /> @@ -179,7 +182,7 @@ export default class CoverCardList extends PureComponent { grid last > - + span { + color: @disabled-color; flex: 1; font-size: 12px; - color: @disabled-color; } .avatarList { flex: 0 1 auto; diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index 9a07387f..542ef5aa 100644 --- a/src/routes/List/FilterCardList.js +++ b/src/routes/List/FilterCardList.js @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import numeral from 'numeral'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; -import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input } from 'antd'; +import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input, Dropdown, Menu } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import StandardFormRow from '../../components/StandardFormRow'; @@ -102,7 +102,6 @@ export default class FilterCardList extends PureComponent {

活跃用户

{activeUser}

-

新增用户

@@ -130,6 +129,20 @@ export default class FilterCardList extends PureComponent { }, }; + const itemMenu = ( + + + 1st menu item + + + 2nd menu item + + + 3d menu item + + + ); + return ( ( , - , - , - , + , + , + , + , ]} > } + avatar={} title={item.title} />
diff --git a/src/routes/List/FilterCardList.less b/src/routes/List/FilterCardList.less index 679cec45..d8cf0dc7 100644 --- a/src/routes/List/FilterCardList.less +++ b/src/routes/List/FilterCardList.less @@ -2,43 +2,30 @@ @import "../../utils/utils.less"; .filterCardList { + margin-bottom: -24px; :global { - .ant-card-meta-title { - position: relative; - top: 8px; - } .ant-card-meta-content { margin-top: 0; } } .cardInfo { .clearfix(); - border: 1px solid @border-color-base; - border-radius: @border-radius-base; - padding: 8px 0; - margin-top: 16px; - width: 100%; + margin-top: 12px; + margin-left: 40px; & > div { position: relative; - text-align: center; + text-align: left; float: left; width: 50%; - & > span { - background-color: @border-color-split; - position: absolute; - top: 0; - right: 0; - width: 1px; - height: 44px; - } p { - color: @text-color-secondary; + color: @text-color; line-height: 32px; font-size: 24px; } p:first-child { font-size: 12px; line-height: 20px; + margin-bottom: 4px; } } } diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index f4d080cb..2319fbeb 100644 --- a/src/routes/List/SearchList.js +++ b/src/routes/List/SearchList.js @@ -167,7 +167,7 @@ export default class SearchList extends Component { }; const loadMore = showLoadMore ? ( -
+