WebIndex/components/alert/Alert.vue

<script lang="ts" setup>
defineProps<{
  icon: string
  title: string
  message: string
}>()
</script>

<template>
  <div class="flex flex-grow flex-col items-center justify-center p-4 text-center min-h-[30rem]">
    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-lg">
      <div class="mb-4 text-6xl">
        <span
          v-if="icon"
          class="block text-blue-500"
        >{{ icon }}</span>
        <span v-else>❓</span>
      </div>
      <h1 class="mb-2 text-2xl font-bold">
        {{ title }}
      </h1>
      <p class="mb-6 text-gray-600">
        {{ message }}
      </p>
      <router-link
        to="/"
        class="inline-block rounded-lg bg-blue-500 px-6 py-2 text-white shadow transition duration-200 hover:bg-blue-600"
      >
        返回首页
      </router-link>
    </div>
  </div>
</template>

<style scoped>

</style>