Skip to content

GitLab

A
ant-design-pro
Commit 8b48d540 authored by ddcat1115's avatar ddcat1115
Browse files
Options

update login/register/resut pages

parent 9e051436
Hide whitespace changes
Inline Side-by-side
Showing with 59 additions and 52 deletions
src/components/Result/index.less
View file @ 8b48d540
......@@ -24,24 +24,28 @@
color: @heading-color;
font-weight: 500;
line-height: 32px;
margin-bottom: 8px;
margin-bottom: 16px;
}
.description {
font-size: 14px;
color: @text-color-secondary;
margin-bottom: 16px;
margin-bottom: 24px;
}
.extra {
background: rgba(245, 245, 245, 0.5);
padding: 16px 40px;
margin-bottom: 24px;
margin-top: 24px;
border-radius: @border-radius-sm;
text-align: left;
}
.actions button:not(:last-child) {
margin-right: 8px;
.actions {
margin-top: 32px;
button:not(:last-child) {
margin-right: 8px;
}
}
}
src/layouts/UserLayout.less
View file @ 8b48d540
@import "~antd/lib/style/themes/default.less";
.container {
background: @background-color-base;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/bOjjckIwLKuWCswKAghg.svg');
background: #f0f2f5;
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
background-size: 100%;
padding: 110px 0 144px 0;
position: relative;
}
......@@ -27,7 +27,7 @@
.logo {
height: 44px;
vertical-align: top;
margin-right: 12px;
margin-right: 16px;
}
.title {
......@@ -39,7 +39,7 @@
}
.desc {
font-size: @font-size-lg;
font-size: @font-size-base;
color: @text-color-secondary;
margin-top: 12px;
margin-bottom: 40px;
......
src/routes/User/Login.js
View file @ 8b48d540
......@@ -63,7 +63,7 @@ export default class Login extends Component {
renderMessage = (message) => {
return (
<Alert
style={{ marginBottom: 16 }}
style={{ marginBottom: 24 }}
message={message}
type="error"
showIcon
......@@ -93,6 +93,7 @@ export default class Login extends Component {
}],
})(
<Input
size="large"
prefix={<Icon type="user" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder="admin"
/>
......@@ -105,6 +106,7 @@ export default class Login extends Component {
}],
})(
<Input
size="large"
prefix={<Icon type="lock" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
type="password"
placeholder="888888"
......@@ -128,6 +130,7 @@ export default class Login extends Component {
}],
})(
<Input
size="large"
prefix={<Icon type="mobile" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />}
placeholder="手机号"
/>
......@@ -167,10 +170,10 @@ export default class Login extends Component {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>自动登录</Checkbox>
<Checkbox className={styles.autoLogin}>自动登录</Checkbox>
)}
<a className={styles.forgot} href="">忘记密码</a>
<Button loading={login.submitting} className={styles.submit} type="primary" htmlType="submit">
<Button size="large" loading={login.submitting} className={styles.submit} type="primary" htmlType="submit">
登录
</Button>
</FormItem>
......
src/routes/User/Login.less
View file @ 8b48d540
......@@ -17,7 +17,7 @@
}
.ant-form-item {
margin-bottom: 16px;
margin-bottom: 24px;
}
}
......@@ -35,7 +35,13 @@
.submit {
width: 100%;
margin-top: 16px;
margin-top: 24px;
}
:global {
.ant-form-item-control {
line-height: 22px;
}
}
}
......@@ -75,7 +81,7 @@
.other {
text-align: left;
margin-top: 32px;
margin-top: 24px;
.register {
float: right;
......
src/routes/User/Register.js
View file @ 8b48d540
......@@ -34,7 +34,7 @@ export default class Register extends Component {
componentWillReceiveProps(nextProps) {
if (nextProps.register.status === 'ok') {
this.props.dispatch(routerRedux.push('/'));
this.props.dispatch(routerRedux.push('/user/register-result'));
}
}
......@@ -154,7 +154,7 @@ export default class Register extends Component {
type: 'email', message: '邮箱地址格式错误！',
}],
})(
<Input placeholder="邮箱" />
<Input size="large" placeholder="邮箱" />
)}
</FormItem>
<FormItem help={this.state.help}>
......@@ -176,6 +176,7 @@ export default class Register extends Component {
}],
})(
<Input
size="large"
type="password"
placeholder="至少6位密码，区分大小写"
/>
......@@ -191,24 +192,25 @@ export default class Register extends Component {
}],
})(
<Input
size="large"
type="password"
placeholder="确认密码"
/>
)}
</FormItem>
<FormItem>
<InputGroup className={styles.mobileGroup} compact>
<FormItem>
<InputGroup size="large" className={styles.mobileGroup} compact>
<FormItem style={{ width: '20%' }}>
{getFieldDecorator('prefix', {
initialValue: '86',
})(
<Select>
<Select size="large">
<Option value="86">+86</Option>
<Option value="87">+87</Option>
</Select>
)}
</FormItem>
<FormItem>
<FormItem style={{ width: '80%' }}>
{getFieldDecorator('mobile', {
rules: [{
required: true, message: '请输入手机号！',
......@@ -230,12 +232,14 @@ export default class Register extends Component {
}],
})(
<Input
size="large"
placeholder="验证码"
/>
)}
</Col>
<Col span={8}>
<Button
size="large"
disabled={count}
className={styles.getCaptcha}
onClick={this.onGetCaptcha}
......@@ -246,7 +250,7 @@ export default class Register extends Component {
</Row>
</FormItem>
<FormItem>
<Button loading={register.submitting} className={styles.submit} type="primary" htmlType="submit">
<Button size="large" loading={register.submitting} className={styles.submit} type="primary" htmlType="submit">
注册
</Button>
<Link className={styles.login} to="/user/login">使用已有账户登录</Link>
......
src/routes/User/Register.less
View file @ 8b48d540
......@@ -6,39 +6,30 @@
:global {
.ant-form-item {
margin-bottom: 16px;
margin-bottom: 24px;
}
}
h3 {
font-size: 16px;
margin-bottom: 16px;
margin-bottom: 20px;
}
.mobileGroup {
:global {
.ant-form-item {
margin-bottom: 0;
display: table-cell;
vertical-align: top;
&:first-child {
width: 20%;
.ant-select-selection {
border-right-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:first-child .ant-select-selection {
border-right-width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
width: 80%;
.ant-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&:last-child .ant-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}
......@@ -55,6 +46,7 @@
.login {
float: right;
line-height: @btn-height-lg;
}
}
......
src/routes/User/RegisterResult.js
View file @ 8b48d540
......@@ -5,19 +5,17 @@ import Result from '../../components/Result';
const actions = (
<div>
<Button type="primary"><a href="">查看邮箱</a></Button>
<Button><Link to="/">返回首页</Link></Button>
<Button size="large" type="primary"><a href="">查看邮箱</a></Button>
<Button size="large"><Link to="/">返回首页</Link></Button>
</div>
);
export default () => (
<div style={{ width: 520, margin: '0 auto' }}>
<Result
type="success"
title="你的账户：AntDesign@example.com 注册成功"
description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
actions={actions}
style={{ marginTop: 64 }}
/>
</div>
<Result
type="success"
title="你的账户：AntDesign@example.com 注册成功"
description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
actions={actions}
style={{ marginTop: 64 }}
/>
);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment