success.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <template>
  2. <el-card :bordered="false" class="proCard">
  3. <div class="result-box">
  4. <el-result
  5. status="success"
  6. title="操作成功"
  7. description="提交结果页用于反馈一系列操作任务的处理结果,如果仅是简单操作,灰色区域可以显示一些补充的信息。"
  8. >
  9. <div class="result-box-extra">
  10. <p>已提交申请,等待财务部门审核。</p>
  11. </div>
  12. <template #footer>
  13. <div class="flex justify-center mb-4">
  14. <el-space align="center">
  15. <el-button type="info" @click="goHome">回到首页</el-button>
  16. <el-button>查看详情</el-button>
  17. <el-button>打印</el-button>
  18. </el-space>
  19. </div>
  20. </template>
  21. </el-result>
  22. </div>
  23. </el-card>
  24. </template>
  25. <script lang="ts" setup>
  26. import { useRouter } from 'vue-router';
  27. const router = useRouter();
  28. function goHome() {
  29. router.push('/');
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. .result-box {
  34. width: 72%;
  35. margin: 0 auto;
  36. text-align: center;
  37. padding-top: 5px;
  38. &-extra {
  39. padding: 24px 40px;
  40. text-align: left;
  41. background: var(--n-border-color);
  42. border-radius: 4px;
  43. }
  44. }
  45. </style>