xyy-m/src/error.vue

<template>
  <div class="flex w-full flex-col items-center pt-50">
    <!-- <img src="~/assets/img/error.png" alt="" width="60%" class="mb-20" /> -->
    <span class="text-black-3 mb-15 text-xl font-semibold"
      >此页面似乎不存在</span
    >
    <span class="text-black-9 mb-15 text-sm">
      <span class="text-[#0A8BFF]">{{ seconds }}S</span>
      后将进入首页</span
    >
    <button
      @click="handleError"
      class="rounded bg-brand px-15 py-5 text-base text-white"
    >
      返回首页
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  error: Object,
});

const seconds = ref(3);

const timer = setInterval(() => {
  seconds.value--;
  if (seconds.value <= 0) {
    clearInterval(timer);
    handleError();
  }
}, 1000);
const handleError = () => {
  clearInterval(timer);
  clearError({ redirect: "/" });
};
</script>

<style lang="scss" scoped></style>