diff --git a/public/css/admin-components.css b/public/css/admin-components.css index cbe7456..8b6d68c 100644 --- a/public/css/admin-components.css +++ b/public/css/admin-components.css @@ -170,7 +170,124 @@ line-height:1.4; } -/* 总台管理：左侧导航二级分组（最小可用版） */ +/* 总台管理：顶部导航（参考 eweishop 的“横向主导航 + 下拉子菜单”交互） */ +.sidebar.topnav{ + white-space:normal; + overflow-x:visible; +} + +.topnav-row{ + display:flex; + align-items:center; + gap:16px; + flex-wrap:wrap; +} + +.topnav-brand{ + display:inline-flex; + align-items:center; + font-weight:800; + color:#e2e8f0; + padding:8px 10px; + border-radius:10px; +} + +.topnav-brand:hover{ + text-decoration:none; + background:#111827; +} + +.topnav-menu{ + display:flex; + align-items:center; + gap:8px; + flex:1; + flex-wrap:wrap; +} + +.topnav-link, +.topnav-summary{ + display:inline-flex; + align-items:center; + gap:6px; + padding:8px 10px; + border-radius:10px; + color:#cbd5e1; +} + +.topnav-link:hover, +.topnav-summary:hover{ + text-decoration:none; + background:#1e293b; +} + +.topnav-item{ + position:relative; +} + +.topnav-item > summary::-webkit-details-marker{ + display:none; +} + +.topnav-item > summary{ + list-style:none; + cursor:pointer; + user-select:none; +} + +.topnav-dropdown{ + position:absolute; + top:calc(100% + 8px); + left:0; + min-width:180px; + background:#0f172a; + border:1px solid #334155; + border-radius:12px; + padding:10px; + box-shadow:0 12px 30px rgba(0,0,0,.35); + z-index:100; +} + +/* details 未展开时不展示下拉 */ +.topnav-item:not([open]) .topnav-dropdown{ + display:none; +} + +.topnav-sub{ + display:block; + padding:9px 10px; + border-radius:10px; + color:#cbd5e1; + margin:0; +} + +.topnav-sub:hover{ + text-decoration:none; + background:#1e293b; +} + +.topnav-actions{ + display:flex; + align-items:center; + gap:10px; +} + +.topnav-meta{ + margin-top:6px; +} + +/* 移动端：下拉改为文档流（避免 absolute 导致溢出） */ +@media (max-width: 768px){ + .topnav-row{gap:10px;} + .topnav-dropdown{ + position:static; + min-width:auto; + box-shadow:none; + margin-top:6px; + } +} + +/* 兼容：旧的左侧导航二级分组样式（保留但不再作为主形态） */ .sidebar .nav-group{ margin:10px 0; } diff --git a/resources/views/admin/layouts/app.blade.php b/resources/views/admin/layouts/app.blade.php index 5508f52..e6f9c03 100644 --- a/resources/views/admin/layouts/app.blade.php +++ b/resources/views/admin/layouts/app.blade.php @@ -10,41 +10,56 @@
-