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

╰半橙微兮° 2023-03-02 13:28 19阅读 0赞

# 今天我们做登录页面 #

开始之前先引入一个全局初始化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][]下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]

[GitHub]: https://github.com/pretty-git/react-admin-web/tree/master
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]: /images/20230208/48da591da3fa44a990c3f1ebcfbc6b0e.png