add: 登录页布局

client/containers/Login/Login.js

@@ -1,41 +1,54 @@
-// import { React, Component } from '../../base.js'
-import './Login.scss'
-import React, { Component } from 'react'
-import { Button, Input, Icon, Checkbox } from 'antd'
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
+import './Login.scss';
+import React, { Component } from 'react';
+import { Form, Button, Input, Icon, Checkbox } from 'antd';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+const FormItem = Form.Item;
 
 class Login extends Component {
-  constructor(props) {
-    super(props)
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const form = this.props.form;
+
+    // 获取全部组件的值
+    // console.log(form.getFieldsValue());
+    form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+      }
+    });
   }
-
-  render () {
-    console.log(this.props)
+  render() {
+    const { getFieldDecorator } = this.props.form;
     return (
-      <acticle className="login-main">
-        <span>{this.props.value}{this.props.per}</span>
-        <section className="login-box">
-          <div className="content">
-            <Input
-              size="large"
-              placeholder="Username"
-              prefix={<Icon type="user" style={{ fontSize: 16 }} />} />
-
-            <Input
-              size="large"
-              type="password"
-              placeholder="Password"
-              prefix={<Icon type="lock" style={{ fontSize: 16 }} />} />
-
-            <div className="login">
-              <Checkbox>记住密码</Checkbox>
-              <Button type="primary">登录</Button>              
-            </div>
-          </div>
-        </section>
-      </acticle>
-    )
+      <Form onSubmit={this.handleSubmit} className="login-form">
+        <FormItem>
+          {getFieldDecorator('userName', {
+            rules: [{ required: true, message: '请输入用户名!' }],
+          })(
+            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
+          )}
+        </FormItem>
+        <FormItem>
+          {getFieldDecorator('password', {
+            rules: [{ required: true, message: '请输入密码!' }],
+          })(
+            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+          )}
+        </FormItem>
+        <FormItem>
+          {getFieldDecorator('remember', {
+            valuePropName: 'checked',
+            initialValue: true,
+          })(
+            <Checkbox>记住密码</Checkbox>
+          )}
+          <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
+        </FormItem>
+      </Form>
+    );
   }
 }
 
-export default Login
+const LoginWrap = Form.create()(Login);
+
+export default LoginWrap;

client/containers/Login/Login.scss

@@ -1,45 +1,7 @@
 @import '../../styles/common.scss';
 
 /* .login-main.css */
-.login-main {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  height: 100%;
-  -webkit-box-flex: 1;
+.login-form {
+  width: 4rem;
+  margin: 1rem auto;
 }
-
-/* .login-box.css */
-.login-box {
-  font-size: 0.14rem;
-  display: -webkit-box;
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
-  -webkit-box-flex: 1;
-
-  .content {
-    max-width: 5rem;
-    min-width: 3rem;
-    zoom: 1;
-    overflow: hidden;
-    margin: -70px 0 0 0;
-  }
-
-  h3 {
-    font-size: 0.2rem;
-  }
-
-  a {
-    font-size: 0.14rem;
-  }
-  
-  // ant 元素样式
-  .ant-input-affix-wrapper {
-    margin: 0 0 20px 0;
-    height: 35px;
-  }
-
-  .login {
-    float: right;
-  }
-}
-