From e15226a384863dfde451045a2cabd7473f207b27 Mon Sep 17 00:00:00 2001
From: Liu Yue <hangxingliu@gmail.com>
Date: Sun, 13 May 2018 18:59:00 +0800
Subject: [PATCH] fix broken login page on mobile device with small screen
 resolution (#1483)

* fix broken login page on mobile device with small screen resolution

* fix weird padding of Result component in mobile device

* make result page of step-form looks better on mobile device
---
 src/components/Result/index.less     |  7 +++++++
 src/routes/Forms/StepForm/Step3.js   | 22 ++++++++++++++--------
 src/routes/Forms/StepForm/style.less |  3 +++
 src/routes/User/Login.less           |  3 +++
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Result/index.less b/src/components/Result/index.less
index 9953392c..5cd2aff5 100644
--- a/src/components/Result/index.less
+++ b/src/components/Result/index.less
@@ -4,6 +4,9 @@
   text-align: center;
   width: 72%;
   margin: 0 auto;
+  @media screen and (max-width: @screen-xs) {
+    width: 100%;
+  }
 
   .icon {
     font-size: 72px;
@@ -39,6 +42,10 @@
     padding: 24px 40px;
     border-radius: @border-radius-sm;
     text-align: left;
+
+    @media screen and (max-width: @screen-xs) {
+      padding: 18px 20px;
+    }
   }
 
   .actions {
diff --git a/src/routes/Forms/StepForm/Step3.js b/src/routes/Forms/StepForm/Step3.js
index 08fc5d90..9a8d6d46 100644
--- a/src/routes/Forms/StepForm/Step3.js
+++ b/src/routes/Forms/StepForm/Step3.js
@@ -14,28 +14,34 @@ class Step3 extends React.PureComponent {
     const information = (
       <div className={styles.information}>
         <Row>
-          <Col span={8} className={styles.label}>
+          <Col xs={24} sm={8} className={styles.label}>
             付款账户：
           </Col>
-          <Col span={16}>{data.payAccount}</Col>
+          <Col xs={24} sm={16}>
+            {data.payAccount}
+          </Col>
         </Row>
         <Row>
-          <Col span={8} className={styles.label}>
+          <Col xs={24} sm={8} className={styles.label}>
             收款账户：
           </Col>
-          <Col span={16}>{data.receiverAccount}</Col>
+          <Col xs={24} sm={16}>
+            {data.receiverAccount}
+          </Col>
         </Row>
         <Row>
-          <Col span={8} className={styles.label}>
+          <Col xs={24} sm={8} className={styles.label}>
             收款人姓名：
           </Col>
-          <Col span={16}>{data.receiverName}</Col>
+          <Col xs={24} sm={16}>
+            {data.receiverName}
+          </Col>
         </Row>
         <Row>
-          <Col span={8} className={styles.label}>
+          <Col xs={24} sm={8} className={styles.label}>
             转账金额：
           </Col>
-          <Col span={16}>
+          <Col xs={24} sm={16}>
             <span className={styles.money}>{data.amount}</span> 元
           </Col>
         </Row>
diff --git a/src/routes/Forms/StepForm/style.less b/src/routes/Forms/StepForm/style.less
index 6dbbd629..713dd54c 100644
--- a/src/routes/Forms/StepForm/style.less
+++ b/src/routes/Forms/StepForm/style.less
@@ -60,6 +60,9 @@
     color: @heading-color;
     text-align: right;
     padding-right: 8px;
+    @media screen and (max-width: @screen-sm) {
+      text-align: left;
+    }
   }
 }
 
diff --git a/src/routes/User/Login.less b/src/routes/User/Login.less
index c34ab3d8..14a99ff1 100644
--- a/src/routes/User/Login.less
+++ b/src/routes/User/Login.less
@@ -3,6 +3,9 @@
 .main {
   width: 368px;
   margin: 0 auto;
+  @media screen and (max-width: @screen-sm) {
+    width: 95%;
+  }
 
   .icon {
     font-size: 24px;
-- 
GitLab