| 22301009 | 7ff51f2 | 2025-04-15 21:35:28 +0800 | [diff] [blame^] | 1 | /* 竖直导航栏的容器 */ |
| 2 | .user-nav-container { |
| 3 | width: 250px; |
| 4 | background-color: #f4f4f4; |
| 5 | padding-top: 20px; |
| 6 | border-right: 1px solid #ccc; |
| 7 | height: 100%; /* 让容器填充整个父容器高度 */ |
| 8 | display: flex; |
| 9 | flex-direction: column; |
| 10 | align-items: stretch; /* 确保所有导航项都拉伸 */ |
| 11 | } |
| 12 | |
| 13 | /* 导航栏样式 */ |
| 14 | .user-nav { |
| 15 | display: flex; |
| 16 | flex-direction: column; |
| 17 | padding: 0; |
| 18 | margin: 0; |
| 19 | flex-grow: 1; /* 使导航栏占据剩余空间 */ |
| 20 | } |
| 21 | |
| 22 | /* 每一项导航链接 */ |
| 23 | .user-nav-item { |
| 24 | padding: 15px 20px; |
| 25 | text-align: left; |
| 26 | text-decoration: none; |
| 27 | color: #333; |
| 28 | font-size: 16px; |
| 29 | border-bottom: 1px solid #e0e0e0; |
| 30 | transition: background-color 0.3s ease; |
| 31 | } |
| 32 | |
| 33 | /* 鼠标悬浮时的背景颜色 */ |
| 34 | .user-nav-item:hover { |
| 35 | background-color: #ddd; |
| 36 | } |
| 37 | |
| 38 | /* 激活项的样式 */ |
| 39 | .user-nav-item.active { |
| 40 | background-color: #3b8cff; |
| 41 | color: white; |
| 42 | } |
| 43 | |