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

@@ -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 {

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>

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;
+    }
   }
 }
 

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;