1178 lines
36 KiB
HTML
1178 lines
36 KiB
HTML
<!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>
|