Commit b55be88e authored by ddcat1115's avatar ddcat1115

update styles

parent 7dc26cf5
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
margin: 0 auto; margin: 0 auto;
.icon { .icon {
font-size: 64px; font-size: 72px;
line-height: 64px; line-height: 72px;
margin-bottom: 32px; margin-bottom: 24px;
& > .success { & > .success {
color: @success-color; color: @success-color;
...@@ -20,30 +20,29 @@ ...@@ -20,30 +20,29 @@
} }
.title { .title {
font-size: 20px; font-size: 24px;
color: @heading-color; color: @heading-color;
font-weight: 500; font-weight: 500;
line-height: 28px; line-height: 32px;
margin-bottom: 8px; margin-bottom: 16px;
} }
.description { .description {
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: @text-color-secondary; color: @text-color-secondary;
margin-bottom: 16px; margin-bottom: 24px;
} }
.extra { .extra {
background: #fafafa; background: #fafafa;
padding: 16px 40px; padding: 24px 40px;
margin-top: 16px;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
text-align: left; text-align: left;
} }
.actions { .actions {
margin-top: 40px; margin-top: 32px;
button:not(:last-child) { button:not(:last-child) {
margin-right: 8px; margin-right: 8px;
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Link } from 'dva/router'; import { Link } from 'dva/router';
import { Card, Avatar, Button, Icon, List } from 'antd'; import { Card, Button, Icon, List } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import PageHeaderLayout from '../../layouts/PageHeaderLayout';
...@@ -65,7 +65,7 @@ export default class CardList extends PureComponent { ...@@ -65,7 +65,7 @@ export default class CardList extends PureComponent {
<Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}> <Card hoverable actions={[<a>操作一</a>, <a>操作二</a>]}>
<Link to="/list/card-list"> <Link to="/list/card-list">
<Card.Meta <Card.Meta
avatar={<Avatar size="large" src={item.avatar} />} avatar={<img alt="" className={styles.cardAvatar} src={item.avatar} />}
title={item.title} title={item.title}
description={( description={(
<p className={styles.cardDescription}> <p className={styles.cardDescription}>
......
...@@ -27,6 +27,11 @@ ...@@ -27,6 +27,11 @@
height: 185px; height: 185px;
} }
.cardAvatar {
width: 48px;
height: 48px;
}
.cardDescription { .cardDescription {
.textOverflowMulti(); .textOverflowMulti();
color: @text-color; color: @text-color;
......
...@@ -94,7 +94,7 @@ export default class Login extends Component { ...@@ -94,7 +94,7 @@ export default class Login extends Component {
})( })(
<Input <Input
size="large" size="large"
prefix={<Icon type="user" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />} prefix={<Icon type="user" className={styles.prefixIcon} />}
placeholder="admin" placeholder="admin"
/> />
)} )}
...@@ -107,7 +107,7 @@ export default class Login extends Component { ...@@ -107,7 +107,7 @@ export default class Login extends Component {
})( })(
<Input <Input
size="large" size="large"
prefix={<Icon type="lock" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />} prefix={<Icon type="lock" className={styles.prefixIcon} />}
type="password" type="password"
placeholder="888888" placeholder="888888"
/> />
...@@ -131,7 +131,7 @@ export default class Login extends Component { ...@@ -131,7 +131,7 @@ export default class Login extends Component {
})( })(
<Input <Input
size="large" size="large"
prefix={<Icon type="mobile" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />} prefix={<Icon type="mobile" className={styles.prefixIcon} />}
placeholder="手机号" placeholder="手机号"
/> />
)} )}
...@@ -146,7 +146,7 @@ export default class Login extends Component { ...@@ -146,7 +146,7 @@ export default class Login extends Component {
})( })(
<Input <Input
size="large" size="large"
prefix={<Icon type="mail" style={{ fontSize: 14, color: 'rgba(0, 0, 0, 0.25)' }} />} prefix={<Icon type="mail" className={styles.prefixIcon} />}
placeholder="验证码" placeholder="验证码"
/> />
)} )}
......
...@@ -12,6 +12,9 @@ ...@@ -12,6 +12,9 @@
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
} }
.ant-input-affix-wrapper .ant-input:not(:first-child) {
padding-left: 34px;
}
} }
} }
...@@ -27,6 +30,11 @@ ...@@ -27,6 +30,11 @@
} }
} }
.prefixIcon {
font-size: @font-size-base;
color: @disabled-color;
}
.getCaptcha { .getCaptcha {
display: block; display: block;
width: 100%; width: 100%;
......
...@@ -160,7 +160,7 @@ export default class Register extends Component { ...@@ -160,7 +160,7 @@ export default class Register extends Component {
<FormItem help={this.state.help}> <FormItem help={this.state.help}>
<Popover <Popover
content={ content={
<div> <div style={{ padding: '4px 0' }}>
{passwordStatusMap[this.getPasswordStatus()]} {passwordStatusMap[this.getPasswordStatus()]}
{this.renderPasswordProgress()} {this.renderPasswordProgress()}
<p style={{ marginTop: 10 }}>请至少输入 6 个字符请不要使用容易被猜到的密码</p> <p style={{ marginTop: 10 }}>请至少输入 6 个字符请不要使用容易被猜到的密码</p>
......
...@@ -2,9 +2,12 @@ import React from 'react'; ...@@ -2,9 +2,12 @@ import React from 'react';
import { Button } from 'antd'; import { Button } from 'antd';
import { Link } from 'dva/router'; import { Link } from 'dva/router';
import Result from '../../components/Result'; import Result from '../../components/Result';
import styles from './RegisterResult.less';
const title = <div className={styles.title}>你的账户AntDesign@example.com 注册成功</div>;
const actions = ( const actions = (
<div> <div className={styles.actions}>
<Button size="large" type="primary"><a href="">查看邮箱</a></Button> <Button size="large" type="primary"><a href="">查看邮箱</a></Button>
<Button size="large"><Link to="/">返回首页</Link></Button> <Button size="large"><Link to="/">返回首页</Link></Button>
</div> </div>
...@@ -12,10 +15,11 @@ const actions = ( ...@@ -12,10 +15,11 @@ const actions = (
export default () => ( export default () => (
<Result <Result
className={styles.registerResult}
type="success" type="success"
title="你的账户:AntDesign@example.com 注册成功" title={title}
description="激活邮件已发送到你的邮箱中,邮件有效期为24小时。请及时登录邮箱,点击邮件中的链接激活帐户。" description="激活邮件已发送到你的邮箱中,邮件有效期为24小时。请及时登录邮箱,点击邮件中的链接激活帐户。"
actions={actions} actions={actions}
style={{ marginTop: 64 }} style={{ marginTop: 56 }}
/> />
); );
.registerResult {
:global {
.anticon {
font-size: 64px;
}
}
.title {
margin-top: 32px;
font-size: 20px;
line-height: 28px;
}
.actions {
margin-top: 40px;
}
}
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