176 lines
7.1 KiB
HTML
176 lines
7.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="flow-stage">
|
|
<section class="flow-intro">
|
|
<h1>分类轮盘步骤示意</h1>
|
|
<p>快速记账在账本流水页底部抽屉内完成。轮盘是临时选择态，不能把所有层级同时放在一个画面里。</p>
|
|
</section>
|
|
|
|
<div class="flow-grid">
|
|
<section class="phone flow-phone">
|
|
<header class="mini-appbar">
|
|
<span>1</span>
|
|
<strong>抽屉默认态</strong>
|
|
</header>
|
|
<div class="drawer-demo">
|
|
<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">
|
|
<span>支出</span>
|
|
<span>餐饮</span>
|
|
<strong>外卖</strong>
|
|
</div>
|
|
<button class="date-pill">今天 12:30</button>
|
|
</div>
|
|
<div class="note-line drawer-note-line">
|
|
<input value="午餐" aria-label="备注" />
|
|
</div>
|
|
<div class="mini-keypad">
|
|
<span>7</span><span>8</span><span>9</span><span class="category-cell">支出</span>
|
|
<span>4</span><span>5</span><span>6</span><span>+</span>
|
|
<span>1</span><span>2</span><span>3</span><span>-</span>
|
|
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="phone flow-phone">
|
|
<header class="mini-appbar">
|
|
<span>2</span>
|
|
<strong>点击支出按钮</strong>
|
|
</header>
|
|
<div class="drawer-demo">
|
|
<div class="amount-line drawer-amount-line">
|
|
<strong>58.00</strong>
|
|
</div>
|
|
<div class="selection-row">
|
|
<div class="selected-path">
|
|
<span>支出</span>
|
|
</div>
|
|
<button class="date-pill">今天 12:30</button>
|
|
</div>
|
|
<div class="floating-choice">
|
|
<div class="radial-step type-step" aria-label="类型选择">
|
|
<button class="radial-center">✓</button>
|
|
<button class="radial-node type-expense active">支出</button>
|
|
<button class="radial-node type-income">收入</button>
|
|
</div>
|
|
</div>
|
|
<div class="mini-keypad active-picker">
|
|
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
|
<span>4</span><span>5</span><span>6</span><span>+</span>
|
|
<span>1</span><span>2</span><span>3</span><span>-</span>
|
|
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="phone flow-phone">
|
|
<header class="mini-appbar">
|
|
<span>3</span>
|
|
<strong>选择支出后</strong>
|
|
</header>
|
|
<div class="drawer-demo">
|
|
<div class="amount-line drawer-amount-line">
|
|
<strong>58.00</strong>
|
|
</div>
|
|
<div class="selection-row">
|
|
<div class="selected-path">
|
|
<span>支出</span>
|
|
</div>
|
|
<button class="date-pill">今天 12:30</button>
|
|
</div>
|
|
<div class="floating-choice">
|
|
<div class="radial-step category-step" aria-label="支出分类选择">
|
|
<button class="radial-center">✓</button>
|
|
<button class="radial-node category-food active">餐饮</button>
|
|
<button class="radial-node category-transit">交通</button>
|
|
<button class="radial-node category-daily">日用</button>
|
|
<button class="radial-node category-shop">购物</button>
|
|
</div>
|
|
</div>
|
|
<div class="mini-keypad active-picker">
|
|
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
|
<span>4</span><span>5</span><span>6</span><span>+</span>
|
|
<span>1</span><span>2</span><span>3</span><span>-</span>
|
|
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="phone flow-phone">
|
|
<header class="mini-appbar">
|
|
<span>4</span>
|
|
<strong>进入子分类</strong>
|
|
</header>
|
|
<div class="drawer-demo">
|
|
<div class="amount-line drawer-amount-line">
|
|
<strong>58.00</strong>
|
|
</div>
|
|
<div class="selection-row">
|
|
<div class="selected-path">
|
|
<span>支出</span>
|
|
<span>餐饮</span>
|
|
</div>
|
|
<button class="date-pill">今天 12:30</button>
|
|
</div>
|
|
<div class="floating-choice">
|
|
<div class="radial-step subcategory-step" aria-label="餐饮子分类选择">
|
|
<button class="radial-center">✓</button>
|
|
<button class="radial-node sub-takeout active">外卖</button>
|
|
<button class="radial-node sub-restaurant">饭店</button>
|
|
<button class="radial-node sub-coffee">咖啡</button>
|
|
</div>
|
|
</div>
|
|
<div class="mini-keypad active-picker">
|
|
<span>7</span><span>8</span><span>9</span><strong class="confirm-cell">✓</strong>
|
|
<span>4</span><span>5</span><span>6</span><span>+</span>
|
|
<span>1</span><span>2</span><span>3</span><span>-</span>
|
|
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="phone flow-phone">
|
|
<header class="mini-appbar">
|
|
<span>5</span>
|
|
<strong>确认当前层级</strong>
|
|
</header>
|
|
<div class="drawer-demo">
|
|
<div class="amount-line drawer-amount-line">
|
|
<strong>58.00</strong>
|
|
</div>
|
|
<div class="selection-row">
|
|
<div class="selected-path">
|
|
<span>支出</span>
|
|
<span>餐饮</span>
|
|
<strong>外卖</strong>
|
|
</div>
|
|
<button class="date-pill">今天 12:30</button>
|
|
</div>
|
|
<div class="note-line drawer-note-line">
|
|
<input value="午餐" aria-label="备注" />
|
|
</div>
|
|
<div class="mini-keypad">
|
|
<span>7</span><span>8</span><span>9</span><span class="category-cell">外卖</span>
|
|
<span>4</span><span>5</span><span>6</span><span>+</span>
|
|
<span>1</span><span>2</span><span>3</span><span>-</span>
|
|
<span>.</span><span>0</span><span>⌫</span><strong>✓</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|