维护页需兼顾用户体验与开发效率：js实现倒计时（用data-end-time存iso时间戳，注意时区），分离maintenance.js防csp拦截，flex居中、完整字体回退、小屏适配，并返回503状态码及明确title。
维护页面不是“随便放个提示就行”，核心是：用户看到就懂、不焦虑、不流失，同时开发者能快速部署、随时改时间、不碰后端。
倒计时逻辑必须用 JavaScript 实现，不能只靠 HTML
HTML 本身没有时间计算能力，time 标签只是语义化容器，不触发倒计时。真要显示“距恢复还剩 2 小时 17 分”，得靠 JS 读取配置时间、实时计算、更新 DOM。
- 常见错误：把结束时间硬编码在 HTML 里，比如
<span id="countdown">2026-04-20T10:00:00</span>，但没 JS 读它——页面永远只显示那串文字，不会动 - 推荐做法：用
data-end-time属性存 ISO 时间戳（如2026-04-20T10:00:00+08:00），JS 里用new Date()解析并做差值计算 - 注意时区：服务端给的时间如果带
+08:00，浏览器会自动按本地时区解析；若只给2026-04-20T10:00:00，会被当成 UTC，导致倒计时快/慢 8 小时
静态 HTML 维护页要避免 inline script 被 CDN 或安全策略拦截
很多运维场景下，维护页是直接扔进 Nginx 的 /usr/share/nginx/html/maintenance.html，不走任何构建流程。这时候把 JS 写在 <script></script> 标签里，容易被 CSP 策略（如 script-src 'self'）拒绝执行。
- 安全起见，把倒计时逻辑抽成单独的
maintenance.js文件，和 HTML 同目录，用<script src="maintenance.js"></script>引入 - 别用
document.write或eval，Nginx 静态服务下无法动态加载外部资源，所有依赖必须本地化 - 如果连 JS 都不想用（比如极简兜底页），那就只写静态文案，例如“预计 4 月 20 日 10:00 恢复”，不加倒计时——比 JS 失效后显示“NaN 天 NaN 时”强得多
响应式居中布局别用绝对定位 + margin 负值
老模板里常见 position: relative; left: 50%; margin-left: -300px; 这种写法，对固定宽高有效，但一换字体、一缩放屏幕、一开 macOS 的“放大光标”，就错位。
- 现代写法：父容器设
display: flex; align-items: center; justify-content: center;，子元素自然居中，不依赖具体像素值 - 字体 fallback 要写全：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;，避免某些系统缺字导致高度突变 - 移动端测试重点看 iPhone SE 和 Pixel 4 尺寸，小屏下文字别超 2 行，否则
line-height: 100px会把整个视口撑爆
最常被忽略的一点：维护页的 <title></title> 和 HTTP 状态码。别用 200 OK 返回一个“网站不可用”页面——搜索引擎会当真收录；应该配 Nginx 返回 503 Service Unavailable，并在 <title></title> 里写明“网站维护中 - 暂不可用”，既利 SEO，也防用户误以为是前端 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
