dekun
73 lines
3.3 KiB
HTML
73 lines
3.3 KiB
HTML
{# 账户流水:资金/交易 Tab · 交易所账单 · SSE #}
|
|
<div class="card full account-ledger-card" id="account-ledger-root" data-account-ledger="1">
|
|
<div class="account-ledger-head">
|
|
<div>
|
|
<h2 style="margin-bottom:4px">账户流水</h2>
|
|
<p class="muted account-ledger-desc">拉取交易所资金账户与交易账户账单 · 时间跟随顶栏 UTC 预设 · 约 2 分钟自动同步</p>
|
|
</div>
|
|
<div class="account-ledger-head-actions">
|
|
<span class="muted" id="account-ledger-sync">—</span>
|
|
<button type="button" class="btn-sm" id="account-ledger-refresh">立即同步</button>
|
|
</div>
|
|
</div>
|
|
<div class="account-ledger-tabs" role="tablist">
|
|
<button type="button" class="account-ledger-tab active" data-ledger-account="funding" role="tab" aria-selected="true">资金账户</button>
|
|
<button type="button" class="account-ledger-tab" data-ledger-account="trading" role="tab" aria-selected="false">交易账户</button>
|
|
</div>
|
|
<p class="muted account-ledger-status" id="account-ledger-status"></p>
|
|
<div class="account-ledger-table-wrap panel-scroll">
|
|
<table class="account-ledger-table" id="account-ledger-table">
|
|
<thead>
|
|
<tr>
|
|
<th>时间(北京)</th>
|
|
<th>币种</th>
|
|
<th>类型</th>
|
|
<th>变动</th>
|
|
<th>余额</th>
|
|
<th>合约/备注</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="account-ledger-tbody">
|
|
<tr><td colspan="6" class="muted">加载中…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="account-ledger-pager" id="account-ledger-pager">
|
|
<button type="button" class="btn-sm" id="account-ledger-prev" disabled>上一页</button>
|
|
<span class="muted" id="account-ledger-page-info">—</span>
|
|
<button type="button" class="btn-sm" id="account-ledger-next" disabled>下一页</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.account-ledger-card { grid-column: 1 / -1; }
|
|
.account-ledger-head {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
|
|
}
|
|
.account-ledger-head-actions { display: flex; align-items: center; gap: 10px; }
|
|
.account-ledger-tabs {
|
|
display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
|
|
}
|
|
.account-ledger-tab {
|
|
border: 1px solid rgba(140,160,200,.35);
|
|
background: transparent; color: #c5cbe0;
|
|
border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: .9rem;
|
|
}
|
|
.account-ledger-tab.active {
|
|
background: #1f3a5a; border-color: #3d6f9c; color: #e8f1ff;
|
|
}
|
|
.account-ledger-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
|
|
.account-ledger-table th, .account-ledger-table td {
|
|
padding: 8px 10px; border-bottom: 1px solid rgba(120,130,160,.2); text-align: left;
|
|
}
|
|
.account-ledger-table th { color: #9aa3bd; font-weight: 600; }
|
|
.account-ledger-amt-pos { color: #3ecf8e; }
|
|
.account-ledger-amt-neg { color: #f07178; }
|
|
.account-ledger-pager {
|
|
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
.account-ledger-status { min-height: 1.2em; margin: 0 0 8px; }
|
|
.account-ledger-table-wrap { max-height: min(60vh, 560px); overflow: auto; }
|
|
</style>
|