react-07-2 Login Form

在react-07-1 Login Layout的基础上修改代码：

1 Login.jsx

import React,{Component} from 'react'
import {Form,Icon,Input,Button} from 'antd'
import './login.less'
import logo from './images/logo.png'

/*登录的路由组件*/
export default class Login extends Component{

    //实现方法
    handleSubmit = (event) =>{

    }

    render(){
        return (<div className="login">
            <header className="login-header">
                <img src={logo} alt=""/>
                <h1>React项目，后台管理系统</h1>
            </header>
            <section className="login-content">
                <h2>用户登录</h2>
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        <Input
                            prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            placeholder="Username"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Input
                            prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </section>
        </div>);
    }
}

2 login.less

.login{
  width: 100%;
  height: 100%;
  background-image: url("./images/bg.png");
  background-size: 100% 100%;
  .login-header{
    //水平排列
    display: flex;
    //上下居中
    align-items: center;
    height: 80px;
    background-color: rgba(21,20,13,0.5);
    img{
      width: 40px;
      height: 40px;
      //logo的左右边距
      margin: 0 15px 0 50px;
    }
    h1{
      font-size: 30px;
      color: #fff;
    }
  }
  .login-content {
    //位置上下50，水平居中
    margin: 50px auto;
    //表单到边框的距离
    padding: 20px 40px;
    width: 400px;
    height: 300px;
    background-color: #ffffff;
    h2{
      font-size: 20px;
      //字体水平居中
      text-align: center;
      //字体的粗细
      font-weight: bold;
      //字体据下20px
      margin-bottom: 20px;

    }
    .login-form{
      //按钮填充满
      .login-form-button{
        width: 100%;
      }
    }

  }
}