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

4
tonecn/src/components/Common/Footer.vue
View File

@@ -15,9 +15,9 @@ let copyTextwithMsg = (text : string) => {
<div class="h-[100px] w-full mx-auto max-w-[1170px] flex justify-between items-center sm:flex-row flex-col" >
<div class="text-[12px] ml-0 sm:ml-[25px] cursor-default my-[22px] sm:my-0 mb-[10px] text-center sm:text-left">
<a href="https://beian.miit.gov.cn/">
<div class="mt-[5px] cursor-pointer">备案号：渝ICP备2023009516号-1</div>
<div class="mt-[5px] cursor-pointer dark:text-[#ccc]">备案号：渝ICP备2023009516号-1</div>
</a>
<div class="mt-[6px] sm:mt-0">Copyright ©2020-2024 TONE All Rights Reserved.</div>
<div class="mt-[6px] sm:mt-0 dark:text-[#ccc]">Copyright ©2020-2024 TONE All Rights Reserved.</div>
</div>
<div class="mr-0 sm:mr-[25px] flex sm:pb-0 pb-[20px]">
<el-popover trigger="click" placement="top" :width="160">

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>

12
tonecn/src/components/Common/RotationVerification.vue
View File

@@ -175,17 +175,17 @@ onMounted(() => {
<template>
<transition name="el-fade-in-linear">
<div class="fixed w-full h-full inset-0 bg-[#00000022] z-[2000] flex justify-center items-center" @click="$emit('fail')">
<div class="w-[300px] h-[400px] bg-white flex flex-col items-center rounded-[15px]" onclick="event.stopPropagation()">
<div class="mt-[25px] text-[#888]">安全验证</div>
<div class="mt-[8px]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
<div class="w-[300px] h-[400px] bg-white dark:bg-[#222] dark:border-[1px] flex flex-col items-center rounded-[15px]" onclick="event.stopPropagation()">
<div class="mt-[25px] text-[#888] dark:text-white">安全验证</div>
<div class="mt-[8px] dark:text-[#ccc]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
}}
</div>
<div class="mt-[28px] w-[160px] h-[160px] rounded-full flex justify-center items-center overflow-hidden">
<img class="w-[226px] h-[226px] bg-gray-400 object-cover" :src="imageBase64" alt="" id="RV-image">
</div>
<div class="w-[240px] h-[40px] rounded-[20px] bg-slate-200 mt-[25px] flex items-center">
<div class="w-[45px] h-[45px] leading-[45px] bg-white rounded-full shadow-md text-center cursor-pointer relative translate-x-0" id="RV-slider">
<svg t="1706696449802" class="absolute left-[14px] top-[14px]" viewBox="0 0 1024 1024" fill="#666" version="1.1"
<div class="w-[240px] h-[40px] rounded-[20px] bg-slate-200 dark:bg-[#444] mt-[25px] flex items-center">
<div class="w-[45px] h-[45px] leading-[45px] bg-white dark:bg-[#999] rounded-full shadow-md text-center cursor-pointer relative translate-x-0" id="RV-slider">
<svg t="1706696449802" class="absolute left-[14px] top-[14px] dark:fill-white" viewBox="0 0 1024 1024" fill="#666" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18">
<path
d="M567.32505 547.18536c20.970614-21.479197 20.970614-56.307424 0-77.790714L185.251168 77.115332c-20.971637-21.47715-54.975079-21.47715-75.948763 0-20.973684 21.484314-20.973684 56.30947 0 77.793784l344.188016 353.383446-344.188016 353.384469c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.971637 21.482267 54.975079 21.482267 75.948763 0l382.072858-392.280337 0.001024-0.004094zM440.60802 154.908092l344.18597 353.383446-344.18597 353.385493c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.972661 21.482267 54.975079 21.482267 75.949786 0l382.074905-392.281361c20.966521-21.478174 20.966521-56.307424 0-77.790714L516.555759 77.115332c-20.972661-21.47715-54.975079-21.47715-75.949786 0-20.971637 21.48329-20.971637 56.30947 0.002047 77.79276z"