Browse Source

*登入页面布局优化

release_0.0.1
wanyiwei 3 years ago
parent
commit
0bf01f4913
  1. BIN
      web/client/assets/images/bj.png
  2. 59
      web/client/src/sections/auth/containers/login.js
  3. 47
      web/client/src/sections/auth/containers/style.less

BIN
web/client/assets/images/bj.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

59
web/client/src/sections/auth/containers/login.js

@ -56,39 +56,38 @@ const Login = props => {
return (
<div className='login'>
<div className='left'></div>
{/* <div className='left'></div> */}
<div className='right'>
<div className='loginBox'>
<h1>四好公路</h1>
<Form onKeyDown={enterHandler}>
<h1>南昌县智慧交通监管系统</h1>
<Form onKeyDown={enterHandler}>
<FormItem>
<div className='loginFormTit'>用户名</div>
<Input
className='loginInp'
type="text"
value={username}
maxlength={11}
onChange={e => {
setUserName(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
<div className='loginFormTit'>密码</div>
<FormItem>
<Input
className='loginInp'
type="password"
value={password}
<FormItem>
<div className='loginFormTit'>用户名</div>
<Input
className='loginInp'
type="text"
value={username}
maxlength={11}
onChange={e => {
setUserName(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
<div className='loginFormTit'>密码</div>
<FormItem>
<Input
className='loginInp'
type="password"
value={password}
onChange={e => {
setPassword(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
</Form>
onChange={e => {
setPassword(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
</Form>
<Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
</div>
</div>

47
web/client/src/sections/auth/containers/style.less

@ -5,21 +5,22 @@
top: 0;
left: 0;
.left {
background-image: url('/assets/images/loginBg.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
width: 55%;
height: 100%;
float: left;
top: 0px;
left: 0px;
}
// .left {
// background-image: url('/assets/images/bj.png');
// background-size: 100% 100%;
// background-repeat: no-repeat;
// width: 55%;
// height: 100%;
// float: left;
// top: 0px;
// left: 0px;
// }
.right {
width: 45%;
background-image: url('/assets/images/bj.png');
width: 100%;
height: 100%;
background-color: #000066;
// background-color: #000066;
float: left;
right: 0px;
bottom: 0px;
@ -45,22 +46,28 @@
}
.loginBox {
height: 50%;
width: 25%;
// height: 50%;
width: 480px;
position: absolute;
right: 6.5%;
right: 9%;
z-index: 20;
text-align: center;
border: 3px solid rgba(255, 255, 255, 0.6);
border-radius: 20px;
h1 {
margin-top: 6%;
color: #fff;
font-size: 58px;
font-size: 40px;
font-family: "YouSheBiaoTiHei";
}
.loginFormTit {
width: 20%;
// width: 20%;
font-size: 18px;
color: rgb(255, 255, 255);
margin-bottom: 10px;
margin: 0 0 10px 10%;
text-align: left;
}
.loginInp {
@ -74,8 +81,10 @@
.loginBtn {
width: 80%;
height: 50px;
margin-top: 20px;
margin: 20px 0 9% 0;
border-radius: 5px;
font-size: 16px;
}
}
Loading…
Cancel
Save