From e6d23aed9be7c987358a87827d122d8b482af520 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 27 Sep 2017 16:01:34 +0800
Subject: [PATCH] improve responsive

---
 src/components/PageHeader/demo/standard.md |  4 +--
 src/components/PageHeader/index.less       | 36 +++++++++++++++++++---
 src/routes/Profile/AdvancedProfile.js      |  4 +--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/components/PageHeader/demo/standard.md b/src/components/PageHeader/demo/standard.md
index 080e8f01..ed6213cd 100644
--- a/src/components/PageHeader/demo/standard.md
+++ b/src/components/PageHeader/demo/standard.md
@@ -31,11 +31,11 @@ const action = (
 
 const extra = (
   <Row>
-    <Col span={12}>
+    <Col sm={24} md={12}>
       <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>状态</div>
       <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>待审批</div>
     </Col>
-    <Col span={12}>
+    <Col sm={24} md={12}>
       <div style={{ color: 'rgba(0, 0, 0, 0.43)' }}>订单金额</div>
       <div style={{ color: 'rgba(0, 0, 0, 0.85)', fontSize: 20 }}>¥ 568.08</div>
     </Col>
diff --git a/src/components/PageHeader/index.less b/src/components/PageHeader/index.less
index 6f9a90d5..6f84a1c1 100644
--- a/src/components/PageHeader/index.less
+++ b/src/components/PageHeader/index.less
@@ -66,7 +66,7 @@
   }
 }
 
-@media screen and (max-width: @screen-md) {
+@media screen and (max-width: @screen-xl) {
   .pageHeader {
     .extraContent {
       margin-left: 44px;
@@ -74,18 +74,44 @@
   }
 }
 
-@media screen and (max-width: @screen-sm) {
+@media screen and (max-width: @screen-lg) {
   .pageHeader {
     .extraContent {
-      margin-left: 24px;
+      margin-left: 20px;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-md) {
+  .pageHeader {
+    .row {
+      display: block;
+    }
+
+    .action, .extraContent {
+      margin-left: 0;
+      text-align: left;
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .pageHeader {
+    .detail {
+      display: block;
     }
   }
 }
 
 @media screen and (max-width: @screen-xs) {
   .pageHeader {
-    .extraContent {
-      margin-left: 8px;
+    .action {
+      :global {
+        .ant-btn-group, :not(.ant-btn-group) .ant-button {
+          display: block;
+          margin-bottom: 8px;
+        }
+      }
     }
   }
 }
diff --git a/src/routes/Profile/AdvancedProfile.js b/src/routes/Profile/AdvancedProfile.js
index 0673b2ae..fda018de 100644
--- a/src/routes/Profile/AdvancedProfile.js
+++ b/src/routes/Profile/AdvancedProfile.js
@@ -35,11 +35,11 @@ const action = (
 
 const extra = (
   <Row>
-    <Col span={12}>
+    <Col xs={24} sm={12}>
       <div className={styles.textSecondary}>状态</div>
       <div className={styles.heading}>待审批</div>
     </Col>
-    <Col span={12}>
+    <Col xs={24} sm={12}>
       <div className={styles.textSecondary}>订单金额</div>
       <div className={styles.heading}>¥ 568.08</div>
     </Col>
-- 
GitLab