从零开始到完整的React后台管理项目开发路程(第二节)

完整的项目地址

今天我们做登录页面

开始之前先引入一个全局初始化CSS文件，引入到html.js中

reset.css

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select,
textarea {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
img,
embed,
iframe,
object,
video {
height: auto;
max-width: 100%;
}
audio {
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
html, body {
height: 100%;
}
#root {
width: 100%;
height: 100%;
}

然后在login.js

import React from 'react'
import { Form, Input, Button, Tabs } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.less'
/* 
登录路由组件
*/
const { TabPane } = Tabs;
function callback(key) {
    console.log(key);
}
const taber = {
    margin:0
}
export default class Login extends React.Component {
    
    render() {
        return (
            <div className="login">
                <div className="loginback">
                    <div className="logintitle">欢迎登陆本管理系统</div>
                    <div className="loginmain">
                        <div className="logincenter">
                            <Tabs defaultActiveKey="1" size="large" onChange={callback} animated="true" centered tabBarGutter={20} tabBarStyle={taber}>
                                <TabPane tab="账号登陆" key="1">
                                    <Form
                                       
                                        name="normal_login"
                                        className="login-form"
                                    >
                                        <Form.Item
                                            style={{margin:'10% 0',backgroundColor:'#eee'}}
                                            name="用户名"
                                            rules={[{ required: true, message: '请输入用户名' }]}
                                        >
                                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                                        </Form.Item>
                                        <Form.Item
                                            name="密码"
                                            rules={[{ required: true, message: '请输入密码' }]}
                                        >
                                            <Input
                                                prefix={<LockOutlined className="site-form-item-icon" />}
                                                type="password"
                                                placeholder="密码"
                                            />
                                        </Form.Item>
                                        <Form.Item>
                                            <Button type="primary" htmlType="submit" className="login-form-button">
                                                登录
                                         </Button>
                                        </Form.Item>
                                    </Form>
                                </TabPane>
                                <TabPane tab="扫码登陆" key="2">
                                    Content of Tab Pane 2
                               </TabPane>
                            </Tabs>
                        </div>


                    </div>
                </div>
            </div>
        )
    }
}

login.less

.login {
    width: 100%;
    height: 100vh;
    min-width: 50%;
    background: url('../../resource/images/back.png');
    background-size: 100% 100%;
    position: relative;
}
.loginback {
    position: absolute;
    right: 13%;
    width: 30%;
    top: 20vh;
    height: 50vh;
    
}
.logintitle {
    font-size: 2em;
    color: #fff;
    text-align: center;
    padding-bottom: 30px;
}
.loginmain {
    width: 90%;
    height: 90%;
    padding: 0 10%;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
}
.logincenter {
    width: 100%;
    margin: auto;
}
.login-form-button {
    width: 100%;
    height: 6vh;
    font-size: 2.5vh;
    border: none;
    background: linear-gradient(90deg ,#FD5EC9, #C72CFE);
    box-shadow: 3px 2px 5px 3px #ffe2f0c2;
    border-radius: 3px;
}
.login-form {
    width: 100%;
    
}
.tabs {
    font-size: 3vh;
}
.site-form-item-icon {
    height: 4vh;
    line-height: 4vh;
}

背景图素材从我的GitHub下载