优化 前端深色模式样式
This commit is contained in:
@@ -47,49 +47,16 @@ watch(model, (newValue, oldValue) => {
|
||||
</script>
|
||||
<template>
|
||||
<el-divider></el-divider>
|
||||
<div class="blogcomment-container">
|
||||
<div class="title">评论</div>
|
||||
<div class="comment" v-for="blogcomment of blogCommentList">
|
||||
<div class="name">{{ blogcomment.name }}</div>
|
||||
<div style="font-size: 12px;color: #888;">IP属地：{{ blogcomment.ip_address }}</div>
|
||||
<div class="time">{{ timestampToString(blogcomment.time) }}</div>
|
||||
<div class="content">「{{ blogcomment.content }}」</div>
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="border-l-[4px] border-l-[#ccc] text-[18px] pl-[15px] mb-[10px] text-[#444] dark:text-[#fff] cursor-default">
|
||||
评论</div>
|
||||
<div class="my-[10px]" v-for="blogcomment of blogCommentList">
|
||||
<div class=" text-[#555] dark:text-[#fff]">{{ blogcomment.name }}</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 class="status">—— {{ getStatusText }} ——</div>
|
||||
<div class="text-[14px] text-[#666] dark:text-[#fff] my-[15px]">—— {{ getStatusText }} ——</div>
|
||||
</div>
|
||||
</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>
|
||||
@@ -86,12 +86,12 @@ const submitComment = async () => {
|
||||
</script>
|
||||
<template>
|
||||
<transition name="el-zoom-in-bottom">
|
||||
<div class="tool-bar-container" v-show="toolBarVisible">
|
||||
<div class="tool-bar">
|
||||
<el-input v-model="inputComment" autosize type="textarea" class="input-comment" placeholder="快来留下你的评论吧～"
|
||||
<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="w-full max-w-[600px] flex items-center justify-center py-[12px] px-[20px]">
|
||||
<el-input v-model="inputComment" autosize type="textarea" class="mr-[12px]" placeholder="快来留下你的评论吧～"
|
||||
clearable />
|
||||
<el-button type="primary" :icon="Edit" class="button" circle @click="commentHandle"></el-button>
|
||||
<el-button type="danger" :icon="isLiked ? StarFilled : Star" class="button" @click="likeBlog"
|
||||
<el-button type="primary" :icon="Edit" circle @click="commentHandle"></el-button>
|
||||
<el-button type="danger" :icon="isLiked ? StarFilled : Star" @click="likeBlog"
|
||||
circle></el-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,36 +99,3 @@ const submitComment = async () => {
|
||||
<RotationVerification v-if="isCaptchaViewShow"
|
||||
@fail="() => { isCaptchaViewShow = false; ElMessage.warning('验证失败') }" @success="submitComment" />
|
||||
</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>
|
||||
@@ -29,7 +29,7 @@ onMounted(async () => {
|
||||
<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" />
|
||||
<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-[#888] mt-[15px] text-[14px]">{{ timestampToString(+item.publish_time) }} ——
|
||||
{{ formateTimes(item.visit_count) }} 次访问</div>
|
||||
|
||||
@@ -72,13 +72,13 @@ onUnmounted(() => {
|
||||
})
|
||||
</script>
|
||||
<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="mx-auto dark:text-white" v-if="loadStatus == 0">加载中，请稍后...</div>
|
||||
<el-empty v-if="loadStatus < 0" :description="loadStatus == -1 ? '加载失败，刷新后重试' : '文章不存在或不可见'" />
|
||||
<div v-if="loadStatus == 1">
|
||||
<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">发布于 {{
|
||||
timestampToString(blogInfo.publish_time) }}</p>
|
||||
</div>
|
||||
@@ -92,40 +92,31 @@ onUnmounted(() => {
|
||||
<style>
|
||||
/* markdown CSS */
|
||||
#blogContentContainer img {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
#blogContentContainer p {
|
||||
color: #555;
|
||||
@apply text-[#555] dark:text-[#ddd] my-[10px];
|
||||
}
|
||||
|
||||
#blogContentContainer p code {
|
||||
background-color: #dedede;
|
||||
padding: 2px 3px;
|
||||
@apply bg-[#dedede] py-[2px] px-[3px];
|
||||
}
|
||||
|
||||
#blogContentContainer blockquote {
|
||||
margin: 16px 0;
|
||||
padding-left: 25px;
|
||||
border-left: 4px solid #ddd;
|
||||
@apply my-[16px] pl-[25px] border-[4px_solid_#ddd];
|
||||
}
|
||||
|
||||
#blogContentContainer blockquote p {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#blogContentContainer p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
@apply text-[#888];
|
||||
}
|
||||
|
||||
#blogContentContainer pre {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
@apply rounded-[5px] overflow-hidden;
|
||||
}
|
||||
|
||||
#blogContentContainer pre code {
|
||||
overflow-x: scroll;
|
||||
@apply overflow-x-scroll;
|
||||
}
|
||||
|
||||
#blogContentContainer h1,
|
||||
@@ -134,38 +125,35 @@ onUnmounted(() => {
|
||||
#blogContentContainer h4,
|
||||
#blogContentContainer h5,
|
||||
#blogContentContainer h6 {
|
||||
font-weight: 600;
|
||||
@apply font-[800] text-[#333] dark:text-[#fff] mt-[20px];
|
||||
}
|
||||
|
||||
#blogContentContainer h1 {
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
@apply text-[28px] border-b-[#ddd] border-b;
|
||||
}
|
||||
|
||||
#blogContentContainer h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
@apply text-[24px] border-b-[#ddd] border-b;
|
||||
|
||||
}
|
||||
|
||||
#blogContentContainer h3 {
|
||||
font-size: 22px;
|
||||
@apply text-[22px];
|
||||
}
|
||||
|
||||
#blogContentContainer h4 {
|
||||
font-size: 20px;
|
||||
@apply text-[20px];
|
||||
}
|
||||
|
||||
#blogContentContainer h5 {
|
||||
font-size: 18px;
|
||||
@apply text-[18px];
|
||||
}
|
||||
|
||||
#blogContentContainer h6 {
|
||||
font-size: 16px;
|
||||
@apply text-[16px];
|
||||
}
|
||||
|
||||
#blogContentContainer pre {
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.3);
|
||||
@apply text-[12px] rounded-[8px] shadow;
|
||||
}
|
||||
</style>
|
||||
@@ -24,13 +24,19 @@ onMounted(async () => {
|
||||
<template>
|
||||
<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="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 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>，继续使用或浏览表示您接受协议条款。
|
||||
<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>，继续使用或浏览表示您接受协议条款。
|
||||
</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 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
|
||||
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">
|
||||
@@ -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"
|
||||
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]">
|
||||
</div>
|
||||
<!-- 右侧描述 -->
|
||||
<div class="ml-[20px] flex-1 cursor-default">
|
||||
<div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
|
||||
<div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
|
||||
<div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</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="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' }]"
|
||||
<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] dark:!bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
|
||||
v-for="lable of item.addition.lables">{{
|
||||
lable.text }}</div>
|
||||
</div>
|
||||
|
||||
@@ -24,13 +24,19 @@ onMounted(async () => {
|
||||
<template>
|
||||
<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="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 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>，继续使用或浏览表示您接受协议条款。
|
||||
<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>，继续使用或浏览表示您接受协议条款。
|
||||
</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 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
|
||||
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">
|
||||
@@ -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"
|
||||
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]">
|
||||
</div>
|
||||
<!-- 右侧描述 -->
|
||||
<div class="ml-[20px] flex-1 cursor-default">
|
||||
<div class="text-[23px] font-semibold dark:text-white">{{ item.title }}</div>
|
||||
<div class="text-[14px] text-[#666] mt-[5px] dark:text-[#ccc]">{{ item.describe }}</div>
|
||||
<div class="text-[23px] font-semibold text-[#333] dark:text-white ">{{ item.title }}</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="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' }]"
|
||||
<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] dark:!bg-[#ffffff22]': lable.type === 'OS' }, { 'bg-[#eceef1]': lable.type !== 'OS' }]"
|
||||
v-for="lable of item.addition.lables">{{
|
||||
lable.text }}</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user