no message

components/DetailsComments.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="comment-title flexacenter">
-        讨论
+        讨论 {{ postCommentFocusState }}
         <span class="comment-amount">{{ commentComments || "" }}</span>
     </div>
-    <div class="post-comment flexacenter" @click="loginJudgment()">
-        <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
+    <div class="post-comment flexacenter" :class="{ 'post-comment-focus': postCommentFocusState }" @click="loginJudgment()">
+        <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop" @focus="postCommentFocusState = true"></textarea>
         <div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
     </div>
 
@@ -150,6 +150,8 @@ onMounted(() => window.addEventListener("scroll", handleScroll))
 const sendMessage = inject("sendMessage")
 const TAHomePage = inject("TAHomePage")
 
+let postCommentFocusState = ref(false)
+
 let commentCount = ref(0)
 let commentComments = ref(0) // 所有的评论数
 let commentPage = ref(1)
@@ -221,6 +223,7 @@ const openAnswerCommentsChild = (index, i) => {
         goLogin()
         return
     }
+
     closeAnswerCommentsChild(false)
     if (i == null) commentList.value[index]["childState"] = true
     else commentList.value[index]["child"][i]["childState"] = true
@@ -228,10 +231,7 @@ const openAnswerCommentsChild = (index, i) => {
 }
 
 // 关闭 回答-评论 的子评论  isempty 是否需要清空输入框 默认需要清空
-const closeAnswerCommentsChild = (isempty = true) => {
-    console.log("isempty", isempty)
-    // if (isempty) commentInput.value = ""
-    commentInput.value = ""
+const closeAnswerCommentsChild = () => {
     commentList.value.forEach(ele => {
         ele["childState"] = false
         if (ele["child"] && ele["child"].length != 0) ele["child"].forEach(el => (el["childState"] = false))
@@ -259,6 +259,11 @@ const submitAnswerComments = (index, i) => {
     if (i != null) parentid = targetCommentList[index]["child"][i]["id"]
     else if (index != null) parentid = targetCommentList[index]["id"]
 
+    if (!content) {
+        ElMessage.error("请填写评论内容")
+        return
+    }
+
     detailsSubmitommentListHttp({
         content,
         token: props.token,
@@ -438,14 +443,29 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
 }
 
 .post-comment {
-    // width: 100%;
-    height: 60px;
+    min-height: 60px;
     background-color: rgba(255, 255, 255, 1);
     border: 1px solid rgba(215, 215, 215, 1);
-    border-right: none;
+    border-right-width: 0;
     border-radius: 6px;
     margin-bottom: 30px;
     margin-right: 30px;
+    transition: all 0.5s;
+
+    &.post-comment-focus {
+        border-right-width: 1px;
+        min-height: 200px;
+        flex-direction: column;
+        .post-input {
+            width: 100%;
+        }
+        .post-ok {
+            align-self: flex-end;
+            height: 32px;
+            margin-bottom: 10px;
+            margin-right: 10px;
+        }
+    }
 
     .post-input {
         height: 100%;
@@ -455,6 +475,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
         padding: 10px;
         font-size: 14px;
         resize: none;
+        transition: all 0.5s;
 
         &::placeholder {
             color: #aaaaaa;
@@ -475,6 +496,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
         font-size: 14px;
         cursor: pointer;
         border-radius: 6px;
+        transition: all 0.5s;
     }
 }
 
@@ -665,6 +687,7 @@ defineExpose({ changeCommentVoteoption, wipeCommentVoteoption })
                         resize: none;
                         padding: 11px 16px;
                         border-radius: 7px 0 0 7px;
+                        font-size: 14px;
                     }
 
                     .comments-btn {