From 8b48d5407b02c17a92cde918ea6dc4ebda23adb9 Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 18 Oct 2017 16:06:55 +0800
Subject: [PATCH] update login/register/resut pages

---
 src/components/Result/index.less  | 14 +++++++++-----
 src/layouts/UserLayout.less       | 10 +++++-----
 src/routes/User/Login.js          |  9 ++++++---
 src/routes/User/Login.less        | 12 +++++++++---
 src/routes/User/Register.js       | 18 +++++++++++-------
 src/routes/User/Register.less     | 28 ++++++++++------------------
 src/routes/User/RegisterResult.js | 20 +++++++++-----------
 7 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/src/components/Result/index.less b/src/components/Result/index.less
index 6cebc9da..68652a9e 100644
--- a/src/components/Result/index.less
+++ b/src/components/Result/index.less
@@ -24,24 +24,28 @@
     color: @heading-color;
     font-weight: 500;
     line-height: 32px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
   }
 
   .description {
     font-size: 14px;
     color: @text-color-secondary;
-    margin-bottom: 16px;
+    margin-bottom: 24px;
   }
 
   .extra {
     background: rgba(245, 245, 245, 0.5);
     padding: 16px 40px;
-    margin-bottom: 24px;
+    margin-top: 24px;
     border-radius: @border-radius-sm;
     text-align: left;
   }
 
-  .actions button:not(:last-child) {
-    margin-right: 8px;
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
+      margin-right: 8px;
+    }
   }
 }
diff --git a/src/layouts/UserLayout.less b/src/layouts/UserLayout.less
index 1a66afc5..e245a390 100644
--- a/src/layouts/UserLayout.less
+++ b/src/layouts/UserLayout.less
@@ -1,13 +1,13 @@
 @import "~antd/lib/style/themes/default.less";
 
 .container {
-  background: @background-color-base;
-  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/bOjjckIwLKuWCswKAghg.svg');
+  background: #f0f2f5;
+  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
   width: 100%;
   min-height: 100%;
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 85%;
+  background-size: 100%;
   padding: 110px 0 144px 0;
   position: relative;
 }
@@ -27,7 +27,7 @@
 .logo {
   height: 44px;
   vertical-align: top;
-  margin-right: 12px;
+  margin-right: 16px;
 }
 
 .title {
@@ -39,7 +39,7 @@
 }
 
 .desc {
-  font-size: @font-size-lg;
+  font-size: @font-size-base;
   color: @text-color-secondary;
   margin-top: 12px;
   margin-bottom: 40px;
diff --git a/src/routes/User/Login.js b/src/routes/User/Login.js
index 38665130..dc441ea1 100644
--- a/src/routes/User/Login.js
+++ b/src/routes/User/Login.js
@@ -63,7 +63,7 @@ export default class Login extends Component {
   renderMessage = (message) => {
     return (
       <Alert
-        style={{ marginBottom: 16 }}
+        style={{ marginBottom: 24 }}
         message={message}
         type="error"
         showIcon
@@ -93,6 +93,7 @@ export default class Login extends Component {
                   }],
                 })(
                   <Input
+                    size="large"
                     prefix={<Icon type="user" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
                     placeholder="admin"
                   />
@@ -105,6 +106,7 @@ export default class Login extends Component {
                   }],
                 })(
                   <Input
+                    size="large"
                     prefix={<Icon type="lock" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
                     type="password"
                     placeholder="888888"
@@ -128,6 +130,7 @@ export default class Login extends Component {
                   }],
                 })(
                   <Input
+                    size="large"
                     prefix={<Icon type="mobile" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
                     placeholder="手机号"
                   />
@@ -167,10 +170,10 @@ export default class Login extends Component {
               valuePropName: 'checked',
               initialValue: true,
             })(
-              <Checkbox>自动登录</Checkbox>
+              <Checkbox className={styles.autoLogin}>自动登录</Checkbox>
             )}
             <a className={styles.forgot} href="">忘记密码</a>
-            <Button loading={login.submitting} className={styles.submit} type="primary" htmlType="submit">
+            <Button size="large" loading={login.submitting} className={styles.submit} type="primary" htmlType="submit">
               登录
             </Button>
           </FormItem>
diff --git a/src/routes/User/Login.less b/src/routes/User/Login.less
index c6a1d63d..fb318b91 100644
--- a/src/routes/User/Login.less
+++ b/src/routes/User/Login.less
@@ -17,7 +17,7 @@
     }
 
     .ant-form-item {
-      margin-bottom: 16px;
+      margin-bottom: 24px;
     }
   }
 
@@ -35,7 +35,13 @@
 
     .submit {
       width: 100%;
-      margin-top: 16px;
+      margin-top: 24px;
+    }
+
+    :global {
+      .ant-form-item-control {
+        line-height: 22px;
+      }
     }
   }
 
