*{ 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: 64px; background: linear-gradient(180deg, #1f2937, #111827); border-bottom: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: space-between; padding: 0; } .device{ display: flex; align-items: center; gap: 10px; margin-left: 20px; } .device .icon{ font-size: 28px; width: 24px; display: flex; align-items: center; justify-content: center; } .device-info { display: flex; flex-direction: column; justify-content: center; } .title-line { line-height: 1.3; } .title-line .title { font-size: 15px; font-weight: 600; color: #e2e8f0; letter-spacing: 0.5px; } .imei-line { line-height: 1.3; } #imei-value { font-family: ui-monospace, monospace; font-size: 15px; color: #94a3b8; } .actions{ display:flex; align-items:center; gap:10px; } /* 次布局 */ .layout{ display:flex; flex:1; overflow:hidden; } /* 左侧栏 */ .sidebar{ width:240px; background:#0f172a; border-right:1px solid rgba(148,163,184,0.12); display:flex; flex-direction:column; padding: 20px; } .menu-item{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:4px; 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:6px; overflow:auto; background:#0f172a; } /* 页风格 */ .card{ background:#0f172a; border:1px solid #1f2937; border-radius:4px; 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; }