*{ margin:0; padding:0; box-sizing:border-box; } body{ height:100vh; font-family:"Segoe UI","Microsoft YaHei",sans-serif; background:#0b1220; color:#e2e8f0; } /* 主布局 */ .app{ display:flex; flex-direction:column; height:100vh; } /* 标题栏 */ .topbar{ height:52px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; background:linear-gradient(180deg,#1f2937,#111827); border-bottom:1px solid rgba(148,163,184,0.18); color:#e2e8f0; font-size:14px; letter-spacing:0.5px; font-weight:500; box-shadow:0 1px 0 rgba(0,0,0,0.4); } .device{ font-family: ui-monospace, monospace; display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500 } .device .icon{ display:inline-block; transform: translate(2px, -1px); } .actions{ display:flex; align-items:center; gap:10px; } .logout-btn{ background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.35); color:#f87171; padding:6px 12px; display:flex; border-radius:6px; font-size:12px; cursor:pointer; transition:0.2s; } .logout-btn:hover{ background:#ef4444; border-color:#ef4444; color:#fff; } /* 次布局 */ .layout{ display:flex; flex:1; overflow:hidden; } /* 左侧栏 */ .sidebar{ width:240px; height:100%; background:#0f172a; border-right:1px solid rgba(148,163,184,0.12); display:flex; flex-direction:column; } .menu{ padding:10px; display:flex; flex-direction:column; gap:6px; } .menu-item{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:10px; cursor:pointer; color:#94a3b8; font-size:15px; font-weight:500; transition:0.2s; } .menu-item:hover{ background:#1e293b; color:white; } .menu-item.active{ background:#2563eb; color:white; } /* 页容器 */ .view{ flex:1; padding:20px; overflow:auto; background:#0f172a; } /* 页风格 */ .card{ background:#0f172a; border:1px solid #1f2937; border-radius:10px; padding:20px; margin-bottom:15px; box-shadow:0 0 20px rgba(0,0,0,0.25); } h1{ font-size:20px; margin-bottom:10px; color:#e2e8f0; } p{ font-size:15px; color:#94a3b8; }