tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

try

pull/10914/head
期贤 3 years ago
parent
ee65696c31
commit
17c396615b
10 changed files with 294 additions and 319 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      src/pages/account/settings/components/BaseView.style.ts
  2. 112
      src/pages/account/settings/components/base.tsx
  3. 82
      src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
  4. 2
      src/pages/dashboard/analysis/style.style.ts
  5. 4
      src/pages/dashboard/workplace/style.style.ts
  6. 4
      src/pages/list/basic-list/style.style.ts
  7. 2
      src/pages/list/card-list/style.style.ts
  8. 339
      src/pages/profile/advanced/index.tsx
  9. 2
      src/pages/profile/advanced/style.style.ts
  10. 8
      src/pages/result/fail/index.style.ts

58
src/pages/account/settings/components/BaseView.style.ts
View File

@ -1,58 +1,58 @@
import { createStyles } from "antd-style"; import { createStyles } from 'antd-style';
const useStyles = createStyles(({ token }) => { const useStyles = createStyles(({ token }) => {
return { return {
baseView: { baseView: {
display: "flex", display: 'flex',
paddingTop: "12px", paddingTop: '12px',
}, },
".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": { '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
width: "100%", width: '100%',
}, },
left: { left: {
minWidth: "224px", minWidth: '224px',
maxWidth: "448px", maxWidth: '448px',
}, },
right: { right: {
flex: "1", flex: '1',
paddingLeft: "104px", paddingLeft: '104px',
}, },
avatar_title: { avatar_title: {
height: "22px", height: '22px',
marginBottom: "8px", marginBottom: '8px',
color: token.colorTextHeading, color: token.colorTextHeading,
fontSize: token.fontSize, fontSize: token.fontSize,
lineHeight: "22px", lineHeight: '22px',
}, },
avatar: { avatar: {
width: "144px", width: '144px',
height: "144px", height: '144px',
marginBottom: "12px", marginBottom: '12px',
overflow: "hidden", overflow: 'hidden',
}, },
img: { img: {
width: "100%", width: '100%',
}, },
button_view: { button_view: {
width: "144px", width: '144px',
textAlign: "center", textAlign: 'center',
}, },
area_code: { area_code: {
width: "72px", width: '72px',
}, },
phone_number: { phone_number: {
width: "214px", width: '214px',
}, },
[`@media screen and (max-width: token.screen-xl)`]: { [`@media screen and (max-width: ${token.screenXL})`]: {
baseView: { flexDirection: "column-reverse" }, baseView: { flexDirection: 'column-reverse' },
right: { right: {
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
maxWidth: "448px", maxWidth: '448px',
padding: "20px", padding: '20px',
}, },
avatar_title: { display: "none" }, avatar_title: { display: 'none' },
}, },
}; };
}); });

