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="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"> <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/"> <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> </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>
<div class="mr-0 sm:mr-[25px] flex sm:pb-0 pb-[20px]"> <div class="mr-0 sm:mr-[25px] flex sm:pb-0 pb-[20px]">
<el-popover trigger="click" placement="top" :width="160"> <el-popover trigger="click" placement="top" :width="160">

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

@@ -37,8 +37,8 @@ router.afterEach(() => {
</script> </script>
<template> <template>
<div class="z-[500] w-full fixed backdrop-blur-sm bg-white/60"> <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 border-b-[1px] border-b-[#eee]" <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 }]"> :class="[{ 'flex-col': showMoreOptions }]">
<!-- left header --> <!-- left header -->
<div class="px-[25px] flex items-center w-full justify-between sm:block"> <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> <div class="h-[35px] text-[25px] cursor-pointer]">🍭</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'home' }" v-else> <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> 特恩(TONE)</div>
</RouterLink> </RouterLink>
</div> </div>
<!-- 更多选项按钮，宽度小于800时出现 --> <!-- 更多选项按钮，宽度小于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" <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"> xmlns="http://www.w3.org/2000/svg" p-id="10513" width="20" height="20">
<path <path
@@ -66,21 +66,21 @@ router.afterEach(() => {
id="header-right"> id="header-right">
<div class="flex justify-end items-center"> <div class="flex justify-end items-center">
<RouterLink :to="{ name: 'resource' }"> <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" <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': $route.name === 'resource' }">资源</div> :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'resource' }">资源</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'download' }"> <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" <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': $route.name === 'download' }">下载</div> :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'download' }">下载</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'blog' }"> <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" <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': $route.name === 'blog' || $route.name === 'blogContent' }"> :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'blog' || $route.name === 'blogContent' }">
博客</div> 博客</div>
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'dashboard' }"> <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" <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': $route.name === 'login' || $route.name === 'dashboard' }"> :class="{ 'border-b-[#e03ebf] text-black dark:text-white': $route.name === 'login' || $route.name === 'dashboard' }">
控制台</div> 控制台</div>
</RouterLink> </RouterLink>
</div> </div>

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

@@ -175,17 +175,17 @@ onMounted(() => {
<template> <template>
<transition name="el-fade-in-linear"> <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="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="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]">安全验证</div> <div class="mt-[25px] text-[#888] dark:text-white">安全验证</div>
<div class="mt-[8px]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平") <div class="mt-[8px] dark:text-[#ccc]">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
}} }}
</div> </div>
<div class="mt-[28px] w-[160px] h-[160px] rounded-full flex justify-center items-center overflow-hidden"> <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"> <img class="w-[226px] h-[226px] bg-gray-400 object-cover" :src="imageBase64" alt="" id="RV-image">
</div> </div>
<div class="w-[240px] h-[40px] rounded-[20px] bg-slate-200 mt-[25px] flex items-center"> <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 rounded-full shadow-md text-center cursor-pointer relative translate-x-0" id="RV-slider"> <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]" viewBox="0 0 1024 1024" fill="#666" version="1.1" <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"> xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18">
<path <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" 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"

8
tonecn/src/views/Blog.vue
View File

@@ -22,15 +22,15 @@ onMounted(async () => {
}) })
</script> </script>
<template> <template>
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div class="flex flex-col max-w-[800px] my-[30px] mx-auto px-[20px]"> <div class="flex flex-col max-w-[800px] my-[30px] mx-auto px-[20px]">
<el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" /> <el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" />
<div class="gap-[30px] flex flex-col" v-else> <div class="gap-[30px] flex flex-col" v-else>
<div class="text-center mt-[20px] mb-[300px]" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="text-center mt-[20px] mb-[300px] dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
<el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" /> <el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" />
<div class="mx-auto max-w-[400px] w-full flex flex-col" v-for="item of blogList"> <div class="mx-auto max-w-[400px] w-full flex flex-col" v-for="item of blogList">
<a class="text-[26px] font-semibold cursor-pointer block hover:underline" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a> <a class="text-[26px] font-semibold cursor-pointer block hover:underline dark:text-white" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
<div class="text-[#666]">{{ item.description }}</div> <div class="text-[#666] dark:text-[#ccc]">{{ item.description }}</div>
<div class="text-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} —— <div class="text-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} ——
{{ formateTimes(item.visit_count) }} 次访问</div> {{ formateTimes(item.visit_count) }} 次访问</div>
</div> </div>

8
tonecn/src/views/BlogContent.vue
View File

