28.登录页面的布局

1.我们首先在pages目录下新建一个文件login

2.然后我们在login中新建一个index.js，里面定义一些初始的代码：

import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
class Login extends PureComponent{
    render() {
        return (
            <div>login</div>
        )
    }
}
const mapState = (state) => ({
    
});
const mapDispatch = (dispatch) => ({
    
});
export default connect(mapState, mapDispatch)(Login);

3.然后我们需要去定义login的路由，在APP.js文件中：

• 引入Login

• 然后我们在添加一条login的route
  4.我们访问login页面
  5.我们现在进行login页面的布局

• 我们在login目录下新建一个style.js,用于存放login页面的样式
  

• 我们在index中定义一个LoginWrapper标签，并引入其样式
  

• 在style文件中，样式：

import styled from 'styled-components';
export const LoginWrapper = styled.div`
    position:absolute;
    left:0;
    right: 0;
    bottom:0;
    top:56px;
    background:pink;
`;

6.此时我们发现，搜索框的热门搜索区域无法显示：
7.这时候，我们需要在login的style中加：

在header目录下的style中，在HeaderWrapper中加z-index:1;
然后就可以了
8.现在对login进行布局
index中的代码：

import React,{PureComponent} from 'react';
import {connect} from 'react-redux';
import { LoginWrapper ,LoginBox,Input,Button} from './style';
class Login extends PureComponent{
    render() {
        return (
            <LoginWrapper>
                <LoginBox>
                    <Input placeholder='账号' />
                    <Input placeholder='密码'/>
                    <Button>登录</Button>
                </LoginBox>
            </LoginWrapper>
        )
    }
}
const mapState = (state) => ({
    
});
const mapDispatch = (dispatch) => ({
    
});
export default connect(mapState, mapDispatch)(Login);

styled中的代码：

import styled from 'styled-components';
export const LoginWrapper = styled.div`
    z-index:0;
    position:absolute;
    left:0;
    right: 0;
    bottom:0;
   top:56px;
    min-height: 750px;
    background:#f1f1f1;
`;
export const LoginBox = styled.div`
    width:400px;
    height:220px;
    margin:80px auto;
    padding-top:20px;
    background:#fff;
    box-shadow:0 0 8px rgba(0,0,0,.1);
`;
export const Input = styled.input`
    display:block;
    width:200px;
    height:30px;
    line-height:30px;
    padding:0 10px;
    margin:10px auto;
    color:#777;
`;
export const Button = styled.div`
    width:220px;
    height:30px;
    line-height:30px;
    color:#fff;
    background:#3194d0;
    border-radius:15px;
    margin:10px auto;
    text-align:center;
`;