A1300399510/PC-mj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510 2024-01-30 19:08:34 +08:00
parent e07b6d6be2
commit 39c14ed9bb
3 changed files with 112 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app.vue
View File

@ -28,10 +28,10 @@ const isProduction = process.env.NODE_ENV === "production"
// }) // })
onMounted(() => { onMounted(() => {
// if (!isProduction) isNeedLogin.value = false if (!isProduction) isNeedLogin.value = false
// else determineIsLogin() else determineIsLogin()
determineIsLogin() // determineIsLogin()
// isNeedLogin.value = false // isNeedLogin.value = false
// if (true) determineIsLogin() // if (true) determineIsLogin()

127
pages/details/[id].vue
View File

@ -171,8 +171,11 @@
讨论 讨论
<div class="value">{{ commentComments || "" }}</div> <div class="value">{{ commentComments || "" }}</div>
</div> </div>
<div class="post-comment flexacenter" @click="loginJudgment()"> <div class="post-comment flexacenter" ref="postInputRef" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
<textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea> <div class="post-comment-input">
<!-- <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></textarea> -->
<el-input class="post-input flex1" type="textarea" :autosize="postCommentFocusState" :maxlength="500" show-word-limit placeholder="说说你的想法或疑问…" v-model="commentInputTop" @blur="postCommentFocusBlur" @focus="postCommentFocusState = true"></el-input>
</div>
<div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div> <div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
</div> </div>
@ -213,7 +216,7 @@
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" /> <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
<div class="report-box flexcenter" @click="report(item['token'])">举报</div> <div class="report-box flexcenter" @click="report(item['token'])">举报</div>
</div> </div>
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" /> <img class="comment-icon" title="回复" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index)"> <div class="flexacenter like-box" @click="commentLike(index)">
<img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" /> <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" /> <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
@ -221,15 +224,18 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="comment-text" @click="openAnswerCommentsChild(index)">{{ item["content"] }}</div> --> <div class="comment-text" @click="!item['childState'] ? openAnswerCommentsChild(index) : closeAnswerCommentsChild()" v-html="item['content']"></div>
<div class="comment-text" @click="openAnswerCommentsChild(index)" v-html="item['content']"></div> <!-- <div class="comments-input-box flexacenter" v-if="item['childState']" :class="{ 'comments-input-box-show': item['childState'] }"> -->
<!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> --> <div class="comments-input-box flexacenter" :class="{ 'comments-input-box-show': item['childState'] }">
<div class="comments-input-box flexacenter" v-if="item['childState']">
<div class="comments-input flexflex"> <div class="comments-input flexflex">
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea> <!-- <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea> -->
<div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div> <el-input type="textarea" v-model="commentInput" placeholder="回复" :maxlength="500" show-word-limit></el-input>
<!-- <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div> -->
<div class="operate-bottom flexacenter">
<div class="comments-btn comments-btn-cancel flexcenter" @click="closeAnswerCommentsChild()">取消</div>
<div class="comments-btn flexcenter" @click="submitAnswerComments(commentInput, index)">发送</div>
</div>
</div> </div>
<img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
</div> </div>
<!-- 子评论 --> <!-- 子评论 -->
<div class="child-comments" v-if="item['child'].length > 0"> <div class="child-comments" v-if="item['child'].length > 0">
@ -265,7 +271,7 @@
<img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" /> <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
<div class="report-box flexcenter" @click="report(ite['token'])">举报</div> <div class="report-box flexcenter" @click="report(ite['token'])">举报</div>
</div> </div>
<img class="comment-icon" title="回复" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" /> <img class="comment-icon" title="回复" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()" src="@/assets/img/comment-icon-gray.svg" />
<div class="flexacenter like-box" @click="commentLike(index, i)"> <div class="flexacenter like-box" @click="commentLike(index, i)">
<img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" /> <img class="like-icon" v-if="ite['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
<img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" /> <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
@ -273,7 +279,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="comment-text" @click="openAnswerCommentsChild(index, i)"> <div class="comment-text" @click="!ite['childState'] ? openAnswerCommentsChild(index, i) : closeAnswerCommentsChild()">
<div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div> <div class="comments-reply" v-if="ite?.reply?.nickname">@{{ ite?.reply?.nickname }}</div>
{{ ite["content"] }} {{ ite["content"] }}
</div> </div>
@ -282,7 +288,7 @@
<textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea> <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
<div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div> <div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
</div> </div>
<img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" /> <!-- <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" /> -->
</div> </div>
</div> </div>
</div> </div>
@ -807,7 +813,7 @@ const openAnswerCommentsChild = (index, i) => {
closeAnswerCommentsChild() closeAnswerCommentsChild()
if (i == null) commentList.value[index]["childState"] = true if (i == null) commentList.value[index]["childState"] = true
else commentList.value[index]["child"][i]["childState"] = true else commentList.value[index]["child"][i]["childState"] = true
commentInput.value = "" // commentInput.value = ""
} }
// 关闭 回答-评论 的子评论 // 关闭 回答-评论 的子评论
@ -1309,6 +1315,21 @@ let labelObj = {
thread: "帖子", thread: "帖子",
ask: "回答", ask: "回答",
} }
let postCommentFocusState = ref(false)
const postInputRef = ref(null)
const postCommentFocusBlur = () => {
const refref = postInputRef.value
setTimeout(() => {
postCommentFocusState.value = false
nextTick(() => {
let targetDom = refref.querySelector(".el-textarea__inner")
targetDom.style.height = "41px"
})
}, 200)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -1765,19 +1786,50 @@ let labelObj = {
} }
.post-comment { .post-comment {
width: 749px; width: 749px;
height: 60px; // height: 60px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(215, 215, 215, 1); border: 1px solid rgba(215, 215, 215, 1);
border-radius: 6px; border-radius: 6px;
margin-bottom: 30px; margin-bottom: 30px;
transition: all 5s;
overflow: hidden;
position: relative;
&.post-comment-focus {
.post-input {
/deep/ .el-textarea__inner {
width: 468px;
min-height: 200px !important;
max-height: 80vh;
padding-bottom: 52px;
}
/deep/ .el-input__count {
display: block;
left: 10px;
}
}
.post-ok {
height: 32px;
bottom: 10px;
right: 10px;
}
.post-comment-input {
width: 749px;
}
}
.post-comment-input {
width: 690px;
}
.post-input { .post-input {
height: 100%; height: 100%;
border: none; border: none;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
outline-color: rgba(98, 177, 255, 1); outline-color: rgba(98, 177, 255, 1);
padding: 10px; // padding: 10px;
font-size: 14px; font-size: 14px;
resize: none; resize: none;
@ -1792,14 +1844,50 @@ let labelObj = {
-ms-overflow-style: none; -ms-overflow-style: none;
} }
.post-input {
background-color: transparent;
font-size: 14px;
resize: none;
transition: all 0.5s;
&::placeholder {
color: #aaaaaa;
}
&::-webkit-scrollbar {
width: 0 !important;
}
scrollbar-width: none;
-ms-overflow-style: none;
border: none;
/deep/ .el-textarea__inner {
border: none;
box-shadow: none;
resize: none;
min-height: 60px !important;
// height: 60px !important;
padding: 10px;
transition: all 0.5s;
}
/deep/ .el-input__count {
display: none;
}
}
.post-ok { .post-ok {
width: 60px; width: 60px;
height: 60px; height: 62px;
background-color: rgba(98, 177, 255, 1); background-color: rgba(98, 177, 255, 1);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
transition: all 0.5s;
position: absolute;
bottom: 0;
right: 0;
} }
} }
@ -1858,7 +1946,8 @@ let labelObj = {
margin-right: 10px; margin-right: 10px;
} }
.floor-left .comments-identity { // .floor-left .comments-identity {
.comments-identity {
font-size: 12px; font-size: 12px;
color: #7f7f7f; color: #7f7f7f;
padding: 0 3px; padding: 0 3px;
@ -1957,7 +2046,7 @@ let labelObj = {
height: 60px; height: 60px;
border: 1px solid rgba(215, 215, 215, 1); border: 1px solid rgba(215, 215, 215, 1);
border-radius: 8px; border-radius: 8px;
margin-right: 16px; // margin-right: 16px;
position: relative; position: relative;
z-index: 1; z-index: 1;

8
pages/publish/index.vue
View File

@ -115,12 +115,7 @@
import { ElMessage } from "element-plus" import { ElMessage } from "element-plus"
import zhCn from "element-plus/dist/locale/zh-cn.mjs" import zhCn from "element-plus/dist/locale/zh-cn.mjs"
const router = useRouter() const router = useRouter()
useHead({ useHead({ script: [{ src: "https://app.gter.net/bottom?tpl=footer", body: true }] })
script: [
// { src: "https://app.gter.net/bottom?tpl=header&menukey=mj" },
{ src: "https://app.gter.net/bottom?tpl=footer", body: true },
],
})
const setDisabled = time => { const setDisabled = time => {
return time.getTime() > Date.now() // 可选历史天、可选当前天、不可选未来天 return time.getTime() > Date.now() // 可选历史天、可选当前天、不可选未来天
@ -536,7 +531,6 @@ const abandonSaving = () => {
} }
} }
.save-box { .save-box {
font-size: 14px; font-size: 14px;
color: #666666; color: #666666;