154 lines
3.1 KiB
Vue
154 lines
3.1 KiB
Vue
<template lang="pug">
|
|
.min-h-screen.bg-white.text-gray-800.w-full
|
|
header.header.absolute.left-0.top-0.right-0.border-gray-100.transition-all.duration-150.w-full.overflow-hidden(
|
|
:class="{ 'border-b-1': route.path !== '/' && route.path !== '/account/signin' }"
|
|
)
|
|
nav.container.mx-auto.flex.text-gray-400.text-lg.font-bold
|
|
template(v-for="item in navbar")
|
|
NuxtLink.px-4.py-6.transition-all.duration-150(
|
|
class="text-gray-500 hover:text-dark-800",
|
|
:class="{ 'text-dark-800': item.active }",
|
|
:to="item.path"
|
|
) {{ item.title }}
|
|
NuxtLink.px-4.py-6.ml-auto.text-gray-500(to="/account" v-if="!account.padding") {{ account.online ? account.name : '登录' }}
|
|
NuxtPage
|
|
</template>
|
|
|
|
<script setup>
|
|
// 全局引入代码高亮插件的样式
|
|
import "highlight.js/styles/atom-one-dark.css"
|
|
|
|
const route = useRoute()
|
|
const account = useState("account", () => ({
|
|
id: 0,
|
|
sid: '',
|
|
name: '',
|
|
avatars: [],
|
|
online: false,
|
|
padding: true,
|
|
}))
|
|
|
|
const navbar = computed(() => {
|
|
return [
|
|
{
|
|
title: "Home",
|
|
path: "/",
|
|
active: route.path === "/",
|
|
},
|
|
{
|
|
title: "Blog",
|
|
path: "/blog",
|
|
active: route.path.includes("/blog")
|
|
},
|
|
{
|
|
title: "Gallery",
|
|
path: "/gallery",
|
|
active: route.path.includes("/gallery")
|
|
},
|
|
{
|
|
title: "Numerology",
|
|
path: "/numerology",
|
|
active: route.path.includes("/numerology")
|
|
},
|
|
{
|
|
title: "Status",
|
|
path: "/status",
|
|
active: route.path.includes("/status")
|
|
}
|
|
]
|
|
});
|
|
|
|
onMounted(() => {
|
|
$fetch("/api/user/self").then((data) => {
|
|
account.value.sid = data.sid
|
|
account.value.id = data.id
|
|
account.value.name = data.name
|
|
account.value.online = data.online
|
|
account.value.padding = false
|
|
})
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
/** 去除链接默认下划线 */
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/** 全局字体 */
|
|
body {
|
|
font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
/** 全局滚动条取消空间占用, 防止渲染时闪烁 */
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/** markdown */
|
|
.markdown h1 {
|
|
font-weight: bold;
|
|
font-size: 2rem;
|
|
margin: 1.5rem 0;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.markdown pre {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
overflow-y: hidden
|
|
}
|
|
|
|
.markdown pre code {
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.markdown table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.markdown table tr th {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.markdown table tr td {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.markdown p {
|
|
margin: 2rem 0;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
white-space: wrap;
|
|
}
|
|
|
|
.markdown input[type="checkbox"] {
|
|
position: relative;
|
|
margin-right: 0.3em;
|
|
}
|
|
|
|
.markdown input[type="checkbox"]::before {
|
|
position: absolute;
|
|
content: "\a0";
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 0.3em;
|
|
background-color: #ececec;
|
|
text-indent: 0.15em;
|
|
line-height: 0.65;
|
|
}
|
|
|
|
.markdown input[type="checkbox"]:checked::before {
|
|
content: "\2713";
|
|
color: #00aeec;
|
|
background-color: #dff6fd;
|
|
}
|
|
</style>
|