维护公告展示界面样式HTML源码

该样式采用了左右分栏的布局设计。左侧是 “公告列表”，以列表形式呈现多条公告条目，包含公告标题与发布时间，方便用户快速浏览和查找不同公告；右侧则是选中公告的详细内容展示区域，清晰呈现公告的具体信息，整体布局简洁明了，层次分明，能让用户高效获取公告相关内容。

样式一

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业公告系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .announcement-system {
            width: 1200px;
            height: 700px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            display: flex;
        }
        
        /* 左侧公告列表样式 */
        .announcement-list {
            width: 35%;
            background: #f9fafc;
            border-right: 1px solid #eaeef2;
            display: flex;
            flex-direction: column;
        }
        
        .list-header {
            padding: 20px;
            background: #4a6bdf;
            color: white;
            font-size: 20px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .list-header span {
            background: #3a57c7;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        .announcement-items {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
        }
        
        .announcement-item {
            height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            border-radius: 8px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            background: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .announcement-item:hover {
            background-color: #f0f5ff;
            border-left-color: #4a90e2;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .announcement-item.active {
            background-color: #e6f7ff;
            border-left-color: #1890ff;
        }
        
        .announcement-title {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
            font-size: 14px;
            color: #1a1a1a;
            font-weight: 500;
        }
        
        .announcement-date {
            font-size: 12px;
            color: #666;
        }
        
        .new-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #ff4757;
            border-radius: 50%;
            margin-left: 8px;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* 右侧公告详情样式 */
        .announcement-detail {
            width: 65%;
            display: flex;
            flex-direction: column;
        }
        
        .detail-header {
            padding: 20px 30px;
            background: white;
            border-bottom: 1px solid #eaeef2;
        }
        
        .detail-title {
            font-size: 24px;
            color: #1a1a1a;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .detail-meta {
            display: flex;
            align-items: center;
            color: #666;
            font-size: 14px;
        }
        
        .detail-date {
            margin-right: 15px;
        }
        
        .new-tag {
            background: #ff4757;
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .detail-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            line-height: 1.8;
            color: #444;
            background: #fafbfc;
        }
        
        .detail-content p {
            margin-bottom: 15px;
            text-align: justify;
        }
        
        .detail-content h3 {
            margin: 20px 0 10px;
            color: #2d3748;
        }
        
        .detail-content ul {
            margin: 15px 0;
            padding-left: 20px;
        }
        
        .detail-content li {
            margin-bottom: 8px;
        }
        
        .no-announcement {
            padding: 30px;
            text-align: center;
            color: #888;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        
        .no-announcement i {
            font-size: 48px;
            margin-bottom: 20px;
            color: #c3cfe2;
        }
        
        /* 底部信息栏 */
        .footer {
            padding: 15px 30px;
            background: #4a6bdf;
            color: white;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .pagination {
            display: flex;
            align-items: center;
        }
        
        .pagination-button {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #3a57c7;
            color: white;
            border-radius: 4px;
            margin: 0 5px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .pagination-button:hover {
            background: #2a47b7;
        }
        
        .pagination-info {
            margin: 0 10px;
        }
        
        .copyright {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="tuc-2ea177b2-59d5cb-0 announcement-system tuc-2ea177b2-59d5cb-0">
        <div class="tuc-2ea177b2-59d5cb-0 announcement-list tuc-2ea177b2-59d5cb-0">
            <div class="tuc-2ea177b2-59d5cb-0 list-header tuc-2ea177b2-59d5cb-0">
                公告列表 <span>15条</span>
            </div>
            <div class="tuc-2ea177b2-59d5cb-0 announcement-items tuc-2ea177b2-59d5cb-0" id="announcementItems">
                <!-- 公告列表将由JavaScript生成 -->
            </div>
        </div>
        
        <div class="tuc-2ea177b2-59d5cb-0 announcement-detail tuc-2ea177b2-59d5cb-0">
            <div class="tuc-2ea177b2-59d5cb-0 detail-header tuc-2ea177b2-59d5cb-0">
                <h2 class="tuc-2ea177b2-59d5cb-0 detail-title tuc-2ea177b2-59d5cb-0" id="detailTitle">请选择公告查看详情</h2>
                <div class="tuc-2ea177b2-59d5cb-0 detail-meta tuc-2ea177b2-59d5cb-0">
                    <span class="tuc-2ea177b2-59d5cb-0 detail-date tuc-2ea177b2-59d5cb-0" id="detailDate">-</span>
                    <div class="tuc-2ea177b2-59d5cb-0 new-tag tuc-2ea177b2-59d5cb-0" id="newTag" style="display: none;">新公告</div>
                </div>
            </div>
            
            <div class="tuc-2ea177b2-59d5cb-0 detail-content tuc-2ea177b2-59d5cb-0" id="detailContent">
                <div class="tuc-2ea177b2-59d5cb-0 no-announcement tuc-2ea177b2-59d5cb-0">
                    <i>📋</i>
                    <p>从左侧列表中选择一条公告以查看详细内容</p>
                </div>
            </div>
            
            <div class="tuc-2ea177b2-59d5cb-0 footer tuc-2ea177b2-59d5cb-0">
                <div class="tuc-2ea177b2-59d5cb-0 pagination tuc-2ea177b2-59d5cb-0">
                    <div class="tuc-2ea177b2-59d5cb-0 pagination-button tuc-2ea177b2-59d5cb-0">←</div>
                    <span class="tuc-2ea177b2-59d5cb-0 pagination-info tuc-2ea177b2-59d5cb-0">第 1 页</span>
                    <div class="tuc-2ea177b2-59d5cb-0 pagination-button tuc-2ea177b2-59d5cb-0">→</div>
                </div>
                <div class="tuc-2ea177b2-59d5cb-0 copyright tuc-2ea177b2-59d5cb-0">© 2023 企业公告系统 | 版权所有</div>
            </div>
        </div>
    </div>

    <script>
        // 模拟从数据库获取的公告数据
        const announcements = [
            {
                id: 1,
                title: "关于系统升级维护的通知",
                date: "2023-10-28",
                content: `<p>尊敬的各位用户：</p>
                <p>为了提供更优质的服务，我们将于2023年10月30日（周一）凌晨2:00至5:00进行系统升级维护。在此期间，系统将暂停服务，请您提前做好相关安排。</p>
                <p>维护完成后，系统将恢复正常使用。感谢您的理解与支持！</p>
                <p>如有任何疑问，请联系客服热线：400-123-4567。</p>`
            },
            {
                id: 2,
                title: "2023年国庆节放假安排公告",
                date: "2023-09-25",
                content: `<p>根据国家法定节假日安排，结合公司实际情况，2023年国庆节放假安排如下：</p>
                <p>10月1日（周日）至10月7日（周六）放假调休，共7天。10月8日（周日）、10月9日（周一）正常上班。</p>
                <p>节假日期间，客服热线照常服务，如有紧急问题请拨打400-123-4567。</p>
                <p>祝大家节日愉快！</p>`
            },
            {
                id: 3,
                title: "新功能上线：数据报表导出",
                date: "2023-10-26",
                content: `<p>尊敬的各位用户：</p>
                <p>我们很高兴地宣布，数据报表导出功能已正式上线！您现在可以方便地将系统中的各种数据报表导出为Excel、PDF等多种格式。</p>
                <p>这一功能将帮助您更好地进行数据分析和存档。使用方法非常简单，只需在报表页面点击右上角的"导出"按钮，选择您需要的格式即可。</p>
                <p>如果您在使用过程中遇到任何问题或有任何建议，欢迎随时联系我们的客服团队。</p>`
            },
            {
                id: 4,
                title: "关于个人信息保护政策的更新",
                date: "2023-10-20",
                content: `<p>我们更新了个人信息保护政策，以更好地保护您的隐私和数据安全。主要变更包括：</p>
                <p>1. 明确了我们收集和使用您个人信息的方式和目的；</p>
                <p>2. 加强了数据安全保护措施；</p>
                <p>3. 说明了您对个人信息的权利和选择。</p>
                <p>请您抽空阅读更新后的政策。继续使用我们的服务即表示您同意更新后的政策。</p>`
            },
            {
                id: 5,
                title: "11月份系统培训计划安排",
                date: "2023-10-25",
                content: `<p>为了帮助用户更好地使用系统，我们将于11月份举办系列培训课程：</p>
                <p>1. 基础操作培训：11月5日 14:00-15:30</p>
                <p>2. 高级功能讲解：11月12日 14:00-16:00</p>
                <p>3. 数据分析和报表：11月19日 14:00-16:00</p>
                <p>所有培训均在线进行，报名请登录系统在"培训中心"模块注册。</p>`
            },
            {
                id: 6,
                title: "重要安全提示：谨防钓鱼邮件",
                date: "2023-10-27",
                content: `<p>近期我们发现有冒充我司的钓鱼邮件在传播，请各位用户提高警惕：</p>
                <p>1. 请注意检查发件人邮箱地址是否为公司官方邮箱（以@company.com结尾）；</p>
                <p>2. 不要点击来历不明的链接或附件；</p>
                <p>3. 如有任何疑问，请直接联系您的客户经理或拨打客服热线核实。</p>
                <p>我们将永远不会通过邮件索要您的密码或敏感信息。</p>`
            },
            {
                id: 7,
                title: "季度员工满意度调查开始",
                date: "2023-10-22",
                content: `<p>2023年第四季度员工满意度调查将于下周开始，请各位同事积极参与。</p>
                <p>您的反馈对我们改善工作环境和公司政策非常重要。调查采用匿名方式进行，所有数据将严格保密。</p>
                <p>调查时间：10月25日-11月5日</p>`
            },
            {
                id: 8,
                title: "公司年度旅游计划公布",
                date: "2023-10-18",
                content: `<p>2023年度公司旅游计划已经确定，今年我们将前往海南三亚进行为期四天的阳光之旅。</p>
                <p>时间：11月15日-11月18日</p>
                <p>请各部门于11月1日前将参加人员名单报至人力资源部。</p>`
            },
            {
                id: 9,
                title: "新办公楼搬迁指南",
                date: "2023-10-15",
                content: `<p>公司新办公楼将于11月1日正式启用，搬迁工作将于10月28日-10月30日进行。</p>
                <p>请各部门负责人组织好本部门的打包和搬迁工作，IT部门将负责电脑和网络设备的迁移。</p>
                <p>详细搬迁指南已发送至各部门邮箱，请查收。</p>`
            },
            {
                id: 10,
                title: "员工健康体检安排",
                date: "2023-10-12",
                content: `<p>年度员工健康体检将于10月20日开始，请各部门按照安排的时间前往体检中心。</p>
                <p>体检前请注意：</p>
                <p>1. 体检前一天请保持清淡饮食</p>
                <p>2. 体检当天早晨需空腹</p>
                <p>3. 请携带身份证原件</p>`
            },
            {
                id: 11,
                title: "关于节约办公资源的倡议",
                date: "2023-10-10",
                content: `<p>为响应环保号召，降低公司运营成本，现向全体员工发出节约办公资源的倡议：</p>
                <p>1. 减少纸张使用，推行无纸化办公</p>
                <p>2. 下班前关闭电脑、显示器等设备电源</p>
                <p>3. 合理使用空调，夏季温度设置不低于26℃</p>
                <p>节约资源，从我做起，谢谢大家的配合！</p>`
            },
            {
                id: 12,
                title: "技术部门招聘启事",
                date: "2023-10-05",
                content: `<p>因业务扩展需要，技术部现招聘以下职位：</p>
                <p>1. 前端开发工程师（3名）</p>
                <p>2. 后端开发工程师（3名）</p>
                <p>3. UI设计师（1名）</p>
                <p>有意者请将简历发送至hr@company.com，详情请咨询人力资源部。</p>`
            },
            {
                id: 13,
                title: "中秋节福利发放通知",
                date: "2023-09-28",
                content: `<p>值此中秋佳节来临之际，公司为每位员工准备了节日礼品。</p>
                <p>发放时间：9月28日下午2:00-5:00</p>
                <p>发放地点：一楼大厅</p>
                <p>请各部门有序领取，祝大家中秋节快乐！</p>`
            },
            {
                id: 14,
                title: "停车场管理制度更新",
                date: "2023-09-25",
                content: `<p>为进一步规范停车场管理，现对停车场使用规定进行以下调整：</p>
                <p>1. 实行车位编号管理，固定车位需申请</p>
                <p>2. 外来车辆需提前登记</p>
                <p>3. 禁止占用消防通道</p>
                <p>新规定自10月1日起执行，详情请见公司内网。</p>`
            },
            {
                id: 15,
                title: "公司成立五周年庆典活动",
                date: "2023-09-20",
                content: `<p>今年是公司成立五周年，为感谢全体员工一直以来的辛勤付出，公司将举办庆典活动。</p>
                <p>时间：9月29日 15:00-20:00</p>
                <p>地点：公司礼堂及户外草坪</p>
                <p>活动包括：领导致辞、优秀员工表彰、文艺表演、自助餐和抽奖环节。</p>
                <p>敬请全体同事参加！</p>`
            }
        ];

        // 生成公告列表
        function renderAnnouncementList() {
            const container = document.getElementById('announcementItems');
            container.innerHTML = '';
            
            announcements.forEach(announcement => {
                const isNew = isWithinThreeDays(announcement.date);
                const title = truncateTitle(announcement.title, 25);
                
                const item = document.createElement('div');
                item.className = 'announcement-item';
                item.dataset.id = announcement.id;
                
                item.innerHTML = `
                    <div class="tuc-2ea177b2-59d5cb-0 announcement-title tuc-2ea177b2-59d5cb-0">${title}</div>
                    <div class="tuc-2ea177b2-59d5cb-0 announcement-date tuc-2ea177b2-59d5cb-0">${formatDate(announcement.date)}${isNew ? '<span class="tuc-2ea177b2-59d5cb-0 new-indicator tuc-2ea177b2-59d5cb-0"></span>' : ''}</div>
                `;
                
                item.addEventListener('click', () => showAnnouncementDetail(announcement.id));
                container.appendChild(item);
            });
            
            // 默认显示第一条公告
            if (announcements.length > 0) {
                showAnnouncementDetail(announcements[0].id);
            }
        }
        
        // 显示公告详情
        function showAnnouncementDetail(id) {
            const announcement = announcements.find(a => a.id === id);
            if (!announcement) return;
            
            const isNew = isWithinThreeDays(announcement.date);
            
            document.getElementById('detailTitle').textContent = announcement.title;
            document.getElementById('detailDate').textContent = `发布时间：${formatDate(announcement.date)}`;
            
            if (isNew) {
                document.getElementById('newTag').style.display = 'block';
            } else {
                document.getElementById('newTag').style.display = 'none';
            }
            
            document.getElementById('detailContent').innerHTML = announcement.content;
            
            // 更新列表中的活跃状态
            document.querySelectorAll('.announcement-item').forEach(item => {
                if (parseInt(item.dataset.id) === id) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }
        
        // 检查日期是否在3天内
        function isWithinThreeDays(dateString) {
            const givenDate = new Date(dateString);
            const currentDate = new Date();
            const threeDaysAgo = new Date();
            threeDaysAgo.setDate(currentDate.getDate() - 3);
            
            return givenDate >= threeDaysAgo && givenDate <= currentDate;
        }
        
        // 截断标题
        function truncateTitle(title, maxLength) {
            if (title.length <= maxLength) return title;
            return title.substring(0, maxLength) + '...';
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', renderAnnouncementList);
    </script>
</body>
</html>

样式2

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .announcement-system {
            width: 1200px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            max-height: 95vh;
        }
        
        .announcement-list {
            width: 35%;
            border-right: 1px solid #eaeef2;
            overflow-y: auto;
            max-height: 100%;
        }
        
        .announcement-header {
            padding: 20px;
            background: #f9fafc;
            border-bottom: 1px solid #eaeef2;
            font-size: 18px;
            font-weight: bold;
            color: #2d3748;
        }
        
        .announcement-items {
            padding: 15px;
        }
        
        .announcement-item {
            height: 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            border-radius: 6px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .announcement-item:hover {
            background-color: #f0f5ff;
            border-left-color: #4a90e2;
        }
        
        .announcement-item.active {
            background-color: #e6f7ff;
            border-left-color: #1890ff;
        }
        
        .announcement-title {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
            font-size: 14px;
            color: #1a1a1a;
        }
        
        .announcement-date {
            font-size: 12px;
            color: #888;
        }
        
        .new-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #f56c6c;
            border-radius: 50%;
            margin-left: 8px;
        }
        
        .announcement-detail {
            width: 65%;
            padding: 30px;
            overflow-y: auto;
            max-height: 100%;
        }
        
        .detail-header {
            padding-bottom: 20px;
            border-bottom: 1px solid #eaeef2;
            margin-bottom: 20px;
        }
        
        .detail-title {
            font-size: 24px;
            color: #1a1a1a;
            margin-bottom: 10px;
        }
        
        .detail-meta {
            display: flex;
            align-items: center;
            color: #888;
            font-size: 14px;
        }
        
        .detail-date {
            margin-right: 15px;
        }
        
        .detail-content {
            line-height: 1.8;
            color: #444;
        }
        
        .detail-content p {
            margin-bottom: 15px;
        }
        
        .no-announcement {
            padding: 30px;
            text-align: center;
            color: #888;
        }
        
        @media (max-width: 1250px) {
            .announcement-system {
                width: 95%;
                flex-direction: column;
                max-height: 90vh;
            }
            
            .announcement-list, .announcement-detail {
                width: 100%;
            }
            
            .announcement-list {
                max-height: 40%;
                border-right: none;
                border-bottom: 1px solid #eaeef2;
            }
            
            .announcement-detail {
                max-height: 60%;
            }
        }
    </style>
</head>
<body>
    <div class="tuc-2ea177b2-59d5cb-0 announcement-system tuc-2ea177b2-59d5cb-0">
        <div class="tuc-2ea177b2-59d5cb-0 announcement-list tuc-2ea177b2-59d5cb-0">
            <div class="tuc-2ea177b2-59d5cb-0 announcement-header tuc-2ea177b2-59d5cb-0">公告列表</div>
            <div class="tuc-2ea177b2-59d5cb-0 announcement-items tuc-2ea177b2-59d5cb-0" id="announcementItems">
                <!-- 公告列表将由JavaScript生成 -->
            </div>
        </div>
        
        <div class="tuc-2ea177b2-59d5cb-0 announcement-detail tuc-2ea177b2-59d5cb-0">
            <div id="announcementDetail">
                <div class="tuc-2ea177b2-59d5cb-0 no-announcement tuc-2ea177b2-59d5cb-0">请从左侧选择一条公告查看详情</div>
            </div>
        </div>
    </div>

    <script>
        // 模拟从数据库获取的公告数据
        const announcements = [
            {
                id: 1,
                title: "关于系统升级维护的通知",
                date: "2025-08-23",
                content: "<p>尊敬的各位用户：</p><p>为了提供更优质的服务，我们将于2023年10月30日（周一）凌晨2:00至5:00进行系统升级维护。在此期间，系统将暂停服务，请您提前做好相关安排。</p><p>维护完成后，系统将恢复正常使用。感谢您的理解与支持！</p><p>如有任何疑问，请联系客服热线：400-123-4567。</p>"
            },
            {
                id: 2,
                title: "2023年国庆节放假安排公告",
                date: "2023-09-25",
                content: "<p>根据国家法定节假日安排，结合公司实际情况，2023年国庆节放假安排如下：</p><p>10月1日（周日）至10月7日（周六）放假调休，共7天。10月8日（周日）、10月9日（周一）正常上班。</p><p>节假日期间，客服热线照常服务，如有紧急问题请拨打400-123-4567。</p><p>祝大家节日愉快！</p>"
            },
            {
                id: 3,
                title: "新功能上线：数据报表导出",
                date: "2023-10-26",
                content: "<p>尊敬的各位用户：</p><p>我们很高兴地宣布，数据报表导出功能已正式上线！您现在可以方便地将系统中的各种数据报表导出为Excel、PDF等多种格式。</p><p>这一功能将帮助您更好地进行数据分析和存档。使用方法非常简单，只需在报表页面点击右上角的\"导出\"按钮，选择您需要的格式即可。</p><p>如果您在使用过程中遇到任何问题或有任何建议，欢迎随时联系我们的客服团队。</p>"
            },
            {
                id: 4,
                title: "关于个人信息保护政策的更新",
                date: "2023-10-20",
                content: "<p>我们更新了个人信息保护政策，以更好地保护您的隐私和数据安全。主要变更包括：</p><p>1. 明确了我们收集和使用您个人信息的方式和目的；</p><p>2. 加强了数据安全保护措施；</p><p>3. 说明了您对个人信息的权利和选择。</p><p>请您抽空阅读更新后的政策。继续使用我们的服务即表示您同意更新后的政策。</p>"
            },
            {
                id: 5,
                title: "11月份系统培训计划安排",
                date: "2023-10-25",
                content: "<p>为了帮助用户更好地使用系统，我们将于11月份举办系列培训课程：</p><p>1. 基础操作培训：11月5日 14:00-15:30</p><p>2. 高级功能讲解：11月12日 14:00-16:00</p><p>3. 数据分析和报表：11月19日 14:00-16:00</p><p>所有培训均在线进行，报名请登录系统在\"培训中心\"模块注册。</p>"
            },
            {
                id: 6,
                title: "重要安全提示：谨防钓鱼邮件",
                date: "2023-10-27",
                content: "<p>近期我们发现有冒充我司的钓鱼邮件在传播，请各位用户提高警惕：</p><p>1. 请注意检查发件人邮箱地址是否为公司官方邮箱（以@company.com结尾）；</p><p>2. 不要点击来历不明的链接或附件；</p><p>3. 如有任何疑问，请直接联系您的客户经理或拨打客服热线核实。</p><p>我们将永远不会通过邮件索要您的密码或敏感信息。</p>"
            }
        ];

        // 生成公告列表
        function renderAnnouncementList() {
            const container = document.getElementById('announcementItems');
            container.innerHTML = '';
            
            announcements.forEach(announcement => {
                const isNew = isWithinThreeDays(announcement.date);
                const title = truncateTitle(announcement.title, 25);
                
                const item = document.createElement('div');
                item.className = 'announcement-item';
                item.dataset.id = announcement.id;
                
                item.innerHTML = `
                    <div class="tuc-2ea177b2-59d5cb-0 announcement-title tuc-2ea177b2-59d5cb-0">${title}</div>
                    <div class="tuc-2ea177b2-59d5cb-0 announcement-date tuc-2ea177b2-59d5cb-0">${formatDate(announcement.date)}${isNew ? '<span class="tuc-2ea177b2-59d5cb-0 new-indicator tuc-2ea177b2-59d5cb-0"></span>' : ''}</div>
                `;
                
                item.addEventListener('click', () => showAnnouncementDetail(announcement.id));
                container.appendChild(item);
            });
            
            // 默认显示第一条公告
            if (announcements.length > 0) {
                showAnnouncementDetail(announcements[0].id);
            }
        }
        
        // 显示公告详情
        function showAnnouncementDetail(id) {
            const announcement = announcements.find(a => a.id === id);
            if (!announcement) return;
            
            const detailContainer = document.getElementById('announcementDetail');
            const isNew = isWithinThreeDays(announcement.date);
            
            detailContainer.innerHTML = `
                <div class="tuc-2ea177b2-59d5cb-0 detail-header tuc-2ea177b2-59d5cb-0">
                    <h2 class="tuc-2ea177b2-59d5cb-0 detail-title tuc-2ea177b2-59d5cb-0">${announcement.title}</h2>
                    <div class="tuc-2ea177b2-59d5cb-0 detail-meta tuc-2ea177b2-59d5cb-0">
                        <span class="tuc-2ea177b2-59d5cb-0 detail-date tuc-2ea177b2-59d5cb-0">发布时间：${formatDate(announcement.date)}</span>
                        ${isNew ? '<span style="color:#f56c6c;font-size:12px;">新公告</span>' : ''}
                    </div>
                </div>
                <div class="tuc-2ea177b2-59d5cb-0 detail-content tuc-2ea177b2-59d5cb-0">${announcement.content}</div>
            `;
            
            // 更新列表中的活跃状态
            document.querySelectorAll('.announcement-item').forEach(item => {
                if (parseInt(item.dataset.id) === id) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }
        
        // 检查日期是否在3天内
        function isWithinThreeDays(dateString) {
            const givenDate = new Date(dateString);
            const currentDate = new Date();
            const threeDaysAgo = new Date();
            threeDaysAgo.setDate(currentDate.getDate() - 3);
            
            return givenDate >= threeDaysAgo && givenDate <= currentDate;
        }
        
        // 截断标题
        function truncateTitle(title, maxLength) {
            if (title.length <= maxLength) return title;
            return title.substring(0, maxLength) + '...';
        }
        
        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', renderAnnouncementList);
    </script>
</body>
</html>

本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！

本站资源大多来自网络，如有侵犯你的权益请联系管理员E-mail:2469329338@qq.com 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar解压，建议下载WinRAR。