change usage of PageHeader in Workplace

src/routes/Dashboard/Workplace.js

@@ -103,20 +103,20 @@ export default class Workplace extends PureComponent {
       chart: { radarData },
     } = this.props;
 
-    const pageHeaderTitle = (
-      <div className={styles.pageHeaderTitle}>
-        <div className={styles.titleAvatar}>
+    const pageHeaderContent = (
+      <div className={styles.pageHeaderContent}>
+        <div className={styles.avatar}>
           <Avatar size="large" src="https://gw.alipayobjects.com/zos/rmsportal/XertDCubOxUvZbCdgWTW.png" />
         </div>
-        <div className={styles.titleContent}>
-          <p>早安, 曲丽丽, 祝你开心每一天</p>
+        <div className={styles.content}>
+          <p className={styles.contentTitle}>早安, 曲丽丽, 祝你开心每一天</p>
           <p>交互专家 | 蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</p>
         </div>
       </div>
     );
 
-    const pageHeaderAction = (
-      <div className={styles.pageHeaderAction}>
+    const pageHeaderExtra = (
+      <div className={styles.pageHeaderExtra}>
         <div>
           <p><Icon type="appstore-o" /> 项目数</p>
           <p>56</p>
@@ -136,8 +136,8 @@ export default class Workplace extends PureComponent {
 
     return (
       <PageHeaderLayout
-        action={pageHeaderAction}
-        title={pageHeaderTitle}
+        content={pageHeaderContent}
+        extraContent={pageHeaderExtra}
       >
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24}>

src/routes/Dashboard/Workplace.less

@@ -10,9 +10,9 @@
   }
 }
 
-.pageHeaderTitle {
+.pageHeaderContent {
   display: flex;
-  .titleAvatar {
+  .avatar {
     flex: 0 1 80px;
     & > span {
       border-radius: 80px;
@@ -21,28 +21,24 @@
       height: 80px;
     }
   }
-  .titleContent {
+  .content {
     position: relative;
     top: 8px;
     margin-left: 32px;
     flex: 1 1 auto;
-    p {
-      font-weight: normal;
-    }
-    & > p:last-child {
-      color: @text-color-secondary;
-      font-size: @font-size-base;
-      line-height: 22px;
-      margin-top: 12px;
+    color: @text-color-secondary;
+    .contentTitle {
+      font-size: 20px;
+      font-weight: 500;
+      color: @heading-color;
+      margin-bottom: 12px;
     }
   }
 }
 
-.pageHeaderAction {
-  float: right;
+.pageHeaderExtra {
   .clearfix();
   & > div {
-    text-align: right;
     padding: 0 24px;
     position: relative;
     float: left;
@@ -144,7 +140,7 @@
 }
 
 @media screen and (max-width: @screen-xl)  and (min-width: @screen-lg) {
-  .pageHeaderAction {
+  .pageHeaderExtra {
     margin-left: -44px;
     & > div {
       padding: 0 16px;
@@ -153,8 +149,7 @@
 }
 
 @media screen and (max-width: @screen-lg) {
-  .pageHeaderAction {
-    margin-left: -64px;
+  .pageHeaderExtra {
     & > div {
       padding: 0 16px;
       text-align: left;
@@ -166,6 +161,9 @@
 }
 
 @media screen and (max-width: @screen-md) {
+  .pageHeaderExtra {
+    margin-left: -16px;
+  }
   .projectList {
     .projectGrid {
       width: 50%;
@@ -173,6 +171,20 @@
   }
 }
 
+@media screen and (max-width: @screen-sm) {
+  .pageHeaderContent {
+    display: block;
+    .content {
+      margin-left: 0;
+    }
+  }
+  .pageHeaderExtra {
+    & > div {
+      float: none;
+    }
+  }
+}
+
 @media screen and (max-width: @screen-xs) {
   .projectList {
     .projectGrid {