63 lines
2.4 KiB
HTML
63 lines
2.4 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="m15 18-6-6 6-6"/></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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6"/><path d="M22 11h-6"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="content">
|
|
<p class="section-title">家庭日常</p>
|
|
<section class="invite-box">
|
|
<div class="row">
|
|
<div>
|
|
<strong>邀请成员加入账本</strong>
|
|
<div class="muted">链接 24 小时后过期</div>
|
|
</div>
|
|
<button class="primary">生成</button>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="section-title">当前成员</p>
|
|
<article class="member">
|
|
<div class="avatar">我</div>
|
|
<div><strong>自己</strong><div class="muted">owner · 可邀请和移除成员</div></div>
|
|
<span class="badge">拥有者</span>
|
|
</article>
|
|
<article class="member">
|
|
<div class="avatar">王</div>
|
|
<div><strong>小王</strong><div class="muted">member · 可查看和记账</div></div>
|
|
<span class="badge">成员</span>
|
|
</article>
|
|
<article class="member">
|
|
<div class="avatar">李</div>
|
|
<div><strong>小李</strong><div class="muted">member · 最近同步 10:42</div></div>
|
|
<span class="badge">成员</span>
|
|
</article>
|
|
|
|
<p class="section-title">权限说明</p>
|
|
<div class="ledger-card">
|
|
<div class="muted">首版只做账本级权限。同一账本内成员共享全量流水，不做单条账目权限。</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|