1919 lines
123 KiB
HTML
1919 lines
123 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI 记账 · 高保真 UI 稿 v0.5</title>
|
||
<style>
|
||
:root{
|
||
--primary:#00B386; /* 清新薄荷绿 */
|
||
--primary-deep:#009973;
|
||
--primary-bg:#E6F7F1;
|
||
--ai:#5B6BF5; /* AI 专属靛蓝 */
|
||
--ai-bg:#EEF0FE;
|
||
--red:#F0642D;
|
||
--text:#191F26;
|
||
--text2:#5E6772;
|
||
--text3:#9AA3AD;
|
||
--bg:#F6F7F9;
|
||
--card:#FFFFFF;
|
||
--line:#EEF0F3;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
|
||
body{
|
||
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
|
||
background:#F0F2F5;color:var(--text);padding:48px 20px 80px;
|
||
}
|
||
svg{display:block;}
|
||
.ic{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
|
||
h1.page-title{text-align:center;font-size:24px;font-weight:700;margin-bottom:6px;color:#191F26;}
|
||
p.page-sub{color:#9AA3AD;text-align:center;font-size:13px;margin-bottom:44px;}
|
||
.section-label{
|
||
color:#191F26;font-size:17px;font-weight:700;margin:56px auto 22px;max-width:1400px;
|
||
display:flex;align-items:center;gap:10px;
|
||
}
|
||
.section-label .tag{font-size:11px;font-weight:600;color:#fff;background:var(--primary);padding:4px 11px;border-radius:20px;}
|
||
.section-label .tag.ai{background:var(--ai);}
|
||
.row{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;max-width:1400px;margin:0 auto;}
|
||
.frame-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
|
||
.frame-name{color:#9AA3AD;font-size:13px;}
|
||
|
||
/* ============ 手机壳 ============ */
|
||
.phone{
|
||
width:375px;height:812px;background:var(--bg);border-radius:44px;
|
||
box-shadow:0 0 0 10px #1c1f24,0 0 0 12px #3c4149,0 24px 60px rgba(20,30,40,.35);
|
||
overflow:hidden;position:relative;display:flex;flex-direction:column;
|
||
}
|
||
.statusbar{
|
||
height:44px;flex:none;display:flex;justify-content:space-between;align-items:center;
|
||
padding:0 26px;font-size:13.5px;font-weight:600;position:relative;z-index:5;color:var(--text);
|
||
}
|
||
.statusbar.light{color:#fff;}
|
||
.statusbar .notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:150px;height:26px;background:#1c1f24;border-radius:0 0 16px 16px;}
|
||
.statusbar .sb-ics{display:flex;gap:5px;align-items:center;}
|
||
.screen{flex:1;overflow:hidden;display:flex;flex-direction:column;position:relative;}
|
||
.homebar{height:22px;flex:none;display:flex;justify-content:center;align-items:center;}
|
||
.homebar i{width:128px;height:5px;border-radius:3px;background:#1c1f24;display:block;opacity:.9;}
|
||
|
||
.navbar{height:48px;flex:none;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;position:relative;background:var(--bg);}
|
||
.navbar .back{position:absolute;left:14px;color:var(--text);display:flex;}
|
||
.navbar .action{position:absolute;right:16px;font-size:13px;color:var(--primary);font-weight:500;}
|
||
.content{flex:1;overflow:hidden;padding:0 16px;}
|
||
.card{background:var(--card);border-radius:14px;padding:16px;border:.5px solid var(--line);}
|
||
|
||
/* tabbar */
|
||
.tabbar{flex:none;height:60px;background:#fff;border-top:.5px solid var(--line);display:flex;align-items:center;justify-content:space-around;}
|
||
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--text3);width:56px;}
|
||
.tab.active{color:var(--primary);font-weight:600;}
|
||
.tab-fab{
|
||
width:46px;height:46px;border-radius:16px;margin-top:-24px;background:var(--primary);
|
||
display:flex;align-items:center;justify-content:center;color:#fff;
|
||
box-shadow:0 6px 14px rgba(0,179,134,.32);border:3px solid var(--bg);
|
||
}
|
||
|
||
/* AI 头像（SVG 猫） */
|
||
.ai-face{border-radius:50%;background:var(--ai-bg);display:flex;align-items:center;justify-content:center;color:var(--ai);flex:none;}
|
||
.ai-face.solid{background:var(--ai);color:#fff;}
|
||
|
||
/* ============ P1 首页 ============ */
|
||
.home-header{margin:0 -16px;padding:14px 20px 20px;background:var(--bg);}
|
||
.home-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
|
||
.home-top .book{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;}
|
||
.home-top .book svg{color:var(--text3);}
|
||
.home-top .rt{display:flex;gap:16px;color:var(--text2);}
|
||
.hero{
|
||
background:linear-gradient(135deg,var(--primary) 0%,#00C99A 100%);
|
||
border-radius:18px;padding:20px;color:#fff;position:relative;overflow:hidden;
|
||
}
|
||
.hero::after{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);}
|
||
.hero::before{content:"";position:absolute;right:30px;bottom:-60px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.06);}
|
||
.hero .lb{font-size:12px;opacity:.85;display:flex;align-items:center;gap:6px;}
|
||
.hero .num{font-size:32px;font-weight:700;margin:6px 0 16px;font-variant-numeric:tabular-nums;letter-spacing:.3px;}
|
||
.hero .io{display:flex;gap:0;font-size:11.5px;opacity:.95;position:relative;z-index:1;}
|
||
.hero .io > div{flex:1;}
|
||
.hero .io b{display:block;font-size:15px;margin-top:3px;font-weight:600;font-variant-numeric:tabular-nums;}
|
||
.hero .bdg{
|
||
margin-top:14px;background:rgba(255,255,255,.14);border-radius:10px;padding:9px 12px;
|
||
display:flex;align-items:center;gap:10px;font-size:11px;position:relative;z-index:1;backdrop-filter:blur(4px);
|
||
}
|
||
.hero .bdg .bar{flex:1;height:4px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden;}
|
||
.hero .bdg .bar i{display:block;height:100%;width:62%;background:#fff;border-radius:2px;}
|
||
|
||
.ai-entry{
|
||
margin-top:12px;background:#fff;border:.5px solid var(--line);
|
||
border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;
|
||
}
|
||
.ai-entry .txt{flex:1;min-width:0;}
|
||
.ai-entry .t1{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
|
||
.ai-entry .t1 .dot{width:6px;height:6px;background:var(--primary);border-radius:50%;}
|
||
.ai-entry .t2{font-size:11.5px;color:var(--text2);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||
.ai-entry .go{flex:none;color:var(--ai);font-size:12px;padding:6px 12px;border-radius:16px;font-weight:600;background:var(--ai-bg);}
|
||
|
||
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 10px;}
|
||
.sec-head .h{font-size:14px;font-weight:700;}
|
||
.sec-head .more{font-size:11.5px;color:var(--text3);}
|
||
.day-group{background:#fff;border-radius:14px;padding:2px 14px;border:.5px solid var(--line);}
|
||
.day-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text3);padding:10px 2px 7px;border-bottom:.5px solid var(--line);}
|
||
.titem{display:flex;align-items:center;gap:12px;padding:11px 2px;}
|
||
.titem + .titem{border-top:.5px solid var(--line);}
|
||
.cat-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;}
|
||
.titem .mid{flex:1;min-width:0;}
|
||
.titem .n{font-size:13.5px;font-weight:500;}
|
||
.titem .d{font-size:10.5px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:5px;}
|
||
.ai-badge{font-size:9px;color:var(--ai);background:var(--ai-bg);padding:1.5px 6px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:3px;}
|
||
.titem .amt{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;}
|
||
.amt.in{color:var(--primary);}
|
||
|
||
/* ============ P2 手动记账 ============ */
|
||
.seg{display:flex;background:#EBEDF0;border-radius:9px;padding:3px;margin:8px auto 2px;width:216px;}
|
||
.seg span{flex:1;text-align:center;font-size:13px;padding:6px 0;border-radius:7px;color:var(--text2);}
|
||
.seg span.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(25,31,38,.08);}
|
||
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 0;padding:6px 2px;}
|
||
.cat{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 0;font-size:11px;color:var(--text2);}
|
||
.cat .ci{width:44px;height:44px;border-radius:14px;background:#fff;border:.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text2);}
|
||
.cat.on{color:var(--primary);font-weight:600;}
|
||
.cat.on .ci{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 4px 10px rgba(0,179,134,.28);}
|
||
.amount-panel{background:#fff;border-top:.5px solid var(--line);padding:12px 18px 8px;flex:none;}
|
||
.amount-line{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:.5px solid var(--line);}
|
||
.amount-line .cat-mini{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;}
|
||
.amount-line .num{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;}
|
||
.amount-line .num i{font-style:normal;display:inline-block;width:2px;height:26px;background:var(--primary);margin-left:2px;animation:blink 1s infinite;vertical-align:-3px;}
|
||
@keyframes blink{50%{opacity:0;}}
|
||
.memo-line{display:flex;gap:8px;padding:10px 0;font-size:11.5px;overflow:hidden;}
|
||
.memo-chip{background:#F2F3F5;padding:5px 11px;border-radius:13px;white-space:nowrap;color:var(--text2);display:flex;align-items:center;gap:5px;}
|
||
.memo-chip.on{background:var(--primary-bg);color:var(--primary-deep);}
|
||
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px 0 10px;}
|
||
.key{height:50px;background:#F4F5F7;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;}
|
||
.key.fn{font-size:13px;color:var(--text2);font-weight:500;}
|
||
.key.ok{grid-row:span 2;height:auto;background:var(--primary);color:#fff;font-size:15px;font-weight:600;box-shadow:0 4px 12px rgba(0,179,134,.25);}
|
||
|
||
/* ============ P3 统计 ============ */
|
||
.stat-tabs{display:flex;gap:20px;justify-content:center;font-size:13.5px;color:var(--text2);padding:6px 0 2px;background:var(--bg);}
|
||
.stat-tabs .on{color:var(--text);font-weight:700;position:relative;}
|
||
.stat-tabs .on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;width:16px;height:3px;border-radius:2px;background:var(--primary);}
|
||
.month-pick{display:flex;justify-content:center;align-items:center;gap:16px;font-size:12.5px;color:var(--text2);padding:14px 0 8px;}
|
||
.month-pick b{font-size:14.5px;color:var(--text);}
|
||
.donut-wrap{display:flex;align-items:center;gap:16px;}
|
||
.donut{
|
||
width:126px;height:126px;border-radius:50%;flex:none;position:relative;
|
||
background:conic-gradient(#00B386 0 34%, #5B6BF5 34% 55%, #F5A623 55% 71%, #4DA6FF 71% 84%, #F0642D 84% 93%, #E3E6EA 93% 100%);
|
||
}
|
||
.donut::after{content:"";position:absolute;inset:20px;background:#fff;border-radius:50%;}
|
||
.donut .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;}
|
||
.donut .c .t{font-size:10px;color:var(--text3);}
|
||
.donut .c .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;}
|
||
.legend{flex:1;display:flex;flex-direction:column;gap:8px;font-size:11.5px;}
|
||
.legend .li{display:flex;align-items:center;gap:7px;color:var(--text2);}
|
||
.legend .sw{width:8px;height:8px;border-radius:2.5px;flex:none;}
|
||
.legend .pct{margin-left:auto;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;}
|
||
.bars{display:flex;align-items:flex-end;gap:9px;height:104px;padding:14px 4px 0;}
|
||
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;color:var(--text3);}
|
||
.bar i{width:100%;max-width:20px;border-radius:5px 5px 2px 2px;background:#DFF3EC;display:block;}
|
||
.bar.hl i{background:var(--primary);}
|
||
.bar.hl{color:var(--primary);font-weight:600;}
|
||
.rank-item{display:flex;align-items:center;gap:12px;padding:9px 2px;}
|
||
.rank-item .info{flex:1;}
|
||
.rank-item .n{font-size:12.5px;font-weight:500;display:flex;justify-content:space-between;}
|
||
.rank-item .n b{font-variant-numeric:tabular-nums;}
|
||
.prog{height:4px;background:#F0F2F5;border-radius:2px;margin-top:7px;overflow:hidden;}
|
||
.prog i{display:block;height:100%;border-radius:2px;}
|
||
.ai-insight{margin-top:12px;background:var(--ai-bg);border-radius:14px;padding:14px;font-size:12px;color:#4A5160;line-height:1.7;}
|
||
.ai-insight .h{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ai);margin-bottom:6px;}
|
||
|
||
/* ============ P4 聊天 ============ */
|
||
.chat-nav{height:52px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border-bottom:.5px solid var(--line);}
|
||
.chat-nav .who{flex:1;display:flex;align-items:center;gap:10px;}
|
||
.chat-nav .meta .n{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:6px;}
|
||
.persona-chip{font-size:9px;background:var(--ai-bg);color:var(--ai);padding:2px 7px;border-radius:8px;font-weight:600;}
|
||
.chat-nav .meta .s{font-size:10px;color:var(--primary);display:flex;align-items:center;gap:4px;margin-top:1px;}
|
||
.chat-nav .meta .s::before{content:"";width:5px;height:5px;background:var(--primary);border-radius:50%;}
|
||
.chat-body{flex:1;overflow:hidden;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;background:var(--bg);}
|
||
.time-tag{align-self:center;font-size:10px;color:var(--text3);padding:2px 10px;}
|
||
.msg{display:flex;gap:9px;max-width:88%;}
|
||
.msg .av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
|
||
.msg.me{align-self:flex-end;flex-direction:row-reverse;}
|
||
.msg.me .av{background:#E2E6EB;color:var(--text2);}
|
||
.bubble{background:#fff;border-radius:3px 15px 15px 15px;padding:10px 13px;font-size:13px;line-height:1.55;border:.5px solid var(--line);}
|
||
.msg.me .bubble{background:var(--primary);color:#fff;border:none;border-radius:15px 3px 15px 15px;}
|
||
.sticker-card{
|
||
width:104px;border-radius:14px;background:#fff;border:.5px solid var(--line);
|
||
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px 10px;
|
||
}
|
||
.sticker-card .t{font-size:10px;color:var(--text2);font-weight:600;}
|
||
.bill-card{width:232px;background:#fff;border-radius:14px;overflow:hidden;border:.5px solid var(--line);}
|
||
.bill-card .bc-head{background:var(--ai);color:#fff;padding:8px 13px;font-size:11px;display:flex;align-items:center;gap:6px;font-weight:600;}
|
||
.bill-card .bc-body{padding:12px 13px;display:flex;align-items:center;gap:11px;}
|
||
.bill-card .bc-amt{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;}
|
||
.bill-card .bc-cat{font-size:11px;color:var(--text2);margin-top:2px;}
|
||
.bill-card .bc-foot{display:flex;border-top:.5px solid var(--line);font-size:12px;text-align:center;}
|
||
.bill-card .bc-foot span{flex:1;padding:9px 0;color:var(--text2);}
|
||
.bill-card .bc-foot span + span{border-left:.5px solid var(--line);color:var(--ai);font-weight:600;}
|
||
.chat-input{flex:none;background:#fff;border-top:.5px solid var(--line);padding:9px 12px;display:flex;align-items:center;gap:10px;color:var(--text2);}
|
||
.chat-input .field{flex:1;background:#F2F3F5;border-radius:18px;padding:9px 14px;font-size:12.5px;color:var(--text3);}
|
||
.quick-row{display:flex;gap:8px;padding:8px 12px 4px;background:#fff;overflow:hidden;}
|
||
.quick{font-size:11px;color:var(--text2);background:#F2F3F5;padding:5px 12px;border-radius:13px;white-space:nowrap;display:flex;align-items:center;gap:5px;}
|
||
.quick svg{color:var(--primary);}
|
||
|
||
/* ============ P5 性格设置 ============ */
|
||
.persona-hero{text-align:center;padding:20px 0 6px;}
|
||
.persona-hero .n{font-size:16px;font-weight:700;margin-top:10px;}
|
||
.persona-hero .d{font-size:11.5px;color:var(--text3);margin-top:3px;}
|
||
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
|
||
.p-card{background:#fff;border-radius:14px;padding:13px;border:1.5px solid var(--line);position:relative;}
|
||
.p-card.on{border-color:var(--ai);background:#FBFBFF;}
|
||
.p-card .check{position:absolute;top:10px;right:10px;width:17px;height:17px;border-radius:50%;background:var(--ai);color:#fff;display:none;align-items:center;justify-content:center;}
|
||
.p-card.on .check{display:flex;}
|
||
.p-card .n{font-size:13.5px;font-weight:700;margin-top:9px;}
|
||
.p-card .d{font-size:10px;color:var(--text2);margin-top:4px;line-height:1.5;}
|
||
.p-card .sample{margin-top:9px;font-size:10px;background:var(--bg);border-radius:8px 8px 8px 2px;padding:7px 9px;color:var(--text2);line-height:1.5;}
|
||
.slider-block .lb{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:8px;}
|
||
.slider-block .lb b{color:var(--text);}
|
||
.track{height:5px;border-radius:3px;background:#E8EAEF;position:relative;}
|
||
.track i{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--ai);}
|
||
.track .knob{position:absolute;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,.18);border:2px solid var(--ai);}
|
||
.save-btn{margin-top:16px;background:var(--ai);color:#fff;text-align:center;padding:13px;border-radius:13px;font-size:14.5px;font-weight:600;box-shadow:0 6px 16px rgba(91,107,245,.3);}
|
||
|
||
/* ============ P6 我的 ============ */
|
||
.me-head{padding:14px 4px 18px;display:flex;align-items:center;gap:14px;}
|
||
.me-head .av{width:56px;height:56px;border-radius:50%;background:#fff;border:.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text2);}
|
||
.me-head .n{font-size:17px;font-weight:700;display:flex;align-items:center;}
|
||
.me-head .d{font-size:11px;color:var(--text3);margin-top:4px;}
|
||
.vip{font-size:9px;background:var(--text);color:#F5D08C;padding:2px 7px;border-radius:7px;font-weight:700;margin-left:8px;}
|
||
.mode-card{background:#fff;border-radius:14px;padding:15px;border:.5px solid var(--line);}
|
||
.mode-card .h{font-size:13.5px;font-weight:700;margin-bottom:3px;}
|
||
.mode-card .d{font-size:10.5px;color:var(--text3);margin-bottom:12px;}
|
||
.mode-opts{display:flex;gap:10px;}
|
||
.mode-opt{flex:1;border:1.5px solid var(--line);border-radius:12px;padding:12px;position:relative;}
|
||
.mode-opt.on{border-color:var(--primary);background:#FAFFFD;}
|
||
.mode-opt .n{font-size:12.5px;font-weight:700;margin-top:8px;}
|
||
.mode-opt .d{font-size:9.5px;color:var(--text2);margin-top:4px;line-height:1.5;}
|
||
.mode-opt .radio{position:absolute;top:11px;right:11px;width:15px;height:15px;border-radius:50%;border:1.5px solid #C9CEDA;}
|
||
.mode-opt.on .radio{border-color:var(--primary);background:var(--primary);box-shadow:inset 0 0 0 3px #fff;}
|
||
.list-group{margin-top:12px;background:#fff;border-radius:14px;overflow:hidden;border:.5px solid var(--line);}
|
||
.li-row{display:flex;align-items:center;gap:12px;padding:13px 15px;font-size:13.5px;}
|
||
.li-row + .li-row{border-top:.5px solid var(--line);}
|
||
.li-row .lic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;}
|
||
.li-row .val{margin-left:auto;color:var(--text3);font-size:11.5px;display:flex;align-items:center;gap:4px;}
|
||
|
||
/* ============ P7 全AI模式（浅色玻璃） ============ */
|
||
.phone.aimode{background:linear-gradient(165deg,#EEF0FE 0%,#F6F7F9 40%,#E6F7F1 100%);}
|
||
.aimode-head{flex:none;padding:6px 16px 12px;}
|
||
.aimode-head .top{display:flex;align-items:center;gap:11px;}
|
||
.aimode-head .meta{flex:1;}
|
||
.aimode-head .n{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px;}
|
||
.aimode-head .s{font-size:10.5px;color:var(--text3);margin-top:2px;}
|
||
.aimode-head .sw{font-size:10.5px;color:var(--ai);border:1px solid rgba(91,107,245,.35);padding:5px 11px;border-radius:14px;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.6);}
|
||
.mini-dash{margin-top:12px;display:flex;gap:8px;}
|
||
.mini-card{flex:1;background:rgba(255,255,255,.72);border:.5px solid rgba(255,255,255,.9);border-radius:12px;padding:9px 12px;backdrop-filter:blur(8px);}
|
||
.mini-card .t{font-size:9.5px;color:var(--text3);}
|
||
.mini-card .v{font-size:14.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;}
|
||
.mini-card .v.g{color:var(--primary);}
|
||
.mini-card .v.r{color:var(--red);}
|
||
.aimode .chat-body{background:transparent;}
|
||
.aimode .bubble{background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:.5px solid rgba(255,255,255,.9);}
|
||
.aimode .msg.me .bubble{background:var(--ai);border:none;color:#fff;}
|
||
.aimode .msg.me .av{background:rgba(255,255,255,.8);}
|
||
.aimode .bill-card,.aimode .sticker-card{background:rgba(255,255,255,.9);backdrop-filter:blur(6px);}
|
||
.aimode .chat-input{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-top:.5px solid rgba(255,255,255,.9);}
|
||
.aimode .chat-input .field{background:rgba(242,243,245,.9);}
|
||
.aimode .quick-row{background:transparent;}
|
||
.aimode .quick{background:rgba(255,255,255,.72);border:.5px solid rgba(255,255,255,.9);}
|
||
.aimode .quick svg{color:var(--ai);}
|
||
.bc-prog{padding:0 13px 11px;font-size:10px;color:var(--text2);}
|
||
.bc-prog .prog{margin-top:5px;}
|
||
.typing{display:flex;gap:4px;padding:4px 2px;}
|
||
.typing i{width:6px;height:6px;border-radius:50%;background:#B9BFD9;animation:ty 1.2s infinite;}
|
||
.typing i:nth-child(2){animation-delay:.2s;}
|
||
.typing i:nth-child(3){animation-delay:.4s;}
|
||
@keyframes ty{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ======= SVG 图标库 ======= -->
|
||
<svg width="0" height="0" style="position:absolute;">
|
||
<defs>
|
||
<!-- 猫头 AI 形象 -->
|
||
<symbol id="i-cat" viewBox="0 0 24 24">
|
||
<path class="ic" d="M5.5 9.5 4 4.5l4.2 2.1a8 8 0 0 1 7.6 0L20 4.5l-1.5 5A8 8 0 0 1 20 13c0 4.4-3.6 7.5-8 7.5S4 17.4 4 13c0-1.3.6-2.5 1.5-3.5Z"/>
|
||
<circle cx="9" cy="12.5" r="1" fill="currentColor" stroke="none"/>
|
||
<circle cx="15" cy="12.5" r="1" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M10.5 15.8c.9.9 2.1.9 3 0"/>
|
||
</symbol>
|
||
<symbol id="i-sparkle" viewBox="0 0 24 24">
|
||
<path class="ic" d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z"/>
|
||
<path class="ic" d="M18.5 15.5l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9.9-2.1Z"/>
|
||
</symbol>
|
||
<symbol id="i-home" viewBox="0 0 24 24"><path class="ic" d="M4 11.5 12 4l8 7.5M6 10v9h12v-9"/><path class="ic" d="M10 19v-5h4v5"/></symbol>
|
||
<symbol id="i-chart" viewBox="0 0 24 24"><path class="ic" d="M4 20h16"/><path class="ic" d="M7 16v-4M12 16V7M17 16v-6"/></symbol>
|
||
<symbol id="i-chat" viewBox="0 0 24 24"><path class="ic" d="M20 12a8 8 0 0 1-11.6 7.1L4 20l1-4.1A8 8 0 1 1 20 12Z"/><path class="ic" d="M8.5 12h.01M12 12h.01M15.5 12h.01"/></symbol>
|
||
<symbol id="i-user" viewBox="0 0 24 24"><circle class="ic" cx="12" cy="8.5" r="3.5"/><path class="ic" d="M5.5 19.5c1-3.3 3.5-5 6.5-5s5.5 1.7 6.5 5"/></symbol>
|
||
<symbol id="i-plus" viewBox="0 0 24 24"><path class="ic" d="M12 5v14M5 12h14"/></symbol>
|
||
<symbol id="i-search" viewBox="0 0 24 24"><circle class="ic" cx="11" cy="11" r="6.5"/><path class="ic" d="m20 20-3.8-3.8"/></symbol>
|
||
<symbol id="i-bell" viewBox="0 0 24 24"><path class="ic" d="M6 10a6 6 0 1 1 12 0c0 4 1.5 5.5 1.5 5.5h-15S6 14 6 10Z"/><path class="ic" d="M10 19a2.2 2.2 0 0 0 4 0"/></symbol>
|
||
<symbol id="i-eye" viewBox="0 0 24 24"><path class="ic" d="M3 12s3.5-6 9-6 9 6 9 6-3.5 6-9 6-9-6-9-6Z"/><circle class="ic" cx="12" cy="12" r="2.5"/></symbol>
|
||
<symbol id="i-chev-d" viewBox="0 0 24 24"><path class="ic" d="m7 10 5 5 5-5"/></symbol>
|
||
<symbol id="i-chev-r" viewBox="0 0 24 24"><path class="ic" d="m10 7 5 5-5 5"/></symbol>
|
||
<symbol id="i-chev-l" viewBox="0 0 24 24"><path class="ic" d="m14 7-5 5 5 5"/></symbol>
|
||
<symbol id="i-close" viewBox="0 0 24 24"><path class="ic" d="M6 6l12 12M18 6 6 18"/></symbol>
|
||
<symbol id="i-check" viewBox="0 0 24 24"><path class="ic" d="m5 12.5 4.5 4.5L19 7.5"/></symbol>
|
||
<symbol id="i-gear" viewBox="0 0 24 24"><circle class="ic" cx="12" cy="12" r="3"/><path class="ic" d="M12 4.5v-2M12 21.5v-2M19.5 12h2M2.5 12h2M17.3 6.7l1.4-1.4M5.3 18.7l1.4-1.4M17.3 17.3l1.4 1.4M5.3 5.3l1.4 1.4"/></symbol>
|
||
<symbol id="i-mic" viewBox="0 0 24 24"><rect class="ic" x="9" y="3" width="6" height="11" rx="3"/><path class="ic" d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></symbol>
|
||
<symbol id="i-smile" viewBox="0 0 24 24"><circle class="ic" cx="12" cy="12" r="8.5"/><path class="ic" d="M9 10h.01M15 10h.01M8.8 14.2c1.8 1.8 4.6 1.8 6.4 0"/></symbol>
|
||
<symbol id="i-camera" viewBox="0 0 24 24"><path class="ic" d="M4 8h3l1.5-2h7L17 8h3v11H4V8Z"/><circle class="ic" cx="12" cy="13" r="3.2"/></symbol>
|
||
<!-- 分类 -->
|
||
<symbol id="i-food" viewBox="0 0 24 24"><path class="ic" d="M4 11h16a8 8 0 0 1-16 0Z"/><path class="ic" d="M7 8c2-1.5 8-1.5 10 0M12 6V4"/></symbol>
|
||
<symbol id="i-cup" viewBox="0 0 24 24"><path class="ic" d="M7 6h10l-1.2 13H8.2L7 6Z"/><path class="ic" d="M7.5 11h9M11 3l1.5 3"/></symbol>
|
||
<symbol id="i-cart" viewBox="0 0 24 24"><path class="ic" d="M4 5h2.5l1.8 9.5h9.4L20 8H7"/><circle class="ic" cx="9.5" cy="19" r="1.4"/><circle class="ic" cx="16.5" cy="19" r="1.4"/></symbol>
|
||
<symbol id="i-metro" viewBox="0 0 24 24"><rect class="ic" x="6" y="4" width="12" height="13" rx="3"/><path class="ic" d="M6 11h12M9.5 14.5h.01M14.5 14.5h.01M8.5 20l-1.5 1.5M15.5 20l1.5 1.5"/></symbol>
|
||
<symbol id="i-house" viewBox="0 0 24 24"><path class="ic" d="M4 11.5 12 4l8 7.5M6.5 9.7V19h11V9.7"/></symbol>
|
||
<symbol id="i-game" viewBox="0 0 24 24"><path class="ic" d="M7 8h10a4.5 4.5 0 0 1 4.4 5.4l-.6 3a3 3 0 0 1-5.2 1.4L14 16h-4l-1.6 1.8a3 3 0 0 1-5.2-1.4l-.6-3A4.5 4.5 0 0 1 7 8Z"/><path class="ic" d="M8.5 11v3M7 12.5h3M15.5 11.5h.01M17.5 13.5h.01"/></symbol>
|
||
<symbol id="i-pill" viewBox="0 0 24 24"><rect class="ic" x="3.5" y="9" width="17" height="7" rx="3.5" transform="rotate(-40 12 12.5)"/><path class="ic" d="m8.8 8.6 6.4 6.8"/></symbol>
|
||
<symbol id="i-book" viewBox="0 0 24 24"><path class="ic" d="M5 5.5A2.5 2.5 0 0 1 7.5 3H19v15.5H7.5A2.5 2.5 0 0 0 5 21V5.5Z"/><path class="ic" d="M5 18.5A2.5 2.5 0 0 1 7.5 16H19"/></symbol>
|
||
<symbol id="i-shirt" viewBox="0 0 24 24"><path class="ic" d="m9 4-5 3 2 3.5 2-1V20h8v-10.5l2 1L20 7l-5-3a3 3 0 0 1-6 0Z"/></symbol>
|
||
<symbol id="i-gift" viewBox="0 0 24 24"><rect class="ic" x="4" y="9" width="16" height="4"/><path class="ic" d="M6 13v7h12v-7M12 9v11M12 9C9 9 7.5 7.5 8 5.8 8.6 4 11 4.5 12 7c1-2.5 3.4-3 4-1.2.5 1.7-1 3.2-4 3.2Z"/></symbol>
|
||
<symbol id="i-plane" viewBox="0 0 24 24"><path class="ic" d="M10.5 13.5 4 11l1.5-2 6 1 4.5-5.5 2 .8-2.5 6.2 4 2.5-1.2 1.7-4.6-1.2-2.7 3.5-1.6-.6.6-3.9Z"/></symbol>
|
||
<symbol id="i-money" viewBox="0 0 24 24"><circle class="ic" cx="12" cy="12" r="8.5"/><path class="ic" d="M9 9.5 12 12l3-2.5M12 12v5M9.5 14.5h5"/></symbol>
|
||
<symbol id="i-wallet" viewBox="0 0 24 24"><path class="ic" d="M4 7.5A2.5 2.5 0 0 1 6.5 5H18v3"/><path class="ic" d="M4 7.5V18a2 2 0 0 0 2 2h14V8H6.5A2.5 2.5 0 0 1 4 7.5Z"/><path class="ic" d="M16 13.5h.01"/></symbol>
|
||
<symbol id="i-target" viewBox="0 0 24 24"><circle class="ic" cx="12" cy="12" r="8.5"/><circle class="ic" cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="1.2" fill="currentColor" stroke="none"/></symbol>
|
||
<symbol id="i-tag" viewBox="0 0 24 24"><path class="ic" d="m12 3 8 1 1 8-9.5 9.5-9-9L12 3Z"/><circle class="ic" cx="15.5" cy="8.5" r="1.3"/></symbol>
|
||
<symbol id="i-export" viewBox="0 0 24 24"><path class="ic" d="M12 15V4M8 8l4-4 4 4"/><path class="ic" d="M5 14v6h14v-6"/></symbol>
|
||
<symbol id="i-cloud" viewBox="0 0 24 24"><path class="ic" d="M7 18a4 4 0 0 1-.5-8A5.5 5.5 0 0 1 17 8.5 4.2 4.2 0 0 1 17.5 17"/><path class="ic" d="M12 12v7M9.5 14.5 12 12l2.5 2.5"/></symbol>
|
||
<symbol id="i-swap" viewBox="0 0 24 24"><path class="ic" d="M7 9h11l-3-3M17 15H6l3 3"/></symbol>
|
||
<symbol id="i-receipt" viewBox="0 0 24 24"><path class="ic" d="M6 3h12v18l-2-1.5L14 21l-2-1.5L10 21l-2-1.5L6 21V3Z"/><path class="ic" d="M9 8h6M9 12h6"/></symbol>
|
||
<symbol id="i-fire" viewBox="0 0 24 24"><path class="ic" d="M12 21c-3.9 0-6.5-2.4-6.5-6 0-3 2.3-5.4 3.5-7.5.6 1.3 1.3 2 2.3 2.7C11.5 8 12 5.5 14 3c.6 3 4.5 5.6 4.5 11 .1 4-2.6 7-6.5 7Z"/><path class="ic" d="M12 21c-1.8 0-3-1.2-3-3 0-1.5 1.2-2.6 2-4 1.5 1.3 4 2.2 4 4.3 0 1.6-1.2 2.7-3 2.7Z"/></symbol>
|
||
<!-- 表情包用大图标 -->
|
||
<symbol id="i-cat-angry" viewBox="0 0 24 24">
|
||
<path class="ic" d="M5.5 9.5 4 4.5l4.2 2.1a8 8 0 0 1 7.6 0L20 4.5l-1.5 5A8 8 0 0 1 20 13c0 4.4-3.6 7.5-8 7.5S4 17.4 4 13c0-1.3.6-2.5 1.5-3.5Z"/>
|
||
<path class="ic" d="m8 11.5 2 .8M16 11.5l-2 .8M10.2 16.2c1.1-.8 2.5-.8 3.6 0"/>
|
||
</symbol>
|
||
<symbol id="i-cat-happy" viewBox="0 0 24 24">
|
||
<path class="ic" d="M5.5 9.5 4 4.5l4.2 2.1a8 8 0 0 1 7.6 0L20 4.5l-1.5 5A8 8 0 0 1 20 13c0 4.4-3.6 7.5-8 7.5S4 17.4 4 13c0-1.3.6-2.5 1.5-3.5Z"/>
|
||
<path class="ic" d="M8 12.5c.6-.8 1.4-.8 2 0M14 12.5c.6-.8 1.4-.8 2 0M10 15.5c1.2 1.2 2.8 1.2 4 0"/>
|
||
</symbol>
|
||
<symbol id="i-pleading" viewBox="0 0 24 24">
|
||
<circle class="ic" cx="12" cy="12" r="8.5"/>
|
||
<circle class="ic" cx="9" cy="11" r="1.6"/><circle class="ic" cx="15" cy="11" r="1.6"/>
|
||
<circle cx="9.5" cy="10.5" r=".5" fill="currentColor" stroke="none"/><circle cx="15.5" cy="10.5" r=".5" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M10.8 15.5c.8-.5 1.6-.5 2.4 0"/>
|
||
</symbol>
|
||
<!-- v0.4 新增 -->
|
||
<symbol id="i-dog" viewBox="0 0 24 24">
|
||
<path class="ic" d="M7 6.5C5 7.5 4 9.5 4 12c0 4.4 3.6 7.5 8 7.5s8-3.1 8-7.5c0-2.5-1-4.5-3-5.5"/>
|
||
<path class="ic" d="M7 6.5C6.5 4 7.5 2.5 9.5 3.5L11 5M17 6.5c.5-2.5-.5-4-2.5-3l-1.5 1.5"/>
|
||
<circle cx="9.5" cy="11.5" r="1" fill="currentColor" stroke="none"/>
|
||
<circle cx="14.5" cy="11.5" r="1" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M12 14v1.5M12 15.5c-.8.8-1.7.8-2.5.2M12 15.5c.8.8 1.7.8 2.5.2"/>
|
||
</symbol>
|
||
<symbol id="i-robot" viewBox="0 0 24 24">
|
||
<rect class="ic" x="5" y="8" width="14" height="11" rx="3.5"/>
|
||
<path class="ic" d="M12 8V4.5M12 4.5h.01"/><circle class="ic" cx="12" cy="3.8" r="1"/>
|
||
<circle cx="9.5" cy="13" r="1.1" fill="currentColor" stroke="none"/>
|
||
<circle cx="14.5" cy="13" r="1.1" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M10 16.2h4M3 12.5v2M21 12.5v2"/>
|
||
</symbol>
|
||
<symbol id="i-wave" viewBox="0 0 24 24">
|
||
<path class="ic" d="M3 12h1.5M6.5 9v6M10 5.5v13M13.5 8v8M17 10.5v3M20.5 12H21"/>
|
||
</symbol>
|
||
<symbol id="i-scan" viewBox="0 0 24 24">
|
||
<path class="ic" d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16"/>
|
||
<path class="ic" d="M4 12h16"/>
|
||
</symbol>
|
||
<symbol id="i-edit" viewBox="0 0 24 24">
|
||
<path class="ic" d="M14.5 5.5 4 16v4h4L18.5 9.5"/>
|
||
<path class="ic" d="m13 7 4 4M15.5 4.5l2-2 4 4-2 2"/>
|
||
</symbol>
|
||
<symbol id="i-trash" viewBox="0 0 24 24">
|
||
<path class="ic" d="M5 7h14M9 7V4.5h6V7M7 7l1 13h8l1-13M10.5 10.5v6M13.5 10.5v6"/>
|
||
</symbol>
|
||
<symbol id="i-drag" viewBox="0 0 24 24">
|
||
<path class="ic" d="M5 9h14M5 15h14"/>
|
||
</symbol>
|
||
<symbol id="i-baby" viewBox="0 0 24 24">
|
||
<circle class="ic" cx="12" cy="13" r="7.5"/>
|
||
<path class="ic" d="M12 5.5c0-1.5 1-2.5 2.5-2.5"/>
|
||
<circle cx="9.5" cy="12.5" r="1" fill="currentColor" stroke="none"/>
|
||
<circle cx="14.5" cy="12.5" r="1" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M10.5 16c.9.7 2.1.7 3 0"/>
|
||
</symbol>
|
||
<symbol id="i-briefcase" viewBox="0 0 24 24">
|
||
<rect class="ic" x="4" y="8" width="16" height="11" rx="2"/>
|
||
<path class="ic" d="M9 8V6a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 6v2M4 13h16"/>
|
||
</symbol>
|
||
<!-- v0.5 新增 -->
|
||
<symbol id="i-card" viewBox="0 0 24 24">
|
||
<rect class="ic" x="3.5" y="6" width="17" height="12.5" rx="2.5"/>
|
||
<path class="ic" d="M3.5 10h17M7 15h4"/>
|
||
</symbol>
|
||
<symbol id="i-offline" viewBox="0 0 24 24">
|
||
<path class="ic" d="M2.5 8.5C5 6 8.4 4.7 12 4.7c3.6 0 7 1.3 9.5 3.8M5.5 12c1.8-1.7 4-2.6 6.5-2.6 1 0 2 .15 2.9.45M8.6 15.4A5.3 5.3 0 0 1 12 14.2c.6 0 1.2.1 1.7.3"/>
|
||
<circle cx="12" cy="18.5" r="1.2" fill="currentColor" stroke="none"/>
|
||
<path class="ic" d="M4 20 20 4"/>
|
||
</symbol>
|
||
</defs>
|
||
</svg>
|
||
|
||
<h1 class="page-title">AI 记账 APP · 高保真 UI 稿 <span style="color:#9AA3AD;font-weight:400;font-size:15px;">v0.5 清新简约</span></h1>
|
||
<p class="page-sub">主色 薄荷绿 #00B386 · AI 专属色 靛蓝 #5B6BF5 · 全套 SVG 线性图标 · Flutter + .NET</p>
|
||
|
||
<!-- ================= 普通模式 ================= -->
|
||
<div class="section-label"><span class="tag">模式一</span>普通记账模式</div>
|
||
<div class="row">
|
||
|
||
<!-- P1 首页 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span class="sb-ics"><svg width="15" height="15"><use href="#i-chart"/></svg></span></div>
|
||
<div class="screen">
|
||
<div class="content">
|
||
<div class="home-header">
|
||
<div class="home-top">
|
||
<div class="book">日常账本 <svg width="14" height="14"><use href="#i-chev-d"/></svg></div>
|
||
<div class="rt">
|
||
<svg width="19" height="19"><use href="#i-search"/></svg>
|
||
<svg width="19" height="19"><use href="#i-bell"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="hero">
|
||
<div class="lb">7月结余 <svg width="13" height="13" style="opacity:.8;"><use href="#i-eye"/></svg></div>
|
||
<div class="num">¥ 4,286.50</div>
|
||
<div class="io">
|
||
<div>收入<b>¥ 12,800.00</b></div>
|
||
<div>支出<b>¥ 8,513.50</b></div>
|
||
<div>预算剩余<b>¥ 1,900.00</b></div>
|
||
</div>
|
||
<div class="bdg">
|
||
<span>本月预算</span>
|
||
<div class="bar"><i></i></div>
|
||
<b>62%</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-entry">
|
||
<div class="ai-face" style="width:40px;height:40px;"><svg width="24" height="24"><use href="#i-cat"/></svg></div>
|
||
<div class="txt">
|
||
<div class="t1">小账喵 <span class="dot"></span></div>
|
||
<div class="t2">"今天的奶茶已入账，这周第 3 杯了，克制一点喵"</div>
|
||
</div>
|
||
<div class="go">去聊天</div>
|
||
</div>
|
||
|
||
<div class="sec-head"><span class="h">最近账单</span><span class="more">全部 ›</span></div>
|
||
<div class="day-group">
|
||
<div class="day-head"><span>今天 · 7月17日</span><span>支出 ¥86.50</span></div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="19" height="19"><use href="#i-cup"/></svg></div>
|
||
<div class="mid"><div class="n">一点点奶茶</div><div class="d">14:32 <span class="ai-badge"><svg width="8" height="8"><use href="#i-sparkle"/></svg>AI</span></div></div>
|
||
<div class="amt">-18.00</div>
|
||
</div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF8E8;color:#D89614;"><svg width="19" height="19"><use href="#i-food"/></svg></div>
|
||
<div class="mid"><div class="n">午餐 · 兰州拉面</div><div class="d">12:05 <span class="ai-badge"><svg width="8" height="8"><use href="#i-sparkle"/></svg>AI</span></div></div>
|
||
<div class="amt">-26.00</div>
|
||
</div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#EAF3FF;color:#3E82E0;"><svg width="19" height="19"><use href="#i-metro"/></svg></div>
|
||
<div class="mid"><div class="n">地铁通勤</div><div class="d">08:47</div></div>
|
||
<div class="amt">-42.50</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="day-group">
|
||
<div class="day-head"><span>昨天 · 7月16日</span><span>收 ¥500.00 · 支 ¥128.00</span></div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:var(--primary-bg);color:var(--primary);"><svg width="19" height="19"><use href="#i-money"/></svg></div>
|
||
<div class="mid"><div class="n">兼职收入</div><div class="d">20:14</div></div>
|
||
<div class="amt in">+500.00</div>
|
||
</div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FDEFF4;color:#E05585;"><svg width="19" height="19"><use href="#i-cart"/></svg></div>
|
||
<div class="mid"><div class="n">超市采购</div><div class="d">19:02</div></div>
|
||
<div class="amt">-128.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active"><svg width="21" height="21"><use href="#i-home"/></svg>明细</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chart"/></svg>统计</div>
|
||
<div class="tab-fab"><svg width="22" height="22"><use href="#i-plus"/></svg></div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chat"/></svg>小账喵</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-user"/></svg>我的</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P1 · 首页（账单明细）</div>
|
||
</div>
|
||
|
||
<!-- P2 手动记账 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-close"/></svg></span>记一笔<span class="action">保存并再记</span></div>
|
||
<div class="seg"><span class="on">支出</span><span>收入</span><span>转账</span></div>
|
||
<div class="content">
|
||
<div class="cat-grid">
|
||
<div class="cat on"><div class="ci"><svg width="21" height="21"><use href="#i-food"/></svg></div>餐饮</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-cup"/></svg></div>饮品</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-cart"/></svg></div>购物</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-metro"/></svg></div>交通</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-house"/></svg></div>住房</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-game"/></svg></div>娱乐</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-pill"/></svg></div>医疗</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-book"/></svg></div>学习</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-shirt"/></svg></div>服饰</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-gift"/></svg></div>人情</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-plane"/></svg></div>旅行</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-gear"/></svg></div>设置</div>
|
||
</div>
|
||
</div>
|
||
<div class="amount-panel">
|
||
<div class="amount-line">
|
||
<div class="cat-mini"><div class="cat-ic" style="width:32px;height:32px;background:#FFF8E8;color:#D89614;"><svg width="17" height="17"><use href="#i-food"/></svg></div>餐饮</div>
|
||
<div class="num">26.00<i></i></div>
|
||
</div>
|
||
<div class="memo-line">
|
||
<span class="memo-chip on">午餐拉面</span>
|
||
<span class="memo-chip">今天 12:05</span>
|
||
<span class="memo-chip">微信支付</span>
|
||
</div>
|
||
<div class="keypad">
|
||
<div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key fn">⌫</div>
|
||
<div class="key">4</div><div class="key">5</div><div class="key">6</div><div class="key fn">＋</div>
|
||
<div class="key">7</div><div class="key">8</div><div class="key">9</div><div class="key ok">完成</div>
|
||
<div class="key fn">再记</div><div class="key">0</div><div class="key">.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P2 · 手动记账</div>
|
||
</div>
|
||
|
||
<!-- P3 统计 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar">统计</div>
|
||
<div class="stat-tabs"><span>周</span><span class="on">月</span><span>年</span><span>自定义</span></div>
|
||
<div class="content">
|
||
<div class="month-pick">
|
||
<svg width="15" height="15" style="color:var(--text3);"><use href="#i-chev-l"/></svg>
|
||
<b>2026年7月</b>
|
||
<svg width="15" height="15" style="color:var(--text3);"><use href="#i-chev-r"/></svg>
|
||
</div>
|
||
<div class="card">
|
||
<div class="donut-wrap">
|
||
<div class="donut"><div class="c"><span class="t">总支出</span><span class="v">¥8,513</span></div></div>
|
||
<div class="legend">
|
||
<div class="li"><span class="sw" style="background:#00B386;"></span>餐饮<span class="pct">34%</span></div>
|
||
<div class="li"><span class="sw" style="background:#5B6BF5;"></span>购物<span class="pct">21%</span></div>
|
||
<div class="li"><span class="sw" style="background:#F5A623;"></span>住房<span class="pct">16%</span></div>
|
||
<div class="li"><span class="sw" style="background:#4DA6FF;"></span>交通<span class="pct">13%</span></div>
|
||
<div class="li"><span class="sw" style="background:#F0642D;"></span>娱乐<span class="pct">9%</span></div>
|
||
<div class="li"><span class="sw" style="background:#E3E6EA;"></span>其他<span class="pct">7%</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="card">
|
||
<div style="font-size:12.5px;font-weight:700;">每日支出趋势</div>
|
||
<div class="bars">
|
||
<div class="bar"><i style="height:32px;"></i>11</div>
|
||
<div class="bar"><i style="height:50px;"></i>12</div>
|
||
<div class="bar"><i style="height:24px;"></i>13</div>
|
||
<div class="bar"><i style="height:62px;"></i>14</div>
|
||
<div class="bar"><i style="height:38px;"></i>15</div>
|
||
<div class="bar"><i style="height:74px;"></i>16</div>
|
||
<div class="bar hl"><i style="height:46px;"></i>17</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="card" style="padding:8px 14px;">
|
||
<div class="rank-item">
|
||
<div class="cat-ic" style="background:#FFF8E8;color:#D89614;"><svg width="18" height="18"><use href="#i-food"/></svg></div>
|
||
<div class="info"><div class="n">餐饮 <b>¥2,894.50</b></div><div class="prog"><i style="width:84%;background:#00B386;"></i></div></div>
|
||
</div>
|
||
<div class="rank-item">
|
||
<div class="cat-ic" style="background:#FDEFF4;color:#E05585;"><svg width="18" height="18"><use href="#i-cart"/></svg></div>
|
||
<div class="info"><div class="n">购物 <b>¥1,788.00</b></div><div class="prog"><i style="width:52%;background:#5B6BF5;"></i></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="ai-insight">
|
||
<div class="h"><svg width="15" height="15"><use href="#i-sparkle"/></svg>小账喵的分析</div>
|
||
本月餐饮支出比上月<b style="color:var(--red);">高 23%</b>，主要是奶茶（12 杯 ¥216）。按当前节奏预算将在 <b>7月28日</b> 用完，建议每日控制在 ¥130 以内。
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-home"/></svg>明细</div>
|
||
<div class="tab active"><svg width="21" height="21"><use href="#i-chart"/></svg>统计</div>
|
||
<div class="tab-fab"><svg width="22" height="22"><use href="#i-plus"/></svg></div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chat"/></svg>小账喵</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-user"/></svg>我的</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P3 · 统计 + AI 分析</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= AI 能力 ================= -->
|
||
<div class="section-label"><span class="tag ai">AI 助手</span>聊天记账 · 表情包互动 · 性格设置</div>
|
||
<div class="row">
|
||
|
||
<!-- P4 AI聊天 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="chat-nav">
|
||
<svg width="20" height="20"><use href="#i-chev-l"/></svg>
|
||
<div class="who">
|
||
<div class="ai-face solid" style="width:36px;height:36px;"><svg width="22" height="22"><use href="#i-cat"/></svg></div>
|
||
<div class="meta">
|
||
<div class="n">小账喵 <span class="persona-chip">毒舌猫娘</span></div>
|
||
<div class="s">在线 · 已陪你记账 128 天</div>
|
||
</div>
|
||
</div>
|
||
<svg width="19" height="19" style="color:var(--text2);"><use href="#i-gear"/></svg>
|
||
</div>
|
||
<div class="chat-body">
|
||
<div class="time-tag">今天 14:31</div>
|
||
|
||
<div class="msg me">
|
||
<div class="av"><svg width="18" height="18"><use href="#i-user"/></svg></div>
|
||
<div class="bubble">刚买了杯一点点，18块</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">记好了！不过这是你这周第 <b>3</b> 杯奶茶了……钱包在哭泣哦</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bill-card">
|
||
<div class="bc-head"><svg width="12" height="12"><use href="#i-sparkle"/></svg>AI 已自动记账</div>
|
||
<div class="bc-body">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div>
|
||
<div class="bc-amt">-¥18.00</div>
|
||
<div class="bc-cat">饮品 · 一点点奶茶 · 微信支付</div>
|
||
</div>
|
||
</div>
|
||
<div class="bc-foot"><span>修改</span><span>确认无误</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg me">
|
||
<div class="av"><svg width="18" height="18"><use href="#i-user"/></svg></div>
|
||
<div class="sticker-card">
|
||
<svg width="52" height="52" style="color:#F5A623;"><use href="#i-pleading"/></svg>
|
||
<span class="t">求原谅…</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="sticker-card">
|
||
<svg width="52" height="52" style="color:var(--ai);"><use href="#i-cat-angry"/></svg>
|
||
<span class="t">卖萌也没用！</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">哼，看在你都记账的份上原谅你～<br>本周饮品预算还剩 <b>¥22</b>，省着点</div>
|
||
</div>
|
||
</div>
|
||
<div class="quick-row">
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-camera"/></svg>拍小票</span>
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-mic"/></svg>语音记账</span>
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-chart"/></svg>本月花了多少</span>
|
||
</div>
|
||
<div class="chat-input">
|
||
<svg width="21" height="21"><use href="#i-mic"/></svg>
|
||
<div class="field">和小账喵说点什么…</div>
|
||
<svg width="21" height="21"><use href="#i-smile"/></svg>
|
||
<svg width="21" height="21"><use href="#i-plus"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P4 · AI 聊天记账（表情包互动）</div>
|
||
</div>
|
||
|
||
<!-- P5 性格设置 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>AI 性格设置</div>
|
||
<div class="content">
|
||
<div class="persona-hero">
|
||
<div class="ai-face solid" style="width:76px;height:76px;margin:0 auto;box-shadow:0 10px 22px rgba(91,107,245,.3);"><svg width="44" height="44"><use href="#i-cat"/></svg></div>
|
||
<div class="n">小账喵</div>
|
||
<div class="d">点击更换头像和昵称</div>
|
||
</div>
|
||
<div class="p-grid">
|
||
<div class="p-card on">
|
||
<div class="check"><svg width="10" height="10" style="color:#fff;"><use href="#i-check"/></svg></div>
|
||
<svg width="26" height="26" style="color:var(--ai);"><use href="#i-cat-angry"/></svg>
|
||
<div class="n">毒舌猫娘</div>
|
||
<div class="d">嘴上嫌弃，心里关心，乱花钱会被吐槽</div>
|
||
<div class="sample">"又点外卖？你的钱包已经瘦成纸片了喵！"</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="26" height="26" style="color:#E05585;"><use href="#i-cat-happy"/></svg>
|
||
<div class="n">温柔小暖</div>
|
||
<div class="d">永远鼓励你，温柔提醒不施压</div>
|
||
<div class="sample">"记好啦，偶尔犒劳自己也是应该的呀"</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="26" height="26" style="color:#3E82E0;"><use href="#i-target"/></svg>
|
||
<div class="n">严格管家</div>
|
||
<div class="d">专业理性，盯紧预算，数据说话</div>
|
||
<div class="sample">"本笔支出使餐饮预算达到 87%，请注意。"</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="26" height="26" style="color:#F5A623;"><use href="#i-smile"/></svg>
|
||
<div class="n">沙雕损友</div>
|
||
<div class="d">玩梗高手，表情包狂魔，快乐记账</div>
|
||
<div class="sample">"家人们谁懂啊，他又双叒叕买奶茶了"</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:12px;"></div>
|
||
<div class="card slider-block">
|
||
<div class="lb"><span>吐槽力度</span><b>较犀利</b></div>
|
||
<div class="track"><i style="width:72%;"></i><span class="knob" style="left:72%;"></span></div>
|
||
<div style="height:18px;"></div>
|
||
<div class="lb"><span>表情包频率</span><b>经常发</b></div>
|
||
<div class="track"><i style="width:85%;"></i><span class="knob" style="left:85%;"></span></div>
|
||
<div style="height:18px;"></div>
|
||
<div class="lb"><span>主动提醒（预算 / 账单）</span><b>每天一次</b></div>
|
||
<div class="track"><i style="width:45%;"></i><span class="knob" style="left:45%;"></span></div>
|
||
</div>
|
||
<div class="save-btn">保存设置</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P5 · AI 性格设置</div>
|
||
</div>
|
||
|
||
<!-- P6 我的 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="content">
|
||
<div class="me-head">
|
||
<div class="av"><svg width="28" height="28"><use href="#i-user"/></svg></div>
|
||
<div>
|
||
<div class="n">南巡 <span class="vip">PRO</span></div>
|
||
<div class="d">已连续记账 128 天 · 超过 92% 的用户</div>
|
||
</div>
|
||
</div>
|
||
<div class="mode-card">
|
||
<div class="h">App 模式</div>
|
||
<div class="d">选择你喜欢的使用方式，可随时切换</div>
|
||
<div class="mode-opts">
|
||
<div class="mode-opt on">
|
||
<div class="radio"></div>
|
||
<svg width="22" height="22" style="color:var(--primary);"><use href="#i-wallet"/></svg>
|
||
<div class="n">普通记账模式</div>
|
||
<div class="d">经典账本界面<br>手动记账 + AI 辅助</div>
|
||
</div>
|
||
<div class="mode-opt">
|
||
<div class="radio"></div>
|
||
<svg width="22" height="22" style="color:var(--ai);"><use href="#i-sparkle"/></svg>
|
||
<div class="n">全 AI 模式</div>
|
||
<div class="d">聊天即记账<br>对话作为主界面</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-group">
|
||
<div class="li-row"><div class="lic" style="background:var(--ai-bg);color:var(--ai);"><svg width="16" height="16"><use href="#i-cat"/></svg></div>AI 性格设置<span class="val">毒舌猫娘 <svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="li-row"><div class="lic" style="background:var(--primary-bg);color:var(--primary);"><svg width="16" height="16"><use href="#i-target"/></svg></div>预算管理<span class="val">¥5,000/月 <svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="li-row"><div class="lic" style="background:#EAF3FF;color:#3E82E0;"><svg width="16" height="16"><use href="#i-book"/></svg></div>账本管理<span class="val">3 个账本 <svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="li-row"><div class="lic" style="background:#FFF8E8;color:#D89614;"><svg width="16" height="16"><use href="#i-tag"/></svg></div>分类管理<span class="val"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
</div>
|
||
<div class="list-group">
|
||
<div class="li-row"><div class="lic" style="background:#FDEFF4;color:#E05585;"><svg width="16" height="16"><use href="#i-export"/></svg></div>数据导出<span class="val"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="li-row"><div class="lic" style="background:#EAF3FF;color:#3E82E0;"><svg width="16" height="16"><use href="#i-cloud"/></svg></div>云同步<span class="val">已开启 <svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="li-row"><div class="lic" style="background:#F2F3F5;color:var(--text2);"><svg width="16" height="16"><use href="#i-gear"/></svg></div>通用设置<span class="val"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-home"/></svg>明细</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chart"/></svg>统计</div>
|
||
<div class="tab-fab"><svg width="22" height="22"><use href="#i-plus"/></svg></div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chat"/></svg>小账喵</div>
|
||
<div class="tab active"><svg width="21" height="21"><use href="#i-user"/></svg>我的</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P6 · 我的（模式切换）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= 全AI模式 ================= -->
|
||
<div class="section-label"><span class="tag ai">模式二</span>全 AI 模式 — 对话即 App</div>
|
||
<div class="row">
|
||
<div class="frame-wrap">
|
||
<div class="phone aimode">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="aimode-head">
|
||
<div class="top">
|
||
<div class="ai-face solid" style="width:44px;height:44px;box-shadow:0 6px 14px rgba(91,107,245,.35);"><svg width="26" height="26"><use href="#i-cat"/></svg></div>
|
||
<div class="meta">
|
||
<div class="n">小账喵 <span class="persona-chip">毒舌猫娘</span></div>
|
||
<div class="s">全 AI 模式 · 说句话就能记账</div>
|
||
</div>
|
||
<div class="sw"><svg width="12" height="12"><use href="#i-swap"/></svg>切换模式</div>
|
||
</div>
|
||
<div class="mini-dash">
|
||
<div class="mini-card"><div class="t">今日支出</div><div class="v r">¥86.50</div></div>
|
||
<div class="mini-card"><div class="t">本月结余</div><div class="v g">¥4,286</div></div>
|
||
<div class="mini-card"><div class="t">预算剩余</div><div class="v">62%</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-body">
|
||
<div class="time-tag">今天 19:02</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">晚上好～今天已经花了 ¥86.5，晚饭想吃什么？先跟我报备</div>
|
||
</div>
|
||
|
||
<div class="msg me">
|
||
<div class="av"><svg width="18" height="18"><use href="#i-user"/></svg></div>
|
||
<div class="bubble">晚饭和同事吃了火锅AA，人均88，微信付的</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bill-card">
|
||
<div class="bc-head"><svg width="12" height="12"><use href="#i-sparkle"/></svg>AI 已自动记账</div>
|
||
<div class="bc-body">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-food"/></svg></div>
|
||
<div>
|
||
<div class="bc-amt">-¥88.00</div>
|
||
<div class="bc-cat">餐饮 · 火锅聚餐 (AA) · 微信支付</div>
|
||
</div>
|
||
</div>
|
||
<div class="bc-prog">今日餐饮 ¥114 / 预算 ¥130<div class="prog"><i style="width:87%;background:linear-gradient(90deg,#F5A623,#F0642D);"></i></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="sticker-card">
|
||
<svg width="48" height="48" style="color:var(--red);"><use href="#i-fire"/></svg>
|
||
<span class="t">今日预算亮红灯！</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg me">
|
||
<div class="av"><svg width="18" height="18"><use href="#i-user"/></svg></div>
|
||
<div class="bubble">知道啦，这个月我花最多的是什么？</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">是<b>餐饮 ¥2,894</b>（占 34%）！其中奶茶就有 ¥216……<br>要不要我生成本月报告？</div>
|
||
</div>
|
||
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble"><div class="typing"><i></i><i></i><i></i></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="quick-row">
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-chart"/></svg>生成月报</span>
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-camera"/></svg>拍小票</span>
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-receipt"/></svg>查明细</span>
|
||
<span class="quick"><svg width="13" height="13"><use href="#i-target"/></svg>调预算</span>
|
||
</div>
|
||
<div class="chat-input">
|
||
<svg width="21" height="21"><use href="#i-mic"/></svg>
|
||
<div class="field">说句话，记一笔…</div>
|
||
<svg width="21" height="21"><use href="#i-smile"/></svg>
|
||
<svg width="21" height="21"><use href="#i-plus"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P7 · 全 AI 模式主界面（浅色渐变玻璃）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* ============ v0.3 新增：启动与引导 ============ */
|
||
.onb{flex:1;display:flex;flex-direction:column;padding:0 26px;}
|
||
.splash-bg{background:linear-gradient(170deg,#E6F7F1 0%,#F6F7F9 45%,#EEF0FE 100%);}
|
||
.splash-logo{width:92px;height:92px;border-radius:28px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,179,134,.3);margin:0 auto;}
|
||
.app-name{font-size:26px;font-weight:800;text-align:center;margin-top:18px;letter-spacing:1px;}
|
||
.app-slogan{font-size:13px;color:var(--text2);text-align:center;margin-top:8px;}
|
||
.btn{border-radius:14px;padding:14px;text-align:center;font-size:15px;font-weight:600;}
|
||
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(0,179,134,.25);}
|
||
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--text);}
|
||
.btn.ai{background:var(--ai);color:#fff;box-shadow:0 6px 16px rgba(91,107,245,.28);}
|
||
.agree{font-size:10.5px;color:var(--text3);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;}
|
||
.agree i{width:13px;height:13px;border-radius:50%;border:1px solid #C9CEDA;display:inline-block;flex:none;}
|
||
.agree b{color:var(--primary);font-weight:500;}
|
||
.onb-title{font-size:21px;font-weight:800;margin-top:10px;}
|
||
.onb-sub{font-size:12.5px;color:var(--text2);margin-top:6px;line-height:1.6;}
|
||
.step-dots{display:flex;gap:6px;padding:16px 0 4px;}
|
||
.step-dots i{width:18px;height:5px;border-radius:3px;background:#E3E6EA;}
|
||
.step-dots i.on{background:var(--primary);width:28px;}
|
||
.mode-big{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px;position:relative;}
|
||
.mode-big.on{border-color:var(--primary);}
|
||
.mode-big.on .pick{background:var(--primary);border-color:var(--primary);}
|
||
.mode-big .pick{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;border:1.5px solid #C9CEDA;display:flex;align-items:center;justify-content:center;color:#fff;}
|
||
.mode-big .mt{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
|
||
.mode-big .md{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.6;}
|
||
.mini-prev{margin-top:12px;border-radius:12px;padding:10px;display:flex;gap:8px;background:var(--bg);}
|
||
.mini-prev .blk{border-radius:7px;background:#fff;border:.5px solid var(--line);}
|
||
.mini-prev.chatty{flex-direction:column;background:linear-gradient(135deg,#EEF0FE,#E6F7F1);}
|
||
.mini-prev .lbub{align-self:flex-start;background:#fff;border-radius:2px 9px 9px 9px;padding:5px 9px;font-size:9px;color:var(--text2);}
|
||
.mini-prev .rbub{align-self:flex-end;background:var(--ai);color:#fff;border-radius:9px 2px 9px 9px;padding:5px 9px;font-size:9px;}
|
||
.name-field{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:10px;font-size:14px;}
|
||
.name-field .ph{color:var(--text3);}
|
||
.name-field b{margin-left:auto;font-size:11px;color:var(--ai);font-weight:600;}
|
||
|
||
/* ============ v0.3 新增：账单详情 ============ */
|
||
.dt-hero{text-align:center;padding:22px 0 18px;}
|
||
.dt-amt{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:12px;}
|
||
.dt-state{font-size:11px;color:var(--text3);margin-top:6px;}
|
||
.dt-row{display:flex;align-items:center;justify-content:space-between;padding:13.5px 0;font-size:13px;}
|
||
.dt-row + .dt-row{border-top:.5px solid var(--line);}
|
||
.dt-row .k{color:var(--text3);}
|
||
.dt-row .v{font-weight:500;display:flex;align-items:center;gap:6px;max-width:220px;text-align:right;}
|
||
.src-quote{background:var(--ai-bg);border-radius:10px;padding:10px 12px;font-size:11.5px;color:#4A5160;line-height:1.6;margin-top:8px;}
|
||
.src-quote b{color:var(--ai);}
|
||
.dt-actions{display:flex;gap:12px;padding:14px 0;}
|
||
.dt-actions .btn{flex:1;padding:12px;}
|
||
.btn.danger{background:#fff;border:1px solid #F6C9B4;color:var(--red);}
|
||
|
||
/* ============ v0.3 新增：预算管理 ============ */
|
||
.bud-hero{display:flex;align-items:center;gap:18px;}
|
||
.bud-ring{width:110px;height:110px;border-radius:50%;flex:none;position:relative;background:conic-gradient(var(--primary) 0 62%,#EBEDF0 62% 100%);}
|
||
.bud-ring::after{content:"";position:absolute;inset:16px;background:#fff;border-radius:50%;}
|
||
.bud-ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;}
|
||
.bud-ring .c .t{font-size:9.5px;color:var(--text3);}
|
||
.bud-ring .c .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;}
|
||
.bud-kv{flex:1;display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--text2);}
|
||
.bud-kv .l{display:flex;justify-content:space-between;}
|
||
.bud-kv b{font-variant-numeric:tabular-nums;color:var(--text);}
|
||
.bud-item{display:flex;align-items:center;gap:12px;padding:11px 2px;}
|
||
.bud-item + .bud-item{border-top:.5px solid var(--line);}
|
||
.bud-item .info{flex:1;}
|
||
.bud-item .n{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;}
|
||
.bud-item .n span{color:var(--text3);font-weight:400;font-variant-numeric:tabular-nums;}
|
||
.bud-item .n span b{color:var(--text);font-weight:600;}
|
||
.add-bud{border:1.5px dashed #C9CEDA;border-radius:13px;padding:12px;text-align:center;font-size:12.5px;color:var(--text2);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px;}
|
||
|
||
/* ============ v0.3 新增：AI 月报 ============ */
|
||
.rep-hero{background:linear-gradient(150deg,var(--ai) 0%,#8A5BF5 100%);border-radius:18px;padding:20px;color:#fff;position:relative;overflow:hidden;}
|
||
.rep-hero::after{content:"";position:absolute;right:-24px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.1);}
|
||
.rep-hero .t{font-size:11px;opacity:.85;display:flex;align-items:center;gap:6px;}
|
||
.rep-hero .h{font-size:21px;font-weight:800;margin:8px 0 2px;}
|
||
.rep-hero .d{font-size:11px;opacity:.85;}
|
||
.rep-nums{display:flex;margin-top:16px;position:relative;z-index:1;}
|
||
.rep-nums > div{flex:1;}
|
||
.rep-nums .k{font-size:10px;opacity:.8;}
|
||
.rep-nums .v{font-size:16px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums;}
|
||
.hl-item{display:flex;gap:11px;padding:11px 2px;align-items:flex-start;}
|
||
.hl-item + .hl-item{border-top:.5px solid var(--line);}
|
||
.hl-item .hic{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;}
|
||
.hl-item .ht{font-size:12.5px;font-weight:600;}
|
||
.hl-item .hd{font-size:11px;color:var(--text2);margin-top:3px;line-height:1.55;}
|
||
.roast{background:var(--ai-bg);border-radius:14px;padding:14px;margin-top:12px;}
|
||
.roast .rh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ai);}
|
||
.roast .rt{font-size:12.5px;color:#3E4556;line-height:1.75;margin-top:8px;}
|
||
|
||
/* ============ v0.3 新增：表情包面板 ============ */
|
||
.stk-panel{flex:none;background:#fff;border-top:.5px solid var(--line);padding:10px 14px 6px;}
|
||
.stk-tabs{display:flex;gap:14px;font-size:11px;color:var(--text3);padding-bottom:8px;}
|
||
.stk-tabs .on{color:var(--ai);font-weight:700;}
|
||
.stk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
|
||
.stk{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;color:var(--text2);}
|
||
.stk .box{width:62px;height:62px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;}
|
||
.stk.on .box{background:var(--ai-bg);box-shadow:inset 0 0 0 1.5px var(--ai);}
|
||
</style>
|
||
|
||
<!-- ================= 首次启动流程 ================= -->
|
||
<div class="section-label"><span class="tag">新增</span>首次启动流程 — 登录 · 选模式 · 选性格</div>
|
||
<div class="row">
|
||
|
||
<!-- P8 登录 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone splash-bg">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="onb" style="justify-content:center;gap:0;">
|
||
<div class="splash-logo"><svg width="54" height="54"><use href="#i-cat"/></svg></div>
|
||
<div class="app-name">喵记账</div>
|
||
<div class="app-slogan">会聊天的记账本 · 让 AI 帮你管钱</div>
|
||
<div style="height:64px;"></div>
|
||
<div class="btn primary">微信一键登录</div>
|
||
<div style="height:12px;"></div>
|
||
<div class="btn ghost">手机号登录</div>
|
||
<div style="height:18px;"></div>
|
||
<div style="text-align:center;font-size:12px;color:var(--text3);">先逛逛，游客模式 ›</div>
|
||
<div style="height:26px;"></div>
|
||
<div class="agree"><i></i>已阅读并同意 <b>《用户协议》</b>和<b>《隐私政策》</b></div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P8 · 启动 / 登录</div>
|
||
</div>
|
||
|
||
<!-- P9 选模式 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="onb" style="padding-top:8px;">
|
||
<div class="step-dots"><i class="on"></i><i></i></div>
|
||
<div class="onb-title">你想怎么用它？</div>
|
||
<div class="onb-sub">两种完全不同的体验，以后随时可以在「我的」里切换</div>
|
||
<div style="height:18px;"></div>
|
||
<div class="mode-big on">
|
||
<div class="pick"><svg width="12" height="12"><use href="#i-check"/></svg></div>
|
||
<div class="mt"><svg width="20" height="20" style="color:var(--primary);"><use href="#i-wallet"/></svg>普通记账模式</div>
|
||
<div class="md">经典账本界面，手动记账、报表统计一应俱全，AI 助手随叫随到</div>
|
||
<div class="mini-prev">
|
||
<div class="blk" style="flex:1.4;height:70px;background:linear-gradient(135deg,var(--primary),#00C99A);border:none;"></div>
|
||
<div style="flex:1;display:flex;flex-direction:column;gap:6px;">
|
||
<div class="blk" style="height:20px;"></div>
|
||
<div class="blk" style="height:20px;"></div>
|
||
<div class="blk" style="height:20px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:12px;"></div>
|
||
<div class="mode-big">
|
||
<div class="pick"></div>
|
||
<div class="mt"><svg width="20" height="20" style="color:var(--ai);"><use href="#i-sparkle"/></svg>全 AI 模式</div>
|
||
<div class="md">没有复杂界面，打开就是和 AI 聊天，说句话就完成记账、查账、看报告</div>
|
||
<div class="mini-prev chatty">
|
||
<div class="lbub">今天花了多少呀？</div>
|
||
<div class="rbub">午饭 26，奶茶 18</div>
|
||
<div class="lbub">记好啦，共 ¥44 ✓</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;"></div>
|
||
<div class="btn primary">继续</div>
|
||
<div style="height:16px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P9 · 引导 · 选择模式</div>
|
||
</div>
|
||
|
||
<!-- P10 选性格 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="onb" style="padding-top:8px;">
|
||
<div class="step-dots"><i></i><i class="on"></i></div>
|
||
<div class="onb-title">认识你的 AI 伙伴</div>
|
||
<div class="onb-sub">选形象、起名字、挑性格 —— 之后它就是你的专属记账搭子</div>
|
||
<div style="height:16px;"></div>
|
||
<div style="display:flex;justify-content:center;gap:14px;align-items:flex-end;">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
|
||
<div class="ai-face" style="width:50px;height:50px;color:var(--text3);"><svg width="28" height="28"><use href="#i-dog"/></svg></div>
|
||
<span style="font-size:10px;color:var(--text3);">阿福汪</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
|
||
<div class="ai-face solid" style="width:68px;height:68px;box-shadow:0 10px 22px rgba(91,107,245,.3);position:relative;"><svg width="40" height="40"><use href="#i-cat"/></svg>
|
||
<span style="position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid #fff;display:flex;align-items:center;justify-content:center;"><svg width="10" height="10" style="color:#fff;"><use href="#i-check"/></svg></span>
|
||
</div>
|
||
<span style="font-size:10px;color:var(--ai);font-weight:600;">小账喵</span>
|
||
</div>
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:5px;">
|
||
<div class="ai-face" style="width:50px;height:50px;color:var(--text3);"><svg width="28" height="28"><use href="#i-robot"/></svg></div>
|
||
<span style="font-size:10px;color:var(--text3);">账小智</span>
|
||
</div>
|
||
</div>
|
||
<div style="height:14px;"></div>
|
||
<div class="name-field"><svg width="16" height="16" style="color:var(--text3);"><use href="#i-tag"/></svg>小账喵<b>换一个</b></div>
|
||
<div class="p-grid">
|
||
<div class="p-card on">
|
||
<div class="check"><svg width="10" height="10" style="color:#fff;"><use href="#i-check"/></svg></div>
|
||
<svg width="24" height="24" style="color:var(--ai);"><use href="#i-cat-angry"/></svg>
|
||
<div class="n">毒舌猫娘</div>
|
||
<div class="d">乱花钱会被无情吐槽</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="24" height="24" style="color:#E05585;"><use href="#i-cat-happy"/></svg>
|
||
<div class="n">温柔小暖</div>
|
||
<div class="d">永远鼓励，温柔提醒</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="24" height="24" style="color:#3E82E0;"><use href="#i-target"/></svg>
|
||
<div class="n">严格管家</div>
|
||
<div class="d">理性专业，数据说话</div>
|
||
</div>
|
||
<div class="p-card">
|
||
<svg width="24" height="24" style="color:#F5A623;"><use href="#i-smile"/></svg>
|
||
<div class="n">沙雕损友</div>
|
||
<div class="d">玩梗高手，快乐记账</div>
|
||
</div>
|
||
</div>
|
||
<div style="flex:1;"></div>
|
||
<div class="btn ai">开始记账之旅</div>
|
||
<div style="height:16px;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P10 · 引导 · 选择 AI 性格</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ================= 核心闭环补充 ================= -->
|
||
<div class="section-label"><span class="tag">新增</span>核心闭环 — 账单详情 · 预算 · AI 月报 · 表情包面板</div>
|
||
<div class="row">
|
||
|
||
<!-- P11 账单详情 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>账单详情</div>
|
||
<div class="content">
|
||
<div class="card" style="margin-top:8px;">
|
||
<div class="dt-hero">
|
||
<div class="cat-ic" style="width:52px;height:52px;border-radius:16px;background:#FFF3EC;color:#F0642D;margin:0 auto;"><svg width="26" height="26"><use href="#i-cup"/></svg></div>
|
||
<div class="dt-amt">-¥18.00</div>
|
||
<div class="dt-state">支出 · 已入账</div>
|
||
</div>
|
||
<div class="dt-row"><span class="k">分类</span><span class="v">饮品</span></div>
|
||
<div class="dt-row"><span class="k">时间</span><span class="v">2026年7月17日 14:32</span></div>
|
||
<div class="dt-row"><span class="k">账本</span><span class="v">日常账本</span></div>
|
||
<div class="dt-row"><span class="k">支付方式</span><span class="v">微信支付</span></div>
|
||
<div class="dt-row"><span class="k">备注</span><span class="v">一点点奶茶</span></div>
|
||
<div class="dt-row" style="flex-direction:column;align-items:stretch;gap:2px;">
|
||
<span class="k" style="display:flex;align-items:center;gap:6px;">来源 <span class="ai-badge"><svg width="8" height="8"><use href="#i-sparkle"/></svg>AI 聊天记账</span></span>
|
||
<div class="src-quote">你说："<b>刚买了杯一点点，18块</b>"<br>小账喵识别：饮品 · ¥18.00 · 微信支付</div>
|
||
</div>
|
||
</div>
|
||
<div class="dt-actions">
|
||
<div class="btn ghost">编辑</div>
|
||
<div class="btn danger">删除</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P11 · 账单详情（含 AI 来源追溯）</div>
|
||
</div>
|
||
|
||
<!-- P12 预算管理 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>预算管理<span class="action">编辑</span></div>
|
||
<div class="content">
|
||
<div class="card" style="margin-top:8px;">
|
||
<div class="bud-hero">
|
||
<div class="bud-ring"><div class="c"><span class="t">总预算剩余</span><span class="v">62%</span></div></div>
|
||
<div class="bud-kv">
|
||
<div class="l"><span>本月总预算</span><b>¥5,000.00</b></div>
|
||
<div class="l"><span>已使用</span><b>¥3,100.00</b></div>
|
||
<div class="l"><span>剩余可用</span><b style="color:var(--primary);">¥1,900.00</b></div>
|
||
<div class="l"><span>日均可用</span><b>¥135.70</b></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="card" style="padding:8px 14px;">
|
||
<div class="bud-item">
|
||
<div class="cat-ic" style="background:#FFF8E8;color:#D89614;"><svg width="18" height="18"><use href="#i-food"/></svg></div>
|
||
<div class="info"><div class="n">餐饮<span><b>¥1,395</b> / ¥1,600</span></div><div class="prog"><i style="width:87%;background:linear-gradient(90deg,#F5A623,#F0642D);"></i></div></div>
|
||
</div>
|
||
<div class="bud-item">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div class="info"><div class="n">饮品<span><b>¥216</b> / ¥300</span></div><div class="prog"><i style="width:72%;background:#F5A623;"></i></div></div>
|
||
</div>
|
||
<div class="bud-item">
|
||
<div class="cat-ic" style="background:#FDEFF4;color:#E05585;"><svg width="18" height="18"><use href="#i-cart"/></svg></div>
|
||
<div class="info"><div class="n">购物<span><b>¥688</b> / ¥1,500</span></div><div class="prog"><i style="width:46%;background:var(--primary);"></i></div></div>
|
||
</div>
|
||
<div class="bud-item">
|
||
<div class="cat-ic" style="background:#EAF3FF;color:#3E82E0;"><svg width="18" height="18"><use href="#i-metro"/></svg></div>
|
||
<div class="info"><div class="n">交通<span><b>¥412</b> / ¥600</span></div><div class="prog"><i style="width:69%;background:var(--primary);"></i></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="add-bud"><svg width="14" height="14"><use href="#i-plus"/></svg>添加分类预算</div>
|
||
<div class="ai-insight" style="margin-top:10px;">
|
||
<div class="h"><svg width="15" height="15"><use href="#i-sparkle"/></svg>让小账喵帮你定预算</div>
|
||
根据近 3 个月的消费习惯，AI 可以一键生成更合理的分类预算方案。
|
||
<div style="margin-top:8px;"><span style="font-size:11.5px;color:var(--ai);font-weight:600;">生成方案 ›</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P12 · 预算管理（AI 一键定预算）</div>
|
||
</div>
|
||
|
||
<!-- P13 AI 月报 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>7月账单报告<span class="action">分享</span></div>
|
||
<div class="content">
|
||
<div class="rep-hero" style="margin-top:8px;">
|
||
<div class="t"><svg width="13" height="13"><use href="#i-sparkle"/></svg>小账喵 · 月度报告</div>
|
||
<div class="h">7月，你一共花了 ¥8,513</div>
|
||
<div class="d">比上月多 12% · 全国同龄用户中排勤俭榜前 44%</div>
|
||
<div class="rep-nums">
|
||
<div><div class="k">收入</div><div class="v">¥12,800</div></div>
|
||
<div><div class="k">支出</div><div class="v">¥8,513</div></div>
|
||
<div><div class="k">结余</div><div class="v">¥4,286</div></div>
|
||
<div><div class="k">笔数</div><div class="v">142</div></div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="card" style="padding:8px 14px;">
|
||
<div class="hl-item">
|
||
<div class="hic" style="background:#FFF3EC;color:#F0642D;"><svg width="16" height="16"><use href="#i-fire"/></svg></div>
|
||
<div><div class="ht">最烧钱的一天：7月16日</div><div class="hd">单日支出 ¥486，一半花在了「海底捞聚餐」</div></div>
|
||
</div>
|
||
<div class="hl-item">
|
||
<div class="hic" style="background:#FFF3EC;color:#F0642D;"><svg width="16" height="16"><use href="#i-cup"/></svg></div>
|
||
<div><div class="ht">奶茶自由指数：偏高</div><div class="hd">12 杯 · ¥216，比上月多 4 杯，最爱「一点点」</div></div>
|
||
</div>
|
||
<div class="hl-item">
|
||
<div class="hic" style="background:var(--primary-bg);color:var(--primary);"><svg width="16" height="16"><use href="#i-money"/></svg></div>
|
||
<div><div class="ht">进步的地方</div><div class="hd">打车支出比上月省了 ¥180，通勤改坐地铁了，好评</div></div>
|
||
</div>
|
||
<div class="hl-item">
|
||
<div class="hic" style="background:var(--ai-bg);color:var(--ai);"><svg width="16" height="16"><use href="#i-chat"/></svg></div>
|
||
<div><div class="ht">AI 记账占比 68%</div><div class="hd">96 笔账是聊天记的，你已经离不开我了吧</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="roast">
|
||
<div class="rh"><svg width="15" height="15"><use href="#i-cat-angry"/></svg>毒舌点评</div>
|
||
<div class="rt">"收入 1.28 万，奶茶 216——你不是在喝奶茶，你是在给奶茶店打工。下个月饮品预算我给你砍到 ¥150，有意见吗？没有，那就这么定了喵。"</div>
|
||
</div>
|
||
<div style="height:12px;"></div>
|
||
<div class="btn ai">生成分享图</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P13 · AI 月度报告</div>
|
||
</div>
|
||
|
||
<!-- P14 表情包面板 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="chat-nav">
|
||
<svg width="20" height="20"><use href="#i-chev-l"/></svg>
|
||
<div class="who">
|
||
<div class="ai-face solid" style="width:36px;height:36px;"><svg width="22" height="22"><use href="#i-cat"/></svg></div>
|
||
<div class="meta">
|
||
<div class="n">小账喵 <span class="persona-chip">毒舌猫娘</span></div>
|
||
<div class="s">在线</div>
|
||
</div>
|
||
</div>
|
||
<svg width="19" height="19" style="color:var(--text2);"><use href="#i-gear"/></svg>
|
||
</div>
|
||
<div class="chat-body">
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">这个月工资到账了吗？记得跟我说一声</div>
|
||
</div>
|
||
<div class="msg me">
|
||
<div class="av"><svg width="18" height="18"><use href="#i-user"/></svg></div>
|
||
<div class="sticker-card">
|
||
<svg width="52" height="52" style="color:var(--primary);"><use href="#i-money"/></svg>
|
||
<span class="t">发工资啦！</span>
|
||
</div>
|
||
</div>
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">哦？多少？直接报数，我帮你记收入</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input">
|
||
<svg width="21" height="21"><use href="#i-mic"/></svg>
|
||
<div class="field">和小账喵说点什么…</div>
|
||
<svg width="21" height="21" style="color:var(--ai);"><use href="#i-smile"/></svg>
|
||
<svg width="21" height="21"><use href="#i-plus"/></svg>
|
||
</div>
|
||
<div class="stk-panel">
|
||
<div class="stk-tabs"><span class="on">小账喵专属</span><span>经典表情</span><span>最近使用</span></div>
|
||
<div class="stk-grid">
|
||
<div class="stk on"><div class="box"><svg width="36" height="36" style="color:var(--primary);"><use href="#i-money"/></svg></div>发工资啦</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:#F5A623;"><use href="#i-pleading"/></svg></div>求原谅</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:var(--red);"><use href="#i-fire"/></svg></div>剁手警告</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:var(--ai);"><use href="#i-cat-angry"/></svg></div>生气喵</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:#E05585;"><use href="#i-cat-happy"/></svg></div>开心喵</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:#D89614;"><use href="#i-gift"/></svg></div>犒劳自己</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:#3E82E0;"><use href="#i-cart"/></svg></div>购物狂喜</div>
|
||
<div class="stk"><div class="box"><svg width="36" height="36" style="color:var(--text3);"><use href="#i-wallet"/></svg></div>钱包空空</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P14 · 表情包面板（用户侧发送）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* ============ v0.4 新增 ============ */
|
||
.overlay-dim{position:absolute;inset:0;background:rgba(15,20,30,.45);z-index:10;display:flex;flex-direction:column;justify-content:flex-end;}
|
||
.voice-sheet{background:#fff;border-radius:22px 22px 0 0;padding:24px 22px 30px;text-align:center;}
|
||
.voice-sheet .vs-t{font-size:14px;font-weight:700;}
|
||
.voice-sheet .vs-d{font-size:11.5px;color:var(--text3);margin-top:4px;}
|
||
.voice-live{margin:18px auto 0;background:var(--ai-bg);border-radius:14px;padding:14px;font-size:13.5px;color:var(--text);line-height:1.6;text-align:left;}
|
||
.voice-live b{color:var(--ai);}
|
||
.wave-row{display:flex;align-items:center;justify-content:center;gap:3px;height:40px;margin-top:16px;}
|
||
.wave-row i{width:4px;border-radius:2px;background:var(--ai);animation:wv 1s ease-in-out infinite;}
|
||
@keyframes wv{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
|
||
.voice-btn{width:74px;height:74px;border-radius:50%;background:var(--ai);color:#fff;display:flex;align-items:center;justify-content:center;margin:18px auto 0;box-shadow:0 0 0 10px rgba(91,107,245,.12),0 8px 20px rgba(91,107,245,.35);}
|
||
.voice-tip{font-size:11px;color:var(--text3);margin-top:12px;}
|
||
.ocr-img{background:linear-gradient(160deg,#3A3F4C,#252A36);border-radius:14px;height:150px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
|
||
.ocr-img .paper{width:110px;height:120px;background:#F8F9FA;border-radius:4px;padding:10px 9px;display:flex;flex-direction:column;gap:5px;}
|
||
.ocr-img .paper i{height:4px;border-radius:2px;background:#D7DBE0;display:block;}
|
||
.ocr-img .scanline{position:absolute;left:10px;right:10px;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent);box-shadow:0 0 12px var(--primary);animation:scan 2s ease-in-out infinite;}
|
||
@keyframes scan{0%,100%{top:20px;}50%{top:130px;}}
|
||
.ocr-badge{position:absolute;right:10px;top:10px;background:rgba(0,179,134,.9);color:#fff;font-size:10px;padding:3px 9px;border-radius:9px;display:flex;align-items:center;gap:4px;}
|
||
.ocr-field{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:13px;}
|
||
.ocr-field + .ocr-field{border-top:.5px solid var(--line);}
|
||
.ocr-field .k{color:var(--text3);}
|
||
.ocr-field .v{font-weight:600;display:flex;align-items:center;gap:6px;}
|
||
.ocr-field .v.hl{color:var(--ai);}
|
||
.conf{font-size:9px;background:var(--primary-bg);color:var(--primary-deep);padding:1.5px 6px;border-radius:6px;font-weight:600;}
|
||
.conf.low{background:#FFF3EC;color:var(--red);}
|
||
.sheet-mask{position:absolute;inset:0;background:rgba(15,20,30,.45);z-index:10;display:flex;flex-direction:column;justify-content:flex-end;}
|
||
.book-sheet{background:var(--bg);border-radius:22px 22px 0 0;padding:20px 16px 26px;}
|
||
.book-sheet .bs-t{font-size:15px;font-weight:700;text-align:center;margin-bottom:16px;}
|
||
.book-card{background:#fff;border-radius:14px;padding:14px;border:1.5px solid var(--line);display:flex;align-items:center;gap:12px;position:relative;}
|
||
.book-card + .book-card{margin-top:10px;}
|
||
.book-card.on{border-color:var(--primary);}
|
||
.book-card .bic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;}
|
||
.book-card .bn{font-size:13.5px;font-weight:700;}
|
||
.book-card .bd{font-size:10.5px;color:var(--text3);margin-top:3px;}
|
||
.book-card .bcheck{margin-left:auto;color:var(--primary);}
|
||
.cm-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;font-size:13.5px;}
|
||
.cm-row + .cm-row{border-top:.5px solid var(--line);}
|
||
.cm-row .drag{color:#D3D8DE;}
|
||
.cm-row .del{margin-left:auto;color:var(--red);opacity:.75;}
|
||
.cm-hint{font-size:10.5px;color:var(--text3);padding:10px 4px 6px;}
|
||
</style>
|
||
|
||
<!-- ================= v0.4 交互补充 ================= -->
|
||
<div class="section-label"><span class="tag">新增</span>输入方式 & 管理页 — 语音 · OCR · 账本 · 分类</div>
|
||
<div class="row">
|
||
|
||
<!-- P15 语音记账 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="chat-nav">
|
||
<svg width="20" height="20"><use href="#i-chev-l"/></svg>
|
||
<div class="who">
|
||
<div class="ai-face solid" style="width:36px;height:36px;"><svg width="22" height="22"><use href="#i-cat"/></svg></div>
|
||
<div class="meta">
|
||
<div class="n">小账喵 <span class="persona-chip">毒舌猫娘</span></div>
|
||
<div class="s">在线</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-body" style="filter:blur(1.5px);opacity:.6;">
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">今天想记点什么？</div>
|
||
</div>
|
||
</div>
|
||
<div class="overlay-dim">
|
||
<div class="voice-sheet">
|
||
<div class="vs-t">正在聆听…</div>
|
||
<div class="vs-d">直接说，比如"打车去机场花了 45"</div>
|
||
<div class="voice-live">"昨天晚上和朋友吃烧烤，<b>人均六十八</b>，我用<b>支付宝</b>付的…"</div>
|
||
<div class="wave-row">
|
||
<i style="height:12px;animation-delay:0s;"></i><i style="height:22px;animation-delay:.1s;"></i>
|
||
<i style="height:34px;animation-delay:.2s;"></i><i style="height:18px;animation-delay:.3s;"></i>
|
||
<i style="height:28px;animation-delay:.4s;"></i><i style="height:38px;animation-delay:.5s;"></i>
|
||
<i style="height:16px;animation-delay:.6s;"></i><i style="height:26px;animation-delay:.7s;"></i>
|
||
<i style="height:12px;animation-delay:.8s;"></i>
|
||
</div>
|
||
<div class="voice-btn"><svg width="32" height="32"><use href="#i-mic"/></svg></div>
|
||
<div class="voice-tip">松开发送 · 上滑取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P15 · 语音记账（识别中）</div>
|
||
</div>
|
||
|
||
<!-- P16 OCR 确认 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>小票识别<span class="action">重拍</span></div>
|
||
<div class="content">
|
||
<div class="ocr-img" style="margin-top:8px;">
|
||
<div class="paper">
|
||
<i style="width:60%;margin:0 auto 3px;"></i>
|
||
<i style="width:90%;"></i><i style="width:75%;"></i><i style="width:85%;"></i>
|
||
<i style="width:70%;"></i><i style="width:88%;"></i>
|
||
<i style="width:50%;margin-top:3px;"></i>
|
||
</div>
|
||
<div class="scanline"></div>
|
||
<div class="ocr-badge"><svg width="10" height="10"><use href="#i-check"/></svg>识别完成</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="card" style="padding:4px 14px;">
|
||
<div class="ocr-field"><span class="k">商户</span><span class="v">永辉超市（软件园店）<span class="conf">98%</span></span></div>
|
||
<div class="ocr-field"><span class="k">金额</span><span class="v" style="font-size:17px;">¥128.60 <span class="conf">99%</span></span></div>
|
||
<div class="ocr-field"><span class="k">时间</span><span class="v">今天 19:02 <span class="conf">95%</span></span></div>
|
||
<div class="ocr-field"><span class="k">AI 分类</span><span class="v hl">购物 · 超市采购 <span class="conf low">辅助判断</span></span></div>
|
||
<div class="ocr-field"><span class="k">支付方式</span><span class="v">微信支付</span></div>
|
||
</div>
|
||
<div class="ai-insight" style="margin-top:10px;">
|
||
<div class="h"><svg width="15" height="15"><use href="#i-sparkle"/></svg>小账喵</div>
|
||
识别到 14 件商品，其中零食占 ¥46……要不要我把零食单独拆一笔记「饮品零食」？
|
||
<div style="margin-top:8px;display:flex;gap:14px;">
|
||
<span style="font-size:11.5px;color:var(--ai);font-weight:600;">拆分记账</span>
|
||
<span style="font-size:11.5px;color:var(--text3);">不用，记一笔</span>
|
||
</div>
|
||
</div>
|
||
<div class="dt-actions">
|
||
<div class="btn ghost">手动修改</div>
|
||
<div class="btn primary">确认入账</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P16 · 拍小票 OCR 确认</div>
|
||
</div>
|
||
|
||
<!-- P17 账本切换 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="content" style="filter:blur(1.5px);opacity:.55;">
|
||
<div class="home-header">
|
||
<div class="home-top">
|
||
<div class="book">日常账本 <svg width="14" height="14"><use href="#i-chev-d"/></svg></div>
|
||
</div>
|
||
<div class="hero">
|
||
<div class="lb">7月结余</div>
|
||
<div class="num">¥ 4,286.50</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sheet-mask">
|
||
<div class="book-sheet">
|
||
<div class="bs-t">切换账本</div>
|
||
<div class="book-card on">
|
||
<div class="bic" style="background:var(--primary-bg);color:var(--primary);"><svg width="20" height="20"><use href="#i-wallet"/></svg></div>
|
||
<div><div class="bn">日常账本</div><div class="bd">默认 · 本月 142 笔 · ¥8,513.50</div></div>
|
||
<div class="bcheck"><svg width="18" height="18"><use href="#i-check"/></svg></div>
|
||
</div>
|
||
<div class="book-card">
|
||
<div class="bic" style="background:#EAF3FF;color:#3E82E0;"><svg width="20" height="20"><use href="#i-plane"/></svg></div>
|
||
<div><div class="bn">云南旅行</div><div class="bd">2026.05 · 38 笔 · ¥6,208.00</div></div>
|
||
</div>
|
||
<div class="book-card">
|
||
<div class="bic" style="background:#FDEFF4;color:#E05585;"><svg width="20" height="20"><use href="#i-baby"/></svg></div>
|
||
<div><div class="bn">带娃开销</div><div class="bd">与家人共享 · 261 笔 · ¥23,180.00</div></div>
|
||
</div>
|
||
<div class="add-bud" style="margin-top:10px;background:#fff;"><svg width="14" height="14"><use href="#i-plus"/></svg>新建账本</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P17 · 多账本切换弹层</div>
|
||
</div>
|
||
|
||
<!-- P18 分类管理 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-chev-l"/></svg></span>分类管理<span class="action">完成</span></div>
|
||
<div class="seg"><span class="on">支出</span><span>收入</span></div>
|
||
<div class="content">
|
||
<div class="cm-hint">长按拖动排序 · 左滑或点删除移除分类</div>
|
||
<div class="list-group" style="margin-top:0;">
|
||
<div class="cm-row"><span class="drag"><svg width="16" height="16"><use href="#i-drag"/></svg></span><div class="lic" style="background:#FFF8E8;color:#D89614;"><svg width="16" height="16"><use href="#i-food"/></svg></div>餐饮<span class="del"><svg width="15" height="15"><use href="#i-trash"/></svg></span></div>
|
||
<div class="cm-row"><span class="drag"><svg width="16" height="16"><use href="#i-drag"/></svg></span><div class="lic" style="background:#FFF3EC;color:#F0642D;"><svg width="16" height="16"><use href="#i-cup"/></svg></div>饮品<span class="del"><svg width="15" height="15"><use href="#i-trash"/></svg></span></div>
|
||
<div class="cm-row"><span class="drag"><svg width="16" height="16"><use href="#i-drag"/></svg></span><div class="lic" style="background:#FDEFF4;color:#E05585;"><svg width="16" height="16"><use href="#i-cart"/></svg></div>购物<span class="del"><svg width="15" height="15"><use href="#i-trash"/></svg></span></div>
|
||
<div class="cm-row"><span class="drag"><svg width="16" height="16"><use href="#i-drag"/></svg></span><div class="lic" style="background:#EAF3FF;color:#3E82E0;"><svg width="16" height="16"><use href="#i-metro"/></svg></div>交通<span class="del"><svg width="15" height="15"><use href="#i-trash"/></svg></span></div>
|
||
<div class="cm-row"><span class="drag"><svg width="16" height="16"><use href="#i-drag"/></svg></span><div class="lic" style="background:#F2F3F5;color:var(--text2);"><svg width="16" height="16"><use href="#i-briefcase"/></svg></div>办公<span class="del"><svg width="15" height="15"><use href="#i-trash"/></svg></span></div>
|
||
</div>
|
||
<div class="add-bud" style="margin-top:12px;background:#fff;"><svg width="14" height="14"><use href="#i-plus"/></svg>自定义分类</div>
|
||
<div class="ai-insight" style="margin-top:10px;">
|
||
<div class="h"><svg width="15" height="15"><use href="#i-sparkle"/></svg>提示</div>
|
||
AI 聊天记账会自动匹配到这里的分类；删除分类后，历史账单会归入「其他」。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P18 · 分类管理</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
/* ============ v0.5 新增 ============ */
|
||
.search-bar{display:flex;align-items:center;gap:9px;background:#fff;border:.5px solid var(--line);border-radius:12px;padding:10px 13px;margin-top:8px;}
|
||
.search-bar .q{flex:1;font-size:13px;color:var(--text);}
|
||
.search-bar .q i{font-style:normal;display:inline-block;width:2px;height:15px;background:var(--primary);margin-left:1px;animation:blink 1s infinite;vertical-align:-3px;}
|
||
.search-bar .cancel{font-size:13px;color:var(--text2);}
|
||
.filter-row{display:flex;gap:8px;padding:12px 0 4px;flex-wrap:wrap;}
|
||
.f-chip{font-size:11px;color:var(--text2);background:#fff;border:.5px solid var(--line);padding:6px 12px;border-radius:14px;display:flex;align-items:center;gap:5px;}
|
||
.f-chip.on{background:var(--primary-bg);border-color:var(--primary);color:var(--primary-deep);font-weight:600;}
|
||
.search-sec{font-size:11px;color:var(--text3);margin:14px 2px 8px;}
|
||
.hist-chip{font-size:11.5px;color:var(--text2);background:#fff;border:.5px solid var(--line);padding:6px 13px;border-radius:14px;display:inline-block;margin:0 6px 8px 0;}
|
||
.result-sum{font-size:11px;color:var(--text3);padding:4px 2px 8px;}
|
||
.result-sum b{color:var(--text);}
|
||
mark{background:none;color:var(--primary);font-weight:700;}
|
||
|
||
/* 空状态 */
|
||
.empty-wrap{display:flex;flex-direction:column;align-items:center;padding:34px 30px 20px;text-align:center;}
|
||
.empty-illu{width:110px;height:110px;border-radius:50%;background:var(--ai-bg);display:flex;align-items:center;justify-content:center;color:var(--ai);position:relative;}
|
||
.empty-illu .bub{position:absolute;top:-6px;right:-22px;background:#fff;border:.5px solid var(--line);border-radius:10px 10px 10px 2px;padding:5px 9px;font-size:10px;color:var(--text2);box-shadow:0 3px 8px rgba(25,31,38,.06);}
|
||
.empty-t{font-size:15px;font-weight:700;margin-top:16px;}
|
||
.empty-d{font-size:11.5px;color:var(--text2);margin-top:6px;line-height:1.7;}
|
||
.empty-actions{display:flex;gap:10px;margin-top:18px;width:100%;}
|
||
.empty-actions .btn{flex:1;padding:12px;font-size:13.5px;}
|
||
|
||
/* 收入/转账 */
|
||
.transfer-box{background:#fff;border-radius:14px;border:.5px solid var(--line);padding:16px;display:flex;align-items:center;gap:12px;margin-top:8px;}
|
||
.acct{flex:1;text-align:center;}
|
||
.acct .aic{width:44px;height:44px;border-radius:13px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;}
|
||
.acct .an{font-size:12.5px;font-weight:600;}
|
||
.acct .ad{font-size:10px;color:var(--text3);margin-top:2px;}
|
||
.transfer-arrow{color:var(--text3);flex:none;}
|
||
|
||
/* 通知 */
|
||
.push-card{background:rgba(250,250,252,.96);border-radius:16px;padding:12px 14px;box-shadow:0 8px 26px rgba(20,30,45,.18);border:.5px solid rgba(255,255,255,.7);}
|
||
.push-head{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text2);}
|
||
.push-head .appic{width:18px;height:18px;border-radius:5px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;}
|
||
.push-head .tm{margin-left:auto;color:var(--text3);}
|
||
.push-t{font-size:12.5px;font-weight:700;margin-top:7px;}
|
||
.push-d{font-size:11.5px;color:var(--text2);margin-top:3px;line-height:1.55;}
|
||
.lock-wall{background:linear-gradient(170deg,#30354A,#1A1E30);border-radius:0;flex:1;padding:0 16px;display:flex;flex-direction:column;}
|
||
.lock-time{color:#fff;text-align:center;font-size:56px;font-weight:200;margin-top:30px;letter-spacing:2px;}
|
||
.lock-date{color:rgba(255,255,255,.75);text-align:center;font-size:13px;margin-top:2px;}
|
||
.inapp-banner{position:absolute;top:50px;left:12px;right:12px;z-index:40;background:rgba(255,255,255,.97);border-radius:15px;padding:11px 13px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px rgba(20,30,45,.2);border:.5px solid var(--line);}
|
||
.inapp-banner .tx{flex:1;min-width:0;}
|
||
.inapp-banner .t1{font-size:12.5px;font-weight:700;}
|
||
.inapp-banner .t2{font-size:11px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
||
.inapp-banner .act{font-size:11px;color:var(--ai);font-weight:600;flex:none;}
|
||
|
||
/* 全AI欢迎 */
|
||
.welcome-card{background:rgba(255,255,255,.85);border:.5px solid rgba(255,255,255,.95);border-radius:18px;padding:18px;backdrop-filter:blur(8px);text-align:center;margin:8px 0;}
|
||
.welcome-card .wt{font-size:15px;font-weight:800;margin-top:10px;}
|
||
.welcome-card .wd{font-size:11.5px;color:var(--text2);margin-top:6px;line-height:1.7;}
|
||
.try-list{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
|
||
.try-item{background:#fff;border:.5px solid var(--line);border-radius:11px;padding:10px 13px;font-size:12px;color:var(--text);display:flex;align-items:center;gap:9px;text-align:left;}
|
||
.try-item .tic{color:var(--ai);flex:none;}
|
||
.try-item .arrow{margin-left:auto;color:var(--text3);}
|
||
.offline-bar{background:#FFF4E8;border-radius:11px;padding:9px 13px;display:flex;align-items:center;gap:9px;font-size:11px;color:#9A6B2F;margin-top:8px;}
|
||
</style>
|
||
|
||
<!-- ================= v0.5 功能补全 ================= -->
|
||
<div class="section-label"><span class="tag">新增</span>搜索 · 空状态 · 收入/转账 · 通知 · 全AI欢迎页</div>
|
||
<div class="row">
|
||
|
||
<!-- P19 搜索 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="content">
|
||
<div class="search-bar">
|
||
<svg width="16" height="16" style="color:var(--text3);"><use href="#i-search"/></svg>
|
||
<div class="q">奶茶<i></i></div>
|
||
<span class="cancel">取消</span>
|
||
</div>
|
||
<div class="filter-row">
|
||
<span class="f-chip on">全部时间 <svg width="11" height="11"><use href="#i-chev-d"/></svg></span>
|
||
<span class="f-chip">分类 <svg width="11" height="11"><use href="#i-chev-d"/></svg></span>
|
||
<span class="f-chip">金额区间 <svg width="11" height="11"><use href="#i-chev-d"/></svg></span>
|
||
<span class="f-chip on">仅 AI 记账</span>
|
||
</div>
|
||
<div class="result-sum">找到 <b>12 笔</b> · 共 <b>¥216.00</b> · 试试问小账喵："我这个月奶茶花了多少"</div>
|
||
<div class="day-group">
|
||
<div class="day-head"><span>7月17日</span><span>¥18.00</span></div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div class="mid"><div class="n">一点点<mark>奶茶</mark></div><div class="d">14:32 <span class="ai-badge"><svg width="8" height="8"><use href="#i-sparkle"/></svg>AI</span></div></div>
|
||
<div class="amt">-18.00</div>
|
||
</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="day-group">
|
||
<div class="day-head"><span>7月15日</span><span>¥37.00</span></div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div class="mid"><div class="n">喜茶 · 多肉葡萄（<mark>奶茶</mark>）</div><div class="d">15:20 <span class="ai-badge"><svg width="8" height="8"><use href="#i-sparkle"/></svg>AI</span></div></div>
|
||
<div class="amt">-19.00</div>
|
||
</div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div class="mid"><div class="n">蜜雪冰城（<mark>奶茶</mark>）</div><div class="d">11:02</div></div>
|
||
<div class="amt">-8.00</div>
|
||
</div>
|
||
</div>
|
||
<div class="search-sec">搜索历史</div>
|
||
<div>
|
||
<span class="hist-chip">打车</span><span class="hist-chip">超市</span><span class="hist-chip">> ¥100</span><span class="hist-chip">上月餐饮</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P19 · 搜索（筛选 + 高亮 + AI 引导）</div>
|
||
</div>
|
||
|
||
<!-- P20 空状态首页 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="content">
|
||
<div class="home-header">
|
||
<div class="home-top">
|
||
<div class="book">日常账本 <svg width="14" height="14"><use href="#i-chev-d"/></svg></div>
|
||
<div class="rt"><svg width="19" height="19"><use href="#i-search"/></svg><svg width="19" height="19"><use href="#i-bell"/></svg></div>
|
||
</div>
|
||
<div class="hero">
|
||
<div class="lb">7月结余</div>
|
||
<div class="num">¥ 0.00</div>
|
||
<div class="io">
|
||
<div>收入<b>¥ 0.00</b></div>
|
||
<div>支出<b>¥ 0.00</b></div>
|
||
<div>预算<b>未设置</b></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="empty-wrap">
|
||
<div class="empty-illu">
|
||
<svg width="56" height="56"><use href="#i-cat"/></svg>
|
||
<div class="bub">等你记第一笔！</div>
|
||
</div>
|
||
<div class="empty-t">还没有账单</div>
|
||
<div class="empty-d">跟我说句话就能记账，比如<br>"早饭包子豆浆 6 块" · "打车 45"</div>
|
||
<div class="empty-actions">
|
||
<div class="btn ai" style="display:flex;align-items:center;justify-content:center;gap:6px;"><svg width="15" height="15"><use href="#i-chat"/></svg>和小账喵聊聊</div>
|
||
<div class="btn ghost" style="display:flex;align-items:center;justify-content:center;gap:6px;"><svg width="15" height="15"><use href="#i-plus"/></svg>手动记一笔</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active"><svg width="21" height="21"><use href="#i-home"/></svg>明细</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chart"/></svg>统计</div>
|
||
<div class="tab-fab"><svg width="22" height="22"><use href="#i-plus"/></svg></div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chat"/></svg>小账喵</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-user"/></svg>我的</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P20 · 空状态（新用户首页）</div>
|
||
</div>
|
||
|
||
<!-- P21 收入/转账 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="navbar"><span class="back"><svg width="20" height="20"><use href="#i-close"/></svg></span>记一笔</div>
|
||
<div class="seg"><span>支出</span><span class="on">收入</span><span>转账</span></div>
|
||
<div class="content">
|
||
<div class="cat-grid">
|
||
<div class="cat on"><div class="ci" style="background:var(--primary);border-color:var(--primary);color:#fff;"><svg width="21" height="21"><use href="#i-money"/></svg></div>工资</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-briefcase"/></svg></div>兼职</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-chart"/></svg></div>理财</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-gift"/></svg></div>红包</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-card"/></svg></div>报销</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-tag"/></svg></div>二手</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-sparkle"/></svg></div>奖金</div>
|
||
<div class="cat"><div class="ci"><svg width="21" height="21"><use href="#i-plus"/></svg></div>自定义</div>
|
||
</div>
|
||
<div class="search-sec" style="margin-top:4px;">转账（tab 三）示例</div>
|
||
<div class="transfer-box">
|
||
<div class="acct">
|
||
<div class="aic" style="background:var(--primary-bg);color:var(--primary);"><svg width="22" height="22"><use href="#i-wallet"/></svg></div>
|
||
<div class="an">微信零钱</div>
|
||
<div class="ad">余额 ¥328.50</div>
|
||
</div>
|
||
<div class="transfer-arrow"><svg width="22" height="22"><use href="#i-swap"/></svg></div>
|
||
<div class="acct">
|
||
<div class="aic" style="background:#EAF3FF;color:#3E82E0;"><svg width="22" height="22"><use href="#i-card"/></svg></div>
|
||
<div class="an">招行储蓄卡</div>
|
||
<div class="ad">尾号 6688</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="amount-panel">
|
||
<div class="amount-line">
|
||
<div class="cat-mini"><div class="cat-ic" style="width:32px;height:32px;background:var(--primary-bg);color:var(--primary);"><svg width="17" height="17"><use href="#i-money"/></svg></div>工资</div>
|
||
<div class="num" style="color:var(--primary);">+12,800<i></i></div>
|
||
</div>
|
||
<div class="memo-line">
|
||
<span class="memo-chip on">7月工资</span>
|
||
<span class="memo-chip">今天 10:00</span>
|
||
<span class="memo-chip">招行储蓄卡</span>
|
||
</div>
|
||
<div class="keypad">
|
||
<div class="key">1</div><div class="key">2</div><div class="key">3</div><div class="key fn">⌫</div>
|
||
<div class="key">4</div><div class="key">5</div><div class="key">6</div><div class="key fn">＋</div>
|
||
<div class="key">7</div><div class="key">8</div><div class="key">9</div><div class="key ok" style="background:var(--primary);">完成</div>
|
||
<div class="key fn">再记</div><div class="key">0</div><div class="key">.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P21 · 收入记账 + 转账示例</div>
|
||
</div>
|
||
|
||
<!-- P22 通知样式 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar" style="color:#fff;"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="lock-wall">
|
||
<div class="lock-time">21:30</div>
|
||
<div class="lock-date">7月17日 星期五</div>
|
||
<div style="height:26px;"></div>
|
||
<div class="push-card">
|
||
<div class="push-head"><span class="appic"><svg width="11" height="11"><use href="#i-cat"/></svg></span>喵记账<span class="tm">现在</span></div>
|
||
<div class="push-t">小账喵：今日小结出炉</div>
|
||
<div class="push-d">今天花了 ¥86.5，比昨天省 ¥41.5。餐饮预算还剩 ¥16，明天悠着点喵～</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="push-card">
|
||
<div class="push-head"><span class="appic"><svg width="11" height="11"><use href="#i-cat"/></svg></span>喵记账<span class="tm">2小时前</span></div>
|
||
<div class="push-t">⚠️ 饮品预算告急</div>
|
||
<div class="push-d">本周饮品预算已用 93%。是谁下午又点了奶茶？是你喵。</div>
|
||
</div>
|
||
<div style="height:10px;"></div>
|
||
<div class="push-card">
|
||
<div class="push-head"><span class="appic"><svg width="11" height="11"><use href="#i-cat"/></svg></span>喵记账<span class="tm">昨天</span></div>
|
||
<div class="push-t">7月月报已生成</div>
|
||
<div class="push-d">这个月你最烧钱的一天、最离不开的店……点开看看你的消费画像。</div>
|
||
</div>
|
||
</div>
|
||
<div style="position:relative;height:120px;background:var(--bg);">
|
||
<div class="inapp-banner">
|
||
<div class="ai-face solid" style="width:34px;height:34px;"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="tx">
|
||
<div class="t1">小账喵有话说</div>
|
||
<div class="t2">检测到支付宝账单：星巴克 ¥32，要帮你记上吗？</div>
|
||
</div>
|
||
<span class="act">记上</span>
|
||
</div>
|
||
<div style="position:absolute;bottom:14px;left:16px;right:16px;font-size:10px;color:var(--text3);text-align:center;">↑ 应用内横幅（AI 主动提醒 / 账单导入建议）</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P22 · 推送通知 + 应用内横幅</div>
|
||
</div>
|
||
|
||
<!-- P23 全AI欢迎页 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone aimode">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="aimode-head">
|
||
<div class="top">
|
||
<div class="ai-face solid" style="width:44px;height:44px;box-shadow:0 6px 14px rgba(91,107,245,.35);"><svg width="26" height="26"><use href="#i-cat"/></svg></div>
|
||
<div class="meta">
|
||
<div class="n">小账喵 <span class="persona-chip">毒舌猫娘</span></div>
|
||
<div class="s">全 AI 模式</div>
|
||
</div>
|
||
<div class="sw"><svg width="12" height="12"><use href="#i-swap"/></svg>切换模式</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-body">
|
||
<div class="welcome-card">
|
||
<div class="ai-face solid" style="width:64px;height:64px;margin:0 auto;box-shadow:0 8px 18px rgba(91,107,245,.3);"><svg width="38" height="38"><use href="#i-cat"/></svg></div>
|
||
<div class="wt">你好呀，我是小账喵</div>
|
||
<div class="wd">从现在开始，这个对话就是你的账本。<br>记账、查账、预算、月报，一句话的事。</div>
|
||
<div class="try-list">
|
||
<div class="try-item"><span class="tic"><svg width="15" height="15"><use href="#i-chat"/></svg></span>"早饭包子豆浆 6 块" —— 试试直接记一笔<span class="arrow"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="try-item"><span class="tic"><svg width="15" height="15"><use href="#i-mic"/></svg></span>按住底部麦克风，用说的也行<span class="arrow"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
<div class="try-item"><span class="tic"><svg width="15" height="15"><use href="#i-target"/></svg></span>"帮我定个每月 5000 的预算"<span class="arrow"><svg width="13" height="13"><use href="#i-chev-r"/></svg></span></div>
|
||
</div>
|
||
</div>
|
||
<div class="msg ai">
|
||
<div class="av ai-face solid"><svg width="20" height="20"><use href="#i-cat"/></svg></div>
|
||
<div class="bubble">别光看教程呀，先记一笔试试？我很快的喵</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input">
|
||
<svg width="21" height="21"><use href="#i-mic"/></svg>
|
||
<div class="field">说句话，记一笔…</div>
|
||
<svg width="21" height="21"><use href="#i-smile"/></svg>
|
||
<svg width="21" height="21"><use href="#i-plus"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P23 · 全 AI 模式首次欢迎页</div>
|
||
</div>
|
||
|
||
<!-- P24 离线状态 -->
|
||
<div class="frame-wrap">
|
||
<div class="phone">
|
||
<div class="statusbar"><span>9:41</span><div class="notch"></div><span></span></div>
|
||
<div class="screen">
|
||
<div class="content">
|
||
<div class="home-header">
|
||
<div class="home-top">
|
||
<div class="book">日常账本 <svg width="14" height="14"><use href="#i-chev-d"/></svg></div>
|
||
<div class="rt"><svg width="19" height="19"><use href="#i-search"/></svg><svg width="19" height="19"><use href="#i-bell"/></svg></div>
|
||
</div>
|
||
<div class="offline-bar">
|
||
<svg width="15" height="15"><use href="#i-offline"/></svg>
|
||
当前离线 · 手动记账可用，AI 功能恢复联网后可用 · 本地已存 2 笔待同步
|
||
</div>
|
||
<div style="height:8px;"></div>
|
||
<div class="hero" style="opacity:.98;">
|
||
<div class="lb">7月结余</div>
|
||
<div class="num">¥ 4,286.50</div>
|
||
<div class="io">
|
||
<div>收入<b>¥ 12,800.00</b></div>
|
||
<div>支出<b>¥ 8,513.50</b></div>
|
||
<div>预算剩余<b>¥ 1,900.00</b></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ai-entry" style="opacity:.55;">
|
||
<div class="ai-face" style="width:40px;height:40px;color:var(--text3);background:#F2F3F5;"><svg width="24" height="24"><use href="#i-cat"/></svg></div>
|
||
<div class="txt">
|
||
<div class="t1" style="color:var(--text3);">小账喵 · 离线中</div>
|
||
<div class="t2">联网后我就回来～期间账单我都帮你存好了</div>
|
||
</div>
|
||
<div class="go" style="background:#F2F3F5;color:var(--text3);">不可用</div>
|
||
</div>
|
||
<div class="sec-head"><span class="h">最近账单</span></div>
|
||
<div class="day-group">
|
||
<div class="day-head"><span>今天 · 7月17日</span><span>支出 ¥54.00</span></div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF8E8;color:#D89614;"><svg width="18" height="18"><use href="#i-food"/></svg></div>
|
||
<div class="mid"><div class="n">晚饭 · 面馆</div><div class="d">19:20 · <span style="color:#B58A3F;">待同步 ↑</span></div></div>
|
||
<div class="amt">-28.00</div>
|
||
</div>
|
||
<div class="titem">
|
||
<div class="cat-ic" style="background:#FFF3EC;color:#F0642D;"><svg width="18" height="18"><use href="#i-cup"/></svg></div>
|
||
<div class="mid"><div class="n">咖啡</div><div class="d">15:02 · <span style="color:#B58A3F;">待同步 ↑</span></div></div>
|
||
<div class="amt">-26.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabbar">
|
||
<div class="tab active"><svg width="21" height="21"><use href="#i-home"/></svg>明细</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-chart"/></svg>统计</div>
|
||
<div class="tab-fab"><svg width="22" height="22"><use href="#i-plus"/></svg></div>
|
||
<div class="tab" style="opacity:.45;"><svg width="21" height="21"><use href="#i-chat"/></svg>小账喵</div>
|
||
<div class="tab"><svg width="21" height="21"><use href="#i-user"/></svg>我的</div>
|
||
</div>
|
||
</div>
|
||
<div class="homebar"><i></i></div>
|
||
</div>
|
||
<div class="frame-name">P24 · 离线状态（AI 置灰 + 待同步）</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="text-align:center;color:#9AA3AD;font-size:12px;margin-top:60px;">
|
||
v0.5 · 清新简约风 · 24 个界面 · 后续以 Flutter 实现
|
||
</p>
|
||
</body>
|
||
</html>
|