parent
165ec980b9
commit
d074d7a379
@ -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
BIN
public/logo-c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/logo-c.png
Normal file
BIN
src/assets/logo-c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
src/assets/logo-w.png
Normal file
BIN
src/assets/logo-w.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -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
24
src/components/nav/NavBarEntryItem.vue
Normal 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>
|
||||||
@ -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')
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user