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>
|