| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177 |
- <!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>
|