no message

components/DetailsArea.vue

@@ -1,29 +1,30 @@
 <template>
-    <div class="floor-area flexacenter">
+    <div class="floor-area flexacenter" :class="{ 'show': isLoaded }">
         <div class="floor-content flexacenter">
+            <!-- {{ isLoaded }} -->
             <div class="floor-left flexacenter">
-                <!-- <div class="item flexacenter" v-if="isBrowser" style="cursor: auto;">
-                    <img class="icon" src="@/assets/img/eye-icon-black.svg" />
+                <div class="item flexacenter" style="cursor: auto;">
+                    <img class="icon" src="@/assets/img/eye-icon.svg" />
                     {{ info["views"] }}
-                </div> -->
+                </div>
+                <div class="item flexacenter" @click="handleLike">
+                    <img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
+                    <img class="icon" v-else src="@/assets/img/like-icon.png" />
+                    {{ info["likes"] || "" }}
+                </div>
+                <div class="item flexacenter" @click="handleCollect()">
+                    <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
+                    <img class="icon" v-else src="@/assets/img/collect-icon.png" />
+                    {{ info["favs"] || "收藏" }}
+                </div>
                 <ClientOnly>
-                    <div class="item flexacenter" @click="handleLike">
-                        <img class="icon" v-if="islike == 1" src="@/assets/img/like-icon-colours.png" />
-                        <img class="icon" v-else src="@/assets/img/like-icon.png" />
-                        {{ info["likes"] || "" }}
-                    </div>
-                    <div class="item flexacenter" @click="handleCollect()">
-                        <img class="icon" v-if="iscollection == 1" src="@/assets/img/collect-icon-colours.svg" />
-                        <img class="icon" v-else src="@/assets/img/collect-icon.png" />
-                        {{ info["favs"] || "收藏" }}
-                    </div>
                     <el-popover placement="bottom" width="628px" trigger="click" popper-style="padding: 0;border-radius: 10px;" v-model:visible="transmitBoxState">
                         <template #reference>
                             <div class="item flexacenter" @click="handleShare"><img class="icon" src="@/assets/img/transmit-icon.png" />转发</div>
                         </template>
 
                         <div class="transmit-box flexflex">
-                            <img class="cross-icon" @click="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
+                            <img class="cross-icon" @click.stop="transmitBoxState = false" src="@/assets/img/cross-icon.png" />
                             <div class="transmit-left transmit-web">
                                 <div class="transmit-title">转发网页版</div>
                                 <div class="transmit-content">
@@ -86,6 +87,7 @@ let iscollection = inject("iscollection")
 let qrcode = inject("qrcode")
 let token = inject("token")
 const topHeadRef = inject("topHeadRef")
+const isLoaded = inject("isLoaded")
 
 // 获取完整 url
 const getFullUrl = () => {
@@ -159,7 +161,7 @@ const handleLike = () => {
         ElMessage.error("不可取消点赞")
         return
     }
-    
+
     operateLikeHttp({ token: token.value }).then(res => {
         if (res.code != 200) {
             ElMessage.error(res.message)
@@ -173,6 +175,9 @@ const handleLike = () => {
         ElMessage.success(res.message)
     })
 }
+
+// 底部转发弹窗显示 状态
+let transmitBoxState = ref(false)
 </script>
 
 <style scoped lang="less">
@@ -180,6 +185,7 @@ const handleLike = () => {
     position: fixed;
     left: 0;
     bottom: 0;
+    // bottom: 50%;
     width: 100vw;
     min-width: 1200px;
     height: 70px;
@@ -188,6 +194,13 @@ const handleLike = () => {
     -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
     -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
     box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
+    display: none;
+    &.show {
+        display: flex;
+        animation: animafloor 1s forwards;
+        animation-timing-function: cubic-bezier(0.98, -0.2, 0.55, 0.97); /* 先快后慢的时间曲线 */
+        animation-fill-mode: both;
+    }
     .floor-content {
         width: 1200px;
         height: 100%;
@@ -204,8 +217,16 @@ const handleLike = () => {
                 .icon {
                     width: 16px;
                     margin-right: 5px;
+                    // animation: anima 1s forwards;
                 }
 
+                // :nth-of-type(1) {
+                //     animation-delay: 1s;
+                // }
+                // :nth-of-type(2) {
+                //     animation-delay: 2s;
+                // }
+
                 &.operate-item {
                     position: relative;
                     display: flex;
@@ -363,4 +384,36 @@ const handleLike = () => {
     width: 113px;
     height: 113px;
 }
+
+@keyframes anima {
+    0% {
+        width: 16px;
+    }
+
+    40% {
+        width: 20px;
+    }
+
+    100% {
+        width: 16px;
+    }
+}
+
+@keyframes animafloor {
+    0% {
+        // left: -100%;
+        // opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+
+    90% {
+        left: 20px;
+    }
+
+    100% {
+        // left: 0;
+        // opacity: 1;
+        transform: translateZ(0);
+    }
+}
 </style>

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 {

components/MyPopup.vue

@@ -101,6 +101,7 @@ const getCollect = () => {
             showList.value = collectList
             // showList.value = showList.value.concat(data.data)
 
+            console.log(collectList.length, data["count"])
             if (collectList.length < data["count"]) collectPage++
             else collectPage = 0
 

components/top-head.vue

@@ -107,8 +107,8 @@ const setHistoricalSearchList = () => {
 
 // 搜索点击事件
 const searchClick = () => {
-    router.push(`/index.html?keyword=${keyword.value || ""}`)
-    // goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
+    // router.push(`/index.html?keyword=${keyword.value || ""}`)
+    goToURL(`/index.html?keyword=${keyword.value || ""}`, false)
     setHistoricalSearchList()
     searchBlur()
 }