| 22301009 | 7ff51f2 | 2025-04-15 21:35:28 +0800 | [diff] [blame] | 1 | /* 竖直导航栏的容器 */ |
| 2 | .user-nav-container { |
| Krishya | c0f7e9b | 2025-04-22 15:28:28 +0800 | [diff] [blame^] | 3 | margin-right: -5%; |
| 4 | margin-left: 5%; |
| 5 | width: 150px; /* 增加容器宽度 */ |
| 6 | background-color: #5F4437; |
| 7 | padding-top: 20px; |
| 8 | height: 100%; /* 让容器填充整个父容器高度 */ |
| 9 | display: flex; |
| 10 | flex-direction: column; |
| 11 | align-items: stretch; /* 确保所有导航项都拉伸 */ |
| 12 | } |
| 13 | |
| 14 | /* 导航栏样式 */ |
| 15 | .user-nav { |
| 16 | display: flex; |
| 17 | flex-direction: column; |
| 18 | padding: 0; |
| 19 | margin: 0; |
| 20 | flex-grow: 1; /* 使导航栏占据剩余空间 */ |
| 21 | } |
| 22 | |
| 23 | /* 每一项导航链接 */ |
| 24 | .user-nav-item { |
| 25 | /* padding: 35px 20px; */ |
| 26 | border-radius: 16px; /* 圆角边框 */ |
| 27 | padding: 25% 10%; |
| 28 | text-decoration: none; |
| 29 | color: #ddd; |
| 30 | font-size: 16px; |
| 31 | /* 删除 border-bottom 属性以移除分隔线 */ |
| 32 | transition: background-color 0.3s ease; |
| 33 | /*文字居中显示*/ |
| 34 | text-align: center; |
| 35 | } |
| 36 | |
| 37 | /* 鼠标悬浮时的背景颜色 */ |
| 38 | .user-nav-item:hover { |
| 39 | background-color: #5a1414; |
| 40 | } |
| 41 | |
| 42 | /* 激活项的样式 */ |
| 43 | .user-nav-item.active { |
| 44 | background-color: #BA929A; |
| 45 | color: white; |
| 46 | } |