用豆包帮忙写的，分享给大家！
源码完整版：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站升级维护中 - 敬请期待</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- 自定义 Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6', // 主色调：蓝色
secondary: '#f97316', // 强调色：橙色
neutral: '#1f2937', // 中性色：深灰
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
}
</style>
</head>
<body class="min-h-screen bg-gradient flex flex-col items-center justify-center px-4 py-8 font-sans text-neutral">
<!-- 页面容器 -->
<div class="max-w-lg w-full bg-white rounded-2xl shadow-xl p-8 md:p-10 transform transition-all duration-300 hover:shadow-2xl">
<!-- 图标区域 -->
<div class="flex justify-center mb-6">
<div class="w-24 h-24 bg-primary/10 rounded-full flex items-center justify-center">
<i class="fa-solid fa-gears text-5xl text-primary animate-spin [animation-duration:3s]"></i>
</div>
</div>
<!-- 标题和描述 -->
<div class="text-center mb-8">
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral mb-4 text-shadow">网站升级维护中</h1>
<p class="text-gray-600 text-lg leading-relaxed mb-6">
为了给你提供更好的服务体验，我们正在对网站进行升级优化。
升级期间网站暂时无法访问，给你带来不便，敬请谅解。
</p>
<!-- 预计恢复时间 -->
<div class="bg-secondary/10 rounded-lg p-4 inline-block mb-4">
<p class="text-secondary font-semibold">
<i class="fa-solid fa-clock mr-2"></i>
预计恢复时间：2026年02月01日 08:00
</p>
</div>
</div>
<!-- 联系方式 -->
<div class="border-t border-gray-200 pt-6 text-center">
<h2 class="font-semibold text-lg mb-4">如有紧急需求，请通过以下方式联系我们</h2>
<div class="flex flex-col md:flex-row justify-center gap-4">
<a href="tel:4008888888" class="flex items-center justify-center gap-2 bg-primary/5 hover:bg-primary/10 transition-colors rounded-lg px-6 py-3">
<i class="fa-solid fa-phone text-primary"></i>
<span class="text-primary font-medium">400-888-8888</span>
</a>
<a href="mailto:support@example.com" class="flex items-center justify-center gap-2 bg-primary/5 hover:bg-primary/10 transition-colors rounded-lg px-6 py-3">
<i class="fa-solid fa-envelope text-primary"></i>
<span class="text-primary font-medium">support@example.com</span>
</a>
</div>
</div>
<!-- 页脚 -->
<div class="mt-8 text-center text-gray-500 text-sm">
<p>© 2026 你的公司名称 版权所有</p>
</div>
</div>
<!-- 页面加载动画（可选） -->
<script>
// 页面加载完成后的简单动画效果
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.max-w-lg');
container.classList.add('opacity-100');
container.classList.remove('opacity-0');
});
</script>
</body>
</html>