121 lines
4.3 KiB
HTML
121 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>团队协作看板 · 设计稿</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
|
|
background: #f4f5f7;
|
|
color: #172b4d;
|
|
min-height: 100vh;
|
|
}
|
|
.top {
|
|
height: 64px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #ebecf0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
gap: 16px;
|
|
}
|
|
.top h1 { font-size: 18px; font-weight: 600; }
|
|
.top-actions { display: flex; align-items: center; gap: 12px; }
|
|
.select {
|
|
height: 36px; padding: 0 12px; border: 1px solid #dfe1e6; border-radius: 6px;
|
|
background: #fff; color: #172b4d; font-size: 14px;
|
|
}
|
|
.btn {
|
|
height: 36px; padding: 0 14px; border: none; border-radius: 6px;
|
|
background: #0052cc; color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
|
|
}
|
|
.board {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
padding: 20px 24px 32px;
|
|
align-items: start;
|
|
}
|
|
.col {
|
|
background: #ebecf0;
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
min-height: 420px;
|
|
}
|
|
.col-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
margin-bottom: 12px; padding: 4px 4px 8px;
|
|
}
|
|
.col-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
|
|
.count {
|
|
min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
|
|
background: #dfe1e6; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
|
|
}
|
|
.card {
|
|
background: #fff; border-radius: 8px; padding: 12px;
|
|
box-shadow: 0 1px 2px rgba(9,30,66,.08);
|
|
margin-bottom: 10px;
|
|
}
|
|
.card h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
|
|
.card p { font-size: 12px; color: #5e6c84; line-height: 1.5; margin-bottom: 10px; }
|
|
.card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
|
|
.chip {
|
|
font-size: 12px; padding: 4px 8px; border-radius: 4px;
|
|
background: #f4f5f7; color: #42526e; border: 1px solid #dfe1e6;
|
|
}
|
|
.empty {
|
|
border: 1px dashed #c1c7d0; border-radius: 8px; padding: 28px 12px;
|
|
text-align: center; color: #7a869a; font-size: 13px; background: rgba(255,255,255,.35);
|
|
}
|
|
.note {
|
|
margin: 0 24px 24px; padding: 12px 14px; background: #deebff; border-radius: 8px;
|
|
font-size: 13px; color: #0747a6; line-height: 1.5;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="top">
|
|
<h1>团队协作看板</h1>
|
|
<div class="top-actions">
|
|
<select class="select" aria-label="状态筛选">
|
|
<option>全部状态</option>
|
|
<option>仅待办</option>
|
|
<option>仅进行中</option>
|
|
<option>仅已完成</option>
|
|
</select>
|
|
<button class="btn">新建任务</button>
|
|
</div>
|
|
</header>
|
|
<main class="board">
|
|
<section class="col">
|
|
<div class="col-head"><div class="col-title">待办 <span class="count">2</span></div></div>
|
|
<article class="card">
|
|
<h3>整理验收检查清单</h3>
|
|
<p>对齐项目经理五条验收口径</p>
|
|
<div class="actions"><span class="chip">移到进行中</span><span class="chip">移到已完成</span></div>
|
|
</article>
|
|
<article class="card">
|
|
<h3>准备演示话术</h3>
|
|
<p>选填备注示例</p>
|
|
<div class="actions"><span class="chip">移到进行中</span><span class="chip">移到已完成</span></div>
|
|
</article>
|
|
</section>
|
|
<section class="col">
|
|
<div class="col-head"><div class="col-title">进行中 <span class="count">1</span></div></div>
|
|
<article class="card">
|
|
<h3>实现本地存储</h3>
|
|
<p>刷新后任务仍保留</p>
|
|
<div class="actions"><span class="chip">移回待办</span><span class="chip">移到已完成</span></div>
|
|
</article>
|
|
</section>
|
|
<section class="col">
|
|
<div class="col-head"><div class="col-title">已完成 <span class="count">0</span></div></div>
|
|
<div class="empty">暂无已完成任务</div>
|
|
</section>
|
|
</main>
|
|
<div class="note">设计说明：顶栏标题 + 筛选 + 新建；三列等宽；卡片含标题/备注/改状态；空列占位。桌面优先，窄屏可改为纵向堆叠。</div>
|
|
</body>
|
|
</html>
|