Fix workplace style

src/components/EditableLinkGroup/index.js

 import React, { PureComponent, createElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon } from 'antd';
+import { Button } from 'antd';
 import styles from './index.less';
 
 // TODO: 添加逻辑
@@ -32,8 +32,8 @@ class EditableLinkGroup extends PureComponent {
           ))
         }
         {
-          <Button size="small" onClick={onAdd}>
-            <Icon type="plus" />添加
+          <Button size="small" type="primary" ghost onClick={onAdd} icon="plus">
+            添加
           </Button>
         }
       </div>

src/components/EditableLinkGroup/index.less

@@ -8,23 +8,9 @@
     display: inline-block;
     font-size: @font-size-base;
     margin-bottom: 13px;
-    margin-right: 32px;
+    width: 25%;
     &:hover {
       color: @primary-color;
     }
   }
-  & > button {
-    border-color: @primary-color;
-    color: @primary-color;
-    padding-left: 12px;
-    padding-right: 12px;
-    i {
-      position: relative;
-      top: -1px;
-    }
-    span {
-      position: relative;
-      top: -1px;
-    }
-  }
 }

src/routes/Dashboard/Workplace.js

@@ -106,7 +106,7 @@ export default class Workplace extends PureComponent {
     const pageHeaderContent = (
       <div className={styles.pageHeaderContent}>
         <div className={styles.avatar}>
-          <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
+          <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/TmNVmrOsXeZwnvvZMNmo.png" />
         </div>
         <div className={styles.content}>
           <p className={styles.contentTitle}>早安，曲丽丽，祝你开心每一天！</p>
@@ -120,12 +120,10 @@ export default class Workplace extends PureComponent {
         <div>
           <p>项目数</p>
           <p>56</p>
-          <em />
         </div>
         <div>
           <p>团队内排名</p>
           <p>8<span> / 24</span></p>
-          <em />
         </div>
         <div>
           <p>项目访问</p>
@@ -156,18 +154,20 @@ export default class Workplace extends PureComponent {
                     <Card bodyStyle={{ padding: 0 }} bordered={false}>
                       <Card.Meta
                         title={(
-                          <span className={styles.cardTitle}>
+                          <div className={styles.cardTitle}>
                             <Avatar size="small" src={item.logo} />
                             <Link to={item.href}>{item.title}</Link>
-                          </span>
+                          </div>
                         )}
                         description={item.description}
                       />
                       <div className={styles.projectItemContent}>
                         <Link to={item.memberLink}>{item.member || ''}</Link>
-                        {
-                          item.updatedAt && <span>{moment(item.updatedAt).fromNow()}</span>
-                        }
+                        {item.updatedAt && (
+                          <span className={styles.datetime} title={item.updatedAt}>
+                            {moment(item.updatedAt).fromNow()}
+                          </span>
+                        )}
                       </div>
                     </Card>
                   </Card.Grid>
@@ -193,7 +193,11 @@ export default class Workplace extends PureComponent {
                               <a style={{ fontWeight: 'bold' }}>{item.user.name}</a> 在 <a>xx</a> 新建了项目 <a>xxxx</a>
                             </p>
                           }
-                          description={moment(item.updatedAt).fromNow()}
+                          description={
+                            <span className={styles.datetime} title={item.updatedAt}>
+                              {moment(item.updatedAt).fromNow()}
+                            </span>
+                          }
                         />
                       </List.Item>
                     ))

src/routes/Dashboard/Workplace.less

@@ -14,7 +14,7 @@
   display: flex;
   .avatar {
     flex: 0 1 72px;
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     & > span {
       border-radius: 72px;
       display: block;
@@ -24,12 +24,14 @@
   }
   .content {
     position: relative;
-    top: 8px;
+    top: 4px;
     margin-left: 24px;
     flex: 1 1 auto;
     color: @text-color-secondary;
+    line-height: 22px;
     .contentTitle {
       font-size: 20px;
+      line-height: 28px;
       font-weight: 500;
       color: @heading-color;
       margin-bottom: 12px;
@@ -40,7 +42,6 @@
 .pageHeaderExtra {
   .clearfix();
   float: right;
-  margin-right: 8px;
   & > div {
     padding: 0 32px;
     position: relative;
@@ -60,17 +61,21 @@
         font-size: 20px;
       }
     }
-    & > em {
+    &:after {
       background-color: @border-color-split;
       position: absolute;
       top: 8px;
       right: 0;
       width: 1px;
       height: 40px;
+      content: '';
     }
   }
   & > div:last-child {
     padding-right: 0;
+    &:after {
+      display: none;
+    }
   }
 }
 
@@ -111,20 +116,21 @@
   :global {
     .ant-card-meta-description {
       color: @text-color-secondary;
-      min-height: 42px;
+      height: 44px;
+      line-height: 22px;
+      overflow: hidden;
     }
   }
   .cardTitle {
-    font-size: 14px;
-    :global {
-      .ant-avatar {
-        position: relative;
-        top: 5px;
-      }
-    }
+    font-size: 0;
     a {
       color: @heading-color;
       margin-left: 12px;
+      line-height: 24px;
+      height: 24px;
+      display: inline-block;
+      vertical-align: top;
+      font-size: @font-size-base;
       &:hover {
         color: @primary-color;
       }
@@ -135,7 +141,7 @@
   }
   .projectItemContent {
     display: flex;
-    margin-top: 12px;
+    margin-top: 8px;
     overflow: hidden;
     font-size: 12px;
     height: 20px;
@@ -150,14 +156,18 @@
         color: @primary-color;
       }
     }
-    span {
-      color: @text-color-secondary;
+    .datetime {
+      color: @disabled-color;
       flex: 0 0 auto;
       float: right;
     }
   }
 }
 
+.datetime {
+  color: @disabled-color;
+}
+
 @media screen and (max-width: @screen-xl)  and (min-width: @screen-lg) {
   .activeCard {
     margin-bottom: 24px;
@@ -186,7 +196,7 @@
     & > div {
       padding: 0 16px;
       text-align: left;
-      & > em {
+      &:after {
         display: none;
       }
     }