Move options review tabs and filters above content cards.

Keep the category tabs and search toolbar page-level so they sit above the numbered trade/review/stats sections.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-19 16:39:34 +08:00
parent 17cd835e5d
commit a2d4507028
+17 -12
View File
@@ -34,7 +34,8 @@
}
.or-section-title{font-size:.95rem;font-weight:650;line-height:1.3}
.or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45}
.or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.or-toolbar{display:flex;flex-direction:column;gap:0;margin:0}
.or-tab{
border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;
padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;
@@ -45,7 +46,7 @@
}
.or-filters{
display:flex;flex-wrap:wrap;gap:8px;align-items:center;
margin-bottom:12px;padding:10px 12px;border-radius:10px;
margin:0;padding:10px 12px;border-radius:10px;
background:rgba(0,0,0,.22);border:1px solid rgba(127,127,127,.18);
}
.or-filters select,.or-filters input[type="search"],.or-filters input[type="datetime-local"]{
@@ -176,15 +177,8 @@
<button type="button" class="btn-secondary" id="or-reload-btn" style="font-size:.76rem;padding:4px 10px">刷新</button>
</div>
{# 1. 交易记录 #}
<section class="or-section" aria-labelledby="or-list-title">
<div class="or-section-head">
<span class="or-step" aria-hidden="true">1</span>
<div>
<div class="or-section-title" id="or-list-title">期权交易记录</div>
<p class="or-section-desc">点「复盘」填写表单;已复盘仍保留在此,也可在下方查看详情。</p>
</div>
</div>
{# Tab + 筛选:放在各内容卡片上方,全局作用于下方列表/统计 #}
<div class="or-toolbar">
<div class="or-tabs" role="tablist" aria-label="复盘分类">
<button type="button" class="or-tab active" data-source="option_spot" role="tab">期权交易记录</button>
<button type="button" class="or-tab" data-source="options_options" role="tab">期期对冲记录</button>
@@ -212,6 +206,17 @@
<input type="checkbox" id="or-include-hedge-legs"> 含已归属对冲的期权腿
</label>
</div>
</div>
{# 1. 交易记录 #}
<section class="or-section" aria-labelledby="or-list-title">
<div class="or-section-head">
<span class="or-step" aria-hidden="true">1</span>
<div>
<div class="or-section-title" id="or-list-title">期权交易记录</div>
<p class="or-section-desc">点「复盘」填写表单;已复盘仍保留在此,也可在下方查看详情。</p>
</div>
</div>
<div class="options-strike-table-wrap or-trades-table-wrap" id="or-trades-wrap">
<table class="options-strike-table or-trades-table" id="or-trades-table">
<thead>
@@ -389,4 +394,4 @@
</section>
</div>
<script src="/static/options_review.js?v=17"></script>
<script src="/static/options_review.js?v=18"></script>