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

Align header title and ETH/BTC quotes with crypto_okx.

Browse Source 
Match fullwidth title separator, page spacing, and move live tickers into the nav right column using the same spot-ticker UI/API.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-14 19:27:33 +08:00
parent 22de1fd40c
commit 1d71414c56
13 changed files with 511 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_page.css
+16 -4
View File
@@ -3,13 +3,25 @@
.order-entry-model-row select.order-entry-category{min-width:4.8em;max-width:6.5em}
.order-entry-model-row select.order-entry-model-sub{min-width:7em;max-width:10rem}
.order-leverage-hint{font-size:.78rem;color:#cfd3ef;white-space:nowrap;align-self:center}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0b0d14;color:#eaeaea;padding:14px 20px}
.container{width:100%;max-width:min(1440px,94vw);margin:0 auto;padding:0 clamp(8px,1.5vw,20px)}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#0b0d14;color:#eaeaea;padding:14px 12px}
/* 与 crypto_okx 同款:普通屏铺满;embed 壳限宽 */
.container{width:100%;max-width:none;margin:0 auto;padding:0 clamp(6px,1vw,14px)}
body[data-embed-shell="1"] .container{
width:100%;
max-width:min(1800px, 100%);
margin-left:auto;
margin-right:auto;
padding:0 clamp(6px,1vw,14px);
}
.header{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
.header h1{font-size:1.75rem;color:#dbe4ff;text-align:center;line-height:1.25}
.header h1{font-size:1.75rem;color:#dbe4ff;text-align:center;line-height:1.25;font-weight:700}
.exchange-tag{font-size:.82rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:5px 14px;border-radius:999px;letter-spacing:.06em}
.header-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.top-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.top-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 12px;margin-bottom:12px}
.top-nav-links{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;min-width:0}
.top-nav-links > a{flex:0 0 auto;white-space:nowrap}
.top-nav > a{justify-self:center;align-self:center;width:max-content;max-width:100%}
.top-nav-spot-tickers{grid-column:3;justify-self:end;display:flex;flex-direction:column;gap:3px;min-width:0}
.top-nav a{padding:6px 10px;border:1px solid #304164;border-radius:8px;background:#151a2a;color:#8fc8ff;text-decoration:none}
.top-nav a.active{background:#2a3f6c;color:#dbe4ff}
.stat-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:16px;align-items:stretch}