修复 Header 菜单下边框选中样式层叠失败的问题

This commit is contained in:
2024-09-29 20:40:20 +08:00
parent 0333ba54c0
commit 4fcf7b8bbe

View File

@@ -66,20 +66,20 @@ router.afterEach(() => {
id="header-right"> id="header-right">
<div class="flex justify-end items-center"> <div class="flex justify-end items-center">
<RouterLink :to="{ name: 'resource' }"> <RouterLink :to="{ name: 'resource' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-b-transparent hover:text-black" <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'resource' }">资源</div> :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'resource' }">资源</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'download' }"> <RouterLink :to="{ name: 'download' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-b-transparent hover:text-black" <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'download' }">下载</div> :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'download' }">下载</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'blog' }"> <RouterLink :to="{ name: 'blog' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-b-transparent hover:text-black" <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'blog' || $route.name === 'blogContent' }"> :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'blog' || $route.name === 'blogContent' }">
博客</div> 博客</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'dashboard' }"> <RouterLink :to="{ name: 'dashboard' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-b-transparent hover:text-black" <div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'login' || $route.name === 'dashboard' }"> :class="{ 'border-b-[#e03ebf] text-black': $route.name === 'login' || $route.name === 'dashboard' }">
控制台</div> 控制台</div>
</RouterLink> </RouterLink>