// 统一页顶栏(对齐地磅「仪表盘」白底顶栏) // 结构:safe-top + nav 行;左侧返回←/标题;右侧预留胶囊;工作台可加用户区 .sq-nav-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); height: var(--sq-header-height, calc(44px + 44px)); padding-top: var(--sq-safe-top, 44px); box-sizing: border-box; } /* 工作台等:加高,标题行 + 独立用户行 */ .sq-nav-header--tall { height: auto; min-height: calc(var(--sq-header-height, 88px) + 72px); padding-bottom: 20px; } .sq-nav-header__nav { height: var(--sq-nav-height, 44px); display: grid; grid-template-columns: minmax(0, 1fr) var(--sq-capsule-right-safe, 96px); align-items: center; padding: 0 12px 0 8px; box-sizing: border-box; } .sq-nav-header--tall .sq-nav-header__nav { height: auto; min-height: var(--sq-nav-height, 44px); align-items: center; } .sq-nav-header__main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; width: 100%; } .sq-nav-header__left { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; } .sq-nav-header__left--stack { flex-direction: column; align-items: flex-start; gap: 6px; } .sq-nav-header__back { font-size: 20px; color: #333; padding: 4px 8px; flex-shrink: 0; line-height: 1; } .sq-nav-header__title { font-size: 17px; font-weight: 700; color: #111827; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .sq-nav-header__meta { font-size: 12px; color: #6b7280; line-height: 1.4; text-align: left; } /* 用户行:与标题分行;全宽右对齐,不预留胶囊列 */ .sq-nav-header__user-row { display: flex; justify-content: flex-end; align-items: center; width: 100%; box-sizing: border-box; padding: 12px 16px 0; } .sq-nav-header__user { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; max-width: 100%; text-align: right; margin-left: auto; } .sq-nav-header__user-name { font-size: 13px; font-weight: 600; color: #111827; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sq-nav-header__logout { font-size: 12px; line-height: 1.3; padding: 4px 10px; border-radius: 999px; border: 1px solid #d1d5db; color: #374151; background: #fff; } .sq-nav-header__logout:active { background: #f3f4f6; } .sq-nav-header__logout--disabled { opacity: 0.55; pointer-events: none; }