import React from "react";

import {Row, Col} from "antd";

import {Form, Input, Button} from "antd";

import LoginHeader from "./LoginHeader";

import AppFooter from "page/layout/footer/AppFooter";

import "./index.scss";

const FormItem = Form.Item;

class LoginForm  extends React.Component{

    constructor(props){

        super(props);

    }

loginHandler(e) {
    e.preventDefault();
    let loginInfo = {};
    this.props.form.validateFields((err, values) => {
        if(!err){
            loginInfo = {
                username: values.username,
                password: values.password
            }
        }
    })
}

render() { const {getFieldDecorator} =this.props.form; return ( <div className="app-layout app-login"> <div className="login-header"> <LoginHeader /> </div> <div className="login-body"> <div className="app-layout-container"> <Row type="flex" justify="center"> <Col span={24}> <div className="login-left"> <img src="" alt="欢迎登陆react reducer demo"/> </div> <div className="login-right"> <Form onSubmit={(e) => this.loginHandler(e)} className="login-form"> <FormItem> {getFieldDecorator('username',{ rules: [{ required: true, message: "username not null" }] })(<Input addonBefore="username" placeholder="please enter username"/>)} </FormItem> <FormItem> {getFieldDecorator('password',{ rules: [{ required: true, message: "password not null" }] })(<Input addonBefore="password" placeholder="please enter password"/>)} </FormItem> <FormItem> <Button className="btn-block" type="primary" htmlType="submit">login</Button> </FormItem> </Form> </div> </Col> </Row> </div> </div> <AppFooter /> </div>  ) } } const Login = Form.create()(LoginForm); export default Login;

@import "../../styles/varibles";

.app-login{

  .login-header {

    background: $bg-color;

    margin-bottom: 20px;

  }

  .login-body {

    background: $bg-color;

    min-height: 550px;

    .login-left {

      width: 58%;

      float: left;

      img {

        width: 600px;

        height: 500px;

      }

    }

    .login-right {

      width: 42%;

      float: right;

      height: 500px;

      border: $border;

      .login-form {

        margin: 65px 0 45px 78px;

        .btn-block {

          width: 320px;

          height: 40px;

          margin-top: 20px;

        }

        .btn, .ant-input {

          height: 40px;

        }

        .ant-input-group-addon {

          width: 82px;

          background-color: $bg-color;

          text-align: center;

        }

        .ant-input {

          padding: 0 20px;

          width: 238px;

        }

      }

    }

  }

}