liy
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
							<!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>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f7f6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .project-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }
        .task-list {
            list-style: none;
            padding: 0;
        }
        .task-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .task-item:last-child {
            border-bottom: none;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
        }
        .status-pending { background-color: #f1c40f; }
        .status-progress { background-color: #3498db; }
        .status-done { background-color: #2ecc71; }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="project-title">项目规划看板</h1>
        <div class="project-info">
            <span id="project-date"></span>
            <span id="project-author"></span>
        </div>
        <ul class="task-list" id="task-container">
            <!-- 任务会通过JS随机生成 -->
        </ul>
    </div>

    <script>
        // 随机数据生成逻辑
        const projectNames = ["Q3 市场营销计划", "新版官网重构", "秋季产品发布会", "内部系统升级"];
        const authors = ["张三", "李四", "王五", "赵六"];
        const tasks = [
            { name: "需求调研与竞品分析", status: "done" },
            { name: "UI/UX 原型图设计", status: "progress" },
            { name: "前端核心组件开发", status: "progress" },
            { name: "后端接口联调测试", status: "pending" },
            { name: "项目验收与上线部署", status: "pending" }
        ];

        const statusMap = {
            "done": { text: "已完成", class: "status-done" },
            "progress": { text: "进行中", class: "status-progress" },
            "pending": { text: "待处理", class: "status-pending" }
        };

        // 渲染随机项目信息
        document.getElementById("project-title").innerText = projectNames[Math.floor(Math.random() * projectNames.length)];
        document.getElementById("project-date").innerText = "日期: " + new Date().toLocaleDateString();
        document.getElementById("project-author").innerText = "负责人: " + authors[Math.floor(Math.random() * authors.length)];

        // 渲染随机任务列表
        const container = document.getElementById("task-container");
        tasks.forEach(task => {
            const li = document.createElement("li");
            li.className = "task-item";
            li.innerHTML = `
                <span>${task.name}</span>
                <span class="status ${statusMap[task.status].class}">${statusMap[task.status].text}</span>
            `;
            container.appendChild(li);
        });
    </script>
</body>
</html>