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

报价回到导航同一行右侧并对齐总览卡片，拉开标题与导航间距。

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-04 20:14:10 +08:00
parent a70d2703c9
commit ad1f7b7c3d
3 changed files with 76 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/hub.css
+39 -25
View File
@@ -54,15 +54,16 @@ a:hover { color: #7dd3fc; }
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
gap: 0;
min-height: 0;
padding: 40px 28px 16px;
padding: 40px 0 18px;
border-bottom: 1px solid var(--line);
background: rgba(8, 14, 26, 0.75);
backdrop-filter: blur(12px);
}
.topbar-brand {
align-self: center;
margin-bottom: 32px;
font-family: var(--font);
font-size: 1.75rem;
font-weight: 600;
@@ -75,7 +76,20 @@ a:hover { color: #7dd3fc; }
.topbar-brand:hover {
color: #ffffff;
}
.topbar-inner {
width: 100%;
max-width: 1800px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 48px);
}
.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;
@@ -101,6 +115,8 @@ 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,15 +190,29 @@ a:hover { color: #7dd3fc; }
.topbar-logout:hover {
color: #e8f1ff;
}
@media (max-width: 1100px) {
.topbar-row {
grid-template-columns: 1fr;
justify-items: center;
}
.topbar-nav,
.top-nav-spot-tickers {
grid-column: 1;
justify-self: center;
}
}
@media (max-width: 720px) {
.topbar {
min-height: 0;
padding: 28px 16px 12px;
gap: 10px;
padding: 28px 0 12px;
}
.topbar-brand {
margin-bottom: 18px;
font-size: 1.35rem;
}
.topbar-inner {
padding: 0 16px;
}
.topbar-logout {
top: 12px;
right: 14px;
@@ -236,23 +266,8 @@ body.page-login .main {
font-weight: 600;
letter-spacing: 0.04em;
}
.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;
margin-left: auto;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
@@ -319,13 +334,12 @@ body.page-login .main {
}
@media (max-width: 720px) {
.page-head { flex-wrap: wrap; }
.overview-head-right {
.overview-bj-clock {
margin-left: 0;
order: 3;
width: 100%;
align-items: flex-start;
}
.overview-head-clock-row {
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 2px;
}
}
.muted { color: var(--muted); font-size: 0.9rem; }
templates/base.html
+31 -9
View File
@@ -4,20 +4,42 @@
<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=24">
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=25">
</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>
<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>
<a href="/instances" class="{% if request.path.startswith('/instances') %}active{% endif %}">实例</a>
<a href="/desk" class="{% if request.path.startswith('/desk') %}active{% endif %}">工作台</a>
<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="topbar-inner">
<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>
<a href="/instances" class="{% if request.path.startswith('/instances') %}active{% endif %}">实例</a>
<a href="/desk" class="{% if request.path.startswith('/desk') %}active{% endif %}">工作台</a>
<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>
</div>
<a href="/logout" class="topbar-logout">退出</a>
</header>
{% endif %}
templates/dashboard.html
+6 -28
View File
@@ -1,36 +1,14 @@
{% extends "base.html" %}
{% block title %}总览 · 加密货币｜OKX 期权中控{% endblock %}
{% block body %}
<section class="page-head overview-head">
<section class="page-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 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>
</section>
<p class="muted" id="overview-status">加载中…</p>
<section class="overview-summary" id="overview-summary" hidden></section>