77 lines
2.8 KiB
HTML
77 lines
2.8 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">
|
|
<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="M20 6v5h-5"/><path d="M4 18v-5h5"/><path d="M18 11a6 6 0 0 0-10-4l-4 4"/><path d="M6 13a6 6 0 0 0 10 4l4-4"/></svg>
|
|
</button>
|
|
<h1 class="title">账本</h1>
|
|
<button class="icon-button" aria-label="新增账本">
|
|
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<p class="section-title">我的账本</p>
|
|
|
|
<article class="ledger-card">
|
|
<div class="ledger-head">
|
|
<div>
|
|
<h2 class="ledger-name">家庭日常</h2>
|
|
<span class="muted">3 名成员 · 今天已同步</span>
|
|
</div>
|
|
<span class="badge">共享</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="action">设置</button>
|
|
<button class="action">报表</button>
|
|
<button class="action">成员</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="ledger-card">
|
|
<div class="ledger-head">
|
|
<div>
|
|
<h2 class="ledger-name">旅行备用</h2>
|
|
<span class="muted">仅自己 · 12 条流水</span>
|
|
</div>
|
|
<span class="badge">独享</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="action">设置</button>
|
|
<button class="action">报表</button>
|
|
<button class="action">成员</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="ledger-card">
|
|
<div class="ledger-head">
|
|
<div>
|
|
<h2 class="ledger-name">装修记录</h2>
|
|
<span class="muted">2 名成员 · 有 2 条待同步</span>
|
|
</div>
|
|
<span class="badge">共享</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="action">设置</button>
|
|
<button class="action">报表</button>
|
|
<button class="action">成员</button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|