Commit b6ef9ca7 authored by 陈帅's avatar 陈帅

feat:remove descriptionList

parent 9c632431
AccountCenter/snapshot.png

323 KB | W: | H:

AccountCenter/snapshot.png

324 KB | W: | H:

AccountCenter/snapshot.png
AccountCenter/snapshot.png
AccountCenter/snapshot.png
AccountCenter/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
AccountSettings/snapshot.png

77.3 KB | W: | H:

AccountSettings/snapshot.png

83.8 KB | W: | H:

AccountSettings/snapshot.png
AccountSettings/snapshot.png
AccountSettings/snapshot.png
AccountSettings/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardAnalysis/snapshot.png

276 KB | W: | H:

DashboardAnalysis/snapshot.png

276 KB | W: | H:

DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
DashboardAnalysis/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardMonitor/snapshot.png

282 KB | W: | H:

DashboardMonitor/snapshot.png

279 KB | W: | H:

DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
DashboardMonitor/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
DashboardWorkplace/snapshot.png

223 KB | W: | H:

DashboardWorkplace/snapshot.png

223 KB | W: | H:

DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
DashboardWorkplace/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
EditorFlow/snapshot.png

45.8 KB | W: | H:

EditorFlow/snapshot.png

44.5 KB | W: | H:

EditorFlow/snapshot.png
EditorFlow/snapshot.png
EditorFlow/snapshot.png
EditorFlow/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
EditorKoni/snapshot.png

40.7 KB | W: | H:

EditorKoni/snapshot.png

41.8 KB | W: | H:

EditorKoni/snapshot.png
EditorKoni/snapshot.png
EditorKoni/snapshot.png
EditorKoni/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
EditorMind/snapshot.png

86.6 KB | W: | H:

EditorMind/snapshot.png

82.9 KB | W: | H:

EditorMind/snapshot.png
EditorMind/snapshot.png
EditorMind/snapshot.png
EditorMind/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
Exception403/snapshot.png

63.6 KB | W: | H:

Exception403/snapshot.png

65.3 KB | W: | H:

Exception403/snapshot.png
Exception403/snapshot.png
Exception403/snapshot.png
Exception403/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
Exception404/snapshot.png

58.6 KB | W: | H:

Exception404/snapshot.png

60 KB | W: | H:

Exception404/snapshot.png
Exception404/snapshot.png
Exception404/snapshot.png
Exception404/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
Exception500/snapshot.png

58.2 KB | W: | H:

Exception500/snapshot.png

59.3 KB | W: | H:

Exception500/snapshot.png
Exception500/snapshot.png
Exception500/snapshot.png
Exception500/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
FormAdvancedForm/snapshot.png

105 KB | W: | H:

FormAdvancedForm/snapshot.png

105 KB | W: | H:

FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
FormAdvancedForm/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
FormBasicForm/snapshot.png

17.1 KB | W: | H:

FormBasicForm/snapshot.png

17.1 KB | W: | H:

FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
FormBasicForm/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
FormStepForm/snapshot.png

80.6 KB | W: | H:

FormStepForm/snapshot.png

80.6 KB | W: | H:

FormStepForm/snapshot.png
FormStepForm/snapshot.png
FormStepForm/snapshot.png
FormStepForm/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListBasicList/snapshot.png

131 KB | W: | H:

ListBasicList/snapshot.png

132 KB | W: | H:

ListBasicList/snapshot.png
ListBasicList/snapshot.png
ListBasicList/snapshot.png
ListBasicList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListCardList/snapshot.png

154 KB | W: | H:

ListCardList/snapshot.png

153 KB | W: | H:

ListCardList/snapshot.png
ListCardList/snapshot.png
ListCardList/snapshot.png
ListCardList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListSearch/snapshot.png

26.2 KB | W: | H:

ListSearch/snapshot.png

26.2 KB | W: | H:

ListSearch/snapshot.png
ListSearch/snapshot.png
ListSearch/snapshot.png
ListSearch/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListSearchApplications/snapshot.png

