Files
zkxw/mobile-ui/zkxw-mobile-oa-drafts-list-demos.html
T
2026-08-13 14:31:57 +08:00

1178 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>草稿箱列表 · 风格 Demo</title>
<style>
:root {
--brand: #0a9f6d;
--brand-dark: #087f57;
--brand-soft: #e9f9f2;
--warn: #d97706;
--warn-soft: #fff7e8;
--danger: #ef4444;
--text: #1f2a26;
--text-muted: #6b7b74;
--border: #e2e8e6;
--page-bg: #f5f8f7;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", -apple-system, system-ui, sans-serif;
color: var(--text);
background:
radial-gradient(900px 420px at 8% -8%, rgba(10, 159, 109, 0.14), transparent 55%),
radial-gradient(700px 380px at 92% 0%, rgba(214, 163, 67, 0.12), transparent 50%),
linear-gradient(180deg, #f8fffc 0%, #f4f7fb 45%, #f7f8fa 100%);
line-height: 1.45;
}
.stage {
max-width: 1280px;
margin: 0 auto;
padding: 28px 16px 56px;
}
.hero h1 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 720;
letter-spacing: -0.02em;
}
.hero p {
margin: 0;
max-width: 760px;
color: #64748b;
font-size: 14px;
}
.hero .note {
margin-top: 12px;
display: inline-block;
padding: 8px 12px;
border-radius: 10px;
background: #fff;
border: 1px solid #e2e8f0;
font-size: 12px;
color: #64748b;
}
.hero .note strong { color: #0f766e; }
.tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 20px;
}
.tab {
appearance: none;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 999px;
padding: 10px 16px;
font-size: 13px;
font-weight: 600;
color: #475569;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, color .15s, background .15s;
}
.tab:hover { border-color: #94a3b8; }
.tab.is-active {
color: var(--brand-dark);
border-color: var(--brand);
background: var(--brand-soft);
box-shadow: 0 0 0 3px rgba(10, 159, 109, 0.18);
}
.tab .badge {
margin-left: 6px;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 999px;
background: #ecfdf5;
color: #047857;
}
.tab.is-active .badge {
background: #fff;
color: var(--brand-dark);
}
.layout {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 900px) {
.layout { grid-template-columns: 1fr; }
}
.panel {
background: rgba(255,255,255,.92);
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.panel h2 {
margin: 0 0 4px;
font-size: 16px;
}
.panel .sub {
margin: 0 0 14px;
font-size: 12px;
color: #64748b;
}
.panel ul {
margin: 0;
padding-left: 18px;
font-size: 13px;
color: #475569;
}
.panel li { margin: 6px 0; }
.panel .pick {
margin-top: 16px;
padding: 12px;
border-radius: 12px;
background: var(--brand-soft);
border: 1px solid #c6f0dc;
font-size: 12px;
color: #166534;
}
.phone-wrap { display: flex; justify-content: center; }
.phone {
width: 375px;
background: #fff;
border-radius: 28px;
box-shadow:
0 0 0 1px rgb(15 23 42 / 6%),
0 18px 40px rgb(15 23 42 / 12%);
overflow: hidden;
}
.phone-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a9f6d, #087f57);
color: #fff;
font-size: 16px;
font-weight: 600;
}
.page {
background: var(--page-bg);
min-height: 640px;
padding-bottom: 20px;
}
/* —— 共用:顶栏搜索 + 管理 —— */
.toolbar {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
padding: 10px 12px 10px;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 10px;
}
.search {
flex: 1;
height: 36px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid #e8eaed;
background: #fafafa;
font-size: 13px;
color: #94a3b8;
}
.search::before {
content: "";
width: 12px;
height: 12px;
border: 1.5px solid #94a3b8;
border-radius: 50%;
flex-shrink: 0;
}
.manage {
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
color: #166534;
padding: 0 4px;
cursor: pointer;
user-select: none;
}
.list { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 10px; }
.end {
text-align: center;
padding: 14px 0 8px;
font-size: 12px;
color: #94a3b8;
}
.style-pane { display: none; }
.style-pane.is-active { display: block; }
/* ========== A:当前对照(任务卡复用) ========== */
.a-card {
background: #fff;
border: 1px solid #d8e3de;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.a-body { padding: 14px 14px 10px; }
.a-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.a-title {
font-size: 15px;
font-weight: 650;
color: #1f2a26;
line-height: 1.35;
}
.a-status {
flex-shrink: 0;
font-size: 11px;
font-weight: 650;
padding: 3px 8px;
border-radius: 999px;
background: var(--warn-soft);
color: var(--warn);
}
.a-meta { display: flex; flex-direction: column; gap: 6px; }
.a-meta-line {
display: flex;
gap: 10px;
font-size: 12px;
}
.a-meta-line .lab { color: #94a3b8; min-width: 56px; }
.a-meta-line .val { color: #5f7a6d; }
.a-footer {
display: flex;
gap: 8px;
padding: 10px 12px 12px;
border-top: 1px dashed rgba(140, 170, 155, 0.28);
box-sizing: border-box;
}
.a-btn {
flex: 1;
min-width: 0;
height: 34px;
border-radius: 10px;
border: 1px solid #d8e3de;
background: #fff;
font-size: 12px;
font-weight: 600;
color: #475569;
cursor: pointer;
}
.a-btn.primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.a-btn.danger { color: var(--danger); border-color: rgba(239,68,68,.35); }
/* ========== B:左色条时间卡 ========== */
.b-card {
position: relative;
background: #fff;
border-radius: 14px;
padding: 14px 14px 12px 16px;
border: 1px solid #e8eeeB;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
overflow: hidden;
}
.b-card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, #d6a343, #f59e0b);
}
.b-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.b-title {
font-size: 15px;
font-weight: 700;
color: #1f2a26;
}
.b-pill {
font-size: 11px;
font-weight: 700;
color: #b45309;
background: #fff7e8;
padding: 2px 8px;
border-radius: 6px;
}
.b-time {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 12px;
}
.b-time strong { color: #334155; font-weight: 600; }
.b-actions {
display: flex;
align-items: center;
gap: 6px;
}
.b-actions button {
height: 32px;
padding: 0 12px;
border-radius: 8px;
border: 0;
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.b-actions .edit {
background: var(--brand-soft);
color: var(--brand-dark);
}
.b-actions .submit {
background: var(--brand);
color: #fff;
}
.b-actions .del {
margin-left: auto;
background: transparent;
color: #94a3b8;
padding: 0 8px;
}
/* ========== C:紧凑行列表 ========== */
.c-list {
padding: 0;
background: #fff;
border-radius: 14px;
overflow: hidden;
border: 1px solid #e8eeeb;
margin: 10px 12px 0;
}
.c-row {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px;
border-bottom: 1px solid #f1f5f9;
cursor: pointer;
}
.c-row:last-child { border-bottom: 0; }
.c-ico {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(145deg, #fff7e8, #fef3c7);
color: #b45309;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.c-main { flex: 1; min-width: 0; }
.c-title {
font-size: 14px;
font-weight: 650;
color: #1f2a26;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-sub {
margin-top: 3px;
font-size: 12px;
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.c-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
flex-shrink: 0;
}
.c-chev {
width: 7px;
height: 7px;
border-right: 1.5px solid #cbd5e1;
border-bottom: 1.5px solid #cbd5e1;
transform: rotate(-45deg);
}
.c-ops {
display: flex;
gap: 4px;
padding: 0 14px 12px 66px;
margin-top: -4px;
margin-bottom: 4px;
border-bottom: 1px solid #f1f5f9;
}
.c-ops:last-of-type { border-bottom: 0; }
.c-ops button {
height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid #e2e8e6;
background: #fafafa;
font-size: 11px;
font-weight: 600;
color: #475569;
cursor: pointer;
}
.c-ops .p {
background: var(--brand-soft);
border-color: #b7ebd4;
color: var(--brand-dark);
}
.c-ops .d { color: var(--danger); border-color: #fecaca; }
/* ========== D:图标色块卡片 ========== */
.d-card {
background: #fff;
border-radius: 16px;
border: 1px solid #e2e8e6;
padding: 14px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}
.d-top {
display: flex;
gap: 12px;
align-items: flex-start;
}
.d-avatar {
width: 44px;
height: 44px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #fff;
flex-shrink: 0;
letter-spacing: -0.02em;
}
.d-avatar.t1 { background: linear-gradient(145deg, #0a9f6d, #087f57); }
.d-avatar.t2 { background: linear-gradient(145deg, #0ea5e9, #0284c7); }
.d-avatar.t3 { background: linear-gradient(145deg, #d6a343, #b45309); }
.d-info { flex: 1; min-width: 0; }
.d-title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.d-title {
font-size: 15px;
font-weight: 700;
color: #1f2a26;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-tag {
flex-shrink: 0;
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 6px;
background: #fff7e8;
color: #b45309;
}
.d-meta {
font-size: 12px;
color: var(--text-muted);
}
.d-meta span + span::before {
content: "·";
margin: 0 6px;
color: #cbd5e1;
}
.d-footer {
display: grid;
grid-template-columns: 1fr 1.2fr 0.8fr;
gap: 8px;
margin-top: 14px;
}
.d-footer button {
height: 36px;
border-radius: 10px;
border: 1px solid #e2e8e6;
background: #fff;
font-size: 13px;
font-weight: 650;
cursor: pointer;
color: #334155;
}
.d-footer .submit {
background: linear-gradient(135deg, #0a9f6d, #087f57);
border: 0;
color: #fff;
box-shadow: 0 6px 14px rgba(10, 159, 109, 0.28);
}
.d-footer .del {
color: #94a3b8;
border-color: transparent;
background: #f8fafc;
}
/* ========== E:沉浸式主按钮卡 ========== */
.e-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
border: 1px solid #e8eeeb;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.e-banner {
padding: 12px 14px;
background:
linear-gradient(135deg, rgba(255,247,232,.95), rgba(233,249,242,.9));
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.e-banner-left {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: #92400e;
}
.e-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.e-ver {
font-size: 11px;
color: #78716c;
background: rgba(255,255,255,.7);
padding: 2px 8px;
border-radius: 999px;
}
.e-body { padding: 14px 14px 4px; }
.e-title {
font-size: 16px;
font-weight: 750;
color: #1f2a26;
margin-bottom: 8px;
}
.e-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.e-chip {
background: #f8fafc;
border-radius: 10px;
padding: 8px 10px;
}
.e-chip .k {
display: block;
font-size: 10px;
color: #94a3b8;
margin-bottom: 2px;
}
.e-chip .v {
font-size: 12px;
font-weight: 650;
color: #334155;
}
.e-footer {
display: flex;
gap: 8px;
padding: 0 14px 14px;
}
.e-footer button {
height: 40px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
border: 0;
}
.e-footer .ghost {
flex: 0 0 auto;
min-width: 72px;
background: #f1f5f9;
color: #64748b;
}
.e-footer .main {
flex: 1;
background: linear-gradient(135deg, #0a9f6d, #087f57);
color: #fff;
box-shadow: 0 8px 18px rgba(10, 159, 109, 0.3);
}
.e-footer .link {
flex: 0 0 auto;
min-width: 56px;
background: transparent;
color: #94a3b8;
}
/* ========== F:管理模式预览(基于 D) ========== */
.f-batch {
margin: 10px 12px 0;
padding: 10px 12px;
border-radius: 12px;
background: #fff;
border: 1px solid #c6f0dc;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 13px;
color: #166534;
}
.f-batch button {
height: 32px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid rgba(239,68,68,.35);
background: rgba(239,68,68,.06);
color: var(--danger);
font-size: 12px;
font-weight: 650;
cursor: pointer;
}
.f-row {
display: flex;
gap: 10px;
align-items: stretch;
}
.f-check {
padding-top: 22px;
flex-shrink: 0;
}
.f-check span {
display: flex;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.5px solid #cbd5e1;
background: #fff;
align-items: center;
justify-content: center;
font-size: 11px;
color: #fff;
font-weight: 700;
}
.f-check span.on {
background: #22c55e;
border-color: #22c55e;
}
.f-row .d-card { flex: 1; min-width: 0; }
.f-row.is-on .d-card {
border-color: rgba(34, 197, 94, 0.45);
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
}
.hidden { display: none !important; }
</style>
</head>
<body>
<div class="stage">
<div class="hero">
<h1>草稿箱列表 · 风格选型 Demo</h1>
<p>
对应页面 <code>/#/pages/oa/drafts/index</code>。保留能力:搜索、管理/多选删除、流程名、草稿态、最近保存、版本、编辑 / 提交审批 / 删除。
Token 对齐三墙绿 <strong>#0a9f6d</strong> + 大麦黄草稿提示。
</p>
<div class="note">请点选下方 Tab 对比;告诉我选 <strong>A / B / C / D / E</strong>(可微调),再落到 <code>mobile-h5</code> 实现。</div>
</div>
<div class="tabs" id="tabs">
<button class="tab is-active" data-style="a">A 当前对照</button>
<button class="tab" data-style="b">B 左色条<span class="badge">推荐</span></button>
<button class="tab" data-style="c">C 紧凑行</button>
<button class="tab" data-style="d">D 色块图标</button>
<button class="tab" data-style="e">E 主按钮优先</button>
<button class="tab" data-style="f">F 管理态预览</button>
</div>
<div class="layout">
<div class="panel" id="desc">
<h2>A · 当前对照</h2>
<p class="sub">复用现有 OaTaskCard 结构,便于对比「哪里不好看」。</p>
<ul>
<li>标题 + 右上角状态胶囊</li>
<li>两行 label/value 元信息</li>
<li>底栏三等分按钮(主色 / 描边 / 危险)</li>
</ul>
<div class="pick">适合:保持与待办/已办卡片完全一致时选 A。</div>
</div>
<div class="phone-wrap">
<div class="phone">
<div class="phone-bar">草稿箱</div>
<div class="page">
<div class="toolbar">
<div class="search">搜索流程名称</div>
<div class="manage" id="manageLabel">管理</div>
</div>
<!-- A -->
<div class="style-pane is-active" data-pane="a">
<div class="list">
<div class="a-card">
<div class="a-body">
<div class="a-top">
<div class="a-title">出差申请</div>
<div class="a-status">草稿</div>
</div>
<div class="a-meta">
<div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-12 14:32</span></div>
<div class="a-meta-line"><span class="lab">版本</span><span class="val">v3</span></div>
</div>
</div>
<div class="a-footer">
<button class="a-btn primary">编辑</button>
<button class="a-btn">提交审批</button>
<button class="a-btn danger">删除</button>
</div>
</div>
<div class="a-card">
<div class="a-body">
<div class="a-top">
<div class="a-title">采购报销(含发票)</div>
<div class="a-status">草稿</div>
</div>
<div class="a-meta">
<div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-11 09:18</span></div>
<div class="a-meta-line"><span class="lab">版本</span><span class="val">v1</span></div>
</div>
</div>
<div class="a-footer">
<button class="a-btn primary">编辑</button>
<button class="a-btn">提交审批</button>
<button class="a-btn danger">删除</button>
</div>
</div>
<div class="a-card">
<div class="a-body">
<div class="a-top">
<div class="a-title">用章申请</div>
<div class="a-status">草稿</div>
</div>
<div class="a-meta">
<div class="a-meta-line"><span class="lab">最近保存</span><span class="val">2026-08-10 17:05</span></div>
<div class="a-meta-line"><span class="lab">版本</span><span class="val">v2</span></div>
</div>
</div>
<div class="a-footer">
<button class="a-btn primary">编辑</button>
<button class="a-btn">提交审批</button>
<button class="a-btn danger">删除</button>
</div>
</div>
<div class="end">已经到底了</div>
</div>
</div>
<!-- B -->
<div class="style-pane" data-pane="b">
<div class="list">
<div class="b-card">
<div class="b-head">
<div class="b-title">出差申请</div>
<div class="b-pill">草稿</div>
</div>
<div class="b-time">最近保存 <strong>08-12 14:32</strong> · 版本 <strong>v3</strong></div>
<div class="b-actions">
<button class="edit">编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="b-card">
<div class="b-head">
<div class="b-title">采购报销(含发票)</div>
<div class="b-pill">草稿</div>
</div>
<div class="b-time">最近保存 <strong>08-11 09:18</strong> · 版本 <strong>v1</strong></div>
<div class="b-actions">
<button class="edit">编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="b-card">
<div class="b-head">
<div class="b-title">用章申请</div>
<div class="b-pill">草稿</div>
</div>
<div class="b-time">最近保存 <strong>08-10 17:05</strong> · 版本 <strong>v2</strong></div>
<div class="b-actions">
<button class="edit">编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="end">已经到底了</div>
</div>
</div>
<!-- C -->
<div class="style-pane" data-pane="c">
<div class="c-list">
<div>
<div class="c-row">
<div class="c-ico">草稿</div>
<div class="c-main">
<div class="c-title">出差申请</div>
<div class="c-sub">08-12 14:32 · v3</div>
</div>
<div class="c-right"><div class="c-chev"></div></div>
</div>
<div class="c-ops">
<button class="p">编辑</button>
<button>提交审批</button>
<button class="d">删除</button>
</div>
</div>
<div>
<div class="c-row">
<div class="c-ico">草稿</div>
<div class="c-main">
<div class="c-title">采购报销(含发票)</div>
<div class="c-sub">08-11 09:18 · v1</div>
</div>
<div class="c-right"><div class="c-chev"></div></div>
</div>
<div class="c-ops">
<button class="p">编辑</button>
<button>提交审批</button>
<button class="d">删除</button>
</div>
</div>
<div>
<div class="c-row">
<div class="c-ico">草稿</div>
<div class="c-main">
<div class="c-title">用章申请</div>
<div class="c-sub">08-10 17:05 · v2</div>
</div>
<div class="c-right"><div class="c-chev"></div></div>
</div>
<div class="c-ops">
<button class="p">编辑</button>
<button>提交审批</button>
<button class="d">删除</button>
</div>
</div>
</div>
<div class="end">已经到底了</div>
</div>
<!-- D -->
<div class="style-pane" data-pane="d">
<div class="list">
<div class="d-card">
<div class="d-top">
<div class="d-avatar t1">差</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">出差申请</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta">
<span>08-12 14:32</span>
<span>v3</span>
</div>
</div>
</div>
<div class="d-footer">
<button>编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="d-card">
<div class="d-top">
<div class="d-avatar t2">采</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">采购报销(含发票)</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta">
<span>08-11 09:18</span>
<span>v1</span>
</div>
</div>
</div>
<div class="d-footer">
<button>编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="d-card">
<div class="d-top">
<div class="d-avatar t3">章</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">用章申请</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta">
<span>08-10 17:05</span>
<span>v2</span>
</div>
</div>
</div>
<div class="d-footer">
<button>编辑</button>
<button class="submit">提交审批</button>
<button class="del">删除</button>
</div>
</div>
<div class="end">已经到底了</div>
</div>
</div>
<!-- E -->
<div class="style-pane" data-pane="e">
<div class="list">
<div class="e-card">
<div class="e-banner">
<div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
<div class="e-ver">v3</div>
</div>
<div class="e-body">
<div class="e-title">出差申请</div>
<div class="e-meta-grid">
<div class="e-chip"><span class="k">最近保存</span><span class="v">08-12 14:32</span></div>
<div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
</div>
</div>
<div class="e-footer">
<button class="ghost">编辑</button>
<button class="main">提交审批</button>
<button class="link">删除</button>
</div>
</div>
<div class="e-card">
<div class="e-banner">
<div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
<div class="e-ver">v1</div>
</div>
<div class="e-body">
<div class="e-title">采购报销(含发票)</div>
<div class="e-meta-grid">
<div class="e-chip"><span class="k">最近保存</span><span class="v">08-11 09:18</span></div>
<div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
</div>
</div>
<div class="e-footer">
<button class="ghost">编辑</button>
<button class="main">提交审批</button>
<button class="link">删除</button>
</div>
</div>
<div class="e-card">
<div class="e-banner">
<div class="e-banner-left"><span class="e-dot"></span>未提交草稿</div>
<div class="e-ver">v2</div>
</div>
<div class="e-body">
<div class="e-title">用章申请</div>
<div class="e-meta-grid">
<div class="e-chip"><span class="k">最近保存</span><span class="v">08-10 17:05</span></div>
<div class="e-chip"><span class="k">流程</span><span class="v">OA 审批</span></div>
</div>
</div>
<div class="e-footer">
<button class="ghost">编辑</button>
<button class="main">提交审批</button>
<button class="link">删除</button>
</div>
</div>
<div class="end">已经到底了</div>
</div>
</div>
<!-- F manage -->
<div class="style-pane" data-pane="f">
<div class="f-batch">
<span>已选 1 项</span>
<button>批量删除</button>
</div>
<div class="list">
<div class="f-row is-on">
<div class="f-check"><span class="on">✓</span></div>
<div class="d-card">
<div class="d-top">
<div class="d-avatar t1">差</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">出差申请</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta"><span>08-12 14:32</span><span>v3</span></div>
</div>
</div>
</div>
</div>
<div class="f-row">
<div class="f-check"><span></span></div>
<div class="d-card">
<div class="d-top">
<div class="d-avatar t2">采</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">采购报销(含发票)</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta"><span>08-11 09:18</span><span>v1</span></div>
</div>
</div>
</div>
</div>
<div class="f-row">
<div class="f-check"><span></span></div>
<div class="d-card">
<div class="d-top">
<div class="d-avatar t3">章</div>
<div class="d-info">
<div class="d-title-row">
<div class="d-title">用章申请</div>
<div class="d-tag">草稿</div>
</div>
<div class="d-meta"><span>08-10 17:05</span><span>v2</span></div>
</div>
</div>
</div>
</div>
<div class="end">管理态下隐藏行内操作,点卡片勾选</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const DESCS = {
a: {
title: "A · 当前对照",
sub: "复用现有 OaTaskCard 结构,便于对比「哪里不好看」。",
items: [
"标题 + 右上角状态胶囊",
"两行 label/value 元信息",
"底栏三等分按钮(主色 / 描边 / 危险)"
],
pick: "适合:保持与待办/已办卡片完全一致时选 A。"
},
b: {
title: "B · 左色条时间卡",
sub: "信息更扁、动作更轻;用琥珀竖条暗示「未完成」。",
items: [
"左侧大麦黄竖条区分草稿态",
"时间与版本收成一行,减少纵向占高",
"主行动「提交」实心,删除弱化为文字"
],
pick: "推荐:信息密度适中,最像「未完成事项」列表。"
},
c: {
title: "C · 紧凑行列表",
sub: "接近系统设置/通讯录密度,一屏更多条。",
items: [
"左侧「草稿」色块 + 标题/时间一行",
"操作收成胶囊小按钮,可点整行进入编辑",
"适合草稿量多、以浏览为主"
],
pick: "适合:草稿很多、优先扫一眼找单据。"
},
d: {
title: "D · 色块图标卡",
sub: "流程首字色块增加辨识度,提交为主按钮。",
items: [
"流程名首字渐变方块(可按分类着色)",
"元信息点分隔,更轻",
"底栏「提交审批」视觉权重最高"
],
pick: "适合:想让不同流程更好区分时选 D。"
},
e: {
title: "E · 主按钮优先",
sub: "强化「去提交」心智,顶部草稿横幅更醒目。",
items: [
"顶部琥珀横幅 + 版本胶囊",
"元信息双芯片网格",
"宽主按钮「提交审批」,编辑/删除弱化"
],
pick: "适合:产品希望用户尽快提交、减少积压草稿。"
},
f: {
title: "F · 管理态预览",
sub: "基于 D 的多选态示意(任意正式风格都可套用)。",
items: [
"顶栏「完成」+ 已选 N 项批量条",
"左侧圆形勾选,选中卡描边高亮",
"管理态隐藏行内操作按钮"
],
pick: "仅预览交互;正式实现时跟你选定的 A–E 同一卡片结构。"
}
};
const tabs = document.getElementById("tabs");
const desc = document.getElementById("desc");
const manageLabel = document.getElementById("manageLabel");
function renderDesc(key) {
const d = DESCS[key];
desc.innerHTML =
"<h2>" + d.title + "</h2>" +
'<p class="sub">' + d.sub + "</p>" +
"<ul>" + d.items.map(function (i) { return "<li>" + i + "</li>"; }).join("") + "</ul>" +
'<div class="pick">' + d.pick + "</div>";
manageLabel.textContent = key === "f" ? "完成" : "管理";
}
tabs.addEventListener("click", function (e) {
const btn = e.target.closest(".tab");
if (!btn) return;
const key = btn.getAttribute("data-style");
tabs.querySelectorAll(".tab").forEach(function (t) {
t.classList.toggle("is-active", t === btn);
});
document.querySelectorAll(".style-pane").forEach(function (p) {
p.classList.toggle("is-active", p.getAttribute("data-pane") === key);
});
renderDesc(key);
});
</script>
</body>
</html>