| /* 竖直导航栏的容器 */ |
| .user-nav-container { |
| margin-right: -5%; |
| margin-left: 5%; |
| width: 150px; /* 增加容器宽度 */ |
| padding-top: 20px; |
| height: 100%; /* 让容器填充整个父容器高度 */ |
| display: flex; |
| flex-direction: column; |
| align-items: stretch; /* 确保所有导航项都拉伸 */ |
| } |
| |
| /* 导航栏样式 */ |
| .user-nav { |
| display: flex; |
| flex-direction: column; |
| padding: 0; |
| margin: 0; |
| flex-grow: 1; /* 使导航栏占据剩余空间 */ |
| } |
| |
| /* 每一项导航链接 */ |
| .user-nav-item { |
| /* padding: 35px 20px; */ |
| border-radius: 16px; /* 圆角边框 */ |
| padding: 25% 10%; |
| text-decoration: none; |
| color: #ddd; |
| font-size: 16px; |
| /* 删除 border-bottom 属性以移除分隔线 */ |
| transition: background-color 0.3s ease; |
| /*文字居中显示*/ |
| text-align: center; |
| } |
| |
| /* 鼠标悬浮时的背景颜色 */ |
| .user-nav-item:hover { |
| background-color: #fffaf7; |
| } |
| |
| /* 激活项的样式 */ |
| .user-nav-item.active { |
| background-color: #eecfc1; |
| color: white; |
| } |