62 lines
2.3 KiB
HTML
62 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}行情数据{% endblock %}
|
|
{% block heading %}行情数据{% endblock %}
|
|
{% block breadcrumb %}<a href="/contracts/">合约总览</a>{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
{% for pg in product_groups %}
|
|
<div style="margin-bottom:24px;border:1px solid var(--border);border-radius:10px;overflow:hidden;">
|
|
<div class="product-header"
|
|
style="display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--th-bg);cursor:pointer;user-select:none;"
|
|
onclick="toggleProduct(this)">
|
|
<span class="collapse-arrow" style="font-size:0.75rem;transition:transform .2s;display:inline-block;transform:rotate(0deg);">▼</span>
|
|
<strong style="font-size:0.92rem;">{{ pg.code }} · {{ pg.name }}</strong>
|
|
<span style="font-size:0.78rem;color:var(--sub);">{{ pg.exchange }}</span>
|
|
<span style="font-size:0.78rem;color:var(--sub);margin-left:8px;">{{ pg.contracts|length }} 合约</span>
|
|
</div>
|
|
<div class="product-body">
|
|
<table>
|
|
<tr><th>合约</th><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>振幅</th><th>操作</th></tr>
|
|
{% for c in pg.contracts %}
|
|
<tr>
|
|
<td><strong>{{ c }}</strong></td>
|
|
{% if c in contract_bars %}
|
|
<td>{{ contract_bars[c].date }}</td>
|
|
<td>{{ contract_bars[c].open|int }}</td>
|
|
<td>{{ contract_bars[c].close|int }}</td>
|
|
<td>{{ contract_bars[c].high|int }}</td>
|
|
<td>{{ contract_bars[c].low|int }}</td>
|
|
<td>
|
|
{% if contract_bars[c].amp_5d %}
|
|
<span class="badge badge-up">{{ contract_bars[c].amp_5d|int }}</span>
|
|
{% else %}
|
|
<span class="na">—</span>
|
|
{% endif %}
|
|
</td>
|
|
{% else %}
|
|
<td colspan="6" class="na">暂无数据</td>
|
|
{% endif %}
|
|
<td><a href="/contracts/{{ c }}" style="color:var(--accent);text-decoration:none;">详情 →</a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
function toggleProduct(header) {
|
|
var body = header.nextElementSibling;
|
|
var arrow = header.querySelector('.collapse-arrow');
|
|
if (body.style.display === 'none') {
|
|
body.style.display = 'block';
|
|
arrow.style.transform = 'rotate(0deg)';
|
|
} else {
|
|
body.style.display = 'none';
|
|
arrow.style.transform = 'rotate(-90deg)';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|