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 cf29c35266
commit 2195af92b6
6 changed files with 72 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,7 @@ const getStatusText = computed(() => {
const loadComment = async () => {
try {
let commentRes:BaseResponseData = await request.get(`/blogComment?bloguuid=${bloguuid}`);
let commentRes: BaseResponseData = await request.get(`/blogComment?bloguuid=${bloguuid}`);
if (commentRes.code == 0) {
blogCommentList.splice(0, blogCommentList.length);
blogCommentList.push(...commentRes.data);
@@ -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>
</template>

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

@@ -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>