free-sun
/
GovernmentDataResourceCenter
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

(*)登录页调整

master
peng.peng 2 years ago
parent
8b1f32c268
commit
d7095b647d
3 changed files with 144 additions and 162 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      web/client/assets/images/login_bg.png
  2. 193
      web/client/src/sections/auth/containers/login.js
  3. 113
      web/client/src/sections/auth/style.less

BIN
web/client/assets/images/login_bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 KiB

After

Width:  |  Height:  |  Size: 2.6 MiB

193
web/client/src/sections/auth/containers/login.js
View File

@ -90,163 +90,46 @@ const Login = props => {
}; };
return ( return (
<div <div className='login'>
id='loginContainer' <div className='left'></div>
style={{ <div className='right'>
height: '100vh', <div className='loginBox'>
display: 'flex', <div className='_title'>欢迎登录系统</div>
alignItems: 'center', <div className='_divider'></div>
justifyContent: 'center', <Form onKeyDown={enterHandler}>
color: 'aliceblue',
backgroundImage: 'url(/assets/images/login_bg.png)'
}}
>
<img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} />
<div style={{ width: 1000, backgroundColor: '#01316d', borderRadius: 24 }}> <FormItem>
<Row> <Input
<Col span={12} style={{}}> style={{ marginTop: 30 }}
<img src='/assets/images/login.png' width={'100%'} /> placeholder='请输入账号'
</Col> className='loginInp'
<Col span={12}> type="text"
<div style={{ value={username}
width: '100%', // maxlength={11}
height: '100%', onChange={e => {
padding: 30, setUserName(e.target.value)
display: 'flex', setInputChanged(true)
flexDirection: 'column', }}
justifyContent: 'space-around' />
}}> </FormItem>
<p style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center' }}> <FormItem>
政务数据资源中心 <Input
</p> style={{ marginTop: 30 }}
<Tabs defaultActiveKey="1" animated={true} onChange={(k) => { placeholder='请输入密码'
setCurTabKey(k) className='loginInp'
}}> type="password"
<Tabs.TabPane tab="用户名登录" key="1"> value={password}
<Form onKeyDown={enterHandler}> onChange={e => {
<div style={{ fontSize: 10, fontWeight: 'bold' }}> setPassword(e.target.value)
用户名 setInputChanged(true)
</div> }}
<FormItem name="username"> />
<Input </FormItem>
type="text" </Form>
size="large" <Button style={{ borderRadius: 28 }} type="primary" className='loginBtn' loading={isRequesting} onClick={doLogin}>登录</Button>
value={username} </div>
placeholder="用户名"
onChange={e => {
setUserName(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
<div style={{ fontSize: 10, fontWeight: 'bold' }}>
密码
</div>
<FormItem name="password">
<Input
type="password"
size="large"
value={password}
placeholder="密码"
onChange={e => {
setPassword(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
</Form>
</Tabs.TabPane>
<Tabs.TabPane tab="手机登录" key="2" disabled>
<Form onKeyDown={enterHandler}>
<div style={{ fontSize: 10, fontWeight: 'bold' }}>
手机号
</div>
<FormItem name="phone" rules={[{ pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '请输入正确的手机号码' }]}>
<Input
type="text"
size="large"
value={username}
onChange={e => {
setPhone(e.target.value)
setInputChanged(true)
}}
/>
</FormItem>
<div style={{ fontSize: 10, fontWeight: 'bold' }}>
验证码
</div>
<FormItem name="code">
<Input.Group compact>
<Input
size="large"
style={{ width: 'calc(100% - 112px)' }}
onChange={e => {
setCode(e.target.value)
setInputChanged(true)
}}
/>
<Button
size="large"
onClick={() => {
setCodSending(true)
const random = Math.floor(Math.random() * Math.pow(10, 4));
const sig = Hex.stringify(SHA1(phone + random));
setInputChanged(false)
Request.post(ApiTable.validatePhone, {
phone: phone,
r: random,
sig: sig
}).then(res => {
}, err => {
let message = err.response.body?.message
console.log(message);
dispatch({
type: LOGIN_ERROR,
payload: { error: message || '获取验证码失败' }
});
setCodSending(false)
});
}}
loading={codSending}
style={{ width: 112 }}
>
{codSending ? codCountDown + ' s' : '发送验证码'}
</Button>
</Input.Group>
</FormItem>
</Form>
</Tabs.TabPane>
</Tabs>
<Row style={{
textAlign: 'left'
}}>
{
inputChanged || !error ?
<span style={{
visibility: 'hidden'
}}>-</span> :
<span>
<ExclamationCircleOutlined style={{ color: 'red' }} />{error}
</span>
}
</Row>
<Button
shape="round"
size="large"
style={{ width: '100%' }}
loading={isRequesting}
onClick={doLogin}
>
登录
</Button>
</div>
</Col>
</Row>
</div> </div>
</div > </div>
); );
} }

113
web/client/src/sections/auth/style.less
View File

@ -1,13 +1,112 @@
#loginContainer { .login {
.ant-form { width: 100%;
color: aliceblue; height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url('/assets/images/login_bg.png');
background-size: 100% 100%;
.left {
background-size: 100% 100%;
background-repeat: no-repeat;
width: 55%;
height: 100%;
float: left;
top: 0px;
left: 0px;
}
.right {
width: 45%;
height: 100%;
// background-color: #000066;
float: left;
right: 0px;
bottom: 0px;
}
}
@media screen and (max-height:1440px) {
.loginBox {
top: 25%;
}
}
@media screen and (max-height: 768px) {
.loginBox {
top: 20%;
}
}
@media screen and (max-height: 630px) {
.loginBox {
top: 10%;
}
}
.loginBox {
height: 50%;
width: 25%;
position: absolute;
right: 16.5%;
z-index: 20;
background: #fff;
text-align: center;
padding-top: 30px;
@media screen and (min-height:1080px) {
height: 40%;
}
._title {
font-family: SourceHanSansCN-Medium;
font-weight: 500;
font-size: 24px;
color: rgba(0, 0, 0, 0.75);
letter-spacing: 0;
}
._divider {
width: 58px;
height: 4px;
background: #4263F7;
display: inline-block;
}
h1 {
color: #fff;
font-size: 58px;
}
.loginFormTit {
width: 20%;
font-size: 18px;
color: rgb(255, 255, 255);
// margin-bottom: 10px;
}
.loginInp {
width: 80%;
height: 50px;
background: #ffffff;
border: 1px solid #C2C2C2;
border-radius: 5px;
} }
.ant-tabs { .loginBtn {
color: aliceblue; width: 80%;
height: 50px;
margin-top: 40px;
border-radius: 5px;
font-size: 16px;
background: #4263F7;
border-color: #4263F7;
} }
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { .loginBtn:hover {
color: aliceblue; background: #4263F7;
border-color: #4263F7;
} }
} }
Write Preview
Loading…
Cancel
Save