标题导航与总览同列对齐卡片，顶栏间距按实例铺满并在带鱼屏锁 1800。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
+20
-67
@@ -48,42 +48,6 @@ body > * { position: relative; z-index: 1; }
|
||||
a { color: var(--accent-2); text-decoration: none; }
|
||||
a:hover { color: #7dd3fc; }
|
||||
|
||||
.topbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
min-height: 0;
|
||||
padding: 14px 0 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(8, 14, 26, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.topbar-shell {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
}
|
||||
body.page-dashboard .topbar-shell {
|
||||
max-width: 1800px;
|
||||
padding: 0 clamp(16px, 3vw, 48px);
|
||||
}
|
||||
body.page-instances .topbar-shell {
|
||||
max-width: none;
|
||||
padding: 0 clamp(12px, 2vw, 28px);
|
||||
}
|
||||
@media (min-aspect-ratio: 21/9) {
|
||||
body.page-instances .topbar-shell {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
body.page-desk .topbar-shell {
|
||||
max-width: none;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.topbar-brand {
|
||||
display: block;
|
||||
margin: 0 auto 12px;
|
||||
@@ -104,7 +68,7 @@ body.page-desk .topbar-shell {
|
||||
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px 12px;
|
||||
margin-bottom: 0;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.topbar-nav {
|
||||
grid-column: 2;
|
||||
@@ -199,9 +163,10 @@ body.page-desk .topbar-shell {
|
||||
.nav-spot--flat .nav-spot-chg,
|
||||
.nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
|
||||
.topbar-logout {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 22px;
|
||||
z-index: 20;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.04em;
|
||||
@@ -221,17 +186,10 @@ body.page-desk .topbar-shell {
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.topbar {
|
||||
min-height: 0;
|
||||
padding: 8px 0 12px;
|
||||
}
|
||||
.topbar-brand {
|
||||
margin-bottom: 12px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.topbar-shell {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.topbar-nav a {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.78rem;
|
||||
@@ -242,13 +200,25 @@ body.page-desk .topbar-shell {
|
||||
}
|
||||
}
|
||||
|
||||
.main { padding: 16px; max-width: 1200px; margin: 0 auto; }
|
||||
/* 总览保持 1800;工作台外壳全屏(内嵌客户端带鱼屏自锁 1800) */
|
||||
body.page-dashboard .main {
|
||||
max-width: 1800px;
|
||||
.main {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 14px clamp(6px, 1vw, 14px) 16px;
|
||||
}
|
||||
/* 总览/实例与客户端一致: 铺满,带鱼屏锁 1800 */
|
||||
body.page-dashboard .main,
|
||||
body.page-instances .main {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 12px clamp(16px, 3vw, 48px) 20px;
|
||||
padding: 14px clamp(6px, 1vw, 14px) 16px;
|
||||
}
|
||||
@media (min-aspect-ratio: 21/9) {
|
||||
body.page-dashboard .main,
|
||||
body.page-instances .main {
|
||||
max-width: min(1800px, calc(100vw - 24px));
|
||||
}
|
||||
}
|
||||
body.page-desk .main {
|
||||
max-width: none;
|
||||
@@ -256,18 +226,6 @@ body.page-desk .main {
|
||||
margin: 0;
|
||||
padding: 10px 12px 14px;
|
||||
}
|
||||
/* 实例页主区:随屏宽;带鱼屏上限 1800 */
|
||||
body.page-instances .main {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 12px clamp(12px, 2vw, 28px) 20px;
|
||||
}
|
||||
@media (min-aspect-ratio: 21/9) {
|
||||
body.page-instances .main {
|
||||
max-width: 1800px;
|
||||
}
|
||||
}
|
||||
body.page-login {
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -1438,11 +1396,6 @@ input.readonly {
|
||||
.desk-side-toggle--bar { display: none !important; }
|
||||
}
|
||||
@media (min-width: 2000px) {
|
||||
body.page-dashboard .main {
|
||||
max-width: 1800px;
|
||||
padding-left: clamp(32px, 6vw, 96px);
|
||||
padding-right: clamp(32px, 6vw, 96px);
|
||||
}
|
||||
body.page-desk .main {
|
||||
max-width: none;
|
||||
padding-left: 12px;
|
||||
|
||||
+32
-34
@@ -4,46 +4,44 @@
|
||||
<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=26">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='hub.css') }}?v=27">
|
||||
</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">
|
||||
<div class="topbar-shell">
|
||||
<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>
|
||||
<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>
|
||||
<a href="/logout" class="topbar-logout">退出</a>
|
||||
{% endif %}
|
||||
<main class="main">
|
||||
{% if session.get('logged_in') %}
|
||||
<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>
|
||||
<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>
|
||||
<a href="/logout" class="topbar-logout">退出</a>
|
||||
</header>
|
||||
{% endif %}
|
||||
<main class="main">
|
||||
{% endif %}
|
||||
{% with messages = get_flashed_messages() %}
|
||||
{% if messages %}<div class="flash">{{ messages[0] }}</div>{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
Reference in New Issue
Block a user