diff --git a/src/other_pages/comment_reply/index.scss b/src/other_pages/comment_reply/index.scss index 20046e5..756d654 100644 --- a/src/other_pages/comment_reply/index.scss +++ b/src/other_pages/comment_reply/index.scss @@ -3,10 +3,15 @@ .comment-reply-container { width: 100%; height: 100vh; + max-height: 100vh; + position: fixed; + top: 0; + left: 0; box-sizing: border-box; display: flex; flex-direction: column; background: #FFFFFF; + overflow: hidden; // 顶部导航栏 .navbar { @@ -67,11 +72,17 @@ // 评论列表滚动区域 .comment-scroll { - flex: 1; - height: 0; + height: calc(100vh - 100px); padding: 0 15px; box-sizing: border-box; - overflow-y: auto; + + // 隐藏滚动条 + &::-webkit-scrollbar { + display: none; + width: 0; + height: 0; + background: transparent; + } } // 评论列表 @@ -240,6 +251,27 @@ } } + // 回复遮罩层 + .reply-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 199; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.2s ease, visibility 0.2s ease; + + &.show { + opacity: 1; + visibility: visible; + pointer-events: auto; + } + } + // 回复输入框 .reply-input-container { position: fixed; @@ -251,6 +283,16 @@ padding: 8px 12px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 200; + transform: translateY(100%); + opacity: 0; + visibility: hidden; + transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; + + &.show { + transform: translateY(0); + opacity: 1; + visibility: visible; + } .reply-input-wrapper { display: flex; diff --git a/src/other_pages/comment_reply/index.tsx b/src/other_pages/comment_reply/index.tsx index 432ed52..e98661c 100644 --- a/src/other_pages/comment_reply/index.tsx +++ b/src/other_pages/comment_reply/index.tsx @@ -144,7 +144,7 @@ const CommentReply = () => { // 如果是回复评论,parent_id 使用评论的 parent_id 或 id // 如果是顶级评论,parent_id 为 null,则使用评论的 id 作为 parent_id const parentId = replyTarget.parent_id || replyTarget.id; - + const res = await commentService.replyComment( parentId, replyTarget.user_id, @@ -344,44 +344,45 @@ const CommentReply = () => { {/* 回复输入框 */} - {showReplyInput && replyTarget && ( - <> - {/* 遮罩层 */} - + <> + {/* 遮罩层 */} + - - - - setReplyContent(e.detail.value)} - onBlur={handleInputBlur} - confirmType="send" - onConfirm={handleSendReply} - /> - - - - + + + + setReplyContent(e.detail.value)} + onBlur={handleInputBlur} + confirmType="send" + onConfirm={handleSendReply} + /> + + + - - )} + + ); };