diff --git a/UserRegisterResult/src/Result/index.less b/UserRegisterResult/src/Result/index.less new file mode 100644 index 0000000000000000000000000000000000000000..00c958793c541ca8e5ca4c6cba0aceda83d23dc3 --- /dev/null +++ b/UserRegisterResult/src/Result/index.less @@ -0,0 +1,58 @@ +@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; + } + } +} diff --git a/UserRegisterResult/src/Result/index.tsx b/UserRegisterResult/src/Result/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..63ba3ebc21b6db3f3e254e5686e48d37ea3e4ffc --- /dev/null +++ b/UserRegisterResult/src/Result/index.tsx @@ -0,0 +1,41 @@ +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 = ({ + className, + type, + title, + description, + extra, + actions, + ...restProps +}) => { + const iconMap = { + error: , + success: , + }; + const clsString = classNames(styles.result, className); + return ( +
+
{iconMap[type]}
+
{title}
+ {description &&
{description}
} + {extra &&
{extra}
} + {actions &&
{actions}
} +
+ ); +}; + +export default Result; diff --git a/UserRegisterResult/src/index.js b/UserRegisterResult/src/index.tsx similarity index 86% rename from UserRegisterResult/src/index.js rename to UserRegisterResult/src/index.tsx index 9bd6306009f53711a85d54d002b0a279b28ef8f6..1c8381920f2a532b9faf0e24cbf38fa34fd580ec 100644 --- a/UserRegisterResult/src/index.js +++ b/UserRegisterResult/src/index.tsx @@ -2,8 +2,9 @@ import React from 'react'; import { formatMessage, FormattedMessage } from 'umi-plugin-react/locale'; import { Button } from 'antd'; import Link from 'umi/link'; -import { Result } from 'ant-design-pro'; +import Result from './Result'; import styles from './style.less'; +import { RouteChildrenProps } from 'react-router'; const actions = (
@@ -20,7 +21,7 @@ const actions = (
); -const PAGE_NAME_UPPER_CAMEL_CASE = ({ location }) => ( +const PAGE_NAME_UPPER_CAMEL_CASE: React.SFC = ({ location }) => (