yangxiangyuan
117 lines
4.2 KiB
HTML
117 lines
4.2 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="icon" href="/icons/funds.svg" type="image/svg+xml" />
|
|
<link rel="stylesheet" href="/common/common.css" />
|
|
<link rel="stylesheet" href="/tools/funds/funds.css" />
|
|
|
|
<!-- 吉祥字体 -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=TsangerYuMo&display=swap" rel="stylesheet">
|
|
|
|
<!-- 吉祥装饰图标 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>财富好管家 · 本金变动池</title>
|
|
<link rel="icon" href="/icons/funds.svg" type="image/svg+xml" />
|
|
<link rel="stylesheet" href="/common/common.css" />
|
|
<link rel="stylesheet" href="/tools/funds/funds.css" />
|
|
|
|
<!-- 吉祥字体 -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=TsangerYuMo&display=swap" rel="stylesheet">
|
|
|
|
<!-- 吉祥装饰图标 -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- 吉祥背景装饰 -->
|
|
<div class="lucky-bg">
|
|
<div class="gold-coin coin-1">💰</div>
|
|
<div class="gold-coin coin-2">💰</div>
|
|
<div class="gold-coin coin-3">💰</div>
|
|
<div class="gold-coin coin-4">💰</div>
|
|
|
|
<!-- 右上角灯笼 -->
|
|
<div class="lucky-lantern right">
|
|
<i class="fas fa-gift" style="color: #C1272D;"></i>
|
|
<div class="lantern-tassel"></div>
|
|
</div>
|
|
|
|
<!-- 左上角灯笼 -->
|
|
<div class="lucky-lantern left">
|
|
<i class="fas fa-gift" style="color: #C1272D;"></i>
|
|
<div class="lantern-tassel"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="container">
|
|
<!-- 吉祥标题 -->
|
|
<div class="lucky-header">
|
|
<h1>💰 财富流转 · 生生不息</h1>
|
|
<p class="lucky-subtitle">记录每一分财富的来去，汇聚八方财源</p>
|
|
</div>
|
|
<section class="toolbar">
|
|
<input id="date-start" type="date" />
|
|
<input id="date-end" type="date" />
|
|
<select id="type-filter">
|
|
<option value="all">全部</option>
|
|
<option value="in">汇入</option>
|
|
<option value="out">汇出</option>
|
|
</select>
|
|
<input id="kw" type="text" placeholder="银行/备注检索" />
|
|
<button id="btn-load" class="btn">查询</button>
|
|
<button id="btn-export" class="btn">导出CSV</button>
|
|
<button id="btn-settings" class="btn">设置</button>
|
|
</section>
|
|
<div id="funds-status" class="status" style="display:none"></div>
|
|
|
|
<section class="add-bar">
|
|
<input id="new-date" type="date" required />
|
|
<select id="new-type" required>
|
|
<option value="in">汇入</option>
|
|
<option value="out">汇出</option>
|
|
</select>
|
|
<input id="new-amount" type="text" placeholder="金额（人民币），如 20,000.00 或 -5000" required />
|
|
<input id="new-bank" type="text" placeholder="银行方/状态" required />
|
|
<input id="new-remark" type="text" placeholder="备注" required />
|
|
<button id="btn-add" class="btn">新增</button>
|
|
</section>
|
|
|
|
<section class="stats" id="stats"></section>
|
|
|
|
<section class="table-wrap">
|
|
<table class="flows" id="flows">
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th>类型</th>
|
|
<th>金额（人民币）</th>
|
|
<th>银行方/状态</th>
|
|
<th>期末金额</th>
|
|
<th>备注</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="flows-body"></tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section class="debug" id="funds-debug" style="display:none">
|
|
<div class="debug-actions">
|
|
<button id="fd-btn-copy" class="btn">复制调试信息</button>
|
|
<button id="fd-btn-refresh" class="btn">刷新</button>
|
|
<button id="fd-btn-clear" class="btn">清空</button>
|
|
</div>
|
|
<div id="fd-output" class="debug-output"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/common/common.js"></script>
|
|
<script src="/tools/funds/funds.js"></script>
|
|
</body>
|
|
</html>
|