@@ -72,14 +72,14 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div class="flex flex-col max-w-[600px] my-[50px] mx-auto px-[20px]"> <div class="flex flex-col max-w-[600px] my-[50px] mx-auto px-[20px]">
<div class="mx-auto" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="mx-auto dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
<el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" /> <el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" />
<div v-if="loadStatus == 1"> <div v-if="loadStatus == 1">
<div> <div>
<h1 class="text-center text-[28px] font-semibold">{{ blogInfo.title }}</h1> <h1 class="text-center text-[28px] font-semibold dark:text-white">{{ blogInfo.title }}</h1>
<p class="my-[15px] mx-auto text-[14px] text-[#888] text-center">发布于 {{ <p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] text-center">发布于 {{
timestampToString(blogInfo.publish_time) }}</p> timestampToString(blogInfo.publish_time) }}</p>
</div> </div>
<div v-html="blogContent" id="blogContentContainer"></div> <div v-html="blogContent" id="blogContentContainer"></div>

6
tonecn/src/views/Console/Login.vue
View File

@@ -59,15 +59,15 @@ onMounted(async () => {
}) })
</script> </script>
<template> <template>
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div <div
class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]"> class="flex flex-col items-center justify-center mx-auto sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)] px-[20px] max-w-[280px] min-h-[400px]">
<h1 class="text-center text-[36px] font-medium cursor-default">登录到控制台</h1> <h1 class="text-center text-[36px] font-medium cursor-default dark:text-white">登录到控制台</h1>
<el-popover placement="bottom" :width="300" trigger="click"> <el-popover placement="bottom" :width="300" trigger="click">
<p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;" <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
@click="">《特恩(TONE)控制台使用协议》</strong></p> @click="">《特恩(TONE)控制台使用协议》</strong></p>
<template #reference> <template #reference>
<h3 class="text-center cursor-pointer font-semibold mt-[10px]">控制台是什么？</h3> <h3 class="text-center cursor-pointer font-semibold mt-[10px] dark:text-[#ccc]">控制台是什么？</h3>
</template> </template>
</el-popover> </el-popover>
<div class="w-full flex flex-col items-center"> <div class="w-full flex flex-col items-center">

26
tonecn/src/views/Download.vue
View File

@@ -21,36 +21,34 @@ onMounted(async () => {
} }
}) })
</script> </script>
<template> <template>
<div class="mx-auto flex flex-col items-center"> <div class="mx-auto flex flex-col items-center">
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500"> <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">一些可以直接下载的工具
一些可以直接下载的工具
</div> </div>
<div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意 <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
<a class="text-[#222] cursor-pointer underline]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。 <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
</div> </div>
<div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 2">加载失败，请刷新界面重试</div> <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
<div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
<div <div
class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500" class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
v-if="loadStatus == 1"> v-if="loadStatus == 1">
<!-- 资源项 --> <!-- 资源项 -->
<a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden" <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
v-for="item of ResourceDatas" :href="item.src" target="_blank"> v-for="item of ResourceDatas" :href="item.src" target="_blank">
<!-- 左侧图标 --> <!-- 左侧图标 -->
<div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300"> <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
<img :src="item.icon_src" alt="" class="w-[80px] h-[80px]"> <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
</div> </div>
<!-- 右侧描述 --> <!-- 右侧描述 -->
<div class="ml-[20px] flex-1 cursor-default"> <div class="ml-[20px] flex-1 cursor-default">
<div class="text-[23px] font-semibold">{{ item.title }}</div> <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
<div class="text-[14px] text-[#666] mt-[5px]">{{ item.describe }}</div> <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
<!-- 下方的标签 --> <!-- 下方的标签 -->
<div class="flex gap-[5px] mt-[10px] flex-wrap"> <div class="flex gap-[5px] mt-[10px] flex-wrap">
<div class="text-[10px] text-[#666] py-[1px] px-[6px] rounded-[20px]" <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
:class="[{ 'bg-[#d6eeff]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]" :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
v-for="lable of item.addition.lables">{{ v-for="lable of item.addition.lables">{{
lable.text }}</div> lable.text }}</div>
</div> </div>

5
tonecn/src/views/HomeView.vue
View File

