diff --git a/mock/dashboard.js b/mock/dashboard.js index 956a701..3bb313b 100644 --- a/mock/dashboard.js +++ b/mock/dashboard.js @@ -26,7 +26,7 @@ let dataKey = mockStorge('Dashboard', Mock.mock({ 'status|1-3': 1, content:'@sentence', avatar: function(){ - return Mock.Random.image('100x100', Mock.Random.color(),"#757575",'png',this.name.substr(0,1)) + return Mock.Random.image('48x48', Mock.Random.color(),"#757575",'png',this.name.substr(0,1)) }, date:function(){ return '2016-'+Mock.Random.date('MM-dd')+' '+Mock.Random.time('HH:mm:ss') diff --git a/src/components/dashboard/comments.js b/src/components/dashboard/comments.js index b9bf50e..7722dc5 100644 --- a/src/components/dashboard/comments.js +++ b/src/components/dashboard/comments.js @@ -25,7 +25,7 @@ function Comments(props) { title: 'avatar', dataIndex: 'avatar', width:48, - className:'avatarcolumn', + className:styles.avatarcolumn, render: text => , }, { title: 'content', @@ -33,14 +33,13 @@ function Comments(props) { render:(text,it) =>
{it.name}

{it.content}

-

+

{status[it.status].text} {it.date} -

+
, }, ] - console.log(props); return (
key} dataSource={props.data.filter((item,key) => key<3)}/> diff --git a/src/components/dashboard/comments.less b/src/components/dashboard/comments.less index d3abdc8..0d29e1f 100644 --- a/src/components/dashboard/comments.less +++ b/src/components/dashboard/comments.less @@ -1,10 +1,12 @@ @import "../vars.less"; -.comments{ - :global .ant-table-thead > tr > th{ + +.comments { + :global .ant-table-thead > tr > th { background: #fff; border-bottom: solid 1px @border-color-base; } - .avatar{ + + .avatar { width: 48px; height: 48px; background-position: center; @@ -13,24 +15,29 @@ background: #f8f8f8; display: inline-block; } - .content{ + + .content { text-align: left; color: #757575; } - .date{ + + .date { color: #a3a3a3; line-height: 30px; } - .daterow{ + + .daterow { display: flex; justify-content: space-between; } - .name{ + + .name { font-size: 14px; color: #474747; text-align: left; } - .avatarcolumn{ + + .avatarcolumn { vertical-align: top; } }