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-12 11:43:46 +08:00
parent 07b95549fd
commit f990d81ca2
6 changed files with 72 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
tonecn/src/components/Blog/BlogComment.vue
View File

@@ -47,49 +47,16 @@ watch(model, (newValue, oldValue) => {
</script> </script>
<template> <template>
<el-divider></el-divider> <el-divider></el-divider>
<div class="blogcomment-container"> <div class="w-full">
<div class="title">评论</div> <div
<div class="comment" v-for="blogcomment of blogCommentList"> class="border-l-[4px] border-l-[#ccc] text-[18px] pl-[15px] mb-[10px] text-[#444] dark:text-[#fff] cursor-default">
<div class="name">{{ blogcomment.name }}</div> 评论</div>
<div style="font-size: 12px;color: #888;">IP属地：{{ blogcomment.ip_address }}</div> <div class="my-[10px]" v-for="blogcomment of blogCommentList">
<div class="time">{{ timestampToString(blogcomment.time) }}</div> <div class=" text-[#555] dark:text-[#fff]">{{ blogcomment.name }}</div>
<div class="content">「{{ blogcomment.content }}」</div> <div class="text-[12px] text-[#888] dark:text-[#aaa]">IP属地：{{ blogcomment.ip_address }}</div>
<div class="text-[12px] text-[#888] dark:text-[#aaa]">{{ timestampToString(blogcomment.time) }}</div>
<div class="py-[10px] border-b border-b-[#ddd] text-[#333] dark:text-[#fff]">「{{ blogcomment.content }}」</div>
</div> </div>
<div class="status">—— {{ getStatusText }} ——</div> <div class="text-[14px] text-[#666] dark:text-[#fff] my-[15px]">—— {{ getStatusText }} ——</div>
</div> </div>
</template> </template>
<style scoped>
.blogcomment-container .title {
border-left: 4px solid #ccc;
font-size: 18px;
padding-left: 15px;
margin-bottom: 10px;
color: #444;
cursor: default;
}
.blogcomment-container .comment {
margin: 10px 0px;
}
.blogcomment-container .comment .name {
color: #555;
}
.blogcomment-container .comment .time {
font-size: 12px;
color: #888;
}
.blogcomment-container .comment .content {
color: #333;
padding: 10px 0px;
border-bottom: 1px solid #ddd;
}
.blogcomment-container .status {
margin: 15px 0px;
color: #666;
font-size: 14px;
}
</style>

43
tonecn/src/components/Blog/BlogContentToolBar.vue
View File

@@ -86,12 +86,12 @@ const submitComment = async () => {
</script> </script>
<template> <template>
<transition name="el-zoom-in-bottom"> <transition name="el-zoom-in-bottom">
<div class="tool-bar-container" v-show="toolBarVisible"> <div class="fixed bottom-0 left-0 w-full bg-white dark:bg-[#111] shadow flex justify-center items-center" v-show="toolBarVisible">
<div class="tool-bar"> <div class="w-full max-w-[600px] flex items-center justify-center py-[12px] px-[20px]">
<el-input v-model="inputComment" autosize type="textarea" class="input-comment" placeholder="快来留下你的评论吧～" <el-input v-model="inputComment" autosize type="textarea" class="mr-[12px]" placeholder="快来留下你的评论吧～"
clearable /> clearable />
<el-button type="primary" :icon="Edit" class="button" circle @click="commentHandle"></el-button> <el-button type="primary" :icon="Edit" circle @click="commentHandle"></el-button>
<el-button type="danger" :icon="isLiked ? StarFilled : Star" class="button" @click="likeBlog" <el-button type="danger" :icon="isLiked ? StarFilled : Star" @click="likeBlog"
circle></el-button> circle></el-button>
</div> </div>
</div> </div>
@@ -99,36 +99,3 @@ const submitComment = async () => {
<RotationVerification v-if="isCaptchaViewShow" <RotationVerification v-if="isCaptchaViewShow"
@fail="() => { isCaptchaViewShow = false; ElMessage.warning('验证失败') }" @success="submitComment" /> @fail="() => { isCaptchaViewShow = false; ElMessage.warning('验证失败') }" @success="submitComment" />
</template> </template>
<style scoped>
.tool-bar-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
/* height: 60px; */
background-color: #ffffff;
box-shadow: 0px 0px 9px 1px #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.tool-bar {
width: 100%;
max-width: 600px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
}
.input-comment {
margin-right: 12px;
}
@media screen and (max-width: 570px) {
.button {
background-color: none;
}
}
</style>

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

@@ -29,7 +29,7 @@ onMounted(async () => {
<div class="text-center mt-[20px] mb-[300px] dark:text-white" 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 dark:text-white" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a> <a class="text-[26px] font-semibold cursor-pointer block hover:underline dark:text-white text-[#333]" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
<div class="text-[#666] dark:text-[#ccc]">{{ 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>

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

@@ -72,13 +72,13 @@ onUnmounted(() => {
}) })
</script> </script>
<template> <template>
<div class="bg-default-bg fixed inset-0 w-full h-full -z-10 dark:bg-[#222]"></div> <div class="bg-default-bg dark:bg-[#222] fixed inset-0 w-full h-full -z-10"></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 dark:text-white" 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 dark:text-white">{{ blogInfo.title }}</h1> <h1 class="text-center text-[28px] font-semibold dark:text-white text-[#222]">{{ blogInfo.title }}</h1>
<p class="my-[15px] mx-auto text-[14px] text-[#888] dark:text-[#ccc] 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>
@@ -92,40 +92,31 @@ onUnmounted(() => {
<style> <style>
/* markdown CSS */ /* markdown CSS */
#blogContentContainer img { #blogContentContainer img {
width: 100%; @apply w-full;
} }
#blogContentContainer p { #blogContentContainer p {
color: #555; @apply text-[#555] dark:text-[#ddd] my-[10px];
} }
#blogContentContainer p code { #blogContentContainer p code {
background-color: #dedede; @apply bg-[#dedede] py-[2px] px-[3px];
padding: 2px 3px;
} }
#blogContentContainer blockquote { #blogContentContainer blockquote {
margin: 16px 0; @apply my-[16px] pl-[25px] border-[4px_solid_#ddd];
padding-left: 25px;
border-left: 4px solid #ddd;
} }
#blogContentContainer blockquote p { #blogContentContainer blockquote p {
color: #888; @apply text-[#888];
}
#blogContentContainer p {
margin-top: 10px;
margin-bottom: 10px;
} }
#blogContentContainer pre { #blogContentContainer pre {
border-radius: 5px; @apply rounded-[5px] overflow-hidden;
overflow: hidden;
} }
#blogContentContainer pre code { #blogContentContainer pre code {
overflow-x: scroll; @apply overflow-x-scroll;
} }
#blogContentContainer h1, #blogContentContainer h1,
@@ -134,38 +125,35 @@ onUnmounted(() => {
#blogContentContainer h4, #blogContentContainer h4,
#blogContentContainer h5, #blogContentContainer h5,
#blogContentContainer h6 { #blogContentContainer h6 {
font-weight: 600; @apply font-[800] text-[#333] dark:text-[#fff] mt-[20px];
} }
#blogContentContainer h1 { #blogContentContainer h1 {
font-size: 28px; @apply text-[28px] border-b-[#ddd] border-b;
border-bottom: 1px solid #ddd;
} }
#blogContentContainer h2 { #blogContentContainer h2 {
font-size: 24px; @apply text-[24px] border-b-[#ddd] border-b;
border-bottom: 1px solid #ddd;
} }
#blogContentContainer h3 { #blogContentContainer h3 {
font-size: 22px; @apply text-[22px];
} }
#blogContentContainer h4 { #blogContentContainer h4 {
font-size: 20px; @apply text-[20px];
} }
#blogContentContainer h5 { #blogContentContainer h5 {
font-size: 18px; @apply text-[18px];
} }
#blogContentContainer h6 { #blogContentContainer h6 {
font-size: 16px; @apply text-[16px];
} }
#blogContentContainer pre { #blogContentContainer pre {
font-size: 12px; @apply text-[12px] rounded-[8px] shadow;
border-radius: 8px;
box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
} }
</style> </style>

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

