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}
+ />
+
+
+
- >
- )}
+
+ >
);
};