<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        accent: '#3B82F6',
                        neutral: '#F3F4F6',
                        'neutral-dark': '#1F2937',
                    },
                    fontFamily: {
                        inter: ['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);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .hover-scale {
                @apply hover:scale-105 transition-all duration-300;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center">
                        <i class="fa fa-bullhorn text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">公告中心</span>
                    </a>
                    <nav class="hidden md:ml-10 md:flex space-x-8">
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium transition-colors duration-200">首页</a>
                        <a href="#" class="text-primary border-b-2 border-primary px-3 py-2 text-sm font-medium">公告</a>
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium transition-colors duration-200">动态</a>
                        <a href="#" class="text-gray-900 hover:text-primary px-3 py-2 text-sm font-medium transition-colors duration-200">帮助</a>
                    </nav>
                </div>
                <div class="flex items-center">
                    <div class="hidden md:block">
                        <div class="flex items-center">
                            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 mr-3">
                                <i class="fa fa-bell-o mr-1"></i> 订阅公告
                            </button>
                            <div class="relative ml-3">
                                <div>
                                    <button class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                        <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/1005/200/200" alt="用户头像">
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="md:hidden">
                        <button type="button" class="text-gray-500 hover:text-gray-900 focus:outline-none" id="mobile-menu-button">
                            <i class="fa fa-bars text-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white shadow-lg">
                <a href="#" class="text-gray-900 hover:text-primary block px-3 py-2 text-base font-medium">首页</a>
                <a href="#" class="text-primary block px-3 py-2 text-base font-medium">公告</a>
                <a href="#" class="text-gray-900 hover:text-primary block px-3 py-2 text-base font-medium">动态</a>
                <a href="#" class="text-gray-900 hover:text-primary block px-3 py-2 text-base font-medium">帮助</a>
                <div class="pt-4 pb-3 border-t border-gray-200">
                    <div class="flex items-center px-3">
                        <div class="flex-shrink-0">
                            <img class="h-10 w-10 rounded-full object-cover" src="https://picsum.photos/id/1005/200/200" alt="用户头像">
                        </div>
                        <div class="ml-3">
                            <div class="text-base font-medium text-gray-900">张三</div>
                            <div class="text-sm font-medium text-gray-500">zhangsan@example.com</div>
                        </div>
                    </div>
                    <div class="mt-3 px-2 space-y-1">
                        <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-primary">个人中心</a>
                        <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-primary">设置</a>
                        <a href="#" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-primary">退出登录</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="flex-grow">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- 面包屑导航 -->
            <div class="mb-6">
                <nav class="flex" aria-label="面包屑">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary">
                                <i class="fa fa-home mr-2"></i>首页
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-angle-right text-gray-400 mx-2"></i>
                                <a href="#" class="text-sm font-medium text-gray-700 hover:text-primary">公告中心</a>
                            </div>
                        </li>
                        <li aria-current="page">
                            <div class="flex items-center">
                                <i class="fa fa-angle-right text-gray-400 mx-2"></i>
                                <span class="text-sm font-medium text-gray-500 truncate max-w-xs md:max-w-none">关于系统升级维护的通知</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- 公告详情卡片 -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl mb-8">
                <div class="p-6 sm:p-8">
                    <div class="mb-6">
                        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 leading-tight mb-4">关于系统升级维护的通知</h1>
                        <div class="flex flex-wrap items-center text-sm text-gray-500 space-x-4">
                            <div class="flex items-center">
                                <i class="fa fa-user-o mr-1"></i>
                                <span>管理员</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-clock-o mr-1"></i>
                                <span>2025-07-05 10:30</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-eye mr-1"></i>
                                <span>3,542</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-tags mr-1"></i>
                                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">系统维护</span>
                            </div>
                        </div>
                    </div>

                    <div class="prose max-w-none prose-lg prose-blue mb-8">
                        <p class="text-lg text-gray-800 mb-6">尊敬的用户：</p>
                        
                        <p class="mb-4">为了提供更优质、更高效的服务，我们将于2025年7月10日（星期三）00:00至06:00对系统进行全面升级维护。在此期间，系统将暂停服务，请您合理安排业务时间，避免影响您的正常使用。</p>
                        
                        <h2 class="text-xl font-bold mt-6 mb-4">升级内容</h2>
                        
                        <ul class="list-disc pl-5 mb-4 space-y-2">
                            <li>优化系统架构，提升系统响应速度和稳定性</li>
                            <li>新增数据加密功能，加强用户数据安全保护</li>
                            <li>完善用户权限管理，优化操作体验</li>
                            <li>修复已知问题，提高系统可靠性</li>
                        </ul>
                        
                        <h2 class="text-xl font-bold mt-6 mb-4">注意事项</h2>
                        
                        <ol class="list-decimal pl-5 mb-4 space-y-2">
                            <li>维护期间，系统将无法访问，请您提前做好数据备份工作</li>
                            <li>升级完成后，可能需要清除浏览器缓存才能获得最佳体验</li>
                            <li>如有紧急情况，请联系客服热线：400-123-4567</li>
                        </ol>
                        
                        <p class="mb-4">此次系统升级维护给您带来的不便，我们深表歉意，感谢您的理解和支持！</p>
                        
                        <div class="mt-8 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r">
                            <p class="text-blue-700"><i class="fa fa-info-circle mr-2"></i>温馨提示：系统升级完成后，您可以在个人中心查看更新日志，了解详细的功能变化。</p>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-6">
                        <div class="flex flex-wrap justify-between items-center">
                            <div class="flex space-x-2 mb-4 sm:mb-0">
                                <button class="flex items-center text-gray-500 hover:text-primary transition-colors duration-200">
                                    <i class="fa fa-thumbs-o-up mr-1"></i>
                                    <span>点赞 (128)</span>
                                </button>
                                <button class="flex items-center text-gray-500 hover:text-primary transition-colors duration-200 ml-4">
                                    <i class="fa fa-share-alt mr-1"></i>
                                    <span>分享</span>
                                </button>
                            </div>
                            <div class="flex space-x-3">
                                <button class="bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200">
                                    <i class="fa fa-print mr-1"></i> 打印
                                </button>
                                <button class="bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-all duration-200">
                                    <i class="fa fa-download mr-1"></i> 下载
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 上一篇/下一篇 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                <div class="bg-white rounded-lg shadow p-5 hover-scale">
                    <div class="flex items-center">
                        <i class="fa fa-angle-left text-gray-400 text-xl mr-3"></i>
                        <div>
                            <p class="text-sm text-gray-500 mb-1">上一篇</p>
                            <a href="#" class="text-gray-800 hover:text-primary font-medium line-clamp-1">关于夏季作息时间调整的通知</a>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg shadow p-5 hover-scale">
                    <div class="flex items-center justify-end">
                        <div class="text-right">
                            <p class="text-sm text-gray-500 mb-1">下一篇</p>
                            <a href="#" class="text-gray-800 hover:text-primary font-medium line-clamp-1">2025年第二季度安全培训计划</a>
                        </div>
                        <i class="fa fa-angle-right text-gray-400 text-xl ml-3"></i>
                    </div>
                </div>
            </div>

            <!-- 相关公告 -->
            <div class="bg-white rounded-xl shadow-lg overflow-hidden p-6 sm:p-8 mb-8">
                <h2 class="text-xl font-bold text-gray-900 mb-6">相关公告</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- 公告卡片1 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden hover-scale transition-all duration-300 hover:shadow-lg">
                        <div class="p-5">
                            <div class="flex items-center mb-3">
                                <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">紧急</span>
                                <span class="ml-2 text-sm text-gray-500">2025-07-03</span>
                            </div>
                            <h3 class="font-medium text-gray-900 mb-2 line-clamp-2">关于近期网络安全事件的防范通知</h3>
                            <p class="text-sm text-gray-500 mb-4 line-clamp-2">近期网络安全事件频发，为保障用户数据安全，特此提醒用户加强账户安全...</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看详情
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 公告卡片2 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden hover-scale transition-all duration-300 hover:shadow-lg">
                        <div class="p-5">
                            <div class="flex items-center mb-3">
                                <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">新增功能</span>
                                <span class="ml-2 text-sm text-gray-500">2025-07-01</span>
                            </div>
                            <h3 class="font-medium text-gray-900 mb-2 line-clamp-2">数据可视化功能上线公告</h3>
                            <p class="text-sm text-gray-500 mb-4 line-clamp-2">为了帮助用户更好地分析和理解数据，我们新增了数据可视化功能，支持多种图表类型...</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看详情
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>

                    <!-- 公告卡片3 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden hover-scale transition-all duration-300 hover:shadow-lg">
                        <div class="p-5">
                            <div class="flex items-center mb-3">
                                <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">活动</span>
                                <span class="ml-2 text-sm text-gray-500">2025-06-28</span>
                            </div>
                            <h3 class="font-medium text-gray-900 mb-2 line-clamp-2">2025年度用户满意度调查活动</h3>
                            <p class="text-sm text-gray-500 mb-4 line-clamp-2">为了持续改进我们的服务，现开展2025年度用户满意度调查，参与调查有机会获得精美礼品...</p>
                            <a href="#" class="text-primary hover:text-primary/80 text-sm font-medium inline-flex items-center">
                                查看详情
                                <i class="fa fa-angle-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-bullhorn text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">公告中心</span>
                    </div>
                    <p class="text-gray-600 mb-4">及时获取系统公告、活动通知和重要消息，确保您不会错过任何关键信息。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                            <i class="fa fa-wechat text-xl"></i></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">首页</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">公告中心</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">使用帮助</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">常见问题</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">公告分类</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">系统公告</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">活动通知</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">安全提示</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">功能更新</a></li>
                        <li><a href="#" class="text-gray-600 hover:text-primary transition-colors duration-200">维护通知</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">联系我们</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-600">北京市海淀区中关村南大街5号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-600">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope-o text-primary mr-3"></i>
                            <span class="text-gray-600">support@example.com</span>
                        </li>
                    </ul>
                    <div class="mt-4">
                        <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                            <i class="fa fa-bell-o mr-1"></i> 订阅公告推送
                        </button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm">© 2025 公告中心. 保留所有权利.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors duration-200">隐私政策</a>
                    <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors duration-200">使用条款</a>
                    <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors duration-200">Cookie政策</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white rounded-full p-3 shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md', 'bg-white/95', 'backdrop-blur-sm');
                navbar.classList.remove('shadow-sm');
            } else {
                navbar.classList.remove('shadow-md', 'bg-white/95', 'backdrop-blur-sm');
                navbar.classList.add('shadow-sm');
            }
        });

        // 移动端菜单
        const mobileMenuButton = document.getElementById('mobile-menu-button');
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // 返回顶部按钮
        const backToTopButton = document.getElementById('back-to-top');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopButton.classList.remove('opacity-0', 'invisible');
                backToTopButton.classList.add('opacity-100', 'visible');
            } else {
                backToTopButton.classList.add('opacity-0', 'invisible');
                backToTopButton.classList.remove('opacity-100', 'visible');
            }
        });

        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // 评论框聚焦效果
        const commentTextarea = document.querySelector('textarea[placeholder="写下你的评论..."]');
        if (commentTextarea) {
            commentTextarea.addEventListener('focus', () => {
                commentTextarea.closest('.rounded-lg').classList.add('ring-2', 'ring-primary', 'border-primary');
                commentTextarea.closest('.rounded-lg').classList.remove('border-gray-300');
            });
            
            commentTextarea.addEventListener('blur', () => {
                if (commentTextarea.value.trim() === '') {
                    commentTextarea.closest('.rounded-lg').classList.remove('ring-2', 'ring-primary', 'border-primary');
                    commentTextarea.closest('.rounded-lg').classList.add('border-gray-300');
                }
            });
        }
    </script>
</body>
</html>
    