tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加 深色模式

Browse Source
This commit is contained in:
tone
2024-10-08 02:43:17 +08:00
parent 5038c3b29c
commit 2e191c7a7b
10 changed files with 59 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
tonecn/src/components/Common/Header.vue
View File

@@ -37,8 +37,8 @@ router.afterEach(() => {
</script>
<template>
<div class="z-[500] w-full fixed backdrop-blur-sm bg-white/60">
<div class="w-full box-content mx-auto py-[15px] sm:py-[22px] max-w-[1170px] flex justify-between items-center transition-all duration-200 border-b-[1px] border-b-[#eee]"
<div class="z-[500] w-full fixed backdrop-blur-sm bg-white/60 dark:bg-black/10 border-b-[#eee] border-b-[1px]">
<div class="w-full box-content mx-auto py-[15px] sm:py-[22px] max-w-[1170px] flex justify-between items-center transition-all duration-200"
:class="[{ 'flex-col': showMoreOptions }]">
<!-- left header -->
<div class="px-[25px] flex items-center w-full justify-between sm:block">
@@ -47,12 +47,12 @@ router.afterEach(() => {
<div class="h-[35px] text-[25px] cursor-pointer]">🍭</div>
</RouterLink>
<RouterLink :to="{ name: 'home' }" v-else>
<div class="h-[35px] leading-[35px] font-semibold tracking-[5px] text-[#333] text-nowrap">
<div class="h-[35px] leading-[35px] font-semibold tracking-[5px] text-[#333] text-nowrap dark:text-white">
特恩(TONE)</div>
</RouterLink>
</div>
<!-- 更多选项按钮，宽度小于800时出现 -->
<div class="sm:hidden block" tabindex="0" id="header-more" ref="moreOptionsButton">
<div class="sm:hidden block dark:fill-[#ccc]" tabindex="0" id="header-more" ref="moreOptionsButton">
<svg t="1705913460674" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="10513" width="20" height="20">
<path
@@ -66,21 +66,21 @@ router.afterEach(() => {
id="header-right">
<div class="flex justify-end items-center">
<RouterLink :to="{ name: 'resource' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'resource' }">资源</div>
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
:class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'resource' }">资源</div>
</RouterLink>
<RouterLink :to="{ name: 'download' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'download' }">下载</div>
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
:class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'download' }">下载</div>
</RouterLink>
<RouterLink :to="{ name: 'blog' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'blog' || $route.name === 'blogContent' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
:class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'blog' || $route.name === 'blogContent' }">
博客</div>
</RouterLink>
<RouterLink :to="{ name: 'dashboard' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black"
:class="{ 'border-b-[#e03ebf] text-black': $route.name === 'login' || $route.name === 'dashboard' }">
<div class="text-nowrap mx-[20px] cursor-pointer text-[#666] transition-all duration-200 border-b-[3px] border-transparent hover:text-black dark:text-[#ccc] dark:hover:text-white"
:class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'login' || $route.name === 'dashboard' }">
控制台</div>
</RouterLink>
</div>