85 lines
4.1 KiB
HTML
85 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>账本流水原型</title>
|
|
<link rel="stylesheet" href="./原型样式.css" />
|
|
</head>
|
|
<body>
|
|
<main class="stage">
|
|
<section class="phone phone-relative">
|
|
<header class="appbar">
|
|
<div class="toolbar">
|
|
<button class="icon-button" aria-label="报表">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19V5"/><path d="M8 17V9"/><path d="M12 17V7"/><path d="M16 17v-4"/><path d="M20 17V6"/></svg>
|
|
</button>
|
|
<h1 class="title">家庭日常</h1>
|
|
<button class="icon-button" aria-label="更多">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="stats">
|
|
<div class="stat"><strong>8,240</strong><span>收入</span></div>
|
|
<div class="stat"><strong>5,986</strong><span>结余</span></div>
|
|
<div class="stat"><strong>2,254</strong><span>支出</span></div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<div class="day">今天 · 7 月 18 日</div>
|
|
<article class="entry">
|
|
<div class="entry-icon">餐</div>
|
|
<div class="entry-main"><strong>午餐</strong><span>餐饮 · 小王</span></div>
|
|
<div class="entry-amount"><strong class="expense">-58.00</strong><span>12:28</span></div>
|
|
</article>
|
|
<article class="entry">
|
|
<div class="entry-icon">行</div>
|
|
<div class="entry-main"><strong>打车</strong><span>交通 · 自己</span></div>
|
|
<div class="entry-amount"><strong class="expense">-31.50</strong><span>09:16</span></div>
|
|
</article>
|
|
|
|
<div class="day">昨天 · 7 月 17 日</div>
|
|
<article class="entry">
|
|
<div class="entry-icon">薪</div>
|
|
<div class="entry-main"><strong>工资</strong><span>收入 · 自己</span></div>
|
|
<div class="entry-amount"><strong class="income">+8,240.00</strong><span>18:02</span></div>
|
|
</article>
|
|
<article class="entry">
|
|
<div class="entry-icon">购</div>
|
|
<div class="entry-main"><strong>超市采购</strong><span>日用 · 小王</span></div>
|
|
<div class="entry-amount"><strong class="expense">-236.80</strong><span>16:45</span></div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="drawer-scrim" aria-hidden="true"></div>
|
|
<section class="entry-drawer" aria-label="快速记账抽屉">
|
|
<div class="drawer-handle" aria-hidden="true"></div>
|
|
<div class="amount-line drawer-amount-line">
|
|
<strong>58.00</strong>
|
|
</div>
|
|
|
|
<div class="selection-row">
|
|
<div class="selected-path" aria-label="当前分类">
|
|
<span>支出</span>
|
|
<span>餐饮</span>
|
|
<strong>外卖</strong>
|
|
</div>
|
|
<button class="date-pill" aria-label="选择日期时间">今天 12:30</button>
|
|
</div>
|
|
|
|
<div class="note-line drawer-note-line">
|
|
<input value="午餐" aria-label="备注" />
|
|
</div>
|
|
<div class="keypad">
|
|
<button class="key">7</button><button class="key">8</button><button class="key">9</button><button class="key category-key" aria-label="分类选择">支出</button>
|
|
<button class="key">4</button><button class="key">5</button><button class="key">6</button><button class="key">+</button>
|
|
<button class="key">1</button><button class="key">2</button><button class="key">3</button><button class="key">-</button>
|
|
<button class="key">.</button><button class="key">0</button><button class="key utility-key" aria-label="退格">⌫</button><button class="key commit-key" aria-label="确认">✓</button>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|