update login/register/resut pages

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) {
+  .actions {
+    margin-top: 32px;
+
+    button:not(:last-child) {
       margin-right: 8px;
     }
+  }
 }

src/layouts/UserLayout.less

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

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>

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;

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>

src/routes/User/Register.less

@@ -6,43 +6,34 @@
 
   :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 {
+        &: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 {
+        &:last-child .ant-input {
           border-top-left-radius: 0;
           border-bottom-left-radius: 0;
         }
       }
     }
   }
-  }
 
   .getCaptcha {
     display: block;
@@ -55,6 +46,7 @@
 
   .login {
     float: right;
+    line-height: @btn-height-lg;
   }
 }
 

src/routes/User/RegisterResult.js

@@ -5,13 +5,12 @@ 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 注册成功"
@@ -19,5 +18,4 @@ export default () => (
     actions={actions}
     style={{ marginTop: 64 }}
   />
-  </div>
 );