| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678 |
- <!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>草稿箱 · 模式 A 美化 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: #dcebe4;
- --page-bg: #f5f8f7;
- --surface: #fff;
- }
- * { 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.1), transparent 50%),
- linear-gradient(180deg, #f8fffc 0%, #f4f7fb 45%, #f7f8fa 100%);
- line-height: 1.45;
- }
- .stage { max-width: 1320px; margin: 0 auto; padding: 28px 16px 64px; }
- .hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 720; letter-spacing: -0.02em; }
- .hero p { margin: 0; max-width: 820px; 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; }
- .pain {
- margin: 18px 0 0;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
- gap: 10px;
- }
- .pain-item {
- background: #fff;
- border: 1px solid #fecaca;
- border-radius: 12px;
- padding: 10px 12px;
- font-size: 12px;
- color: #7f1d1d;
- }
- .pain-item b { color: #b91c1c; }
- .tabs {
- display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px;
- }
- .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: .15s border-color, .15s box-shadow, .15s color, .15s background;
- }
- .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;
- }
- .layout {
- display: grid;
- grid-template-columns: minmax(260px, 340px) 1fr;
- gap: 22px;
- align-items: start;
- }
- @media (max-width: 960px) { .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 12px; 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: 14px; padding: 12px; border-radius: 12px;
- background: var(--brand-soft); border: 1px solid #c6f0dc;
- font-size: 12px; color: #166534;
- }
- .phones {
- display: flex; flex-wrap: wrap; gap: 20px; 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;
- }
- .phone-cap {
- padding: 8px 14px; font-size: 11px; font-weight: 650;
- color: #64748b; background: #f8fafc; border-bottom: 1px solid #eef2f0;
- text-align: center;
- }
- .page { background: var(--page-bg); min-height: 620px; padding-bottom: 18px; }
- .style-block { display: none; }
- .style-block.is-active { display: block; }
- /* ========== 共用搜索 ========== */
- .search {
- 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; width: 100%;
- }
- .search::before {
- content: ""; width: 12px; height: 12px; border: 1.5px solid #94a3b8;
- border-radius: 50%; flex-shrink: 0;
- }
- /* ========== 共用卡片(美化后的模式 A) ========== */
- .card {
- width: 100%;
- background: var(--surface);
- border: 1px solid #e2ebe6;
- border-radius: 14px;
- overflow: hidden;
- box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
- }
- .card-body { padding: 14px 14px 12px; }
- .card-top {
- display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
- }
- .card-title {
- font-size: 15px; font-weight: 700; color: #1f2a26; line-height: 1.35;
- min-width: 0; flex: 1;
- }
- .card-status {
- flex-shrink: 0; font-size: 11px; font-weight: 700;
- padding: 3px 9px; border-radius: 999px;
- background: var(--warn-soft); color: var(--warn);
- }
- .card-meta { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
- .card-meta-line {
- display: flex; gap: 10px; font-size: 12px; line-height: 1.4;
- }
- .card-meta-line .lab { color: #94a3b8; min-width: 56px; flex-shrink: 0; }
- .card-meta-line .val { color: #475569; min-width: 0; }
- .card-footer {
- display: flex; gap: 8px; padding: 10px 12px 12px;
- border-top: 1px dashed rgba(140, 170, 155, 0.28);
- }
- .card-footer button {
- flex: 1; min-width: 0; height: 34px; border-radius: 10px;
- border: 1px solid #d8e3de; background: #fff;
- font-size: 12px; font-weight: 650; color: #334155; cursor: pointer;
- }
- .card-footer .p {
- background: var(--brand); border-color: var(--brand); color: #fff;
- }
- .card-footer .d {
- color: var(--danger); border-color: rgba(239,68,68,.35);
- background: rgba(239,68,68,.06);
- }
- .list { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 10px; }
- .end { text-align: center; padding: 14px 0 6px; font-size: 12px; color: #94a3b8; }
- /* —— 卡片变体:更精致 —— */
- .card.v-soft {
- border-color: transparent;
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
- }
- .card.v-accent {
- border-color: #e8eeeb;
- box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
- position: relative;
- }
- .card.v-accent::before {
- content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
- background: linear-gradient(180deg, #f59e0b, #d6a343);
- }
- .card.v-accent .card-body { padding-left: 16px; }
- .card.v-flat {
- border: 0;
- background: #fff;
- box-shadow: none;
- border-radius: 12px;
- outline: 1px solid #e8eeeb;
- }
- .card.v-meta-inline .card-meta {
- flex-direction: row; flex-wrap: wrap; gap: 4px 12px;
- }
- .card.v-meta-inline .card-meta-line .lab { min-width: 0; }
- .card.v-meta-inline .card-meta-line .lab::after { content: " "; }
- .card.v-meta-inline .sep {
- color: #cbd5e1; font-size: 12px;
- }
- /* ========== A0 现状对照 ========== */
- .a0-toolbar {
- display: flex; align-items: center; gap: 10px;
- padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9;
- }
- .a0-manage {
- flex-shrink: 0; font-size: 14px; font-weight: 600; color: #166534;
- padding: 0 2px; white-space: nowrap;
- }
- .a0-row {
- display: flex; align-items: flex-start; gap: 8px; width: 100%;
- }
- .a0-check {
- padding-top: 20px; flex-shrink: 0;
- }
- .a0-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;
- }
- .a0-check span.on { background: #22c55e; border-color: #22c55e; }
- .a0-row .card { flex: 1; min-width: 0; }
- /* ========== 方案 1:搜索独占 + 列表头「共N条 | 管理」 ========== */
- .s1-toolbar { padding: 10px 12px 8px; background: #fff; border-bottom: 1px solid #f1f5f9; }
- .s1-head {
- display: flex; align-items: center; justify-content: space-between;
- padding: 10px 14px 2px;
- }
- .s1-count { font-size: 12px; color: var(--text-muted); }
- .s1-count strong { color: var(--brand-dark); font-weight: 700; }
- .s1-link {
- font-size: 13px; font-weight: 650; color: var(--brand-dark);
- padding: 4px 2px; cursor: pointer; user-select: none;
- }
- .s1-link.is-done { color: #64748b; }
- /* ========== 方案 2:顶栏右侧胶囊「管理」 ========== */
- .s2-toolbar {
- display: flex; align-items: center; gap: 8px;
- padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9;
- }
- .s2-chip {
- flex-shrink: 0; height: 36px; padding: 0 14px;
- border-radius: 999px; border: 1px solid #d8e3de;
- background: #fff; font-size: 13px; font-weight: 650;
- color: var(--brand-dark); cursor: pointer;
- display: inline-flex; align-items: center; gap: 4px;
- }
- .s2-chip.is-on {
- background: #f1f5f9; border-color: #e2e8f0; color: #64748b;
- }
- .s2-chip svg { width: 14px; height: 14px; }
- /* ========== 方案 3:搜索下方次级工具条 ========== */
- .s3-toolbar { padding: 10px 12px 0; background: #fff; border-bottom: 1px solid #f1f5f9; }
- .s3-sub {
- display: flex; align-items: center; justify-content: space-between;
- margin-top: 10px; padding: 8px 2px 10px;
- }
- .s3-hint { font-size: 12px; color: #94a3b8; }
- .s3-btn {
- height: 28px; padding: 0 12px; border-radius: 8px;
- border: 1px solid #c6f0dc; background: var(--brand-soft);
- color: var(--brand-dark); font-size: 12px; font-weight: 650; cursor: pointer;
- }
- .s3-btn.is-on {
- background: #f1f5f9; border-color: #e2e8f0; color: #64748b;
- }
- /* ========== 方案 4:底栏管理(列表干净) ========== */
- .s4-page { position: relative; padding-bottom: 64px; }
- .s4-toolbar { padding: 10px 12px; background: #fff; border-bottom: 1px solid #f1f5f9; }
- .s4-dock {
- position: absolute; left: 0; right: 0; bottom: 0;
- padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
- background: rgba(255,255,255,.96);
- border-top: 1px solid #e8eeeb;
- display: flex; align-items: center; justify-content: space-between;
- backdrop-filter: blur(8px);
- }
- .s4-dock .hint { font-size: 12px; color: var(--text-muted); }
- .s4-dock .btn {
- height: 36px; padding: 0 18px; border-radius: 10px;
- border: 0; background: var(--brand); color: #fff;
- font-size: 13px; font-weight: 700; cursor: pointer;
- }
- .s4-dock.is-manage .btn {
- background: #f1f5f9; color: #64748b;
- }
- .s4-dock .danger {
- height: 36px; padding: 0 16px; border-radius: 10px;
- border: 1px solid rgba(239,68,68,.35);
- background: rgba(239,68,68,.06); color: var(--danger);
- font-size: 13px; font-weight: 650; cursor: pointer;
- }
- /* ========== 管理态:勾选垂直居中 ========== */
- .row {
- display: flex; align-items: center; gap: 10px; width: 100%;
- }
- .row .card { flex: 1; min-width: 0; margin: 0; }
- .check {
- flex-shrink: 0; width: 22px; height: 22px;
- display: flex; align-items: center; justify-content: center;
- }
- .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;
- }
- .check span.on { background: #22c55e; border-color: #22c55e; }
- .row.is-on .card {
- border-color: rgba(34, 197, 94, 0.45);
- box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
- }
- .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;
- }
- .batch button {
- height: 30px; padding: 0 12px; 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;
- }
- /* 内嵌勾选(方案变体) */
- .card-check-in {
- display: flex; gap: 10px; align-items: flex-start;
- }
- .card-check-in .check { margin-top: 2px; }
- .meta-inline {
- margin-top: 8px; font-size: 12px; color: #64748b;
- }
- .meta-inline .dot { margin: 0 6px; color: #cbd5e1; }
- </style>
- </head>
- <body>
- <div class="stage">
- <div class="hero">
- <h1>草稿箱 · 模式 A 美化选型</h1>
- <p>
- 保留现有信息结构(标题 / 草稿态 / 最近保存 / 版本 / 编辑·提交·删除),针对你反馈的三点做方案对比:
- <strong>管理入口不突兀</strong>、<strong>勾选与卡片垂直居中</strong>、<strong>卡片更好看</strong>。
- </p>
- <div class="note">请选 <strong>S1 / S2 / S3 / S4</strong>(卡片可再指定 soft / accent / flat)。选好后我落到 <code>mobile-h5</code>。</div>
- <div class="pain">
- <div class="pain-item"><b>痛点 1</b> 「管理」挤在搜索框右侧,突兀</div>
- <div class="pain-item"><b>痛点 2</b> 管理态勾选与卡片未垂直居中</div>
- <div class="pain-item"><b>痛点 3</b> 卡片观感偏平、不好看</div>
- </div>
- </div>
- <div class="tabs" id="tabs">
- <button class="tab is-active" data-k="a0">A0 现状对照</button>
- <button class="tab" data-k="s1">S1 列表头管理<span class="badge">推荐</span></button>
- <button class="tab" data-k="s2">S2 胶囊按钮</button>
- <button class="tab" data-k="s3">S3 次级工具条</button>
- <button class="tab" data-k="s4">S4 底栏管理</button>
- <button class="tab" data-k="cards">卡片三款</button>
- </div>
- <div class="layout">
- <div class="panel" id="desc"></div>
- <div class="phones" id="phones"></div>
- </div>
- </div>
- <script>
- const ICON_GEAR = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"/></svg>';
- function cardHtml(title, time, ver, opts) {
- opts = opts || {};
- var cls = "card" + (opts.variant ? " " + opts.variant : "");
- var footer = opts.noActions ? "" : (
- '<div class="card-footer">' +
- '<button class="p">编辑</button>' +
- '<button>提交审批</button>' +
- '<button class="d">删除</button>' +
- '</div>'
- );
- var meta = opts.inlineMeta
- ? ('<div class="meta-inline">' + time + '<span class="dot">·</span>版本 ' + ver + '</div>')
- : (
- '<div class="card-meta">' +
- '<div class="card-meta-line"><span class="lab">最近保存</span><span class="val">' + time + '</span></div>' +
- '<div class="card-meta-line"><span class="lab">版本</span><span class="val">' + ver + '</span></div>' +
- '</div>'
- );
- return (
- '<div class="' + cls + '">' +
- '<div class="card-body">' +
- '<div class="card-top">' +
- '<div class="card-title">' + title + '</div>' +
- '<div class="card-status">草稿</div>' +
- '</div>' +
- meta +
- '</div>' +
- footer +
- '</div>'
- );
- }
- const ROWS = [
- ["入帐单", "2026-08-12 17:03:42", "v5"],
- ["出差申请", "2026-08-11 09:18:00", "v3"],
- ["采购报销", "2026-08-10 17:05:11", "v2"]
- ];
- function phone(cap, bodyHtml) {
- return (
- '<div class="phone">' +
- '<div class="phone-bar">草稿箱</div>' +
- (cap ? '<div class="phone-cap">' + cap + '</div>' : '') +
- '<div class="page">' + bodyHtml + '</div>' +
- '</div>'
- );
- }
- const DESCS = {
- a0: {
- title: "A0 · 现状对照",
- sub: "复现当前问题,方便并排对比。",
- items: [
- "「管理」文字直接贴在搜索框右侧,视觉突兀",
- "管理态勾选 padding-top 硬对齐,无法跟卡片垂直居中",
- "卡片可用,但边框/按钮节奏偏旧"
- ],
- pick: "仅作对照,不建议落地。"
- },
- s1: {
- title: "S1 · 列表头管理(推荐)",
- sub: "搜索独占一行;「共 N 条」与「管理」放在列表上方次级行。",
- items: [
- "搜索框不再被挤窄,输入更舒适",
- "管理入口与列表语义绑定,不再像外挂按钮",
- "管理态:勾选与卡片 align-items:center 垂直居中",
- "卡片:轻阴影 + 等分按钮(现状结构保留)"
- ],
- pick: "最推荐:改动小、符合列表页习惯(微信/钉钉类)。"
- },
- s2: {
- title: "S2 · 搜索旁胶囊按钮",
- sub: "仍在顶栏,但「管理」做成等高胶囊,降低突兀感。",
- items: [
- "与搜索同高的描边胶囊,比纯文字更规整",
- "可选左侧小图标强化「管理模式」",
- "勾选垂直居中;完成态胶囊变灰"
- ],
- pick: "想少改布局、只润色顶栏时选 S2。"
- },
- s3: {
- title: "S3 · 搜索下次级工具条",
- sub: "搜索下方增加一行提示 + 浅绿小按钮。",
- items: [
- "主搜索区干净,管理降为次级操作",
- "可用文案提示「可批量删除草稿」",
- "管理态同样垂直居中勾选"
- ],
- pick: "需要教育用户「可批量管理」时选 S3。"
- },
- s4: {
- title: "S4 · 底栏管理",
- sub: "列表区完全干净;管理/批量删除沉到底部固定栏。",
- items: [
- "顶栏只留搜索,最清爽",
- "进入管理后底栏切换为「已选 N · 批量删除 · 完成」",
- "适合单手操作、强调批量删除场景"
- ],
- pick: "草稿常需批量清理时选 S4;会占一点底部空间。"
- },
- cards: {
- title: "卡片三款细调",
- sub: "同一信息结构,只换卡片「皮」;可与 S1–S4 任意组合。",
- items: [
- "Soft:无描边、更柔阴影",
- "Accent:左侧琥珀竖条强调草稿",
- "Flat:细线扁平,信息更密(元信息可一行)"
- ],
- pick: "建议:S1 布局 + Soft 或 Accent 卡片。"
- }
- };
- function renderA0() {
- var normal = phone("普通态 · 管理突兀",
- '<div class="a0-toolbar"><div class="search" style="flex:1">搜索流程名称</div><div class="a0-manage">管理</div></div>' +
- '<div class="list">' +
- ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2]); }).join("") +
- '<div class="end">已经到底了</div></div>'
- );
- var manage = phone("管理态 · 勾选未居中",
- '<div class="a0-toolbar"><div class="search" style="flex:1">搜索流程名称</div><div class="a0-manage" style="color:#64748b">完成</div></div>' +
- '<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
- '<div class="list">' +
- '<div class="a0-row"><div class="a0-check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true }) + '</div>' +
- '<div class="a0-row"><div class="a0-check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true }) + '</div>' +
- '<div class="a0-row"><div class="a0-check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true }) + '</div>' +
- '</div>'
- );
- return normal + manage;
- }
- function renderS1() {
- var normal = phone("普通态",
- '<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条草稿</div><div class="s1-link">管理</div></div>' +
- '<div class="list">' +
- ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft" }); }).join("") +
- '<div class="end">已经到底了</div></div>'
- );
- var manage = phone("管理态 · 勾选居中",
- '<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="s1-head"><div class="s1-count">已选 <strong>1</strong> / 3</div><div class="s1-link is-done">完成</div></div>' +
- '<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
- '<div class="list">' +
- '<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-soft" }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-soft" }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-soft" }) + '</div>' +
- '</div>'
- );
- return normal + manage;
- }
- function renderS2() {
- var normal = phone("普通态 · 胶囊",
- '<div class="s2-toolbar"><div class="search" style="flex:1">搜索流程名称</div>' +
- '<button class="s2-chip">' + ICON_GEAR + '管理</button></div>' +
- '<div class="list">' +
- ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-accent" }); }).join("") +
- '<div class="end">已经到底了</div></div>'
- );
- var manage = phone("管理态 · 勾选居中",
- '<div class="s2-toolbar"><div class="search" style="flex:1">搜索流程名称</div>' +
- '<button class="s2-chip is-on">完成</button></div>' +
- '<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
- '<div class="list">' +
- '<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-accent" }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-accent" }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-accent" }) + '</div>' +
- '</div>'
- );
- return normal + manage;
- }
- function renderS3() {
- var normal = phone("普通态 · 次级条",
- '<div class="s3-toolbar"><div class="search">搜索流程名称</div>' +
- '<div class="s3-sub"><span class="s3-hint">可批量删除不用的草稿</span><button class="s3-btn">管理</button></div></div>' +
- '<div class="list">' +
- ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2]); }).join("") +
- '<div class="end">已经到底了</div></div>'
- );
- var manage = phone("管理态 · 勾选居中",
- '<div class="s3-toolbar"><div class="search">搜索流程名称</div>' +
- '<div class="s3-sub"><span class="s3-hint">点选草稿后可批量删除</span><button class="s3-btn is-on">完成</button></div></div>' +
- '<div class="batch"><span>已选 1 项</span><button>批量删除</button></div>' +
- '<div class="list">' +
- '<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true }) + '</div>' +
- '</div>'
- );
- return normal + manage;
- }
- function renderS4() {
- var normal = phone("普通态 · 底栏",
- '<div class="s4-page">' +
- '<div class="s4-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="list">' +
- ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft", inlineMeta: true }); }).join("") +
- '<div class="end">已经到底了</div></div>' +
- '<div class="s4-dock"><span class="hint">共 3 条草稿</span><button class="btn">管理</button></div>' +
- '</div>'
- );
- var manage = phone("管理态 · 底栏批量",
- '<div class="s4-page">' +
- '<div class="s4-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="list">' +
- '<div class="row is-on"><div class="check"><span class="on">✓</span></div>' + cardHtml(ROWS[0][0], ROWS[0][1], ROWS[0][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[1][0], ROWS[1][1], ROWS[1][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
- '<div class="row"><div class="check"><span></span></div>' + cardHtml(ROWS[2][0], ROWS[2][1], ROWS[2][2], { noActions: true, variant: "v-soft", inlineMeta: true }) + '</div>' +
- '</div>' +
- '<div class="s4-dock is-manage">' +
- '<span class="hint">已选 1 项</span>' +
- '<div style="display:flex;gap:8px">' +
- '<button class="danger">批量删除</button>' +
- '<button class="btn">完成</button>' +
- '</div>' +
- '</div>' +
- '</div>'
- );
- return normal + manage;
- }
- function renderCards() {
- return (
- phone("Soft · 柔阴影",
- '<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
- '<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-soft" }); }).join("") + '</div>'
- ) +
- phone("Accent · 左色条",
- '<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
- '<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-accent" }); }).join("") + '</div>'
- ) +
- phone("Flat · 扁平一行元信息",
- '<div class="s1-toolbar"><div class="search">搜索流程名称</div></div>' +
- '<div class="s1-head"><div class="s1-count">共 <strong>3</strong> 条</div><div class="s1-link">管理</div></div>' +
- '<div class="list">' + ROWS.map(function (r) { return cardHtml(r[0], r[1], r[2], { variant: "v-flat", inlineMeta: true }); }).join("") + '</div>'
- )
- );
- }
- const RENDER = {
- a0: renderA0,
- s1: renderS1,
- s2: renderS2,
- s3: renderS3,
- s4: renderS4,
- cards: renderCards
- };
- const descEl = document.getElementById("desc");
- const phonesEl = document.getElementById("phones");
- const tabs = document.getElementById("tabs");
- function show(key) {
- var d = DESCS[key];
- descEl.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>";
- phonesEl.innerHTML = RENDER[key]();
- }
- tabs.addEventListener("click", function (e) {
- var btn = e.target.closest(".tab");
- if (!btn) return;
- tabs.querySelectorAll(".tab").forEach(function (t) {
- t.classList.toggle("is-active", t === btn);
- });
- show(btn.getAttribute("data-k"));
- });
- show("a0");
- </script>
- </body>
- </html>
|