|
|
@@ -1,5 +1,24 @@
|
|
|
<template>
|
|
|
<div class="mobile-container">
|
|
|
+ <!-- 停机维护公告弹窗 (新版样式) -->
|
|
|
+ <div class="maintenance-overlay" v-if="showMaintenance">
|
|
|
+ <div class="maintenance-banner">
|
|
|
+ <div class="mb-top-line"></div>
|
|
|
+ <div class="mb-content">
|
|
|
+ <div class="mb-dept">信 息 技 术 部 · 运 维 管 理 中 心</div>
|
|
|
+ <h2 class="mb-title">系统升级维护公告</h2>
|
|
|
+ <p class="mb-desc">为进一步提升系统服务质量与运行稳定性，我单位定于以下时段进行系统升级维护，<br>届时部分业务服务将暂时无法访问，敬请谅解。</p>
|
|
|
+ <p class="mb-time">预计恢复时间2026年5月4日12:00</p>
|
|
|
+ <div class="mb-status-wrapper">
|
|
|
+ <div class="mb-status">
|
|
|
+ <span class="status-dot"></span>
|
|
|
+ 维护中 · 部分服务暂不可用
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 顶部logo -->
|
|
|
<div class="mobile-header">
|
|
|
<div class="logo">
|
|
|
@@ -214,6 +233,7 @@ const {
|
|
|
} = useSpeechRecognition()
|
|
|
|
|
|
// 响应式数据
|
|
|
+const showMaintenance = ref(true) // 控制停机维护公告显示
|
|
|
const searchText = ref('')
|
|
|
const showFeedbackModal = ref(false)
|
|
|
const isSending = ref(false)
|
|
|
@@ -443,6 +463,139 @@ onBeforeUnmount(() => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+
|
|
|
+/* 停机维护公告弹窗 (新版样式 - 移动端适配) */
|
|
|
+.maintenance-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ animation: fadeIn 0.3s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+.maintenance-banner {
|
|
|
+ background: linear-gradient(180deg, #183582 0%, #0d1e57 100%);
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 15px 40px rgba(13, 30, 87, 0.5);
|
|
|
+ position: relative;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 400px;
|
|
|
+ animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
|
+}
|
|
|
+
|
|
|
+.mb-close-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 12px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 1;
|
|
|
+ transition: all 0.2s;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-close-btn:active {
|
|
|
+ color: #fff;
|
|
|
+ transform: scale(1.1);
|
|
|
+}
|
|
|
+
|
|
|
+.mb-top-line {
|
|
|
+ height: 4px;
|
|
|
+ background-color: #ef4444; /* 顶部红线 */
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-content {
|
|
|
+ padding: 30px 20px 35px 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-dept {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ margin-bottom: 16px;
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-title {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ font-family: "STZhongsong", "SimSun", "Songti SC", serif; /* 宋体/明朝体风格 */
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.mb-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ line-height: 1.6;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-time {
|
|
|
+ font-size: 13px;
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+ margin: 0 0 24px 0;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-status-wrapper {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-status {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fdf8eb; /* 浅黄色背景 */
|
|
|
+ color: #b45309; /* 橙色文字 */
|
|
|
+ padding: 10px 24px;
|
|
|
+ border-radius: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ gap: 8px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ letter-spacing: 1px;
|
|
|
+}
|
|
|
+
|
|
|
+.status-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #d1a374; /* 圆点颜色 */
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: pulse 2s infinite;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes pulse {
|
|
|
+ 0% { opacity: 1; transform: scale(1); }
|
|
|
+ 50% { opacity: 0.5; transform: scale(0.8); }
|
|
|
+ 100% { opacity: 1; transform: scale(1); }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes fadeIn {
|
|
|
+ from { opacity: 0; }
|
|
|
+ to { opacity: 1; }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes scaleUp {
|
|
|
+ from { opacity: 0; transform: scale(0.9); }
|
|
|
+ to { opacity: 1; transform: scale(1); }
|
|
|
+}
|
|
|
+
|
|
|
.mobile-container {
|
|
|
width: 100%;
|
|
|
min-height: 100vh;
|
