diff --git a/css/common.css b/css/common.css index 54677cd..242ebc7 100644 --- a/css/common.css +++ b/css/common.css @@ -138,6 +138,81 @@ header:hover { text-decoration: none; } +/* ============================================ + 用户头像 & 下拉菜单 + ============================================ */ + +.user-avatar-wrap { + position: relative; + margin-left: 12px; +} + +.user-avatar { + width: 36px; + height: 36px; + border-radius: 50%; + background: #3B82F6; + color: #fff; + font-size: 15px; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; + border: 2px solid rgba(255, 255, 255, 0.2); +} + +.user-avatar:hover { + border-color: rgba(255, 255, 255, 0.5); + transform: scale(1.05); +} + +.user-dropdown { + display: none; + position: absolute; + top: calc(100% + 8px); + right: 0; + min-width: 140px; + background: #1F2937; + border-radius: 12px; + padding: 6px 0; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + z-index: 1000; +} + +.user-avatar-wrap:hover .user-dropdown { + display: block; +} + +/* 下拉箭头 */ +.user-dropdown::before { + content: ''; + position: absolute; + top: -6px; + right: 12px; + width: 12px; + height: 12px; + background: #1F2937; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-left: 1px solid rgba(255, 255, 255, 0.1); + transform: rotate(45deg); +} + +.user-dropdown-item { + padding: 10px 18px; + color: #E5E7EB; + font-size: 14px; + cursor: pointer; + transition: all 0.15s ease; +} + +.user-dropdown-item:hover { + background: rgba(255, 255, 255, 0.08); + color: #fff; +} + /* ============================================ 登录注册区域 - 撑满高度设计 ============================================ */ diff --git a/public/header.html b/public/header.html index b02b58e..8e71196 100644 --- a/public/header.html +++ b/public/header.html @@ -45,6 +45,13 @@