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

添加item
Some checks failed
CI / build (push) Failing after 1m14s
Details

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-10-31 07:56:21 +08:00
parent d074d7a379
commit 217d79ce98
2 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import {getAssetURL} from "@/utils/function.ts";
import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
import {computed} from "vue";
type Widget = {
icon: string[]
@ -27,22 +28,23 @@ const littleWidget: Widget[] = [
}
]
const logoUrl = getAssetURL("logo-c.png")
const logoType: string = "logo";
const showLogo = computed(() => logoType === 'text')
</script>
<template>
<nav
class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md"
>
<div
class="container mx-auto flex w-full max-w-screen-xl items-center justify-center overflow-hidden sm:justify-between">
<div class="container mx-auto flex w-full max-w-screen-xl items-center justify-center sm:justify-between">
<!-- Logo -->
<!-- <div class="h-full text-4xl min-w-16 logo py-3.5">-->
<!-- <span>CantyOni_on's Index</span>-->
<!-- </div>-->
<div class="py-2">
<div v-if="showLogo" class="h-full text-4xl min-w-16 logo py-3.5">
<span>CantyOni_on's Index</span>
</div>
<div v-else class="py-2">
<img :src="logoUrl" alt="" class="h-12 w-12"/>
</div>
<!-- Entry -->
<div class="flex">
<nav-bar-entry-item/>
@ -50,14 +52,8 @@ const logoUrl = getAssetURL("logo-c.png")
<nav-bar-entry-item/>
<nav-bar-entry-item/>
<nav-bar-entry-item/>
<!-- <div class="container">-->
<!-- <div-->
<!-- class="flex h-16 w-8 items-center overflow-hidden transition-all duration-300 w-max-20 text-nowrap hover:w-full">-->
<!-- <font-awesome-icon :icon="['fas', 'book']"/>-->
<!-- <span class="ml-1 text-xl">文章</span>-->
<!-- </div>-->
<!-- </div>-->
</div>
<!-- 快速跳转小组件 -->
<div class="hidden items-center justify-between gap-4 text-xl sm:flex">
<a v-for="item in littleWidget"

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

@ -7,18 +7,25 @@
group hover:w-full hover:bg-gray-200">
<div class="flex h-16 items-center pr-4 pl-2">
<font-awesome-icon :icon="['fas', 'house']" class="mx-2 h-8 w-8"/>
<span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-500
<span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-300
text-nowrap group-hover:w-full">
主页
</span>
</div>
<div
class="invisible h-20 absolute top-full w-20 bg-pink-400 opacity-0 transition-all group-hover:visible group-hover:opacity-100">
<!-- 下拉菜单 -->
<div class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
bg-opacity-70 opacity-0 shadow-md backdrop-blur-md transition-all duration-300
min-w-32 item group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
<div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
<div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
<div class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">博客</div>
</div>
</div>
</template>
<style scoped>
<style lang="scss" scoped>
.item {
transform: perspective(500px) rotateX(-45deg) translateX(-50%);
}
</style>