Align header with crypto_monitor: brand above nav, shared page width.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
@@ -5,6 +5,16 @@
|
||||
|
||||
---
|
||||
|
||||
## 2026-07-29 — 顶栏对齐 crypto_monitor：标题在上、资金卡同宽
|
||||
|
||||
### 变更
|
||||
|
||||
1. 「比特骆驼自动化对冲系统」移到导航上方（参照 OKX 实例页：标题 → top-nav → 资金卡）。
|
||||
2. 页面统一 `max-width: min(1440px, 94vw)`，资金卡片与下方内容同宽对齐。
|
||||
3. 资金条改为圆角边框卡片样式（`.funds-bar-inner`）。
|
||||
|
||||
---
|
||||
|
||||
## 2026-07-29 — 资金条与内容区同宽；规则说明折叠
|
||||
|
||||
### 变更
|
||||
|
||||
+46
-41
@@ -24,48 +24,53 @@ function Shell({ children }: { children: ReactNode }) {
|
||||
const user = getUsername();
|
||||
return (
|
||||
<div className="app-shell">
|
||||
<header className="topnav">
|
||||
<div className="topnav-side left">
|
||||
<div className="brand">
|
||||
<img
|
||||
className="brand-mark"
|
||||
src="/icons/brand.png"
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
<span className="brand-full">比特骆驼自动化对冲系统</span>
|
||||
<span className="brand-short">比特骆驼</span>
|
||||
<div className="app-container">
|
||||
<header className="app-header-block">
|
||||
<div className="brand-row">
|
||||
<div className="brand">
|
||||
<img
|
||||
className="brand-mark"
|
||||
src="/icons/brand.png"
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
/>
|
||||
<span className="brand-full">比特骆驼自动化对冲系统</span>
|
||||
<span className="brand-short">比特骆驼</span>
|
||||
</div>
|
||||
<div className="brand-actions">
|
||||
<span className="meta mono topnav-user">{user}</span>
|
||||
<button
|
||||
className="btn ghost topnav-logout"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
clearSession();
|
||||
window.location.href = "/login";
|
||||
}}
|
||||
>
|
||||
退出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="topnav-center" aria-label="主导航">
|
||||
{NAV.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({ isActive }) => (isActive ? "active" : "")}
|
||||
>
|
||||
<span className="nav-label-full">{item.full}</span>
|
||||
<span className="nav-label-short">{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
<div className="topnav-side right">
|
||||
<span className="meta mono topnav-user">{user}</span>
|
||||
<button
|
||||
className="btn ghost topnav-logout"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
clearSession();
|
||||
window.location.href = "/login";
|
||||
}}
|
||||
>
|
||||
退出
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<FundsBar />
|
||||
<main className="page">{children}</main>
|
||||
<nav className="top-nav" aria-label="主导航">
|
||||
{NAV.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({ isActive }) => (isActive ? "active" : "")}
|
||||
>
|
||||
<span className="nav-label-full">{item.full}</span>
|
||||
<span className="nav-label-short">{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<FundsBar />
|
||||
|
||||
<main className="page">{children}</main>
|
||||
</div>
|
||||
|
||||
<nav className="bottom-nav" aria-label="手机导航">
|
||||
{NAV.map((item) => (
|
||||
<NavLink
|
||||
|
||||
+126
-111
@@ -80,48 +80,137 @@ input {
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
/* 与 crypto_monitor .container 同口径：标题 / 导航 / 资金卡 / 内容同宽 */
|
||||
.app-container {
|
||||
width: 100%;
|
||||
max-width: min(1440px, 94vw);
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(8px, 1.5vw, 20px) 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.app-header-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
padding: 14px 0 8px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(11, 14, 17, 0.98) 70%,
|
||||
rgba(11, 14, 17, 0.88)
|
||||
);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.brand-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
font-size: clamp(16px, 1.35vw, 20px);
|
||||
}
|
||||
|
||||
.brand-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand-actions .meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.top-nav a {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-elev);
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.top-nav a:hover {
|
||||
color: var(--text);
|
||||
border-color: rgba(240, 185, 11, 0.35);
|
||||
}
|
||||
|
||||
.top-nav a.active {
|
||||
background: rgba(240, 185, 11, 0.12);
|
||||
border-color: rgba(240, 185, 11, 0.45);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.funds-bar-shell {
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(18, 22, 28, 0.96);
|
||||
border: none;
|
||||
background: transparent;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.funds-bar-inner {
|
||||
width: 100%;
|
||||
max-width: min(1680px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 10px 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.funds-bar-inner {
|
||||
max-width: 1760px;
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.funds-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 0;
|
||||
padding: 8px 0 4px;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0;
|
||||
padding: 2px 0 4px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.funds-item {
|
||||
flex: 1 1 auto;
|
||||
min-width: 88px;
|
||||
flex: 1 1 0;
|
||||
min-width: 72px;
|
||||
padding: 4px 10px;
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.funds-item:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.funds-item:last-child {
|
||||
border-right: none;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.funds-item--primary .funds-value {
|
||||
@@ -148,8 +237,9 @@ input {
|
||||
}
|
||||
|
||||
.funds-rules {
|
||||
padding: 2px 10px 8px;
|
||||
padding: 6px 0 0;
|
||||
border-top: 1px solid rgba(30, 38, 48, 0.85);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.funds-rules-toggle {
|
||||
@@ -182,48 +272,7 @@ input {
|
||||
}
|
||||
|
||||
.topnav {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(11, 14, 17, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.topnav-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topnav-side.right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.topnav-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-mark,
|
||||
@@ -238,27 +287,6 @@ input {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.topnav-side.left .brand span {
|
||||
max-width: 9em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.topnav a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.topnav a.active {
|
||||
color: var(--text);
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@@ -302,20 +330,12 @@ input {
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 16px 20px 28px;
|
||||
max-width: min(1680px, 100%);
|
||||
margin: 0 auto;
|
||||
padding: 4px 0 0;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1800px) {
|
||||
.page {
|
||||
max-width: 1760px;
|
||||
padding-left: 28px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-short {
|
||||
display: none;
|
||||
}
|
||||
@@ -340,25 +360,12 @@ input {
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.page {
|
||||
padding: 12px 14px calc(72px + env(safe-area-inset-bottom, 0px));
|
||||
.app-container {
|
||||
padding: 0 12px calc(72px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
||||
.topnav {
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topnav-center {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav-side.left {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.topnav-side.right {
|
||||
justify-content: flex-end;
|
||||
.app-header-block {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.brand-full {
|
||||
@@ -369,6 +376,10 @@ input {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-label-full {
|
||||
display: none;
|
||||
}
|
||||
@@ -377,6 +388,10 @@ input {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 4px 0 0;
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user