dekun/crypto_okx_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

总览报价与卡片右对齐并上移北京时间，标题下移，持仓列 Put 红 Call 绿。

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-04 20:10:22 +08:00
parent dcee212434
commit a70d2703c9
4 changed files with 90 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/hub.css
+34 -30
View File
@@ -54,9 +54,9 @@ a:hover { color: #7dd3fc; }
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
gap: 12px;
min-height: 0;
padding: 18px 28px 14px;
padding: 40px 28px 16px;
border-bottom: 1px solid var(--line);
background: rgba(8, 14, 26, 0.75);
backdrop-filter: blur(12px);
@@ -75,14 +75,7 @@ a:hover { color: #7dd3fc; }
.topbar-brand:hover {
color: #ffffff;
}
.topbar-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 10px 12px;
}
.topbar-nav {
grid-column: 2;
display: flex;
justify-content: center;
flex-wrap: wrap;
@@ -108,8 +101,6 @@ a:hover { color: #7dd3fc; }
text-shadow: none;
}
.top-nav-spot-tickers {
grid-column: 3;
justify-self: end;
display: flex;
flex-direction: column;
gap: 3px;
@@ -174,7 +165,7 @@ a:hover { color: #7dd3fc; }
.nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
.topbar-logout {
position: absolute;
top: 18px;
top: 28px;
right: 22px;
color: var(--muted);
font-size: 0.82rem;
@@ -183,21 +174,11 @@ a:hover { color: #7dd3fc; }
.topbar-logout:hover {
color: #e8f1ff;
}
@media (max-width: 1100px) {
.topbar-row {
grid-template-columns: 1fr;
}
.topbar-nav,
.top-nav-spot-tickers {
grid-column: 1;
justify-self: center;
}
}
@media (max-width: 720px) {
.topbar {
min-height: 0;
padding: 16px 16px 12px;
gap: 8px;
padding: 28px 16px 12px;
gap: 10px;
}
.topbar-brand {
font-size: 1.35rem;
@@ -255,8 +236,23 @@ body.page-login .main {
font-weight: 600;
letter-spacing: 0.04em;
}
.overview-bj-clock {
.overview-head {
align-items: flex-start;
}
.overview-head-right {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.overview-head-clock-row {
display: inline-flex;
align-items: center;
gap: 12px;
}
.overview-bj-clock {
margin-left: 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
@@ -323,12 +319,13 @@ body.page-login .main {
}
@media (max-width: 720px) {
.page-head { flex-wrap: wrap; }
.overview-bj-clock {
.overview-head-right {
margin-left: 0;
order: 3;
width: 100%;
justify-content: flex-start;
padding-top: 2px;
align-items: flex-start;
}
.overview-head-clock-row {
flex-wrap: wrap;
}
}
.muted { color: var(--muted); font-size: 0.9rem; }
@@ -834,10 +831,17 @@ button, .btn {
background: rgba(52, 211, 153, 0.16);
}
.overview-cond-wait-line {
color: #9ec0ff;
font-size: 0.8rem;
font-weight: 600;
}
.opt-side-put,
.overview-cond-wait.opt-side-put .overview-cond-wait-line {
color: #fb7185;
}
.opt-side-call,
.overview-cond-wait.opt-side-call .overview-cond-wait-line {
color: #34d399;
}
.overview-cond-src {
display: inline-block;
margin-left: 6px;
static/hub.js
+18 -2
View File
@@ -77,6 +77,16 @@
);
}
function optSideClass(optType, instId) {
const t = String(optType || "").toUpperCase();
if (t === "P") return "opt-side-put";
if (t === "C") return "opt-side-call";
const id = String(instId || "").toUpperCase();
if (id.indexOf("-P-") >= 0 || id.slice(-2) === "-P") return "opt-side-put";
if (id.indexOf("-C-") >= 0 || id.slice(-2) === "-C") return "opt-side-call";
return "";
}
function condWaitLine(cond) {
if (!cond) return "条件单占用";
const put = String(cond.opt_type || "").toUpperCase() !== "C";
@@ -98,8 +108,11 @@
const list = brief || [];
if (!list.length) {
if (cond) {
const sideCls = optSideClass(cond.opt_type, "");
return (
'<div class="overview-cond-wait">' +
'<div class="overview-cond-wait' +
(sideCls ? " " + sideCls : "") +
'">' +
'<div class="overview-cond-wait-line">' +
escapeHtml(condWaitLine(cond)) +
"</div></div>"
@@ -113,8 +126,11 @@
const id = p.inst_id || "";
const sheets = escapeHtml(String(p.sheets != null ? p.sheets : "—"));
const fromCond = tagOpen && (!opened || opened === id);
const sideCls = optSideClass(p.opt_type, id);
return (
"<li>" +
'<li class="' +
sideCls +
'">' +
escapeHtml(id) +
" · " +
sheets +
templates/base.html
+1 -21
View File
@@ -4,13 +4,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}加密货币｜OKX 期权中控{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=23">
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=24">
</head>
<body class="{% if request.path.startswith('/login') %}page-login{% elif request.path.startswith('/desk') %}page-desk{% elif request.path.startswith('/stats') %}page-stats{% elif request.path.startswith('/instances') %}page-instances{% elif request.path == '/' %}page-dashboard{% endif %}">
{% if session.get('logged_in') %}
<header class="topbar">
<a href="/" class="topbar-brand">加密货币｜OKX 期权中控</a>
<div class="topbar-row">
<nav class="topbar-nav">
<a href="/" class="{% if request.path == '/' %}active{% endif %}">总览</a>
<a href="/cond_orders" class="{% if request.path.startswith('/cond_orders') %}active{% endif %}">条件单</a>
@@ -19,25 +18,6 @@
<a href="/stats" class="{% if request.path.startswith('/stats') %}active{% endif %}">数据统计</a>
<a href="/settings" class="{% if request.path.startswith('/settings') %}active{% endif %}">系统设置</a>
</nav>
<div class="top-nav-spot-tickers" id="nav-spot-tickers" aria-label="BTC ETH 报价" title="来自在线客户端 · 相对北京 08:00">
<div class="nav-spot-row" data-base="ETH">
<span class="nav-spot-ribbon" aria-hidden="true"></span>
<span class="nav-spot-icon nav-spot-icon--eth" aria-hidden="true">Ξ</span>
<span class="nav-spot-sym">ETHUSDT</span>
<span class="nav-spot-last" data-field="last">—</span>
<span class="nav-spot-chg" data-field="change">—</span>
<span class="nav-spot-pct" data-field="change_pct">—</span>
</div>
<div class="nav-spot-row" data-base="BTC">
<span class="nav-spot-ribbon" aria-hidden="true"></span>
<span class="nav-spot-icon nav-spot-icon--btc" aria-hidden="true">₿</span>
<span class="nav-spot-sym">BTCUSDT</span>
<span class="nav-spot-last" data-field="last">—</span>
<span class="nav-spot-chg" data-field="change">—</span>
<span class="nav-spot-pct" data-field="change_pct">—</span>
</div>
</div>
</div>
<a href="/logout" class="topbar-logout">退出</a>
</header>
{% endif %}
templates/dashboard.html
+24 -2
View File
@@ -1,20 +1,42 @@
{% extends "base.html" %}
{% block title %}总览 · 加密货币｜OKX 期权中控{% endblock %}
{% block body %}
<section class="page-head">
<section class="page-head overview-head">
<h1>期权持仓总览</h1>
<div class="overview-head-right">
<div class="top-nav-spot-tickers" id="nav-spot-tickers" aria-label="BTC ETH 报价" title="来自在线客户端 · 相对北京 08:00">
<div class="nav-spot-row" data-base="ETH">
<span class="nav-spot-ribbon" aria-hidden="true"></span>
<span class="nav-spot-icon nav-spot-icon--eth" aria-hidden="true">Ξ</span>
<span class="nav-spot-sym">ETHUSDT</span>
<span class="nav-spot-last" data-field="last">—</span>
<span class="nav-spot-chg" data-field="change">—</span>
<span class="nav-spot-pct" data-field="change_pct">—</span>
</div>
<div class="nav-spot-row" data-base="BTC">
<span class="nav-spot-ribbon" aria-hidden="true"></span>
<span class="nav-spot-icon nav-spot-icon--btc" aria-hidden="true">₿</span>
<span class="nav-spot-sym">BTCUSDT</span>
<span class="nav-spot-last" data-field="last">—</span>
<span class="nav-spot-chg" data-field="change">—</span>
<span class="nav-spot-pct" data-field="change_pct">—</span>
</div>
</div>
<div class="overview-head-clock-row">
<div class="overview-bj-clock" id="overview-bj-clock" title="Asia/Shanghai">
<span class="overview-bj-label">北京时间</span>
<time class="overview-bj-time" id="overview-bj-time" datetime="">--</time>
<span class="overview-bj-meta" id="overview-bj-meta"></span>
</div>
<button type="button" class="btn" id="btn-refresh">刷新</button>
</div>
</div>
</section>
<p class="muted" id="overview-status">加载中…</p>
<section class="overview-summary" id="overview-summary" hidden></section>
<div id="overview-grid"></div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='hub.js') }}?v=22"></script>
<script src="{{ url_for('static', filename='hub.js') }}?v=23"></script>
<script>HubOverview.boot();</script>
{% endblock %}