base

src/components/LPendding.vue

@@ -0,0 +1,85 @@
+<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>