67 KB | W: | H:

ListSearchApplications/snapshot.png

67.4 KB | W: | H:

ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
ListSearchApplications/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListSearchArticles/snapshot.png

289 KB | W: | H:

ListSearchArticles/snapshot.png

289 KB | W: | H:

ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
ListSearchArticles/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListSearchProjects/snapshot.png

395 KB | W: | H:

ListSearchProjects/snapshot.png

395 KB | W: | H:

ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
ListSearchProjects/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ListTableList/snapshot.png

129 KB | W: | H:

ListTableList/snapshot.png

130 KB | W: | H:

ListTableList/snapshot.png
ListTableList/snapshot.png
ListTableList/snapshot.png
ListTableList/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ProfileAdvanced/snapshot.png

209 KB | W: | H:

ProfileAdvanced/snapshot.png

205 KB | W: | H:

ProfileAdvanced/snapshot.png
ProfileAdvanced/snapshot.png
ProfileAdvanced/snapshot.png
ProfileAdvanced/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
import React from 'react';
import { Col } from 'antd';
import styles from './index.less';
import responsive from './responsive';
import { ColProps } from 'antd/es/col';
export interface DescriptionProps extends ColProps {
column?: number;
key?: string | number;
style?: React.CSSProperties;
term?: React.ReactNode;
}
const Description: React.SFC<DescriptionProps> = props => {
const { term, column = 3, children, ...restProps } = props;
return (
<Col {...responsive[column]} {...restProps}>
{term && <div className={styles.term}>{term}</div>}
{children !== null && children !== undefined && (
<div className={styles.detail}>{children}</div>
)}
</Col>
);
};
export default Description;
import React from 'react';
import classNames from 'classnames';
import { Row } from 'antd';
import styles from './index.less';
import Description, { DescriptionProps } from './Description';
export interface DescriptionListProps {
className?: string;
col?: number;
description?: DescriptionProps[];
gutter?: number;
layout?: 'horizontal' | 'vertical';
size?: 'large' | 'small';
style?: React.CSSProperties;
title?: React.ReactNode;
}
const DescriptionList: React.SFC<DescriptionListProps> & {
Description: typeof Description;
} = ({
className,
title,
col = 3,
layout = 'horizontal',
gutter = 32,
children,
size,
...restProps
}) => {
const clsString = classNames(styles.descriptionList, styles[layout], className, {
[styles.small]: size === 'small',
[styles.large]: size === 'large',
});
const column = col > 4 ? 4 : col;
return (
<div className={clsString} {...restProps}>
{title ? <div className={styles.title}>{title}</div> : null}
<Row gutter={gutter}>
{React.Children.map(children, (child: any) =>
child ? React.cloneElement(child, { column }) : child,
)}
</Row>
</div>
);
};
DescriptionList.Description = Description;
export default DescriptionList;
@import '~antd/es/style/themes/default.less';
.descriptionList {
// offset the padding-bottom of last row
:global {
.ant-row {
margin-bottom: -16px;
overflow: hidden;
}
}
// fix margin top error of following descriptionList
& + & {
:global {
.ant-row {
margin-top: 16px;
}
}
}
.title {
margin-bottom: 16px;
color: @heading-color;
font-weight: 500;
font-size: 14px;
}
.term {
display: table-cell;
padding-bottom: 16px;
color: @heading-color;
// Line-height is 22px IE dom height will calculate error
line-height: 20px;
white-space: nowrap;
&::after {
position: relative;
top: -0.5px;
margin: 0 8px 0 2px;
content: ':';
}
}
.detail {
display: table-cell;
width: 100%;
padding-bottom: 16px;
color: @text-color;
line-height: 20px;
}
&.small {
// offset the padding-bottom of last row
:global {
.ant-row {
margin-bottom: -8px;
}
}
// fix margin top error of following descriptionList
& + .descriptionList {
:global {
.ant-row {
margin-top: 8px;
}
}
}
.title {
margin-bottom: 12px;
color: @text-color;
}
.term,
.detail {
padding-bottom: 8px;
}
}
&.large {
.title {
font-size: 16px;
}
}
&.vertical {
.term {
display: block;
padding-bottom: 8px;
}
.detail {
display: block;
}
}
}
import DescriptionList from './DescriptionList';
export default DescriptionList;
export default {
1: { xs: 24 },
2: { xs: 24, sm: 12 },
3: { xs: 24, sm: 12, md: 8 },
4: { xs: 24, sm: 12, md: 6 },
};
import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { RouteContext, GridContent } from '@ant-design/pro-layout';
import { GridContent, PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import {
Button,
......@@ -12,22 +12,17 @@ import {
Steps,
Card,
Popover,
PageHeader,
Badge,
Table,
Tooltip,
Divider,
Typography,
Tabs,
Descriptions,
} from 'antd';
import { TabsProps } from 'antd/es/tabs';
import classNames from 'classnames';
import DescriptionList from './DescriptionList';
import styles from './style.less';
import { AdvancedProfileData } from './data';
const { Step } = Steps;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const getWindowWidth = () => window.innerWidth || document.documentElement.clientWidth;
......@@ -73,55 +68,18 @@ const extra = (
);
const description = (
<DescriptionList className={styles.headerList} size="small" col={2}>
<Description term="创建人">曲丽丽</Description>
<Description term="订购产品">XX 服务</Description>
<Description term="创建时间">2017-07-07</Description>
<Description term="关联单据">
<Descriptions className={styles.headerList} size="small" column={2}>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="订购产品">XX 服务</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-07-07</Descriptions.Item>
<Descriptions.Item label="关联单据">
<a href="">12421</a>
</Description>
<Description term="生效日期">2017-07-07 ~ 2017-08-08</Description>
<Description term="备注">请于两个工作日内确认</Description>
</DescriptionList>
</Descriptions.Item>
<Descriptions.Item label="生效日期">2017-07-07 ~ 2017-08-08</Descriptions.Item>
<Descriptions.Item label="备注">请于两个工作日内确认</Descriptions.Item>
</Descriptions>
);
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const RenderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: {
tabList: Array<{
tab: string;
key: string;
}>;
tabActiveKey?: string;
onTabChange?: (key: string) => void;
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const desc1 = (
<div className={classNames(styles.textSecondary, styles.stepDescription)}>
<Fragment>
......@@ -236,7 +194,7 @@ const columns = [
}),
)
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
{ loading: boolean; BLOCK_NAME_CAMEL_CASE: AdvancedProfileData; dispatch: Dispatch },
{ loading: boolean; BLOCK_NAME_CAMEL_CASE: AdvancedProfileData; dispatch: Dispatch<any> },
{
operationKey: string;
stepDirection: 'horizontal' | 'vertical';
......@@ -251,7 +209,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
};
componentDidMount() {
const { dispatch, BLOCK_NAME_CAMEL_CASE } = this.props;
const { dispatch } = this.props;
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/fetchAdvanced',
});
......@@ -312,146 +270,111 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
),
};
return (
<RouteContext.Consumer>
{value => {
return (
<>
<PageHeader
{...value}
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
单号:234231029431
</Typography.Title>
}
style={{
margin: -24,
}}
extra={action}
footer={
<RenderFooter
tabList={[
{
key: 'detail',
tab: '详情',
},
{
key: 'rule',
tab: '规则',
},
]}
/>
}
>
<div
style={{
display: 'flex',
}}
<PageHeaderWrapper
title="单号:234231029431"
extra={action}
content={description}
extraContent={extra}
tabActiveKey="detail"
tabList={[
{
key: 'detail',
tab: '详情',
},
{
key: 'rule',
tab: '规则',
},
]}
>
<div
style={{
margin: 24,
marginTop: 48,
}}
className={styles.main}
>
<GridContent>
<Card title="流程进度" style={{ marginBottom: 24 }}>
<Steps direction={stepDirection} progressDot={customDot} current={1}>
<Step title="创建项目" description={desc1} />
<Step title="部门初审" description={desc2} />
<Step title="财务复核" />
<Step title="完成" />
</Steps>
</Card>
<Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
<Descriptions style={{ marginBottom: 24 }}>
<Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
<Descriptions.Item label="会员卡号">32943898021309809423</Descriptions.Item>
<Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item>
<Descriptions.Item label="联系方式">18112345678</Descriptions.Item>
<Descriptions.Item label="联系地址">
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
</Descriptions.Item>
</Descriptions>
<Descriptions style={{ marginBottom: 24 }} title="信息组">
<Descriptions.Item label="某某数据">725</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
<Descriptions.Item
label={
<span>
某某数据
<Tooltip title="数据说明">
<Icon
style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
type="info-circle-o"
/>
</Tooltip>
</span>
}
>
{description}
{extra}
</div>
</PageHeader>
<div
style={{
margin: 24,
marginTop: 48,
}}
>
<GridContent>
<Card title="流程进度" style={{ marginBottom: 24 }} bordered={false}>
<Steps direction={stepDirection} progressDot={customDot} current={1}>
<Step title="创建项目" description={desc1} />
<Step title="部门初审" description={desc2} />
<Step title="财务复核" />
<Step title="完成" />
</Steps>
</Card>
<Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
<DescriptionList style={{ marginBottom: 24 }}>
<Description term="用户姓名">付小小</Description>
<Description term="会员卡号">32943898021309809423</Description>
<Description term="身份证">3321944288191034921</Description>
<Description term="联系方式">18112345678</Description>
<Description term="联系地址">
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
</Description>
</DescriptionList>
<DescriptionList style={{ marginBottom: 24 }} title="信息组">
<Description term="某某数据">725</Description>
<Description term="该数据更新时间">2017-08-08</Description>
<Description>&nbsp;</Description>
<Description
term={
<span>
某某数据
<Tooltip title="数据说明">
<Icon
style={{ color: 'rgba(0, 0, 0, 0.43)', marginLeft: 4 }}
type="info-circle-o"
/>
</Tooltip>
</span>
}
>
725
</Description>
<Description term="该数据更新时间">2017-08-08</Description>
</DescriptionList>
<h4 style={{ marginBottom: 16 }}>信息组</h4>
<Card type="inner" title="多层级信息组">
<DescriptionList size="small" style={{ marginBottom: 16 }} title="组名称">
<Description term="负责人">林东东</Description>
<Description term="角色码">1234567</Description>
<Description term="所属部门">XX公司 - YY部</Description>
<Description term="过期时间">2017-08-08</Description>
<Description term="描述">
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
</Description>
</DescriptionList>
<Divider style={{ margin: '16px 0' }} />
<DescriptionList
size="small"
style={{ marginBottom: 16 }}
title="组名称"
col={1}
>
<Description term="学名">
Citrullus lanatus (Thunb.) Matsum. et
Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗..
</Description>
</DescriptionList>
<Divider style={{ margin: '16px 0' }} />
<DescriptionList size="small" title="组名称">
<Description term="负责人">付小小</Description>
<Description term="角色码">1234568</Description>
</DescriptionList>
</Card>
</Card>
<Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
<div className={styles.noData}>
<Icon type="frown-o" />
暂无数据
</div>
</Card>
<Card
className={styles.tabsCard}
bordered={false}
tabList={operationTabList}
onTabChange={this.onOperationTabChange}
>
{contentList[operationKey]}
</Card>
</GridContent>
725
</Descriptions.Item>
<Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
</Descriptions>
<h4 style={{ marginBottom: 16 }}>信息组</h4>
<Card type="inner" title="多层级信息组">
<Descriptions style={{ marginBottom: 16 }} title="组名称">
<Descriptions.Item label="负责人">林东东</Descriptions.Item>
<Descriptions.Item label="角色码">1234567</Descriptions.Item>
<Descriptions.Item label="所属部门">XX公司 - YY部</Descriptions.Item>
<Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
<Descriptions.Item label="描述">
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
</Descriptions.Item>
</Descriptions>
<Divider style={{ margin: '16px 0' }} />
<Descriptions style={{ marginBottom: 16 }} title="组名称" column={1}>
<Descriptions.Item label="学名">
Citrullus lanatus (Thunb.) Matsum. et
Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗..
</Descriptions.Item>
</Descriptions>
<Divider style={{ margin: '16px 0' }} />
<Descriptions title="组名称">
<Descriptions.Item label="负责人">付小小</Descriptions.Item>
<Descriptions.Item label="角色码">1234568</Descriptions.Item>
</Descriptions>
</Card>
</Card>
<Card title="用户近半年来电记录" style={{ marginBottom: 24 }} bordered={false}>
<div className={styles.noData}>
<Icon type="frown-o" />
暂无数据
</div>
</>
);
}}
</RouteContext.Consumer>
</Card>
<Card
className={styles.tabsCard}
bordered={false}
tabList={operationTabList}
onTabChange={this.onOperationTabChange}
>
{contentList[operationKey]}
</Card>
</GridContent>
</div>
</PageHeaderWrapper>
);
}
}
......
@import '~antd/es/style/themes/default.less';
.main {
table {
table-layout: fixed;
}
}
.headerList {
margin-bottom: 4px;
:global {
.ant-descriptions-row > td {
padding-bottom: 8px;
}
}
}
.tabsCard {
......
ProfileBasic/snapshot.png

136 KB | W: | H:

ProfileBasic/snapshot.png

135 KB | W: | H:

ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
ProfileBasic/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
import React from 'react';
import { Col } from 'antd';
import styles from './index.less';
import responsive from './responsive';
import { ColProps } from 'antd/es/col';
export interface DescriptionProps extends ColProps {
column?: number;
key?: string | number;
style?: React.CSSProperties;
term?: React.ReactNode;
}
const Description: React.SFC<DescriptionProps> = props => {
const { term, column = 3, children, ...restProps } = props;
return (
<Col {...responsive[column]} {...restProps}>
{term && <div className={styles.term}>{term}</div>}
{children !== null && children !== undefined && (
<div className={styles.detail}>{children}</div>
)}
</Col>
);
};
export default Description;
import React from 'react';
import classNames from 'classnames';
import { Row } from 'antd';
import styles from './index.less';
import Description, { DescriptionProps } from './Description';
export interface DescriptionListProps {
className?: string;
col?: number;
description?: DescriptionProps[];
gutter?: number;
layout?: 'horizontal' | 'vertical';
size?: 'large' | 'small';
style?: React.CSSProperties;
title?: React.ReactNode;
}
const DescriptionList: React.SFC<DescriptionListProps> & {
Description: typeof Description;
} = ({
className,
title,
col = 3,
layout = 'horizontal',
gutter = 32,
children,
size,
...restProps
}) => {
const clsString = classNames(styles.descriptionList, styles[layout], className, {
[styles.small]: size === 'small',
[styles.large]: size === 'large',
});
const column = col > 4 ? 4 : col;
return (
<div className={clsString} {...restProps}>
{title ? <div className={styles.title}>{title}</div> : null}
<Row gutter={gutter}>
{React.Children.map(children, (child: any) =>
child ? React.cloneElement(child, { column }) : child,
)}
</Row>
</div>
);
};
DescriptionList.Description = Description;
export default DescriptionList;
@import '~antd/es/style/themes/default.less';
.descriptionList {
// offset the padding-bottom of last row
:global {
.ant-row {
margin-bottom: -16px;
overflow: hidden;
}
}
// fix margin top error of following descriptionList
& + & {
:global {
.ant-row {
margin-top: 16px;
}
}
}
.title {
margin-bottom: 16px;
color: @heading-color;
font-weight: 500;
font-size: 14px;
}
.term {
display: table-cell;
padding-bottom: 16px;
color: @heading-color;
// Line-height is 22px IE dom height will calculate error
line-height: 20px;
white-space: nowrap;
&::after {
position: relative;
top: -0.5px;
margin: 0 8px 0 2px;
content: ':';
}
}
.detail {
display: table-cell;
width: 100%;
padding-bottom: 16px;
color: @text-color;
line-height: 20px;
}
&.small {
// offset the padding-bottom of last row
:global {
.ant-row {
margin-bottom: -8px;
}
}
// fix margin top error of following descriptionList
& + .descriptionList {
:global {
.ant-row {
margin-top: 8px;
}
}
}
.title {
margin-bottom: 12px;
color: @text-color;
}
.term,
.detail {
padding-bottom: 8px;
}
}
&.large {
.title {
font-size: 16px;
}
}
&.vertical {
.term {
display: block;
padding-bottom: 8px;
}
.detail {
display: block;
}
}
}
import DescriptionList from './DescriptionList';
export default DescriptionList;
export default {
1: { xs: 24 },
2: { xs: 24, sm: 12 },
3: { xs: 24, sm: 12, md: 8 },
4: { xs: 24, sm: 12, md: 6 },
};
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider } from 'antd';
import DescriptionList from './components/DescriptionList';
import { Card, Badge, Table, Descriptions, Divider } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './style.less';
import { BasicProfileDataType, BasicGood } from './data';
import { Dispatch } from 'redux';
const { Description } = DescriptionList;
const progressColumns = [
{
......@@ -169,20 +167,20 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<
return (
<PageHeaderWrapper>
<Card bordered={false}>
<DescriptionList size="large" title="退款申请" style={{ marginBottom: 32 }}>
<Description term="取货单号">1000000000</Description>
<Description term="状态">已取货</Description>
<Description term="销售单号">1234123421</Description>
<Description term="子订单">3214321432</Description>
</DescriptionList>
<Descriptions title="退款申请" style={{ marginBottom: 32 }}>
<Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
<Descriptions.Item label="状态">已取货</Descriptions.Item>
<Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
<Descriptions.Item label="子订单">3214321432</Descriptions.Item>
</Descriptions>
<Divider style={{ marginBottom: 32 }} />
<DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
<Description term="用户姓名">付小小</Description>
<Description term="联系电话">18100000000</Description>
<Description term="常用快递">菜鸟仓储</Description>
<Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description>
<Description term="备注"></Description>
</DescriptionList>
<Descriptions title="用户信息" style={{ marginBottom: 32 }}>
<Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
<Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
<Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
<Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
<Descriptions.Item label="备注"></Descriptions.Item>
</Descriptions>
<Divider style={{ marginBottom: 32 }} />
<div className={styles.title}>退货商品</div>
<Table
......
ResultFail/snapshot.png

50.7 KB | W: | H:

ResultFail/snapshot.png

52.3 KB | W: | H:

ResultFail/snapshot.png
ResultFail/snapshot.png
ResultFail/snapshot.png
ResultFail/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
ResultSuccess/snapshot.png

75.5 KB | W: | H:

ResultSuccess/snapshot.png

76.7 KB | W: | H:

ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
ResultSuccess/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserLogin/snapshot.png

40.1 KB | W: | H:

UserLogin/snapshot.png

38.9 KB | W: | H:

UserLogin/snapshot.png
UserLogin/snapshot.png
UserLogin/snapshot.png
UserLogin/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserRegister/snapshot.png

37.9 KB | W: | H:

UserRegister/snapshot.png

38 KB | W: | H:

UserRegister/snapshot.png
UserRegister/snapshot.png
UserRegister/snapshot.png
UserRegister/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
UserRegisterResult/snapshot.png

46.4 KB | W: | H:

UserRegisterResult/snapshot.png

46.1 KB | W: | H:

UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
UserRegisterResult/snapshot.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -84,7 +84,7 @@ const getImage = async (page, path) => {
const openBrowser = async () => {
browser = await puppeteer.launch({
headless: false,
headless: true,
args: [
'--disable-gpu',
'--disable-dev-shm-usage',
......
{
"private": true,
"scripts": {
"dev": "cross-env PAGES_PATH='AccountCenter/src' umi dev",
"dev": "cross-env PAGES_PATH='ProfileAdvanced/src' umi dev",
"start": "umi dev",
"lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
......
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