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

修改navbar
Some checks failed
CI / build (push) Failing after 11m31s
Details

Browse Source
This commit is contained in:
Jeffrey Hsu 2024-10-28 07:59:01 +08:00
parent 165ec980b9
commit d074d7a379
7 changed files with 55 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -1,8 +1,8 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="zh">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link href="/vite.svg" rel="icon" type="image/svg+xml"/> <link href="/logo-c.png" rel="icon" type="image/png"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>CANTYONION.SITE</title> <title>CANTYONION.SITE</title>
</head> </head>

BIN
public/logo-c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/logo-c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/logo-w.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

@ -1,5 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import {getAssetURL} from "@/utils/function.ts";
import NavBarEntryItem from "@/components/nav/NavBarEntryItem.vue";
type Widget = { type Widget = {
icon: string[] icon: string[]
url: string url: string
@ -23,19 +26,38 @@ const littleWidget: Widget[] = [
title: "Git Repository" title: "Git Repository"
} }
] ]
const logoUrl = getAssetURL("logo-c.png")
</script> </script>
<template> <template>
<nav <nav
class="fixed z-20 h-16 w-full bg-white bg-opacity-70 text-gray-600 shadow backdrop-blur-md" 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 items-center justify-center sm:justify-between"> <div
class="container mx-auto flex w-full max-w-screen-xl items-center justify-center overflow-hidden sm:justify-between">
<!-- Logo --> <!-- Logo -->
<div class="h-full text-4xl min-w-16 logo py-3.5"> <!-- <div class="h-full text-4xl min-w-16 logo py-3.5">-->
<span>CantyOni_on's Index</span> <!-- <span>CantyOni_on's Index</span>-->
<!-- </div>-->
<div class="py-2">
<img :src="logoUrl" alt="" class="h-12 w-12"/>
</div> </div>
<!-- Entry --> <!-- Entry -->
<!-- <div class="flex-1"></div>--> <div class="flex">
<nav-bar-entry-item/>
<nav-bar-entry-item/>
<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"> <div class="hidden items-center justify-between gap-4 text-xl sm:flex">
<a v-for="item in littleWidget" <a v-for="item in littleWidget"

24
src/components/nav/NavBarEntryItem.vue Normal file
View File

@ -0,0 +1,24 @@
<script lang="ts" setup>
</script>
<template>
<div class="container relative w-16 max-w-max flex-auto shrink-0 cursor-pointer
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
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>
</div>
</template>
<style scoped>
</style>

5
src/main.ts
View File

@ -14,13 +14,14 @@ import {
faCloud, faCloud,
faChevronRight, faChevronRight,
faCodeCommit, faCodeCommit,
faCode faCode,
faHouse
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons' import {faWeibo, faQq, faGithubAlt, faSteamSymbol} from '@fortawesome/free-brands-svg-icons'
library.add( library.add(
faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight, faClock, faXmark, faBlog, faGauge, faCodeBranch, faCloud, faWeibo, faQq, faGithubAlt, faSteamSymbol, faChevronRight,
faCodeCommit, faCode faCodeCommit, faCode, faHouse
) )
createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app') createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')