@@ -24,13 +24,19 @@ onMounted(async () => {
<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 dark:bg-[#222]"></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 dark:text-[#ddd]">一些可以直接下载的工具 <div
class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd] text-[#333]">
一些可以直接下载的工具
</div> </div>
<div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" 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] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。 请在浏览此部分内容前阅读并同意
<a class="text-[#222] cursor-pointer underline] dark:text-[#fff]"
@click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
</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 dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...
</div> </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 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">
@@ -38,17 +44,19 @@ onMounted(async () => {
<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" <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 dark:border-[1px]"> <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 dark:text-white">{{ item.title }}</div> <div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</div>
<div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div> <div class="text-[14px] mt-[5px] text-[#666] 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] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]" <div
:class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]" 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] 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>

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

@@ -24,13 +24,19 @@ onMounted(async () => {
<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 dark:bg-[#222]"></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 dark:text-[#ddd]">精心挑选并收藏的资源 <div
class="mt-[30px] sm:mt-[80px] text-[30px] sm:text-[42px] cursor-default transition-all duration-500 dark:text-[#ddd] text-[#333]">
精心挑选并收藏的资源
</div> </div>
<div class="mt-[20px] text-[#666] cursor-default text-[12px] px-[20px] dark:text-[#ccc]" 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] dark:text-[#fff]" @click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。 请在浏览此部分内容前阅读并同意
<a class="text-[#222] cursor-pointer underline] dark:text-[#fff]"
@click="showAgreement = true">《网站使用协议》</a>，继续使用或浏览表示您接受协议条款。
</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 dark:text-[#ddd]" v-if="loadStatus == 0">加载中，请稍后...
</div> </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 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">
@@ -38,17 +44,19 @@ onMounted(async () => {
<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" <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 dark:border-[1px]"> <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 dark:text-white">{{ item.title }}</div> <div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</div>
<div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div> <div class="text-[14px] mt-[5px] text-[#666] 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] dark:text-[#ccc] py-[1px] px-[6px] rounded-[20px] dark:bg-transparent dark:border-[1px] dark:border-[#999]" <div
:class="[{ 'bg-[#d6eeff] dark:bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]" 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] 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>