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

中控顶栏对齐实例：标题改为加密货币｜OKX 期权中控，导航用卡片，报价放右侧。

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-10-04 20:02:26 +08:00
parent 2c21f5e675
commit dcee212434
6 changed files with 306 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/hub.css
+116 -65
View File
@@ -52,47 +52,129 @@ a:hover { color: #7dd3fc; }
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 118px;
padding: 36px 88px 20px;
align-items: stretch;
justify-content: flex-start;
gap: 10px;
min-height: 0;
padding: 18px 28px 14px;
border-bottom: 1px solid var(--line);
background: rgba(8, 14, 26, 0.75);
backdrop-filter: blur(12px);
}
.topbar-brand {
font-family: var(--font-display);
font-size: clamp(1.55rem, 2.1vw, 2.05rem);
align-self: center;
font-family: var(--font);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: 0.38em;
text-indent: 0.38em;
color: #f4f8ff;
line-height: 1.15;
letter-spacing: 0;
text-indent: 0;
color: #dbe4ff;
line-height: 1.25;
text-align: center;
}
.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;
gap: 6px 28px;
gap: 8px;
}
.topbar-nav a {
color: var(--muted);
font-size: 1.08rem;
font-weight: 600;
letter-spacing: 0.08em;
padding: 4px 0;
color: #8fc8ff;
font-size: 0.92rem;
font-weight: 500;
letter-spacing: 0;
padding: 6px 10px;
border: 1px solid #304164;
border-radius: 8px;
background: #151a2a;
}
.topbar-nav a:hover {
color: #dbe4ff;
border-color: #3d5278;
}
.topbar-nav a.active {
color: var(--accent);
text-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
color: #dbe4ff;
background: #2a3f6c;
text-shadow: none;
}
.top-nav-spot-tickers {
grid-column: 3;
justify-self: end;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
font-variant-numeric: tabular-nums;
}
.nav-spot-row {
display: grid;
grid-template-columns: 3px 18px minmax(4.6em, auto) minmax(5em, auto) minmax(3.6em, auto) minmax(3.8em, auto);
align-items: center;
column-gap: 7px;
padding: 3px 9px 3px 5px;
border: 1px solid transparent;
border-radius: 6px;
background: rgba(16, 22, 36, 0.72);
line-height: 1.2;
white-space: nowrap;
font-size: 0.88rem;
}
.nav-spot-row:hover {
border-color: #3a4568;
}
.nav-spot-ribbon {
width: 3px;
height: 16px;
border-radius: 1px 2px 2px 1px;
background: #e24b6a;
justify-self: center;
}
.nav-spot-icon {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
}
.nav-spot-icon--eth { background: #627eea; }
.nav-spot-icon--btc { background: #f2a900; color: #1a1200; }
.nav-spot-sym {
color: #e8ecff;
font-weight: 600;
letter-spacing: 0.01em;
}
.nav-spot-last,
.nav-spot-chg,
.nav-spot-pct {
text-align: right;
font-weight: 600;
}
.nav-spot--up .nav-spot-last,
.nav-spot--up .nav-spot-chg,
.nav-spot--up .nav-spot-pct { color: #2dd4a8; }
.nav-spot--down .nav-spot-last,
.nav-spot--down .nav-spot-chg,
.nav-spot--down .nav-spot-pct { color: #ff6b7a; }
.nav-spot--flat .nav-spot-last,
.nav-spot--flat .nav-spot-chg,
.nav-spot--flat .nav-spot-pct { color: #9aa3bf; }
.topbar-logout {
position: absolute;
top: 22px;
top: 18px;
right: 22px;
color: var(--muted);
font-size: 0.82rem;
@@ -101,18 +183,23 @@ 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: 24px 16px 14px;
gap: 10px;
}
.topbar-nav a {
font-size: 0.98rem;
padding: 16px 16px 12px;
gap: 8px;
}
.topbar-brand {
letter-spacing: 0.22em;
text-indent: 0.22em;
font-size: 1.35rem;
}
.topbar-logout {
@@ -168,39 +255,8 @@ body.page-login .main {
font-weight: 600;
letter-spacing: 0.04em;
}
.overview-quotes {
margin-left: auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
font-variant-numeric: tabular-nums;
}
.overview-quote-row {
display: grid;
grid-template-columns: 2.4em minmax(4.6em, auto) minmax(3.4em, auto) minmax(3.6em, auto);
align-items: center;
column-gap: 8px;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.overview-quote-sym { color: var(--muted); }
.overview-quote-last,
.overview-quote-chg,
.overview-quote-pct { text-align: right; }
.overview-quote-row.is-up .overview-quote-last,
.overview-quote-row.is-up .overview-quote-chg,
.overview-quote-row.is-up .overview-quote-pct { color: var(--ok); }
.overview-quote-row.is-down .overview-quote-last,
.overview-quote-row.is-down .overview-quote-chg,
.overview-quote-row.is-down .overview-quote-pct { color: var(--bad); }
.overview-quote-row.is-flat .overview-quote-last,
.overview-quote-row.is-flat .overview-quote-chg,
.overview-quote-row.is-flat .overview-quote-pct { color: var(--text); }
.overview-bj-clock {
margin-left: 0;
margin-left: auto;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
@@ -267,14 +323,9 @@ body.page-login .main {
}
@media (max-width: 720px) {
.page-head { flex-wrap: wrap; }
.overview-quotes {
margin-left: 0;
order: 3;
width: 100%;
}
.overview-bj-clock {
margin-left: 0;
order: 4;
order: 3;
width: 100%;
justify-content: flex-start;
padding-top: 2px;