Step3.vue 1.2 KB

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