@@ -75,7 +81,7 @@
 
   .other {
     text-align: left;
-    margin-top: 32px;
+    margin-top: 24px;
 
     .register {
       float: right;
diff --git a/src/routes/User/Register.js b/src/routes/User/Register.js
index 58d60f1b..0f9d49cf 100644
--- a/src/routes/User/Register.js
+++ b/src/routes/User/Register.js
@@ -34,7 +34,7 @@ export default class Register extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.register.status === 'ok') {
-      this.props.dispatch(routerRedux.push('/'));
+      this.props.dispatch(routerRedux.push('/user/register-result'));
     }
   }
 
@@ -154,7 +154,7 @@ export default class Register extends Component {
                 type: 'email', message: '邮箱地址格式错误！',
               }],
             })(
-              <Input placeholder="邮箱" />
+              <Input size="large" placeholder="邮箱" />
             )}
           </FormItem>
           <FormItem help={this.state.help}>
@@ -176,6 +176,7 @@ export default class Register extends Component {
                 }],
               })(
                 <Input
+                  size="large"
                   type="password"
                   placeholder="至少6位密码，区分大小写"
                 />
@@ -191,24 +192,25 @@ export default class Register extends Component {
               }],
             })(
               <Input
+                size="large"
                 type="password"
                 placeholder="确认密码"
               />
             )}
           </FormItem>
           <FormItem>
-            <InputGroup className={styles.mobileGroup} compact>
-              <FormItem>
+            <InputGroup size="large" className={styles.mobileGroup} compact>
+              <FormItem style={{ width: '20%' }}>
                 {getFieldDecorator('prefix', {
                   initialValue: '86',
                 })(
-                  <Select>
+                  <Select size="large">
                     <Option value="86">+86</Option>
                     <Option value="87">+87</Option>
                   </Select>
                 )}
               </FormItem>
-              <FormItem>
+              <FormItem style={{ width: '80%' }}>
                 {getFieldDecorator('mobile', {
                   rules: [{
                     required: true, message: '请输入手机号！',
@@ -230,12 +232,14 @@ export default class Register extends Component {
                   }],
                 })(
                   <Input
+                    size="large"
                     placeholder="验证码"
                   />
                 )}
               </Col>
               <Col span={8}>
                 <Button
+                  size="large"
                   disabled={count}
                   className={styles.getCaptcha}
                   onClick={this.onGetCaptcha}
@@ -246,7 +250,7 @@ export default class Register extends Component {
             </Row>
           </FormItem>
           <FormItem>
-            <Button loading={register.submitting} className={styles.submit} type="primary" htmlType="submit">
+            <Button size="large" loading={register.submitting} className={styles.submit} type="primary" htmlType="submit">
               注册
             </Button>
             <Link className={styles.login} to="/user/login">使用已有账户登录</Link>
diff --git a/src/routes/User/Register.less b/src/routes/User/Register.less
index d538f738..a0afad75 100644
--- a/src/routes/User/Register.less
+++ b/src/routes/User/Register.less
@@ -6,39 +6,30 @@
 
   :global {
     .ant-form-item {
-      margin-bottom: 16px;
+      margin-bottom: 24px;
     }
   }
 
   h3 {
     font-size: 16px;
-    margin-bottom: 16px;
+    margin-bottom: 20px;
   }
 
   .mobileGroup {
     :global {
       .ant-form-item {
         margin-bottom: 0;
-        display: table-cell;
         vertical-align: top;
 
-        &:first-child {
-          width: 20%;
-
-          .ant-select-selection {
-            border-right-width: 0;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          }
+        &:first-child .ant-select-selection {
+          border-right-width: 0;
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
         }
 
-        &:last-child {
-          width: 80%;
-
-          .ant-input {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-          }
+        &:last-child .ant-input {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
         }
       }
     }
@@ -55,6 +46,7 @@
 
   .login {
     float: right;
+    line-height: @btn-height-lg;
   }
 }
 
diff --git a/src/routes/User/RegisterResult.js b/src/routes/User/RegisterResult.js
index 99efe292..77e4e8a4 100644
--- a/src/routes/User/RegisterResult.js
+++ b/src/routes/User/RegisterResult.js
@@ -5,19 +5,17 @@ import Result from '../../components/Result';
 
 const actions = (
   <div>
-    <Button type="primary"><a href="">查看邮箱</a></Button>
-    <Button><Link to="/">返回首页</Link></Button>
+    <Button size="large" type="primary"><a href="">查看邮箱</a></Button>
+    <Button size="large"><Link to="/">返回首页</Link></Button>
   </div>
 );
 
 export default () => (
-  <div style={{ width: 520, margin: '0 auto' }}>
-    <Result
-      type="success"
-      title="你的账户：AntDesign@example.com 注册成功"
-      description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
-      actions={actions}
-      style={{ marginTop: 64 }}
-    />
-  </div>
+  <Result
+    type="success"
+    title="你的账户：AntDesign@example.com 注册成功"
+    description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
+    actions={actions}
+    style={{ marginTop: 64 }}
+  />
 );
-- 
GitLab