fix: drop down menu issues

This commit is contained in:
2025-12-26 09:21:58 +08:00
parent bcbd3327ea
commit 15a5d94e83

View File

@@ -42,20 +42,23 @@
</router-link>
<!-- Avatar Dropdown -->
<div class="relative group">
<div class="relative group h-full flex items-center">
<button class="w-9 h-9 rounded-full overflow-hidden border border-slate-200 focus:ring-2 ring-primary-100">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User" class="w-full h-full object-cover">
</button>
<!-- Dropdown Menu (Mock) -->
<div class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-lg border border-slate-100 py-1 hidden group-hover:block">
<div class="px-4 py-3 border-b border-slate-50">
<p class="text-sm font-bold text-slate-900">Felix Demo</p>
<p class="text-xs text-slate-500 truncate">felix@example.com</p>
</div>
<router-link to="/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">个人中心</router-link>
<router-link to="/creator" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">创作者中心</router-link>
<div class="border-t border-slate-50 mt-1"></div>
<button @click="logout" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">退出登录</button>
<!-- Added pt-2 to create a safe hover zone bridge -->
<div class="absolute right-0 top-full pt-2 w-48 hidden group-hover:block">
<div class="bg-white rounded-xl shadow-lg border border-slate-100 py-1">
<div class="px-4 py-3 border-b border-slate-50">
<p class="text-sm font-bold text-slate-900">Felix Demo</p>
<p class="text-xs text-slate-500 truncate">felix@example.com</p>
</div>
<router-link to="/me" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">个人中心</router-link>
<router-link to="/creator" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">创作者中心</router-link>
<div class="border-t border-slate-50 mt-1"></div>
<button @click="logout" class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50">退出登录</button>
</div>
</div>
</div>
</template>