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;
`;