| | |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 0 24px 0 0; |
| | | background: #fff; |
| | | border-bottom: 1px solid #d8dce5; |
| | | background: var(--navbar-bg); |
| | | box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); |
| | | z-index: var(--layout-header-z); |
| | | color: var(--navbar-text); |
| | | } |
| | | |
| | | .navbar-left { |
| | |
| | | transition: width 0.25s ease; |
| | | overflow: hidden; |
| | | flex-shrink: 0; |
| | | background-color: #fff; // 强制设为白色背景 |
| | | // border-right: 1px solid #d8dce5; // 增加右侧边框以区分导航栏主体 |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .top-nav-wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | align-items: stretch; /* 占满高度 */ |
| | | height: 100%; |
| | | min-width: 0; |
| | | flex: 1; |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: var(--text-secondary); |
| | | color: var(--navbar-text); |
| | | border-radius: 50%; // 圆形背景 |
| | | background: rgba(0, 0, 0, 0.04); // 浅浅的圆形框底色 |
| | | background: rgba(255, 255, 255, 0.1); // 浅浅的圆形框底色 |
| | | transition: all 0.2s ease; |
| | | cursor: pointer; |
| | | |
| | | &:hover { |
| | | background: rgba(0, 0, 0, 0.08); // 悬停加深 |
| | | color: var(--el-color-primary); |
| | | background: rgba(255, 255, 255, 0.2); // 悬停加深 |
| | | color: #fff; |
| | | } |
| | | |
| | | :deep(.svg-icon) { |
| | |
| | | transition: 0.2s ease; |
| | | |
| | | &:hover { |
| | | background: rgba(0, 0, 0, 0.05); |
| | | background: rgba(255, 255, 255, 0.1); |
| | | } |
| | | } |
| | | |
| | |
| | | .user-name { |
| | | font-size: 13px; |
| | | font-weight: 500; |
| | | color: var(--text-primary); |
| | | color: var(--navbar-text); |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | |
| | | } |
| | | |
| | | .caret-icon { |
| | | color: var(--text-secondary); |
| | | color: var(--navbar-text); |
| | | opacity: 0.76; |
| | | font-size: 12px; |
| | | transition: 0.2s ease; |