dealSuccess.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <div class="result-success">
  3. <check-circle-icon class="result-success-icon" />
  4. <div class="result-success-title">提交成功</div>
  5. <div class="result-success-describe">2023-12-27</div>
  6. <div>
  7. <t-button @click="() => this.$router.push('/warnManage/index')">返回首页</t-button>
  8. <t-button @click="() => this.$router.push('/warnManage/index')" theme="default">查看详情</t-button>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. import { CheckCircleIcon } from 'tdesign-icons-vue';
  14. export default {
  15. name: 'ResultSuccess',
  16. components: {
  17. CheckCircleIcon,
  18. },
  19. };
  20. </script>
  21. <style lang="less" scoped>
  22. @import '@/style/variables.less';
  23. .result-success {
  24. display: flex;
  25. flex-direction: column;
  26. justify-content: center;
  27. align-items: center;
  28. height: 75vh;
  29. &-icon {
  30. font-size: 72px;
  31. color: var(--td-success-color);
  32. }
  33. &-title {
  34. margin-top: 28px;
  35. font-size: 20px;
  36. color: var(--td-text-color-primary);
  37. text-align: center;
  38. line-height: 28px;
  39. font-weight: 500;
  40. }
  41. &-describe {
  42. margin: 8px 0 32px;
  43. font-size: 14px;
  44. color: var(--td-text-color-secondary);
  45. line-height: 22px;
  46. }
  47. }
  48. .t-button + .t-button {
  49. margin-left: var(--td-comp-margin-s);
  50. }
  51. </style>