1 目录结构
2 引入全局样式reset.css
/*! minireset.css v0.0.5 | MIT License | github.com/jgthms/minireset.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,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
html,body {
width: 100%;
height: 100%;
}
#root{
width: 100%;
height: 100%;
}
3 index.html引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="./css/reset.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">Admin</div>
</body>
</html>
4 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;
}
}
}
5 Login.jsx
import React,{Component} from 'react'
import './login.less'
import logo from './images/logo.png'
/*登录的路由组件*/
export default class Login extends Component{
render(){
return (<div className="login">
<header className="login-header">
<img src={logo} alt=""/>
<h1>React项目，后台管理系统</h1>
</header>
<section className="login-content">
<h2>用户登录</h2>
<div>form表单</div>
</section>
</div>);
}
}
