Commit 40ac8b52 authored by 陈帅's avatar 陈帅

UserRegisterResult finish

parent cbe854a6
@import '~antd/lib/style/themes/default.less';
.result {
width: 72%;
margin: 0 auto;
text-align: center;
@media screen and (max-width: @screen-xs) {
width: 100%;
}
.icon {
margin-bottom: 24px;
font-size: 72px;
line-height: 72px;
& > .success {
color: @success-color;
}
& > .error {
color: @error-color;
}
}
.title {
margin-bottom: 16px;
color: @heading-color;
font-weight: 500;
font-size: 24px;
line-height: 32px;
}
.description {
margin-bottom: 24px;
color: @text-color-secondary;
font-size: 14px;
line-height: 22px;
}
.extra {
padding: 24px 40px;
text-align: left;
background: #fafafa;
border-radius: @border-radius-sm;
@media screen and (max-width: @screen-xs) {
padding: 18px 20px;
}
}
.actions {
margin-top: 32px;
button:not(:last-child) {
margin-right: 8px;
}
}
}
import React from 'react';
import classNames from 'classnames';
import { Icon } from 'antd';
import styles from './index.less';
export interface ResultProps {
actions?: React.ReactNode;
className?: string;
description?: React.ReactNode;
extra?: React.ReactNode;
style?: React.CSSProperties;
title?: React.ReactNode;
type: 'success' | 'error';
}
const Result: React.SFC<ResultProps> = ({
className,
type,
title,
description,
extra,
actions,
...restProps
}) => {
const iconMap = {
error: <Icon className={styles.error} type="close-circle" theme="filled" />,
success: <Icon className={styles.success} type="check-circle" theme="filled" />,
};
const clsString = classNames(styles.result, className);
return (
<div className={clsString} {...restProps}>
<div className={styles.icon}>{iconMap[type]}</div>
<div className={styles.title}>{title}</div>
{description && <div className={styles.description}>{description}</div>}
{extra && <div className={styles.extra}>{extra}</div>}
{actions && <div className={styles.actions}>{actions}</div>}
</div>
);
};
export default Result;
...@@ -2,8 +2,9 @@ import React from 'react'; ...@@ -2,8 +2,9 @@ import React from 'react';
import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale'; import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale';
import { Button } from 'antd'; import { Button } from 'antd';
import Link from 'umi/link'; import Link from 'umi/link';
import { Result } from 'ant-design-pro'; import Result from './Result';
import styles from './style.less'; import styles from './style.less';
import { RouteChildrenProps } from 'react-router';
const actions = ( const actions = (
<div className={styles.actions}> <div className={styles.actions}>
...@@ -20,7 +21,7 @@ const actions = ( ...@@ -20,7 +21,7 @@ const actions = (
</div> </div>
); );
const PAGE_NAME_UPPER_CAMEL_CASE = ({ location }) => ( const PAGE_NAME_UPPER_CAMEL_CASE: React.SFC<RouteChildrenProps> = ({ location }) => (
<Result <Result
className={styles.registerResult} className={styles.registerResult}
type="success" type="success"
......
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