86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<template>
|
||
<div class="card flex flex-col items-center justify-center text-center">
|
||
<!-- 图片插画 -->
|
||
<img
|
||
src="@/assets/images/pendding.svg"
|
||
alt="查询中"
|
||
class="w-64 h-64"
|
||
/>
|
||
|
||
<!-- 提示文字 -->
|
||
<h2 class="text-xl font-semibold text-gray-700 mb-2 floating-text">
|
||
报告正在查询中
|
||
</h2>
|
||
<p class="text-gray-500 text-sm mb-2 leading-relaxed">
|
||
请稍候，我们正在为您查询报告。查询过程可能需要一些时间。
|
||
</p>
|
||
<p class="text-gray-400 text-xs mb-4">
|
||
您可以稍后刷新页面查看结果，或之后访问历史报告列表查看。
|
||
</p>
|
||
<p class="text-gray-400 text-xs mb-4">
|
||
如过久未查询成功，请联系客服为您处理
|
||
</p>
|
||
<!-- 按钮组 -->
|
||
<div class="flex gap-4">
|
||
<!-- 刷新按钮 -->
|
||
<button
|
||
@click="refreshPage"
|
||
class="px-6 py-2 text-white rounded-lg transition duration-300 ease-in-out"
|
||
style="background-color: var(--van-theme-primary);"
|
||
onmouseover="this.style.backgroundColor='var(--van-theme-primary-dark)'"
|
||
onmouseout="this.style.backgroundColor='var(--van-theme-primary)'"
|
||
>
|
||
刷新页面
|
||
</button>
|
||
<!-- 历史报告按钮 -->
|
||
<button
|
||
@click="viewHistory"
|
||
class="px-6 py-2 text-white rounded-lg transition duration-300 ease-in-out"
|
||
style="background-color: var(--van-text-color-2);"
|
||
onmouseover="this.style.backgroundColor='var(--van-text-color)'"
|
||
onmouseout="this.style.backgroundColor='var(--van-text-color-2)'"
|
||
>
|
||
查看历史报告
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
const router = useRouter();
|
||
|
||
// 刷新页面逻辑
|
||
function refreshPage() {
|
||
location.reload(); // 浏览器刷新页面
|
||
}
|
||
|
||
// 查看历史报告逻辑
|
||
function viewHistory() {
|
||
router.replace({ path: "/historyQuery" }); // 假设历史报告页面的路由名为 'historyReports'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@keyframes floatUpDown {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-10px);
|
||
/* 向上浮动 */
|
||
}
|
||
|
||
100% {
|
||
transform: translateY(0);
|
||
/* 返回原位 */
|
||
}
|
||
}
|
||
|
||
/* 给提示文字和其他需要浮动的元素添加动画 */
|
||
.floating-text {
|
||
animation: floatUpDown 3s ease-in-out infinite;
|
||
/* 动画持续3秒，缓入缓出，循环播放 */
|
||
}
|
||
</style>
|