视觉调整

src/components/DescriptionList/index.less

@@ -11,7 +11,7 @@
 
   .title {
     color: @heading-color;
-    font-weight: 600;
+    font-weight: 500;
     margin-bottom: 16px;
   }
 

src/components/PageHeader/demo/standard.md

@@ -19,13 +19,14 @@ const menu = (
 
 const action = (
   <div>
-    <Button type="primary">主操作</Button>
+    <Button>操作</Button>
-    <Button>次操作</Button>
+    <Button>操作</Button>
     <Dropdown overlay={menu}>
       <Button>
         更多 <Icon type="down" />
       </Button>
     </Dropdown>
+    <Button type="primary">主操作</Button>
   </div>
 );
 

src/components/PageHeader/index.less

@@ -2,7 +2,7 @@
 
 .pageHeader {
   background: @component-background;
-  padding: 18px 28px 0 36px;
+  padding: 16px 32px 0 32px;
   border-bottom: @border-width-base @border-style-base @border-color-split;
 
   .detail {
@@ -14,7 +14,7 @@
   }
 
   .breadcrumb {
-    margin-bottom: 18px;
+    margin-bottom: 16px;
   }
 
   .tabs {
@@ -42,6 +42,17 @@
   .action {
     margin-left: 56px;
     min-width: 266px;
+
+    :global {
+      .ant-btn-group:not(:last-child),
+      .ant-btn:not(:last-child) {
+        margin-right: 8px;
+      }
+
+      .ant-btn-group > .ant-btn {
+        margin-right: 0;
+      }
+    }
   }
 
   .title, .action, .content, .extraContent, .main {
@@ -107,7 +118,7 @@
   .pageHeader {
     .action {
       :global {
-        .ant-btn-group, :not(.ant-btn-group) .ant-button {
+        .ant-btn-group, :not(.ant-btn-group) .ant-btn {
           display: block;
           margin-bottom: 8px;
         }

src/routes/Profile/AdvancedProfile.js

@@ -7,7 +7,6 @@ import EditableItem from '../../components/EditableItem';
 import styles from './AdvancedProfile.less';
 
 const { Step } = Steps;
-const ButtonGroup = Button.Group;
 const { Description } = DescriptionList;
 
 const menu = (
@@ -20,15 +19,13 @@ const menu = (
 
 const action = (
   <div>
-    <ButtonGroup style={{ marginRight: 8 }}>
+    <Button>操作</Button>
-      <Button>操作</Button>
+    <Button>操作</Button>
-      <Button>操作</Button>
+    <Dropdown overlay={menu}>
-      <Dropdown overlay={menu}>
+      <Button>
-        <Button>
+        更多 <Icon type="down" />
-          更多操作 <Icon type="down" />
+      </Button>
-        </Button>
+    </Dropdown>
-      </Dropdown>
-    </ButtonGroup>
     <Button type="primary">主操作</Button>
   </div>
 );
@@ -66,9 +63,10 @@ const tabList = [{
 }];
 
 const desc1 = (
-  <div style={{ fontSize: 14 }}>
+  <div style={{ fontSize: 14 }} className={styles.textSecondary}>
-    <div style={{ marginTop: 4, marginBottom: 8 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
-      曲丽丽 <Icon type="dingding-o" />
+      曲丽丽
+      <Icon type="dingding-o" style={{ marginLeft: 8 }} />
     </div>
     <div>2016-12-12 12:32</div>
   </div>
@@ -76,8 +74,9 @@ const desc1 = (
 
 const desc2 = (
   <div style={{ fontSize: 14 }}>
-    <div style={{ marginTop: 4, marginBottom: 8 }}>
+    <div style={{ marginTop: 8, marginBottom: 4 }}>
-      周毛毛 <Icon type="dingding-o" style={{ color: '#00A0E9' }} />
+      周毛毛
+      <Icon type="dingding-o" style={{ color: '#00A0E9', marginLeft: 8 }} />
     </div>
     <div><a href="">催一下</a></div>
   </div>
@@ -89,12 +88,12 @@ const popoverContent = (
     <span className={styles.textSecondary} style={{ float: 'right' }}>
       <Badge status="default" text="未响应" />
     </span>
-    <p className={styles.textSecondary} style={{ marginTop: 8 }} >耗时：2小时25分钟</p>
+    <p className={styles.textSecondary} style={{ marginTop: 4 }} >耗时：2小时25分钟</p>
   </div>
 );
 
 const customDot = (dot, { status }) => (status === 'process' ?
-  <Popover content={popoverContent}>
+  <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
     {dot}
   </Popover>
   : dot

src/routes/Profile/AdvancedProfile.less

@@ -23,5 +23,5 @@
   border: 0;
   border-top: 1px solid @border-color-split;
   height: 1px;
-  margin: 0 0 24px 0;
+  margin: 0 0 16px 0;
 }

src/routes/Profile/BasicProfile.js

@@ -99,11 +99,13 @@ export default class BasicProfile extends Component {
       title: '单价',
       dataIndex: 'price',
       key: 'price',
+      className: 'col-money',
       render: renderContent,
     }, {
       title: '数量（件）',
       dataIndex: 'num',
       key: 'num',
+      className: 'col-money',
       render: (text, row, index) => {
         if (index < basicGoods.length) {
           return text;
@@ -114,6 +116,7 @@ export default class BasicProfile extends Component {
       title: '金额',
       dataIndex: 'amount',
       key: 'amount',
+      className: 'col-money',
       render: (text, row, index) => {
         if (index < basicGoods.length) {
           return text;
@@ -124,19 +127,19 @@ export default class BasicProfile extends Component {
     return (
       <PageHeaderLayout title="基础详情页">
         <Card bordered={false}>
-          <DescriptionList title="退款申请" style={{ marginBottom: 24 }}>
+          <DescriptionList title="退款申请" style={{ marginBottom: 32 }}>
             <Description term="取货单号">1000000000</Description>
             <Description term="状态">已取货</Description>
             <Description term="销售单号">1234123421</Description>
             <Description term="子订单">3214321432</Description>
           </DescriptionList>
           <div className={styles.divider} />
-          <DescriptionList title="用户信息" style={{ marginBottom: 24 }}>
+          <DescriptionList title="用户信息" style={{ marginBottom: 32 }}>
             <Description term="用户姓名">付小小</Description>
             <Description term="联系电话">18100000000</Description>
             <Description term="常用快递">菜鸟仓储</Description>
             <Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description>
-            <Description term="备注">没啥</Description>
+            <Description term="备注">无</Description>
           </DescriptionList>
           <div className={styles.divider} />
           <div className={styles.title}>退货商品</div>
@@ -150,7 +153,7 @@ export default class BasicProfile extends Component {
           />
           <div className={styles.title}>退货进度</div>
           <Table
-            style={{ marginBottom: 24 }}
+            style={{ marginBottom: 16 }}
             pagination={false}
             loading={basicLoading}
             dataSource={basicProgress}

src/routes/Profile/BasicProfile.less

@@ -4,11 +4,18 @@
   border: 0;
   border-top: 1px solid @border-color-split;
   height: 1px;
-  margin: 0 0 24px 0;
+  margin: 0 0 32px 0;
 }
 
 .title {
   color: rgba(0, 0, 0, 0.85);
-  font-weight: 600;
+  font-weight: 500;
   margin-bottom: 16px;
 }
+
+:global {
+  .col-money {
+    text-align: right!important;
+  }
+}
+