<template>
    <div class="card flex flex-col items-center justify-center text-center">
        <!-- 图片插画 -->
        <img src="@/assets/images/empty.svg" alt="空状态" class="w-64 h-64" />

        <!-- 提示文字 -->
        <h2 class="text-xl font-semibold text-gray-700 mb-2">
            没有查询到相关结果
        </h2>
        <!-- <p class="text-lg font-semibold text-gray-700 mb-2 text-center">
            由于民政部门升级维护，查询功能暂不能用<br />恢复正常后，我们将通过短信及时通知您。

            可能由于春节期间系统维护导致未能查询到相关信息<br />请过后再试
        </p> -->

        <p class="text-gray-500 text-sm mb-2 leading-relaxed">
            订单已申请退款，预计
            <span class="text-blue-500 font-medium">24小时内到账</span>。
        </p>
        <p class="text-gray-400 text-xs">如果已到账，您可以忽略本提示。</p>

        <!-- 返回按钮 -->
        <button
            @click="goBack"
            class="mt-4 px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 transition duration-300 ease-in-out"
        >
            返回上一页
        </button>
    </div>
</template>

<script setup>
const route = useRoute();

// 返回上一页逻辑
function goBack() {
    route.goBack();
}
</script>

<style scoped>
/* 你可以添加一些额外的样式（如果需要） */
</style>
