DeviceStep3.vue
1.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<template>
<div class="step3">
<a-result status="success" title="操作成功" sub-title="预计两小时内到账">
<template #extra>
<a-button type="primary" @click="redo"> 再转一笔 </a-button>
<a-button> 查看账单 </a-button>
</template>
</a-result>
<div class="desc-wrap">
<a-descriptions :column="1" class="mt-5">
<a-descriptions-item label="付款账户"> ant-design@alipay.com </a-descriptions-item>
<a-descriptions-item label="收款账户"> test@example.com </a-descriptions-item>
<a-descriptions-item label="收款人姓名"> Vben </a-descriptions-item>
<a-descriptions-item label="转账金额"> 500元 </a-descriptions-item>
</a-descriptions>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Result, Descriptions } from 'ant-design-vue';
export default defineComponent({
components: {
[Result.name]: Result,
[Descriptions.name]: Descriptions,
[Descriptions.Item.name]: Descriptions.Item,
},
emits: ['redo'],
setup(_, { emit }) {
return {
redo: () => {
emit('redo');
},
};
},
});
</script>
<style lang="less" scoped>
.step3 {
width: 600px;
margin: 0 auto;
}
.desc-wrap {
padding: 24px 40px;
margin-top: 24px;
background-color: @background-color-light;
}
</style>