diff --git a/index.html b/index.html index bb01af3..4f0133d 100644 --- a/index.html +++ b/index.html @@ -789,6 +789,110 @@ select.input { .row { flex-wrap: wrap; } .row > * { flex-basis: 100%; } } + +/* Admin Segmented Tabs & Modern Header */ +.admin-tab-nav { + display: flex; + gap: 6px; + background: rgba(15, 22, 36, 0.75); + backdrop-filter: blur(12px); + padding: 5px; + border-radius: var(--radius-lg); + border: 1px solid var(--border-subtle); + overflow-x: auto; + margin-bottom: 20px; +} +.admin-tab-nav button { + border: 0; + background: transparent; + color: var(--text-muted); + padding: 9px 18px; + border-radius: var(--radius-md); + font-weight: 600; + font-size: 13.5px; + cursor: pointer; + white-space: nowrap; + transition: var(--transition); + display: flex; + align-items: center; + gap: 8px; +} +.admin-tab-nav button:hover { + color: var(--text-main); + background: rgba(255, 255, 255, 0.04); +} +.admin-tab-nav button.active { + background: var(--bg-surface-elevated); + color: #fff; + border: 1px solid var(--border-subtle); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); +} + +/* User Drawer Overlay & Panel */ +.drawer-backdrop { + position: fixed; + inset: 0; + background: rgba(5, 8, 15, 0.65); + backdrop-filter: blur(6px); + z-index: 200; + opacity: 0; + pointer-events: none; + transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1); +} +.drawer-backdrop.active { + opacity: 1; + pointer-events: auto; +} +.admin-drawer { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: min(520px, 92vw); + background: var(--bg-surface); + border-left: 1px solid var(--border-subtle); + box-shadow: -10px 0 35px rgba(0, 0, 0, 0.5); + z-index: 201; + transform: translateX(100%); + transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); + display: flex; + flex-direction: column; + overflow: hidden; +} +.admin-drawer.active { + transform: translateX(0); +} +.drawer-header { + padding: 18px 20px; + border-bottom: 1px solid var(--border-subtle); + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(15, 22, 36, 0.95); +} +.drawer-body { + padding: 20px; + overflow-y: auto; + flex: 1; +} +@media (max-width: 720px) { + .admin-drawer { + top: auto; + left: 0; + right: 0; + bottom: 0; + width: 100vw; + max-height: 85vh; + border-left: 0; + border-top: 1px solid var(--border-subtle); + border-radius: 20px 20px 0 0; + transform: translateY(100%); + } + .admin-drawer.active { + transform: translateY(0); + } +} + @@ -960,41 +1064,44 @@ select.input {
Admin Center
-

管理中心

-

系统用户、积分账本、卡密批次与全局审计监控。

+

管理控制台

+

系统多用户鉴权、积分流水记账、卡密批次、操作审计与全局纳管配置。

-
- - - - +
- -