commentd

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')

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 => <span style={{backgroundImage:`url(${text})`}} className={styles.avatar} ></span>,
     }, {
       title: 'content',
@@ -33,14 +33,13 @@ function Comments(props) {
       render:(text,it) => <div>
         <h5 className={styles.name}>{it.name}</h5>
         <p className={styles.content}>{it.content}</p>
-        <p className={styles.daterow}>
+        <div className={styles.daterow}>
           <Tag color={status[it.status].color}>{status[it.status].text}</Tag>
           <span className={styles.date}>{it.date}</span>
-        </p>
+        </div>
       </div>,
     },
   ]
-  console.log(props);
   return (
     <div className={styles.comments}>
       <Table pagination={false} showHeader={false} columns={columns} key={(record,key)=>key} dataSource={props.data.filter((item,key) => key<3)}/>

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;
   }
 }