cantyonion/WebIndex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修正代码样式

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-11-05 14:28:45 +08:00
parent ed082a4f43
commit d7afc49b91
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/nav/NavBar.vue
View File

@ -105,9 +105,9 @@ const menuExpanded = () => {
</div>
<!-- Entry -->
<div
:class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex md:h-auto md:bg-transparent md:opacity-100"
<div :class="{'h-screen opacity-100 visible': isExpended, 'h-0 opacity-0 invisible': !isExpended}"
class="absolute top-full right-0 left-0 bg-white transition-all md:visible md:relative md:top-0 md:flex
md:h-auto md:bg-transparent md:opacity-100"
>
<nav-bar-entry-item v-for="item in entry" :key="item.title"
:entry="item.entry" :icon="item.icon"

10
src/components/nav/NavBarEntryItem.vue
View File

@ -15,15 +15,19 @@ defineProps<{
<div class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full">
<div class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 md:w-auto md:group-hover:bg-gray-200">
<font-awesome-icon :icon="icon" class="mx-2 md:h-8 md:w-8"/>
<span
class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap md:w-0 md:text-xl md:group-hover:w-full">
<span class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap
md:w-0 md:text-xl md:group-hover:w-full"
>
{{ title }}
</span>
</div>
<!-- 下拉菜单 -->
<div v-if="entry"
class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100">
class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
>
<div v-for="item in entry" :key="item.title"
class="px-10 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100">
{{ item.title }}