dekun
86 lines
4.6 KiB
HTML
86 lines
4.6 KiB
HTML
{# 实例数据统计:上方期权复盘 KPI/分组,下方资金曲线 #}
|
|
<div class="card ods-page full" id="options-data-stats" data-source-type="option_spot">
|
|
<style>
|
|
.ods-page{grid-column:1/-1}
|
|
.ods-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
|
|
.ods-head h2{margin:0;font-size:1.05rem}
|
|
.ods-section{margin-bottom:22px}
|
|
.ods-section-title{font-weight:650;font-size:.9rem;margin-bottom:4px}
|
|
.ods-section-desc{font-size:.72rem;opacity:.7;margin:0 0 12px}
|
|
.ods-kpi-row{
|
|
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
|
|
gap:8px;margin-bottom:12px;
|
|
}
|
|
.ods-kpi-tile{
|
|
border:1px solid rgba(127,127,127,.22);border-radius:10px;
|
|
padding:10px 12px;background:rgba(0,0,0,.2);min-width:0;
|
|
}
|
|
.ods-kpi-label{font-size:.7rem;opacity:.7;margin-bottom:4px}
|
|
.ods-kpi-value{font-size:.95rem;font-weight:650;letter-spacing:.01em;word-break:break-all}
|
|
.ods-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
|
|
.ods-stat-card{
|
|
border:1px solid rgba(127,127,127,.22);border-radius:10px;
|
|
padding:10px 12px;background:rgba(0,0,0,.16);font-size:.76rem;
|
|
}
|
|
.ods-stat-card-title{
|
|
font-weight:650;margin-bottom:8px;font-size:.78rem;
|
|
padding-bottom:6px;border-bottom:1px solid rgba(127,127,127,.18);
|
|
}
|
|
.ods-stat-row{
|
|
display:flex;justify-content:space-between;align-items:baseline;gap:10px;
|
|
padding:5px 0;border-bottom:1px solid rgba(127,127,127,.1);
|
|
}
|
|
.ods-stat-row:last-child{border-bottom:none;padding-bottom:0}
|
|
.ods-stat-key{opacity:.9;min-width:0;overflow:hidden;text-overflow:ellipsis}
|
|
.ods-stat-val{flex-shrink:0;font-variant-numeric:tabular-nums;opacity:.85}
|
|
.ods-curve-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
|
|
.ods-range-btn{
|
|
font-size:.76rem;padding:4px 10px;border-radius:6px;cursor:pointer;
|
|
border:1px solid rgba(127,127,127,.3);background:transparent;color:inherit;
|
|
}
|
|
.ods-range-btn.active{border-color:rgba(90,160,255,.7);background:rgba(90,160,255,.12)}
|
|
.ods-curve-meta{font-size:.72rem;opacity:.75;margin-left:auto}
|
|
.ods-curve-wrap{
|
|
border:1px solid rgba(127,127,127,.22);border-radius:10px;
|
|
padding:12px 10px 8px;background:rgba(0,0,0,.14);
|
|
}
|
|
.ods-curve-svg{width:100%;height:240px;display:block}
|
|
.ods-pnl-pos{color:#3dd68c}
|
|
.ods-pnl-neg{color:#f07178}
|
|
@media (max-width:900px){.ods-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
@media (max-width:640px){
|
|
.ods-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.ods-curve-svg{height:200px}
|
|
}
|
|
</style>
|
|
|
|
<div class="ods-head">
|
|
<h2>数据统计</h2>
|
|
<span class="muted" id="ods-status" style="font-size:.72rem"></span>
|
|
<button type="button" class="btn-secondary" id="ods-reload-btn" style="font-size:.76rem;padding:4px 10px">刷新</button>
|
|
</div>
|
|
|
|
<section class="ods-section" aria-labelledby="ods-review-heading">
|
|
<div class="ods-section-title" id="ods-review-heading">期权复盘统计</div>
|
|
<p class="ods-section-desc">与「期权复盘」页统计同源;复盘页内统计仍保留。</p>
|
|
<div id="ods-kpi" class="ods-kpi-row"></div>
|
|
<div id="ods-stats-groups" class="ods-stats-grid"></div>
|
|
</section>
|
|
|
|
<section class="ods-section" aria-labelledby="ods-curve-heading">
|
|
<div class="ods-section-title" id="ods-curve-heading">已实现盈亏曲线</div>
|
|
<p class="ods-section-desc">累计已实现盈亏(期权平仓真盈亏U累加);划转/提现不影响。</p>
|
|
<div class="ods-curve-toolbar">
|
|
<button type="button" class="ods-range-btn active" data-range="today">今日</button>
|
|
<button type="button" class="ods-range-btn" data-range="7d">7日</button>
|
|
<button type="button" class="ods-range-btn" data-range="30d">30日</button>
|
|
<button type="button" class="ods-range-btn" data-range="all">全部</button>
|
|
<span class="ods-curve-meta" id="ods-curve-meta">—</span>
|
|
</div>
|
|
<div class="ods-curve-wrap">
|
|
<svg id="ods-curve-svg" class="ods-curve-svg" viewBox="0 0 640 240" preserveAspectRatio="none" role="img" aria-label="已实现盈亏曲线"></svg>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script src="/static/options_data_stats.js?v=3"></script>
|