112
src/pages/account/settings/components/base.tsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from 'react';
import { UploadOutlined } from "@ant-design/icons"; import { UploadOutlined } from '@ant-design/icons';
import { Button, Input, Upload, message } from "antd"; import { Button, Input, Upload, message } from 'antd';
import { import {
ProForm, ProForm,
ProFormDependency, ProFormDependency,
@ -8,43 +8,40 @@ import {
ProFormSelect, ProFormSelect,
ProFormText, ProFormText,
ProFormTextArea, ProFormTextArea,
} from "@ant-design/pro-components"; } from '@ant-design/pro-components';
import { useRequest } from "@umijs/max"; import { useRequest } from '@umijs/max';
import { queryCurrent } from "../service"; import { queryCurrent } from '../service';
import { queryProvince, queryCity } from "../service"; import { queryProvince, queryCity } from '../service';
import useStyles from "./BaseView.style"; import useStyles from './BaseView.style';
const validatorPhone = ( const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
rule: any,
value: string[],
callback: (message?: string) => void
) => {
if (!value[0]) { if (!value[0]) {
callback("Please input your area code!"); callback('Please input your area code!');
} }
if (!value[1]) { if (!value[1]) {
callback("Please input your phone number!"); callback('Please input your phone number!');
} }
callback(); callback();
}; };
// 头像组件 方便以后独立，增加裁剪之类的功能
const AvatarView = ({ avatar }: { avatar: string }) => (
<>
<div className={styles.avatar_title}>头像</div>
<div className={styles.avatar}>
<img src={avatar} alt="avatar" />
</div>
<Upload showUploadList={false}>
<div className={styles.button_view}>
<Button>
<UploadOutlined />
更换头像
</Button>
</div>
</Upload>
</>
);
const BaseView: React.FC = () => { const BaseView: React.FC = () => {
const { styles } = useStyles(); const { styles } = useStyles();
// 头像组件 方便以后独立，增加裁剪之类的功能
const AvatarView = ({ avatar }: { avatar: string }) => (
<>
<div className={styles.avatar_title}>头像</div>
<div className={styles.avatar}>
<img src={avatar} alt="avatar" />
</div>
<Upload showUploadList={false}>
<div className={styles.button_view}>
<Button>
<UploadOutlined />
更换头像
</Button>
</div>
</Upload>
</>
);
const { data: currentUser, loading } = useRequest(() => { const { data: currentUser, loading } = useRequest(() => {
return queryCurrent(); return queryCurrent();
}); });
@ -53,14 +50,13 @@ const BaseView: React.FC = () => {
if (currentUser.avatar) { if (currentUser.avatar) {
return currentUser.avatar; return currentUser.avatar;
} }
const url = const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png";
return url; return url;
} }
return ""; return '';
}; };
const handleFinish = async () => { const handleFinish = async () => {
message.success("更新基本信息成功"); message.success('更新基本信息成功');
}; };
return ( return (
<div className={styles.baseView}> <div className={styles.baseView}>
@ -72,13 +68,13 @@ const BaseView: React.FC = () => {
onFinish={handleFinish} onFinish={handleFinish}
submitter={{ submitter={{
searchConfig: { searchConfig: {
submitText: "更新基本信息", submitText: '更新基本信息',
}, },
render: (_, dom) => dom[1], render: (_, dom) => dom[1],
}} }}
initialValues={{ initialValues={{
...currentUser, ...currentUser,
phone: currentUser?.phone.split("-"), phone: currentUser?.phone.split('-'),
}} }}
hideRequiredMark hideRequiredMark
> >
@ -89,7 +85,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的邮箱!", message: '请输入您的邮箱!',
}, },
]} ]}
/> />
@ -100,7 +96,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的昵称!", message: '请输入您的昵称!',
}, },
]} ]}
/> />
@ -110,7 +106,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入个人简介!", message: '请输入个人简介!',
}, },
]} ]}
placeholder="个人简介" placeholder="个人简介"
@ -122,13 +118,13 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的国家或地区!", message: '请输入您的国家或地区!',
}, },
]} ]}
options={[ options={[
{ {
label: "中国", label: '中国',
value: "China", value: 'China',
}, },
]} ]}
/> />
@ -138,7 +134,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的所在省!", message: '请输入您的所在省!',
}, },
]} ]}
width="sm" width="sm"
@ -158,7 +154,7 @@ const BaseView: React.FC = () => {
}); });
}} }}
/> />
<ProFormDependency name={["province"]}> <ProFormDependency name={['province']}>
{({ province }) => { {({ province }) => {
return ( return (
<ProFormSelect <ProFormSelect
@ -170,7 +166,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的所在城市!", message: '请输入您的所在城市!',
}, },
]} ]}
disabled={!province} disabled={!province}
@ -179,16 +175,14 @@ const BaseView: React.FC = () => {
if (!province?.key) { if (!province?.key) {
return []; return [];
} }
return queryCity(province.key || "").then( return queryCity(province.key || '').then(({ data }) => {
({ data }) => { return data.map((item) => {
return data.map((item) => { return {
return { label: item.name,
label: item.name, value: item.id,
value: item.id, };
}; });
}); });
}
);
}} }}
/> />
); );
@ -202,7 +196,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的街道地址!", message: '请输入您的街道地址!',
}, },
]} ]}
/> />
@ -212,7 +206,7 @@ const BaseView: React.FC = () => {
rules={[ rules={[
{ {
required: true, required: true,
message: "请输入您的联系电话!", message: '请输入您的联系电话!',
}, },
{ {
validator: validatorPhone, validator: validatorPhone,

82
src/pages/dashboard/analysis/components/Charts/ChartCard/index.style.ts
View File

@ -1,77 +1,77 @@
import { createStyles } from 'antd-style'; import { createStyles } from "antd-style";
const useStyles = createStyles(({ token }) => { const useStyles = createStyles(({ token }) => {
return { return {
chartCard: { chartCard: {
position: 'relative', position: "relative",
}, },
chartTop: { chartTop: {
position: 'relative', position: "relative",
width: '100%', width: "100%",
overflow: 'hidden', overflow: "hidden",
}, },
chartTopMargin: { chartTopMargin: {
marginBottom: '12px', marginBottom: "12px",
}, },
chartTopHasMargin: { chartTopHasMargin: {
marginBottom: '20px', marginBottom: "20px",
}, },
metaWrap: { metaWrap: {
float: 'left', float: "left",
}, },
avatar: { avatar: {
position: 'relative', position: "relative",
top: '4px', top: "4px",
float: 'left', float: "left",
marginRight: '20px', marginRight: "20px",
}, },
img: { img: {
borderRadius: '100%', borderRadius: "100%",
}, },
meta: { meta: {
height: '22px', height: "22px",
color: token.colorTextSecondary, color: token.colorTextSecondary,
fontSize: token.fontSize, fontSize: token.fontSize,
lineHeight: '22px', lineHeight: "22px",
}, },
action: { action: {
position: 'absolute', position: "absolute",
top: '4px', top: "4px",
right: '0', right: "0",
lineHeight: '1', lineHeight: "1",
cursor: 'pointer', cursor: "pointer",
}, },
total: { total: {
height: '38px', height: "38px",
marginTop: '4px', marginTop: "4px",
marginBottom: '0', marginBottom: "0",
overflow: 'hidden', overflow: "hidden",
color: token.colorTextHeading, color: token.colorTextHeading,
fontSize: '30px', fontSize: "30px",
lineHeight: '38px', lineHeight: "38px",
whiteSpace: 'nowrap', whiteSpace: "nowrap",
textOverflow: 'ellipsis', textOverflow: "ellipsis",
wordBreak: 'break-all', wordBreak: "break-all",
}, },
content: { content: {
position: 'relative', position: "relative",
width: '100%', width: "100%",
marginBottom: '12px', marginBottom: "12px",
}, },
contentFixed: { contentFixed: {
position: 'absolute', position: "absolute",
bottom: '0', bottom: "0",
left: '0', left: "0",
width: '100%', width: "100%",
}, },
footer: { footer: {
marginTop: '8px', marginTop: "8px",
paddingTop: '9px', paddingTop: "9px",
borderTop: '1px solid @border-color-split', borderTop: "1px solid @border-color-split",
'& > *': { position: 'relative' }, "& > *": { position: "relative" },
}, },
footerMargin: { footerMargin: {
marginTop: '20px', marginTop: "20px",
}, },
}; };
}); });

2
src/pages/dashboard/analysis/style.style.ts
View File

@ -139,7 +139,7 @@ const useStyles = createStyles(({ token }) => {
salesCard: { padding: "16px" }, salesCard: { padding: "16px" },
salesBar: { padding: "16px" }, salesBar: { padding: "16px" },
}, },
[`@media screen and (max-width: token.screen-sm)`]: { [`@media screen and (max-width: ${token.screenSM})`]: {
salesExtraWrap: { display: "none" }, salesExtraWrap: { display: "none" },
salesCard: {}, salesCard: {},
".ant-tabs-content": { paddingTop: "30px" }, ".ant-tabs-content": { paddingTop: "30px" },

4
src/pages/dashboard/workplace/style.style.ts
View File

@ -169,7 +169,7 @@ const useStyles = createStyles(({ token }) => {
datetime: { datetime: {
color: token.colorTextDisabled, color: token.colorTextDisabled,
}, },
[`@media screen and (max-width: token.screen-xl) and (min-width: token.screen-lg)`]: [`@media screen and (max-width: ${token.screenXL}) and (min-width: @screen-lg)`]:
{ {
activeCard: { marginBottom: "24px" }, activeCard: { marginBottom: "24px" },
members: { marginBottom: "0" }, members: { marginBottom: "0" },
@ -193,7 +193,7 @@ const useStyles = createStyles(({ token }) => {
projectList: {}, projectList: {},
projectGrid: { width: "50%" }, projectGrid: { width: "50%" },
}, },
[`@media screen and (max-width: token.screen-sm)`]: { [`@media screen and (max-width: ${token.screenSM})`]: {
pageHeaderContent: { display: "block" }, pageHeaderContent: { display: "block" },
content: { marginLeft: "0" }, content: { marginLeft: "0" },
extraContent: {}, extraContent: {},

4
src/pages/list/basic-list/style.style.ts
View File

@ -86,7 +86,7 @@ const useStyles = createStyles(({ token }) => {
listCard: {}, listCard: {},
".ant-card-head-title": { overflow: "visible" }, ".ant-card-head-title": { overflow: "visible" },
}, },
[`@media screen and (max-width: token.screen-sm)`]: { [`@media screen and (max-width: ${token.screenSM})`]: {
standardList: {}, standardList: {},
extraContentSearch: { width: "100%", marginLeft: "0" }, extraContentSearch: { width: "100%", marginLeft: "0" },
headerInfo: { headerInfo: {
@ -123,7 +123,7 @@ const useStyles = createStyles(({ token }) => {
}, },
}, },
}, },
[`@media screen and (max-width: token.screen-xl)`]: { [`@media screen and (max-width: ${token.screenXL})`]: {
standardList: {}, standardList: {},
listContent: { listContent: {
"& > div": { "& > div": {

2
src/pages/list/card-list/style.style.ts
View File

@ -65,7 +65,7 @@ const useStyles = createStyles(({ token }) => {
[`@media screen and (max-width: ${token.screenMD})`]: { [`@media screen and (max-width: ${token.screenMD})`]: {
extraImg: { display: "none" }, extraImg: { display: "none" },
}, },
[`@media screen and (max-width: token.screen-sm)`]: { [`@media screen and (max-width: ${token.screenSM})`]: {
pageHeaderContent: { paddingBottom: "30px" }, pageHeaderContent: { paddingBottom: "30px" },
contentLink: { contentLink: {
position: "absolute", position: "absolute",

339
src/pages/profile/advanced/index.tsx
View File

@ -3,7 +3,7 @@ import {
DownOutlined, DownOutlined,
EllipsisOutlined, EllipsisOutlined,
InfoCircleOutlined, InfoCircleOutlined,
} from "@ant-design/icons"; } from '@ant-design/icons';
import { import {
Badge, Badge,
Button, Button,
@ -18,19 +18,15 @@ import {
Table, Table,
Tooltip, Tooltip,
Empty, Empty,
} from "antd"; } from 'antd';
import { import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-components';
GridContent, import type { FC } from 'react';
PageContainer, import React, { Fragment, useState } from 'react';
RouteContext, import classNames from 'classnames';
} from "@ant-design/pro-components"; import { useRequest } from '@umijs/max';
import type { FC } from "react"; import type { AdvancedProfileData } from './data.d';
import React, { Fragment, useState } from "react"; import { queryAdvancedProfile } from './service';
import classNames from "classnames"; import useStyles from './style.style';
import { useRequest } from "@umijs/max";
import type { AdvancedProfileData } from "./data.d";
import { queryAdvancedProfile } from "./service";
import useStyles from "./style.style";
const { Step } = Steps; const { Step } = Steps;
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
const menu = ( const menu = (
@ -81,173 +77,172 @@ const action = (
}} }}
</RouteContext.Consumer> </RouteContext.Consumer>
); );
const extra = (
<div className={styles.moreInfo}>
<Statistic title="状态" value="待审批" />
<Statistic title="订单金额" value={568.08} prefix="¥" />
</div>
);
const description = (
<RouteContext.Consumer>
{({ isMobile }) => (
<Descriptions
className={styles.headerList}
size="small"
column={isMobile ? 1 : 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>
</Descriptions.Item>
<Descriptions.Item label="生效日期">
2017-07-07 ~ 2017-08-08
</Descriptions.Item>
<Descriptions.Item label="备注">请于两个工作日内确认</Descriptions.Item>
</Descriptions>
)}
</RouteContext.Consumer>
);
const desc1 = (
<div className={classNames(styles.textSecondary, styles.stepDescription)}>
<Fragment>
曲丽丽
<DingdingOutlined
style={{
marginLeft: 8,
}}
/>
</Fragment>
<div>2016-12-12 12:32</div>
</div>
);
const desc2 = (
<div className={styles.stepDescription}>
<Fragment>
周毛毛
<DingdingOutlined
style={{
color: "#00A0E9",
marginLeft: 8,
}}
/>
</Fragment>
<div>
<a href="">催一下</a>
</div>
</div>
);
const popoverContent = (
<div
style={{
width: 160,
}}
>
吴加号
<span
className={styles.textSecondary}
style={{
float: "right",
}}
>
<Badge
status="default"
text={
<span
style={{
color: "rgba(0, 0, 0, 0.45)",
}}
>
未响应
</span>
}
/>
</span>
<div
className={styles.textSecondary}
style={{
marginTop: 4,
}}
>
耗时：2小时25分钟
</div>
</div>
);
const customDot = (
dot: React.ReactNode,
{
status,
}: {
status: string;
}
) => {
if (status === "process") {
return (
<Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
<span>{dot}</span>
</Popover>
);
}
return dot;
};
const operationTabList = [ const operationTabList = [
{ {
key: "tab1", key: 'tab1',
tab: "操作日志一", tab: '操作日志一',
}, },
{ {
key: "tab2", key: 'tab2',
tab: "操作日志二", tab: '操作日志二',
}, },
{ {
key: "tab3", key: 'tab3',
tab: "操作日志三", tab: '操作日志三',
}, },
]; ];
const columns = [ const columns = [
{ {
title: "操作类型", title: '操作类型',
dataIndex: "type", dataIndex: 'type',
key: "type", key: 'type',
}, },
{ {
title: "操作人", title: '操作人',
dataIndex: "name", dataIndex: 'name',
key: "name", key: 'name',
}, },
{ {
title: "执行结果", title: '执行结果',
dataIndex: "status", dataIndex: 'status',
key: "status", key: 'status',
render: (text: string) => { render: (text: string) => {
if (text === "agree") { if (text === 'agree') {
return <Badge status="success" text="成功" />; return <Badge status="success" text="成功" />;
} }
return <Badge status="error" text="驳回" />; return <Badge status="error" text="驳回" />;
}, },
}, },
{ {
title: "操作时间", title: '操作时间',
dataIndex: "updatedAt", dataIndex: 'updatedAt',
key: "updatedAt", key: 'updatedAt',
}, },
{ {
title: "备注", title: '备注',
dataIndex: "memo", dataIndex: 'memo',
key: "memo", key: 'memo',
}, },
]; ];
type AdvancedState = { type AdvancedState = {
operationKey: "tab1" | "tab2" | "tab3"; operationKey: 'tab1' | 'tab2' | 'tab3';
tabActiveKey: string; tabActiveKey: string;
}; };
const Advanced: FC = () => { const Advanced: FC = () => {
const { styles } = useStyles(); const { styles } = useStyles();
const extra = (
<div className={styles.moreInfo}>
<Statistic title="状态" value="待审批" />
<Statistic title="订单金额" value={568.08} prefix="¥" />
</div>
);
const description = (
<RouteContext.Consumer>
{({ isMobile }) => (
<Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 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>
</Descriptions.Item>
<Descriptions.Item label="生效日期">2017-07-07 ~ 2017-08-08</Descriptions.Item>
<Descriptions.Item label="备注">请于两个工作日内确认</Descriptions.Item>
</Descriptions>
)}
</RouteContext.Consumer>
);
const desc1 = (
<div className={classNames(styles.textSecondary, styles.stepDescription)}>
<Fragment>
曲丽丽
<DingdingOutlined
style={{
marginLeft: 8,
}}
/>
</Fragment>
<div>2016-12-12 12:32</div>
</div>
);
const desc2 = (
<div className={styles.stepDescription}>
<Fragment>
周毛毛
<DingdingOutlined
style={{
color: '#00A0E9',
marginLeft: 8,
}}
/>
</Fragment>
<div>
<a href="">催一下</a>
</div>
</div>
);
const [tabStatus, seTabStatus] = useState<AdvancedState>({ const [tabStatus, seTabStatus] = useState<AdvancedState>({
operationKey: "tab1", operationKey: 'tab1',
tabActiveKey: "detail", tabActiveKey: 'detail',
}); });
const customDot = (
dot: React.ReactNode,
{
status,
}: {
status: string;
},
) => {
const popoverContent = (
<div
style={{
width: 160,
}}
>
吴加号
<span
className={styles.textSecondary}
style={{
float: 'right',
}}
>
<Badge
status="default"
text={
<span
style={{
color: 'rgba(0, 0, 0, 0.45)',
}}
>
未响应
</span>
}
/>
</span>
<div
className={styles.textSecondary}
style={{
marginTop: 4,
}}
>
耗时：2小时25分钟
</div>
</div>
);
if (status === 'process') {
return (
<Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
<span>{dot}</span>
</Popover>
);
}
return dot;
};
const { data = {}, loading } = useRequest<{ const { data = {}, loading } = useRequest<{
data: AdvancedProfileData; data: AdvancedProfileData;
}>(queryAdvancedProfile); }>(queryAdvancedProfile);
@ -287,7 +282,7 @@ const Advanced: FC = () => {
const onOperationTabChange = (key: string) => { const onOperationTabChange = (key: string) => {
seTabStatus({ seTabStatus({
...tabStatus, ...tabStatus,
operationKey: key as "tab1", operationKey: key as 'tab1',
}); });
}; };
return ( return (
@ -301,12 +296,12 @@ const Advanced: FC = () => {
onTabChange={onTabChange} onTabChange={onTabChange}
tabList={[ tabList={[
{ {
key: "detail", key: 'detail',
tab: "详情", tab: '详情',
}, },
{ {
key: "rule", key: 'rule',
tab: "规则", tab: '规则',
}, },
]} ]}
> >
@ -321,7 +316,7 @@ const Advanced: FC = () => {
<RouteContext.Consumer> <RouteContext.Consumer>
{({ isMobile }) => ( {({ isMobile }) => (
<Steps <Steps
direction={isMobile ? "vertical" : "horizontal"} direction={isMobile ? 'vertical' : 'horizontal'}
progressDot={customDot} progressDot={customDot}
current={1} current={1}
> >
@ -346,15 +341,9 @@ const Advanced: FC = () => {
}} }}
> >
<Descriptions.Item label="用户姓名">付小小</Descriptions.Item> <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
<Descriptions.Item label="会员卡号"> <Descriptions.Item label="会员卡号">32943898021309809423</Descriptions.Item>
32943898021309809423 <Descriptions.Item label="身份证">3321944288191034921</Descriptions.Item>
</Descriptions.Item> <Descriptions.Item label="联系方式">18112345678</Descriptions.Item>
<Descriptions.Item label="身份证">
3321944288191034921
</Descriptions.Item>
<Descriptions.Item label="联系方式">
18112345678
</Descriptions.Item>
<Descriptions.Item label="联系地址"> <Descriptions.Item label="联系地址">
曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
</Descriptions.Item> </Descriptions.Item>
@ -366,9 +355,7 @@ const Advanced: FC = () => {
title="信息组" title="信息组"
> >
<Descriptions.Item label="某某数据">725</Descriptions.Item> <Descriptions.Item label="某某数据">725</Descriptions.Item>
<Descriptions.Item label="该数据更新时间"> <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
2017-08-08
</Descriptions.Item>
<Descriptions.Item <Descriptions.Item
label={ label={
<span> <span>
@ -376,7 +363,7 @@ const Advanced: FC = () => {
<Tooltip title="数据说明"> <Tooltip title="数据说明">
<InfoCircleOutlined <InfoCircleOutlined
style={{ style={{
color: "rgba(0, 0, 0, 0.43)", color: 'rgba(0, 0, 0, 0.43)',
marginLeft: 4, marginLeft: 4,
}} }}
/> />
@ -386,9 +373,7 @@ const Advanced: FC = () => {
> >
725 725
</Descriptions.Item> </Descriptions.Item>
<Descriptions.Item label="该数据更新时间"> <Descriptions.Item label="该数据更新时间">2017-08-08</Descriptions.Item>
2017-08-08
</Descriptions.Item>
</Descriptions> </Descriptions>
<h4 <h4
style={{ style={{
@ -406,19 +391,15 @@ const Advanced: FC = () => {
> >
<Descriptions.Item label="负责人">林东东</Descriptions.Item> <Descriptions.Item label="负责人">林东东</Descriptions.Item>
<Descriptions.Item label="角色码">1234567</Descriptions.Item> <Descriptions.Item label="角色码">1234567</Descriptions.Item>
<Descriptions.Item label="所属部门"> <Descriptions.Item label="所属部门">XX公司 - YY部</Descriptions.Item>
XX公司 - YY部 <Descriptions.Item label="过期时间">2017-08-08</Descriptions.Item>
</Descriptions.Item>
<Descriptions.Item label="过期时间">
2017-08-08
</Descriptions.Item>
<Descriptions.Item label="描述"> <Descriptions.Item label="描述">
这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长... 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
</Descriptions.Item> </Descriptions.Item>
</Descriptions> </Descriptions>
<Divider <Divider
style={{ style={{
margin: "16px 0", margin: '16px 0',
}} }}
/> />
<Descriptions <Descriptions
@ -435,7 +416,7 @@ const Advanced: FC = () => {
</Descriptions> </Descriptions>
<Divider <Divider
style={{ style={{
margin: "16px 0", margin: '16px 0',
}} }}
/> />
<Descriptions title="组名称"> <Descriptions title="组名称">

2
src/pages/profile/advanced/style.style.ts
View File

@ -32,7 +32,7 @@ const useStyles = createStyles(({ token }) => {
justifyContent: "space-between", justifyContent: "space-between",
width: "200px", width: "200px",
}, },
[`@media screen and (max-width: token.screen-sm)`]: { [`@media screen and (max-width: ${token.screenSM})`]: {
stepDescription: { left: "8px" }, stepDescription: { left: "8px" },
pageHeader: {}, pageHeader: {},
".ant-pro-page-header-wrap-row": { flexDirection: "column" }, ".ant-pro-page-header-wrap-row": { flexDirection: "column" },

8
src/pages/result/fail/index.style.ts
View File

@ -1,4 +1,4 @@
import { createStyles } from 'antd-style'; import { createStyles } from "antd-style";
const useStyles = createStyles(({ token }) => { const useStyles = createStyles(({ token }) => {
return { return {
@ -6,10 +6,10 @@ const useStyles = createStyles(({ token }) => {
color: token.colorBgTextActive, color: token.colorBgTextActive,
}, },
title: { title: {
marginBottom: '16px', marginBottom: "16px",
color: token.colorTextHeading, color: token.colorTextHeading,
fontWeight: '500', fontWeight: "500",
fontSize: '16px', fontSize: "16px",
}, },
}; };
}); });

Write Preview
Loading…
Cancel
Save