Commit af0b06ec authored by ddcat1115's avatar ddcat1115

change usage of PageHeader in Workplace

parent 4186ba64
...@@ -103,20 +103,20 @@ export default class Workplace extends PureComponent { ...@@ -103,20 +103,20 @@ export default class Workplace extends PureComponent {
chart: { radarData }, chart: { radarData },
} = this.props; } = this.props;
const pageHeaderTitle = ( const pageHeaderContent = (
<div className={styles.pageHeaderTitle}> <div className={styles.pageHeaderContent}>
<div className={styles.titleAvatar}> <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/XertDCubOxUvZbCdgWTW.png" />
</div> </div>
<div className={styles.titleContent}> <div className={styles.content}>
<p>早安, 曲丽丽, 祝你开心每一天</p> <p className={styles.contentTitle}>早安, 曲丽丽, 祝你开心每一天</p>
<p>交互专家 | 蚂蚁金服某某某事业群某某平台部某某技术部UED</p> <p>交互专家 | 蚂蚁金服某某某事业群某某平台部某某技术部UED</p>
</div> </div>
</div> </div>
); );
const pageHeaderAction = ( const pageHeaderExtra = (
<div className={styles.pageHeaderAction}> <div className={styles.pageHeaderExtra}>
<div> <div>
<p><Icon type="appstore-o" /> 项目数</p> <p><Icon type="appstore-o" /> 项目数</p>
<p>56</p> <p>56</p>
...@@ -136,8 +136,8 @@ export default class Workplace extends PureComponent { ...@@ -136,8 +136,8 @@ export default class Workplace extends PureComponent {
return ( return (
<PageHeaderLayout <PageHeaderLayout
action={pageHeaderAction} content={pageHeaderContent}
title={pageHeaderTitle} extraContent={pageHeaderExtra}
> >
<Row gutter={24}> <Row gutter={24}>
<Col lg={16} md={24} sm={24} xs={24}> <Col lg={16} md={24} sm={24} xs={24}>
......
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
} }
} }
.pageHeaderTitle { .pageHeaderContent {
display: flex; display: flex;
.titleAvatar { .avatar {
flex: 0 1 80px; flex: 0 1 80px;
& > span { & > span {
border-radius: 80px; border-radius: 80px;
...@@ -21,28 +21,24 @@ ...@@ -21,28 +21,24 @@
height: 80px; height: 80px;
} }
} }
.titleContent { .content {
position: relative; position: relative;
top: 8px; top: 8px;
margin-left: 32px; margin-left: 32px;
flex: 1 1 auto; flex: 1 1 auto;
p {
font-weight: normal;
}
& > p:last-child {
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base; .contentTitle {
line-height: 22px; font-size: 20px;
margin-top: 12px; font-weight: 500;
color: @heading-color;
margin-bottom: 12px;
} }
} }
} }
.pageHeaderAction { .pageHeaderExtra {
float: right;
.clearfix(); .clearfix();
& > div { & > div {
text-align: right;
padding: 0 24px; padding: 0 24px;
position: relative; position: relative;
float: left; float: left;
...@@ -144,7 +140,7 @@ ...@@ -144,7 +140,7 @@
} }
@media screen and (max-width: @screen-xl) and (min-width: @screen-lg) { @media screen and (max-width: @screen-xl) and (min-width: @screen-lg) {
.pageHeaderAction { .pageHeaderExtra {
margin-left: -44px; margin-left: -44px;
& > div { & > div {
padding: 0 16px; padding: 0 16px;
...@@ -153,8 +149,7 @@ ...@@ -153,8 +149,7 @@
} }
@media screen and (max-width: @screen-lg) { @media screen and (max-width: @screen-lg) {
.pageHeaderAction { .pageHeaderExtra {
margin-left: -64px;
& > div { & > div {
padding: 0 16px; padding: 0 16px;
text-align: left; text-align: left;
...@@ -166,6 +161,9 @@ ...@@ -166,6 +161,9 @@
} }
@media screen and (max-width: @screen-md) { @media screen and (max-width: @screen-md) {
.pageHeaderExtra {
margin-left: -16px;
}
.projectList { .projectList {
.projectGrid { .projectGrid {
width: 50%; width: 50%;
...@@ -173,6 +171,20 @@ ...@@ -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) { @media screen and (max-width: @screen-xs) {
.projectList { .projectList {
.projectGrid { .projectGrid {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment