Center control header title and BitCamel subtitle.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -25,6 +25,7 @@ function Shell({ children }: { children: ReactNode }) {
|
|||||||
return (
|
return (
|
||||||
<div className="shell">
|
<div className="shell">
|
||||||
<header className="header">
|
<header className="header">
|
||||||
|
<div className="header-left">
|
||||||
<div className="brand">比特骆驼中控</div>
|
<div className="brand">比特骆驼中控</div>
|
||||||
<nav className="nav">
|
<nav className="nav">
|
||||||
<NavLink to="/monitor" className={({ isActive }) => (isActive ? "active" : "")}>
|
<NavLink to="/monitor" className={({ isActive }) => (isActive ? "active" : "")}>
|
||||||
@@ -37,6 +38,11 @@ function Shell({ children }: { children: ReactNode }) {
|
|||||||
系统设置
|
系统设置
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</nav>
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div className="header-center">
|
||||||
|
<div className="header-title">自动化对冲监控系统</div>
|
||||||
|
<div className="header-subtitle">比特骆驼开发定制</div>
|
||||||
|
</div>
|
||||||
{!lanClient ? (
|
{!lanClient ? (
|
||||||
<div className="header-right">
|
<div className="header-right">
|
||||||
<span className="meta">{user}</span>
|
<span className="meta">{user}</span>
|
||||||
|
|||||||
@@ -47,14 +47,25 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--line);
|
||||||
box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08);
|
box-shadow: 0 1px 0 rgba(0, 200, 255, 0.08);
|
||||||
|
min-height: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand {
|
.brand {
|
||||||
@@ -64,6 +75,36 @@ body {
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-shadow: var(--glow);
|
text-shadow: var(--glow);
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-center {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
max-width: min(42vw, 360px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: var(--glow);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-subtitle {
|
||||||
|
margin-top: 2px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
color: var(--muted);
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@@ -89,10 +130,24 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header-right {
|
.header-right {
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
margin-left: auto;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.header-center {
|
||||||
|
position: static;
|
||||||
|
transform: none;
|
||||||
|
order: 3;
|
||||||
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
|
margin-top: 4px;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main h2 {
|
.main h2 {
|
||||||
|
|||||||
Reference in New Issue
Block a user