27 lines
23 KiB
HTML
27 lines
23 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>记之 · 克制青绿六页面</title>
|
||
<style>
|
||
:root{--brand:#087f6d;--deep:#066b5c;--soft:#e3f2ef;--bg:#f4f7f6;--card:#fff;--ink:#17201e;--muted:#66736f;--faint:#98a29f;--line:#e1e7e5;--ai:#4f6f8f;--aiSoft:#ebf0f7;--expense:#cf3f36;--warning:#b86b10;--warningSoft:#fff4dd;--page:#edf1ef;--shadow:rgba(23,32,30,.12)}
|
||
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--page);font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}.page{width:min(1380px,calc(100% - 32px));margin:auto;padding:52px 0 80px}.head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;margin:0 4px 34px}.kicker{margin-bottom:10px;color:var(--brand);font:800 11px Georgia;letter-spacing:.16em}h1{margin:0;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(38px,5vw,66px);line-height:1}.intro{max-width:700px;margin:17px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.palette{display:flex;gap:9px;padding:13px;border:1px solid var(--line);border-radius:17px;background:#fff}.palette i{width:34px;height:34px;border:3px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line)}
|
||
.grid{display:grid;grid-template-columns:repeat(3,minmax(360px,1fr));gap:26px 22px;align-items:start}.case{padding:17px 15px 21px;border:1px solid #dce3e0;border-radius:23px;background:#fff}.caseHead{display:flex;justify-content:space-between;width:min(100%,370px);margin:0 auto 14px}.idx{color:var(--brand);font:800 10px Georgia;letter-spacing:.14em}.case h2{margin:5px 0 3px;font-size:20px}.note{color:var(--muted);font-size:11px}.tag{align-self:flex-start;padding:5px 9px;border:1px solid var(--brand);border-radius:999px;color:var(--brand);background:var(--soft);font-size:9px;font-weight:800}
|
||
.phone{position:relative;width:min(100%,370px);height:780px;margin:auto;overflow:hidden;border:7px solid #1d2422;border-radius:43px;background:var(--bg);box-shadow:0 18px 36px var(--shadow)}.status{display:flex;justify-content:space-between;height:34px;padding:8px 19px 0;font-size:10px;font-weight:800}.sys{letter-spacing:2px}.screen{height:calc(100% - 34px);overflow:hidden;padding:8px 16px 82px;background:var(--bg)}.top{display:flex;align-items:center;justify-content:space-between;min-height:42px;margin-bottom:12px}.title{font-size:16px;font-weight:800}.brand{display:flex;align-items:center;gap:9px}.logo{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;object-fit:cover}.brand b{font-family:"Noto Serif SC","Songti SC",serif;font-size:18px}.micro,.sub{margin-top:2px;color:var(--muted);font-size:8px;line-height:1.45}.square{display:grid;width:31px;height:31px;place-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:15px}.action{color:var(--brand);font-size:10px;font-weight:800}.panel{border:1px solid var(--line);border-radius:17px;background:#fff}.st{font-size:11px;font-weight:800}.link{color:var(--brand);font-size:8px;font-weight:800}.section{display:flex;justify-content:space-between;align-items:center;margin:13px 1px 4px}
|
||
.hero{padding:17px 18px;border-radius:19px;color:#fff;background:var(--brand)}.hero small{color:#d9efeb}.heroValue{margin:5px 0 14px;font:700 29px Georgia}.heroMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.heroMeta span{color:#c9e6e0;font-size:8px}.heroMeta b{display:block;margin-top:3px;color:#fff;font:700 11px Georgia}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:11px 0}.quick>div{padding:9px 2px 8px;border:1px solid var(--line);border-radius:14px;text-align:center;background:#fff}.qicon,.cicon,.ricon{display:grid;place-items:center;color:var(--brand);background:var(--soft)}.qicon{width:28px;height:28px;margin:0 auto 5px;border-radius:9px;font-size:13px}.quick span{font-size:8px;font-weight:700}.budget{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 13px}.track{height:5px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--soft)}.track i{display:block;width:var(--w,63%);height:100%;background:var(--brand)}.budgetVal{color:var(--brand);font:800 16px Georgia}
|
||
.tx{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}.cicon{width:34px;height:34px;border-radius:11px;font-size:12px;font-weight:800}.tx b{font-size:10px}.tx small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.money{font:800 11px Georgia}.out{color:var(--expense)}.income{color:var(--brand)}.nav{position:absolute;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,1fr);height:68px;padding:8px 9px 9px;border-top:1px solid var(--line);background:#fff}.nav>div{display:grid;place-items:center;gap:2px;color:var(--faint);font-size:8px}.nav b{font-size:14px}.nav .on{color:var(--brand);font-weight:800}.nav .add{transform:translateY(-15px)}.fab{display:grid;width:42px;height:42px;place-items:center;border:4px solid var(--bg);border-radius:50%;color:#fff;background:var(--brand);box-shadow:0 7px 15px var(--shadow);font-size:20px}
|
||
.chat{display:grid;grid-template-rows:auto 1fr auto;padding:8px 13px 14px}.person{display:flex;align-items:center;gap:8px}.aiAvatar{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:var(--ai);background:var(--aiSoft);font-size:16px}.online{color:var(--brand);font-size:8px}.log{overflow:hidden;padding:9px 3px}.stamp{margin-bottom:13px;color:var(--faint);font-size:8px;text-align:center}.msg{display:flex;gap:7px;margin-bottom:11px}.msg.me{justify-content:flex-end}.miniAI{display:grid;flex:0 0 25px;height:25px;place-items:center;border-radius:8px;color:var(--ai);background:var(--aiSoft);font-size:9px;font-weight:800}.bubble{max-width:77%;padding:10px 11px;border:1px solid var(--line);border-radius:6px 15px 15px 15px;background:#fff;font-size:10px;line-height:1.55}.me .bubble{border-color:var(--brand);border-radius:15px 6px 15px 15px;color:#fff;background:var(--brand)}.thinking{display:inline-flex;gap:6px;margin:0 0 11px 32px;padding:6px 9px;border-radius:99px;color:var(--ai);background:var(--aiSoft);font-size:8px;font-weight:700}.chatBill{margin:0 0 11px 32px;padding:11px;border-color:#cfd9e4}.billHead{display:flex;justify-content:space-between;margin-bottom:7px;color:var(--ai);font-size:8px;font-weight:800}.ok{padding:3px 7px;border-radius:99px;color:var(--brand);background:var(--soft)}.composer{display:grid;grid-template-columns:30px 1fr 30px 34px;align-items:center;gap:6px;padding:7px;border:1px solid var(--line);border-radius:18px;background:#fff}.composeBtn{display:grid;width:30px;height:30px;place-items:center;border:0;border-radius:10px;color:var(--muted);background:var(--bg)}.composeBtn.send{color:#fff;background:var(--brand)}.placeholder{color:var(--faint);font-size:9px}
|
||
.segments{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#fff}.seg{padding:9px;border-radius:9px;color:var(--muted);text-align:center;font-size:10px;font-weight:800}.seg.on{color:#fff;background:var(--brand)}.amount{padding:24px 0 18px;text-align:center}.amount small{color:var(--muted)}.amount b{display:block;margin-top:4px;color:var(--expense);font:700 38px Georgia}.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;margin-top:10px}.cat{padding:7px 2px;border:1px solid transparent;border-radius:12px;text-align:center}.cat.on{border-color:var(--brand);background:var(--soft)}.cat .cicon{margin:0 auto 5px}.cat span{font-size:8px;font-weight:700}.form{margin-top:13px;padding:2px 13px}.formRow{display:grid;grid-template-columns:20px 67px 1fr 15px;align-items:center;gap:5px;min-height:42px;border-bottom:1px solid var(--line);font-size:9px}.formRow:last-child{border:0}.lab{color:var(--muted)}.val{text-align:right;font-weight:700}.primary{display:grid;width:100%;min-height:44px;margin-top:14px;place-items:center;border:0;border-radius:14px;color:#fff;background:var(--brand);font-size:11px;font-weight:800}
|
||
.months{display:flex;justify-content:center;gap:18px;margin:1px 0 11px;color:var(--muted);font-size:9px}.months b{color:var(--ink);font-size:11px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.metric{padding:11px 9px}.metric span{color:var(--muted);font-size:8px}.metric b{display:block;margin-top:5px;font:700 14px Georgia}.chartCard{margin-top:10px;padding:13px}.barRow{display:grid;grid-template-columns:44px 1fr 43px;align-items:center;gap:7px;margin-top:10px;font-size:8px}.bar{height:7px;overflow:hidden;border-radius:99px;background:var(--soft)}.bar i{display:block;width:var(--w);height:100%;background:var(--brand)}.barRow b{font:700 9px Georgia;text-align:right}.aiReport{margin-top:10px;padding:13px;border-color:#cfd9e4;background:var(--aiSoft)}.aiHead{color:var(--ai);font-size:9px;font-weight:800}.aiReport strong{display:block;margin-top:8px;font-size:12px;line-height:1.45}.aiReport p{margin:5px 0 0;color:var(--muted);font-size:8px;line-height:1.55}
|
||
.profile{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:11px;padding:14px}.avatar{display:grid;width:50px;height:50px;place-items:center;border-radius:16px;color:#fff;background:var(--brand);font:800 20px serif}.profileName{font-size:14px;font-weight:800}.ledger{margin-top:10px;padding:13px}.ledgerTop{display:flex;justify-content:space-between}.ledgerName{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800}.dot{width:9px;height:9px;border-radius:3px;background:var(--brand)}.ledgerStats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.ledgerStat{padding:9px;border-radius:10px;background:var(--bg)}.ledgerStat span{color:var(--muted);font-size:8px}.ledgerStat b{display:block;margin-top:3px;font:700 12px Georgia}.settings{margin-top:10px;padding:0 13px}.setting{display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;min-height:49px;border-bottom:1px solid var(--line)}.setting:last-child{border:0}.ricon{width:31px;height:31px;border-radius:10px;font-size:12px;font-weight:800}.ricon.ai{color:var(--ai);background:var(--aiSoft)}.setting b{font-size:10px}.setting p{margin:2px 0 0;color:var(--muted);font-size:8px}.chev{color:var(--faint)}
|
||
.captureState{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding:10px 11px;color:var(--deep);background:var(--soft)}.stateMark{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;color:#fff;background:var(--brand)}.captureState b{font-size:9px}.captureState p{margin:2px 0 0;color:var(--muted);font-size:8px}.warning{display:flex;gap:7px;margin-bottom:9px;padding:9px 10px;border:1px solid #f1d79e;border-radius:12px;color:var(--warning);background:var(--warningSoft);font-size:8px;line-height:1.45}.parsed{margin-bottom:9px;padding:12px}.parsedHead{display:flex;justify-content:space-between;margin-bottom:9px;font-size:9px;font-weight:800}.confidence{color:var(--brand);font-size:8px}.parsedMain{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px}.parsedMain .cicon{width:38px;height:38px}.parsedAmount{color:var(--expense);font:800 16px Georgia}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chip{padding:5px 7px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:var(--bg);font-size:8px}.captureFooter{position:absolute;right:13px;bottom:13px;left:13px}.captureFooter .primary{margin:0}
|
||
@media(max-width:1180px){.grid{grid-template-columns:repeat(2,minmax(350px,1fr))}}@media(max-width:790px){.page{width:min(100% - 18px,430px);padding:30px 0 52px}.head{grid-template-columns:1fr;gap:18px}.palette{justify-self:start}.grid{grid-template-columns:1fr;gap:18px}.case{padding:15px 9px 18px}.phone{height:760px}}
|
||
</style></head>
|
||
<body><main class="page"><header class="head"><div><div class="kicker">JIZHI UI STUDY · 02</div><h1>克制青绿 · 六页面</h1><p class="intro">白色承载内容，青绿只负责品牌与操作，红色只提示支出，低饱和蓝只标识 AI。界面不依赖装饰性效果，让账本信息成为视觉中心。</p></div><div class="palette"><i style="--c:#f4f7f6"></i><i style="--c:#fff"></i><i style="--c:#087f6d"></i><i style="--c:#17201e"></i></div></header><section class="grid">
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 01</div><h2>首页 · 明细</h2><div class="note">结余、预算和今日账单</div></div><span class="tag">主视觉</span></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="brand"><img class="logo" src="frontend/assets/branding/jizhi-app-icon-1024.png"><div><b>记之</b><div class="micro">日常账本</div></div></div><div class="square">•••</div></div><section class="hero"><small>七月结余</small><div class="heroValue">¥ 4,286.50</div><div class="heroMeta"><span>收入<b>¥ 8,640</b></span><span>支出<b>¥ 4,353</b></span><span>共计<b>48 笔</b></span></div></section><div class="quick"><div><i class="qicon">声</i><span>语音记账</span></div><div><i class="qicon">拍</i><span>拍照识别</span></div><div><i class="qicon">截</i><span>截屏记账</span></div><div><i class="qicon">问</i><span>问一问</span></div></div><section class="panel budget"><div><b class="st">本月预算</b><div class="sub">已使用 63%，当前节奏正常</div><div class="track"><i></i></div></div><div class="budgetVal">¥ 1,847</div></section><div class="section"><b class="st">今天</b><span class="link">全部明细</span></div><div class="tx"><div class="cicon">餐</div><div><b>午餐</b><small>餐饮 · 12:26</small></div><div class="money out">- ¥28</div></div><div class="tx"><div class="cicon">行</div><div><b>地铁</b><small>交通 · 08:41</small></div><div class="money out">- ¥4</div></div><div class="tx"><div class="cicon">收</div><div><b>稿费到账</b><small>兼职 · 07:30</small></div><div class="money income">+ ¥680</div></div></div><nav class="nav"><div class="on"><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 02</div><h2>AI 聊天</h2><div class="note">蓝色仅标识 AI 身份与状态</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen chat"><div class="top"><div class="person"><div class="square">‹</div><div class="aiAvatar">✦</div><div><b class="title">小记</b><div class="online">已连接 · 日常账本</div></div></div><div class="square">•••</div></div><div class="log"><div class="stamp">今天 14:28</div><div class="msg me"><div class="bubble">今天兼职赚了 680 元，午饭花了 28。</div></div><div class="thinking">● 正在核对账本分类</div><div class="msg"><div class="miniAI">记</div><div class="bubble">已识别到 2 笔：兼职收入 680 元、餐饮支出 28 元。</div></div><section class="panel chatBill"><div class="billHead"><span>✦ AI 入账结果</span><span class="ok">已记录</span></div><div class="tx"><div class="cicon">收</div><div><b>兼职收入</b><small>今天 14:28</small></div><div class="money income">+ ¥680</div></div><div class="tx"><div class="cicon">餐</div><div><b>午饭</b><small>餐饮 · 14:28</small></div><div class="money out">- ¥28</div></div></section><div class="msg"><div class="miniAI">记</div><div class="bubble">本月收入是 8,640 元，结余 4,286.50 元。</div></div></div><div class="composer"><button class="composeBtn">⌨</button><div class="placeholder">说说今天的收入或支出...</div><button class="composeBtn">☺</button><button class="composeBtn send">↑</button></div></div></div></article>
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 03</div><h2>记一笔</h2><div class="note">纯色切换、分类和确认操作</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="square">‹</div><div class="title">记一笔</div><span class="action">日常账本</span></div><div class="segments"><div class="seg on">支出</div><div class="seg">收入</div></div><div class="amount"><small>金额</small><b>¥ 28.00</b></div><b class="st">选择分类</b><div class="cats"><div class="cat on"><div class="cicon">餐</div><span>餐饮</span></div><div class="cat"><div class="cicon">购</div><span>购物</span></div><div class="cat"><div class="cicon">行</div><span>交通</span></div><div class="cat"><div class="cicon">住</div><span>居住</span></div><div class="cat"><div class="cicon">礼</div><span>人情</span></div><div class="cat"><div class="cicon">卡</div><span>账单</span></div><div class="cat"><div class="cicon">娱</div><span>娱乐</span></div><div class="cat"><div class="cicon">•••</div><span>其他</span></div></div><section class="panel form"><div class="formRow"><span>✎</span><span class="lab">备注</span><span class="val">园区食堂</span><span class="chev">›</span></div><div class="formRow"><span>▭</span><span class="lab">支付方式</span><span class="val">微信支付</span><span class="chev">›</span></div><div class="formRow"><span>□</span><span class="lab">时间</span><span class="val">今天 12:26</span><span class="chev">›</span></div></section><button class="primary">确认记账</button></div></div></article>
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 04</div><h2>统计 · 月报</h2><div class="note">业务图表青绿，AI 摘要蓝灰</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">统计</div><div class="square">□</div></div><div class="months"><span>六月</span><b>2026 年 7 月</b><span>八月</span></div><div class="metrics"><section class="panel metric"><span>收入</span><b class="income">¥8,640</b></section><section class="panel metric"><span>支出</span><b class="out">¥4,353</b></section><section class="panel metric"><span>结余</span><b>¥4,286</b></section></div><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">支出分类</b><span class="link">共 48 笔</span></div><div class="barRow"><span>餐饮</span><div class="bar"><i style="--w:78%"></i></div><b>¥1,420</b></div><div class="barRow"><span>购物</span><div class="bar"><i style="--w:54%"></i></div><b>¥986</b></div><div class="barRow"><span>交通</span><div class="bar"><i style="--w:34%"></i></div><b>¥628</b></div><div class="barRow"><span>居住</span><div class="bar"><i style="--w:26%"></i></div><b>¥480</b></div></section><section class="panel chartCard"><div class="section" style="margin-top:0"><b class="st">预算进度</b><span class="budgetVal">63%</span></div><div class="sub">本月预算 ¥6,200，剩余 ¥1,847</div><div class="track"><i></i></div></section><section class="panel aiReport"><div class="aiHead">✦ 小记月报</div><strong>这个月花得更稳了，结余比上月多 12%</strong><p>餐饮支出下降 186 元，交通预算仍有 372 元可用。以上金额均来自当前账本。</p></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div class="on"><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div><b>○</b><span>我的</span></div></nav></div></article>
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 05</div><h2>我的</h2><div class="note">账号、账本和数据入口</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen"><div class="top"><div class="title">我的</div><div class="square">⚙</div></div><section class="panel profile"><div class="avatar">南</div><div><div class="profileName">南浔</div><div class="sub">已连续记账 26 天</div></div><span class="chev">›</span></section><section class="panel ledger"><div class="ledgerTop"><div class="ledgerName"><i class="dot"></i>日常账本</div><span class="link">切换</span></div><div class="ledgerStats"><div class="ledgerStat"><span>本月结余</span><b>¥4,286</b></div><div class="ledgerStat"><span>本月账单</span><b>48 笔</b></div></div></section><section class="panel settings"><div class="setting"><div class="ricon">预</div><div><b>预算管理</b><p>本月剩余 ¥1,847</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">类</div><div><b>分类管理</b><p>自定义图标与排序</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon ai">AI</div><div><b>AI 伙伴</b><p>小记 · 理性陪伴</p></div><span class="chev">›</span></div></section><section class="panel settings"><div class="setting"><div class="ricon">本</div><div><b>账本管理</b><p>新建、重命名和切换</p></div><span class="chev">›</span></div><div class="setting"><div class="ricon">数</div><div><b>账号与数据</b><p>导出、密码与账号管理</p></div><span class="chev">›</span></div></section></div><nav class="nav"><div><b>⌂</b><span>明细</span></div><div><b>▥</b><span>统计</span></div><div class="add"><div class="fab">＋</div><span>记一笔</span></div><div class="on"><b>○</b><span>我的</span></div></nav></div></article>
|
||
<article class="case"><header class="caseHead"><div><div class="idx">SCREEN 06</div><h2>截屏识别确认</h2><div class="note">多账单、时间和分类确认</div></div></header><div class="phone"><div class="status"><span>9:41</span><span class="sys">◢ ▰</span></div><div class="screen" style="padding-bottom:68px"><div class="top"><div class="square">‹</div><div class="title">确认识别结果</div><span class="action">2 笔</span></div><section class="panel captureState"><div class="stateMark">✓</div><div><b>图片解析完成</b><p>请核对金额、分类和原始交易时间</p></div></section><div class="warning"><span>△</span><span>第 2 笔只识别到日期，已使用当前时间，可点击时间重新选择。</span></div><section class="panel parsed"><div class="parsedHead"><span>账单 1</span><span class="confidence">识别可信</span></div><div class="parsedMain"><div class="cicon">餐</div><div><b>午餐</b><div class="sub">美团支付 · 餐饮</div></div><div class="parsedAmount">- ¥32.80</div></div><div class="chips"><span class="chip">餐饮</span><span class="chip">7月18日 12:36</span><span class="chip">修改</span></div></section><section class="panel parsed"><div class="parsedHead"><span>账单 2</span><span class="confidence" style="color:var(--warning)">需核对时间</span></div><div class="parsedMain"><div class="cicon">购</div><div><b>生活用品</b><div class="sub">支付宝 · 购物</div></div><div class="parsedAmount">- ¥86.50</div></div><div class="chips"><span class="chip">购物</span><span class="chip">今天 14:41</span><span class="chip">修改</span></div></section></div><div class="captureFooter"><button class="primary">确认保存 2 笔账单</button></div></div></article>
|
||
</section></main></body></html> |