error.vue 920 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <div class="flex w-full flex-col items-center pt-50">
  3. <!-- <img src="~/assets/img/error.png" alt="" width="60%" class="mb-20" /> -->
  4. <span class="text-black-3 mb-15 text-xl font-semibold"
  5. >此页面似乎不存在</span
  6. >
  7. <span class="text-black-9 mb-15 text-sm">
  8. <span class="text-[#0A8BFF]">{{ seconds }}S</span>
  9. 后将进入首页</span
  10. >
  11. <button
  12. @click="handleError"
  13. class="rounded bg-brand px-15 py-5 text-base text-white"
  14. >
  15. 返回首页
  16. </button>
  17. </div>
  18. </template>
  19. <script setup>
  20. const props = defineProps({
  21. error: Object,
  22. });
  23. const seconds = ref(3);
  24. const timer = setInterval(() => {
  25. seconds.value--;
  26. if (seconds.value <= 0) {
  27. clearInterval(timer);
  28. handleError();
  29. }
  30. }, 1000);
  31. const handleError = () => {
  32. clearInterval(timer);
  33. clearError({ redirect: "/" });
  34. };
  35. </script>
  36. <style lang="scss" scoped></style>