Flatten records visuals and show stats summary in one row.
Use transparent chart/table surfaces on records page; merge 14 stat metrics into a single compact card row. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
+29
-9
@@ -2,12 +2,12 @@
|
||||
{% block title %}统计分析 - 国内期货监控系统{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="stats-toolbar">
|
||||
<span id="stats-updated" class="hint">正在加载统计…</span>
|
||||
<button type="button" class="btn-secondary" id="stats-refresh-btn">重新计算</button>
|
||||
</div>
|
||||
|
||||
<div class="stat-grid stat-grid-summary" id="stats-summary">
|
||||
<div class="card stats-summary-card">
|
||||
<div class="stats-toolbar">
|
||||
<span id="stats-updated" class="hint">正在加载统计…</span>
|
||||
<button type="button" class="btn-secondary" id="stats-refresh-btn">重新计算</button>
|
||||
</div>
|
||||
<div class="stat-grid stat-grid-summary" id="stats-summary">
|
||||
<div class="stat-item"><div class="label">总交易次数</div><div class="value" data-k="total_trades">-</div></div>
|
||||
<div class="stat-item"><div class="label">胜率</div><div class="value" data-k="win_rate">-</div></div>
|
||||
<div class="stat-item"><div class="label">平均盈利</div><div class="value text-profit" data-k="avg_profit">-</div></div>
|
||||
@@ -22,6 +22,7 @@
|
||||
<div class="stat-item"><div class="label">累计手续费</div><div class="value text-loss" data-k="total_fee">-</div></div>
|
||||
<div class="stat-item"><div class="label">情绪单数量</div><div class="value" data-k="emotion_count">-</div></div>
|
||||
<div class="stat-item"><div class="label">情绪单占比</div><div class="value" data-k="emotion_ratio">-</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
@@ -43,10 +44,29 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
|
||||
.stats-toolbar .btn-secondary{width:auto;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.85rem}
|
||||
.stats-summary-card{margin-bottom:1.25rem}
|
||||
.stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem;flex-wrap:wrap}
|
||||
.stats-toolbar .btn-secondary{width:auto;padding:.45rem .85rem;border-radius:8px;border:1px solid var(--input-border);background:var(--toggle-bg);color:var(--text-primary);cursor:pointer;font-size:.78rem}
|
||||
.stats-toolbar .btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
|
||||
.stat-grid-summary{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
|
||||
.stat-grid-summary{
|
||||
display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;
|
||||
margin-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
|
||||
}
|
||||
.stat-grid-summary .stat-item{
|
||||
flex:1 1 0;min-width:4.5rem;background:transparent;border:none;border-radius:0;
|
||||
padding:.35rem .2rem;text-align:center;position:relative;overflow:visible;
|
||||
border-right:1px solid var(--table-border);
|
||||
}
|
||||
.stat-grid-summary .stat-item:last-child{border-right:none}
|
||||
.stat-grid-summary .stat-item::before{display:none}
|
||||
.stat-grid-summary .stat-item:hover{transform:none;box-shadow:none}
|
||||
.stat-grid-summary .stat-item .label{
|
||||
font-size:.62rem;line-height:1.25;color:var(--text-muted);white-space:nowrap;
|
||||
}
|
||||
.stat-grid-summary .stat-item .value{
|
||||
font-size:.78rem;font-weight:600;color:var(--text-title);margin-top:.12rem;
|
||||
font-variant-numeric:tabular-nums;white-space:nowrap;
|
||||
}
|
||||
.stats-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
|
||||
.stats-card-head h2{margin-bottom:0}
|
||||
.stats-view-field{width:auto;min-width:200px}
|
||||
|
||||
Reference in New Issue
Block a user