|
@@ -0,0 +1,108 @@
|
|
|
|
|
+<!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>
|
