From 0a523a6626b013d9506c5c399ac0546dbc3bca59 Mon Sep 17 00:00:00 2001
From: Mrx <18278715334@163.com>
Date: Wed, 28 Jan 2026 10:59:36 +0800
Subject: [PATCH] f

---
 src/App.vue                          |   5 +-
 src/components/MaintenanceDialog.vue | 107 +++++++++++++++++++++++++++
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 src/components/MaintenanceDialog.vue

diff --git a/src/App.vue b/src/App.vue
index e066807..2ab3483 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@ import { useDialogStore } from "@/stores/dialogStore";
 import { useAuthStore } from "@/stores/authStore";
 import { useWeixinShare } from "@/composables/useWeixinShare";
 import WechatOverlay from "@/components/WechatOverlay.vue";
+import MaintenanceDialog from "@/components/MaintenanceDialog.vue";
 
 const router = useRouter();
 const agentStore = useAgentStore();
@@ -204,10 +205,12 @@ const h5WeixinGetCode = () => {
 };
 </script>
 
-<template>
+<template> 
+     <MaintenanceDialog />
     <RouterView />
     <WechatOverlay />
     <BindPhoneDialog />
+
 </template>
 
 <style scoped></style>
diff --git a/src/components/MaintenanceDialog.vue b/src/components/MaintenanceDialog.vue
new file mode 100644
index 0000000..9fb165f
--- /dev/null
+++ b/src/components/MaintenanceDialog.vue
@@ -0,0 +1,107 @@
+<script setup>
+import { onMounted, ref } from "vue";
+
+const showMaintenance = ref(false);
+
+onMounted(() => {
+    // 每次访问网址时显示全屏维护遮罩，遮挡所有页面
+    showMaintenance.value = true;
+});
+</script>
+
+<template>
+    <!-- 全屏维护遮罩：固定覆盖整个视口，置于最顶层，阻挡所有页面操作 -->
+    <Teleport to="body">
+        <Transition name="maintenance-fade">
+            <div
+                v-show="showMaintenance"
+                class="maintenance-overlay"
+                aria-hidden="false"
+            >
+                <div class="maintenance-card">
+                    <div class="dialog-header">
+                        <div class="title">系统升级维护公告</div>
+                    </div>
+                    <div class="dialog-content">
+                        <p class="content-text">
+                            为进一步提升系统稳定性与服务效能，我单位正在进行后台升级改造。
+                        </p>
+                        <p class="content-text">
+                            维护期间，相关功能模块将暂时无法使用。​ 由此给您带来的不便，敬请谅解。感谢您一直以来的理解与支持！
+                        </p>
+                    </div>
+                    <div class="dialog-footer">
+                        <span class="ack-text">感谢您的理解与支持</span>
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<style scoped>
+.maintenance-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.85);
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.maintenance-card {
+    width: 100%;
+    max-width: 520px;
+    background: #fff;
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.dialog-header {
+    padding: 24px 24px 16px;
+    text-align: center;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+}
+
+.dialog-content {
+    padding: 24px;
+    min-height: 120px;
+}
+
+.content-text {
+    font-size: 15px;
+    line-height: 1.8;
+    color: #555;
+    margin: 12px 0;
+    text-align: left;
+}
+
+.dialog-footer {
+    padding: 20px 24px 24px;
+    text-align: center;
+}
+
+.ack-text {
+    font-size: 14px;
+    color: #888;
+}
+
+.maintenance-fade-enter-active,
+.maintenance-fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+.maintenance-fade-enter-from,
+.maintenance-fade-leave-to {
+    opacity: 0;
+}
+</style>