提交 | 用户 | age
|
21e054
|
1 |
<template> |
V |
2 |
<div class="m-5 result-success"> |
|
3 |
<Result |
|
4 |
status="success" |
|
5 |
title="提交成功" |
|
6 |
sub-title="提交结果页用于反馈一系列操作任务的处理结果, 如果仅是简单操作,使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明,如果有类似展示 “单据”的需求,下面这个灰色区域可以呈现比较复杂的内容。" |
|
7 |
> |
|
8 |
<template #extra> |
|
9 |
<a-button key="console" type="primary"> 返回列表 </a-button> |
|
10 |
<a-button key="buy"> 查看项目 </a-button> |
|
11 |
<a-button key="buy"> 打印 </a-button> |
|
12 |
</template> |
|
13 |
</Result> |
|
14 |
<div class="result-success__content"> |
|
15 |
<Descriptions title="项目名称"> |
|
16 |
<DescriptionItem label="项目 ID"> 111222 </DescriptionItem> |
|
17 |
<DescriptionItem label="负责人"> Vben </DescriptionItem> |
|
18 |
<DescriptionItem label="生效时间"> 2016-12-12 ~ 2017-12-12 </DescriptionItem> |
|
19 |
</Descriptions> |
|
20 |
<Steps :current="1" progress-dot size="small"> |
|
21 |
<Step title="创建项目"> |
|
22 |
<template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template> |
|
23 |
</Step> |
|
24 |
<Step title="部门初审"> |
9edc28
|
25 |
<template #description> |
V |
26 |
<p>Chad</p> |
|
27 |
</template> |
21e054
|
28 |
</Step> |
V |
29 |
<Step title="财务复核" /> |
|
30 |
<Step title="完成" /> |
|
31 |
</Steps> |
|
32 |
</div> |
|
33 |
</div> |
|
34 |
</template> |
|
35 |
<script lang="ts"> |
|
36 |
import { defineComponent } from 'vue'; |
|
37 |
import { Result, Steps, Descriptions } from 'ant-design-vue'; |
|
38 |
export default defineComponent({ |
|
39 |
components: { |
|
40 |
Result, |
|
41 |
Steps, |
|
42 |
Step: Steps.Step, |
|
43 |
Descriptions, |
|
44 |
DescriptionItem: Descriptions.Item, |
|
45 |
}, |
|
46 |
}); |
|
47 |
</script> |
|
48 |
<style lang="less" scoped> |
|
49 |
.result-success { |
|
50 |
padding: 48px 32px; |
5b8eb4
|
51 |
background: @component-background; |
21e054
|
52 |
|
V |
53 |
&__content { |
|
54 |
padding: 24px 40px; |
5b8eb4
|
55 |
background: @background-color-light; |
21e054
|
56 |
} |
V |
57 |
} |
|
58 |
</style> |