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

Co-authored-by: Cursor <cursoragent@cursor.com>

static/hub.css

@@ -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;
+    padding: 28px 16px 12px;
-    gap: 8px;
+    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;
+    align-items: flex-start;
-    padding-top: 2px;
+  }
+  .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

@@ -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

@@ -4,40 +4,20 @@
   <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">
-      <nav class="topbar-nav">
+      <a href="/" class="{% if request.path == '/' %}active{% endif %}">总览</a>
-        <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="/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="/instances" class="{% if request.path.startswith('/instances') %}active{% endif %}">实例</a>
+      <a href="/desk" class="{% if request.path.startswith('/desk') %}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="/stats" class="{% if request.path.startswith('/stats') %}active{% endif %}">数据统计</a>
+      <a href="/settings" class="{% if request.path.startswith('/settings') %}active{% endif %}">系统设置</a>
-        <a href="/settings" class="{% if request.path.startswith('/settings') %}active{% endif %}">系统设置</a>
+    </nav>
-      </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

@@ -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-bj-clock" id="overview-bj-clock" title="Asia/Shanghai">
+  <div class="overview-head-right">
-    <span class="overview-bj-label">北京时间</span>
+    <div class="top-nav-spot-tickers" id="nav-spot-tickers" aria-label="BTC ETH 报价" title="来自在线客户端 · 相对北京 08:00">
-    <time class="overview-bj-time" id="overview-bj-time" datetime="">--</time>
+      <div class="nav-spot-row" data-base="ETH">
-    <span class="overview-bj-meta" id="overview-bj-meta"></span>
+        <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>
-  <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>
 <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 %}