@@ -23,13 +23,14 @@ onMounted(() => {
}) })
</script> </script>
<template> <template>
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div <div
class="flex max-w-[800px] flex-col items-center justify-center mx-auto min-h-[420px] sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)]" class="flex max-w-[800px] flex-col items-center justify-center mx-auto min-h-[420px] sm:h-[calc(100vh-90px)] h-[calc(100vh-77px)]"
id="home-main"> id="home-main">
<img src="../assets/logo.jpg" alt="" class="w-[150px] rounded-full"> <img src="../assets/logo.jpg" alt="" class="w-[150px] rounded-full">
<div class="name text-[34px] sm:text-[42px]" id="my-name">特恩(TONE)</div> <div class="name text-[34px] sm:text-[42px]" id="my-name">特恩(TONE)</div>
<div class="mt-[10px] sm:text-[23px] text-[16px] cursor-default text-[#888] transition-all duration-200"> <div
class="mt-[10px] sm:text-[23px] text-[16px] cursor-default text-[#888] transition-all duration-200 dark:text-[#ccc]">
一名计算机类专业在校本科大三学生</div> 一名计算机类专业在校本科大三学生</div>
<div class="mt-[28px] mb-[30px] flex items-center justify-center flex-wrap sm:flex-row flex-col gap-[10px]"> <div class="mt-[28px] mb-[30px] flex items-center justify-center flex-wrap sm:flex-row flex-col gap-[10px]">
<a href="https://space.bilibili.com/474156211" target="_blank"> <a href="https://space.bilibili.com/474156211" target="_blank">

2
tonecn/src/views/NotFound.vue
View File

@@ -10,7 +10,7 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="bcc"></div> <div class="bcc dark:bg-[#222]"></div>
<div class="content-container"> <div class="content-container">
<el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" /> <el-empty id="404-notfound-el-empty" style="margin-bottom: 200px;" description="404 不存在的页面" />
</div> </div>

24
tonecn/src/views/Resource.vue
View File

@@ -23,32 +23,32 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="mx-auto flex flex-col items-center"> <div class="mx-auto flex flex-col items-center">
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10"></div> <div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div>
<div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500">精心挑选并收藏的资源 <div class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd]">精心挑选并收藏的资源
</div> </div>
<div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意 <div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" v-if="loadStatus != 2">请在浏览此部分内容前阅读并同意
<a class="text-[#222] cursor-pointer underline]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。 <a class="text-[#222] cursor-pointer underline] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
</div> </div>
<div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 2">加载失败，请刷新界面重试</div> <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 2">加载失败，请刷新界面重试</div>
<div class="mt-[80px] cursor-default mb-[380px] text-center" v-if="loadStatus == 0">加载中，请稍后...</div> <div class="mt-[80px] cursor-default mb-[380px] text-center dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...</div>
<div <div
class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500" class="mt-[25px] sm:mt-[50px] mx-auto flex justify-center items-start flex-wrap max-w-[1000px] transition-all duration-500"
v-if="loadStatus == 1"> v-if="loadStatus == 1">
<!-- 资源项 --> <!-- 资源项 -->
<a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden" <a class="w-full xs:w-[380px] lg:w-[420px] sm:mb-[40px] mb-[20px] mx-0 xs:mx-[30px] p-[30px] bg-white dark:bg-transparent dark:border-[1px] dark:border-[#aaa] rounded-0 xs:rounded-[15px] flex justify-between shadow-xl hover:shadow-2xl dark:hover:shadow-[#666] transition-all duration-500 overflow-hidden"
v-for="item of ResourceDatas" :href="item.src" target="_blank"> v-for="item of ResourceDatas" :href="item.src" target="_blank">
<!-- 左侧图标 --> <!-- 左侧图标 -->
<div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300"> <div class="w-[80px] h-[80px] overflow-hidden shadow-md rounded-[10px] transition-all duration-300 dark:border-[1px]">
<img :src="item.icon_src" alt="" class="w-[80px] h-[80px]"> <img :src="item.icon_src" alt="" class="w-[80px] h-[80px]">
</div> </div>
<!-- 右侧描述 --> <!-- 右侧描述 -->
<div class="ml-[20px] flex-1 cursor-default"> <div class="ml-[20px] flex-1 cursor-default">
<div class="text-[23px] font-semibold">{{ item.title }}</div> <div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
<div class="text-[14px] text-[#666] mt-[5px]">{{ item.describe }}</div> <div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
<!-- 下方的标签 --> <!-- 下方的标签 -->
<div class="flex gap-[5px] mt-[10px] flex-wrap"> <div class="flex gap-[5px] mt-[10px] flex-wrap">
<div class="text-[10px] text-[#666] py-[1px] px-[6px] rounded-[20px]" <div class="text-[10px] text-[#666] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]"
:class="[{ 'bg-[#d6eeff]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]" :class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
v-for="lable of item.addition.lables">{{ v-for="lable of item.addition.lables">{{
lable.text }}</div> lable.text }}</div>
</div> </div>