在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%;
}
}
}
}