126 lines
4.9 KiB
HTML
126 lines
4.9 KiB
HTML
<!-- 账单记录 -->
|
||
<style>
|
||
.sbi-page { display:flex; flex-direction:column; gap:16px; }
|
||
|
||
/* 筛选栏 */
|
||
.sbi-filter { display:flex; align-items:center; gap:12px; background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:14px 20px; }
|
||
.sbi-filter-right { margin-left:auto; }
|
||
|
||
/* 表格容器 */
|
||
.sbi-table-wrap { background:#fff; border-radius:var(--g-radius); border:1px solid var(--g-border); padding:0; overflow:hidden; }
|
||
.sbi-table-wrap .g-table { margin:0; }
|
||
.sbi-table-wrap .g-table th:first-child,
|
||
.sbi-table-wrap .g-table td:first-child { padding-left:20px; }
|
||
.sbi-table-wrap .g-table th:last-child,
|
||
.sbi-table-wrap .g-table td:last-child { padding-right:20px; }
|
||
.sbi-mono { font-family:'SF Mono','Cascadia Code','Consolas',monospace; font-size:12px; letter-spacing:0.3px; }
|
||
.sbi-amount { font-weight:600; color:var(--g-text); }
|
||
|
||
/* 分页容器 */
|
||
.sbi-pagi { display:flex; justify-content:flex-end; padding:0 4px; }
|
||
</style>
|
||
|
||
<div class="sbi-page">
|
||
<!-- 筛选栏 -->
|
||
<div class="sbi-filter">
|
||
<select class="g-select" style="width:120px;">
|
||
<option>2026年</option>
|
||
<option>2025年</option>
|
||
<option>2024年</option>
|
||
</select>
|
||
<select class="g-select" style="width:140px;">
|
||
<option>全部类型</option>
|
||
<option>新购</option>
|
||
<option>续费</option>
|
||
<option>升级</option>
|
||
<option>增值包</option>
|
||
</select>
|
||
<div class="sbi-filter-right">
|
||
<button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;"></i>导出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<div class="sbi-table-wrap">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th>账单编号</th>
|
||
<th>日期</th>
|
||
<th>类型</th>
|
||
<th>套餐 / 项目</th>
|
||
<th>金额</th>
|
||
<th>支付方式</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="sbi-mono">BIL20260213001</span></td>
|
||
<td>2026-02-13</td>
|
||
<td><span class="g-tag g-tag-green">续费</span></td>
|
||
<td>专业版（1年）</td>
|
||
<td><span class="sbi-amount">¥4,980.00</span></td>
|
||
<td>微信支付</td>
|
||
<td><span class="g-tag g-tag-green">已支付</span></td>
|
||
<td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="sbi-mono">BIL20250801001</span></td>
|
||
<td>2025-08-01</td>
|
||
<td><span class="g-tag g-tag-orange">升级</span></td>
|
||
<td>基础版→专业版（补差价）</td>
|
||
<td><span class="sbi-amount">¥2,400.00</span></td>
|
||
<td>支付宝</td>
|
||
<td><span class="g-tag g-tag-green">已支付</span></td>
|
||
<td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="sbi-mono">BIL20250501001</span></td>
|
||
<td>2025-05-01</td>
|
||
<td><span class="g-tag g-tag-gray">增值包</span></td>
|
||
<td>短信包 5000条</td>
|
||
<td><span class="sbi-amount">¥200.00</span></td>
|
||
<td>微信支付</td>
|
||
<td><span class="g-tag g-tag-green">已支付</span></td>
|
||
<td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="sbi-mono">BIL20250213001</span></td>
|
||
<td>2025-02-13</td>
|
||
<td><span class="g-tag g-tag-blue">新购</span></td>
|
||
<td>基础版（1年）</td>
|
||
<td><span class="sbi-amount">¥1,980.00</span></td>
|
||
<td>微信支付</td>
|
||
<td><span class="g-tag g-tag-green">已支付</span></td>
|
||
<td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="sbi-mono">BIL20250213002</span></td>
|
||
<td>2025-02-13</td>
|
||
<td><span class="g-tag g-tag-gray">增值包</span></td>
|
||
<td>额外存储 5GB</td>
|
||
<td><span class="sbi-amount">¥300.00</span></td>
|
||
<td>支付宝</td>
|
||
<td><span class="g-tag g-tag-green">已支付</span></td>
|
||
<td><a class="g-action">查看</a><a class="g-action" style="margin-left:8px;">下载发票</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="sbi-pagi">
|
||
<div class="g-pagination">
|
||
<button class="g-page-btn" disabled><i data-lucide="chevron-left" style="width:14px;height:14px;"></i></button>
|
||
<button class="g-page-btn active">1</button>
|
||
<button class="g-page-btn"><i data-lucide="chevron-right" style="width:14px;height:14px;"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
if(typeof lucide!=='undefined'){lucide.createIcons();}
|
||
</script>
|