fix: pk comment
This commit is contained in:
zzc
825
components/PkCommentSection/PkCommentSection.vue
Normal file
825
components/PkCommentSection/PkCommentSection.vue
Normal file
@@ -0,0 +1,825 @@
|
||||
<template>
|
||||
<view class="pk-comment-section">
|
||||
<view class="comment-header">
|
||||
<view class="comment-tabs">
|
||||
<text
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="comment-tab"
|
||||
:class="{ active: currentTab === tab.value }"
|
||||
@tap="switchTab(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="my-choice-pill" :class="selectedTone ? `my-choice-pill--${selectedTone}` : ''">
|
||||
<text class="my-choice-pill-label">我站</text>
|
||||
<text class="my-choice-pill-value">{{ selectedItemLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="compose-card">
|
||||
<view class="compose-tip">
|
||||
<text class="compose-title">说说你的理由</text>
|
||||
<text class="compose-desc">支持 {{ selectedItemLabel }} 的观点，会更容易引发讨论</text>
|
||||
</view>
|
||||
<view class="compose-box">
|
||||
<input
|
||||
class="compose-input"
|
||||
v-model="commentText"
|
||||
:disabled="sending"
|
||||
placeholder="写下你的 PK 观点..."
|
||||
placeholder-class="compose-placeholder"
|
||||
confirm-type="send"
|
||||
@confirm="submitMainComment"
|
||||
/>
|
||||
<button
|
||||
class="compose-send"
|
||||
:class="{ disabled: sending || !commentText.trim() }"
|
||||
:disabled="sending || !commentText.trim()"
|
||||
@tap="submitMainComment"
|
||||
>
|
||||
{{ sending ? "发送中" : "发布" }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="comment-list">
|
||||
<view v-if="loading && !comments.length" class="comment-state">
|
||||
<text class="comment-state-title">评论加载中...</text>
|
||||
<text class="comment-state-desc">看看大家都站哪边</text>
|
||||
</view>
|
||||
<view v-else-if="loadError && !comments.length" class="comment-state">
|
||||
<text class="comment-state-title">评论加载失败</text>
|
||||
<text class="comment-state-desc">{{ loadError }}</text>
|
||||
<button class="comment-state-btn" @tap="refreshComments">重新加载</button>
|
||||
</view>
|
||||
<view v-else-if="!comments.length" class="comment-state">
|
||||
<text class="comment-state-title">还没有人发言</text>
|
||||
<text class="comment-state-desc">你可以成为这场 PK 的第一位评论官</text>
|
||||
</view>
|
||||
<CommentItem
|
||||
v-for="comment in comments"
|
||||
:key="comment.id"
|
||||
:comment="comment"
|
||||
:like-handler="likeComment"
|
||||
page-name="pk_station"
|
||||
@need-login="emit('need-login')"
|
||||
@like-change="handleCommentLikeChange"
|
||||
@reply="openReplyPopup"
|
||||
@toggle-replies="handleToggleReplies"
|
||||
@more-replies="handleLoadMoreReplies"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-if="comments.length" class="comment-footer">
|
||||
<text v-if="loading" class="comment-footer-text">加载中...</text>
|
||||
<text
|
||||
v-else-if="hasMore"
|
||||
class="comment-footer-link"
|
||||
@tap="loadComments()"
|
||||
>
|
||||
查看更多评论
|
||||
</text>
|
||||
<text v-else class="comment-footer-text">没有更多评论了</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="replyPopupVisible"
|
||||
class="reply-popup-mask"
|
||||
@tap="closeReplyPopup"
|
||||
></view>
|
||||
<view
|
||||
v-if="replyPopupVisible"
|
||||
class="reply-popup"
|
||||
:style="{ bottom: `${replyKeyboardHeight}px` }"
|
||||
>
|
||||
<view class="reply-popup-header">
|
||||
<view class="reply-popup-user">
|
||||
<text class="reply-popup-label">回复</text>
|
||||
<text class="reply-popup-name">@{{ replyTarget?.replyToName || "Ta" }}</text>
|
||||
</view>
|
||||
<text class="reply-popup-close" @tap="closeReplyPopup">取消</text>
|
||||
</view>
|
||||
<view class="reply-popup-input-wrap">
|
||||
<input
|
||||
class="reply-popup-input"
|
||||
v-model="replyContent"
|
||||
:focus="replyInputFocus"
|
||||
:disabled="sendingReply"
|
||||
:adjust-position="false"
|
||||
confirm-type="send"
|
||||
:placeholder="replyPlaceholder"
|
||||
placeholder-class="reply-popup-placeholder"
|
||||
@confirm="submitReplyComment"
|
||||
/>
|
||||
<button
|
||||
class="reply-popup-send"
|
||||
:class="{ disabled: sendingReply || !replyContent.trim() }"
|
||||
:disabled="sendingReply || !replyContent.trim()"
|
||||
@tap="submitReplyComment"
|
||||
>
|
||||
{{ sendingReply ? "发送中" : "发送" }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, ref, watch } from "vue";
|
||||
import { onUnmounted } from "vue";
|
||||
import CommentItem from "@/components/CommentItem/CommentItem.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import {
|
||||
fetchCommentList,
|
||||
fetchCommentReplyList,
|
||||
publishComment,
|
||||
likeComment,
|
||||
} from "@/api/pk";
|
||||
import { FILE_BASE_URL } from "@/utils/constants";
|
||||
import { formatDate } from "@/utils/date";
|
||||
|
||||
const props = defineProps({
|
||||
pkId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
selectedItemId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
selectedItemLabel: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
currentPair: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["need-login"]);
|
||||
const userStore = useUserStore();
|
||||
|
||||
const tabs = [
|
||||
{ label: "最热", value: "hot" },
|
||||
{ label: "最新", value: "new" },
|
||||
];
|
||||
|
||||
const comments = ref([]);
|
||||
const currentTab = ref("hot");
|
||||
const currentPage = ref(1);
|
||||
const hasMore = ref(true);
|
||||
const loading = ref(false);
|
||||
const sending = ref(false);
|
||||
const loadError = ref("");
|
||||
const commentText = ref("");
|
||||
const replyTarget = ref(null);
|
||||
const replyPopupVisible = ref(false);
|
||||
const replyInputFocus = ref(false);
|
||||
const replyContent = ref("");
|
||||
const replyKeyboardHeight = ref(0);
|
||||
const sendingReply = ref(false);
|
||||
|
||||
let keyboardHeightListener = null;
|
||||
|
||||
const selectedTone = computed(() => {
|
||||
if (!props.currentPair || !props.selectedItemId) return "";
|
||||
if (props.selectedItemId === props.currentPair.left?.id) return "left";
|
||||
if (props.selectedItemId === props.currentPair.right?.id) return "right";
|
||||
return "";
|
||||
});
|
||||
const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
|
||||
|
||||
const replyPlaceholder = computed(() => {
|
||||
return replyTarget.value?.replyToName
|
||||
? `回复 @${replyTarget.value.replyToName}...`
|
||||
: "写下你的回复";
|
||||
});
|
||||
|
||||
const buildAvatarUrl = (avatar) => {
|
||||
if (!avatar) return "https://api.dicebear.com/7.x/avataaars/svg?seed=fallback";
|
||||
const normalizedAvatar = String(avatar).trim();
|
||||
return normalizedAvatar.startsWith("http") ? normalizedAvatar : `${FILE_BASE_URL}${normalizedAvatar}`;
|
||||
};
|
||||
|
||||
const resolveChoiceMeta = (chooseItemId) => {
|
||||
if (!chooseItemId || !props.currentPair) {
|
||||
return { choiceLabel: "", choiceTone: "" };
|
||||
}
|
||||
if (chooseItemId === props.currentPair.left?.id) {
|
||||
return {
|
||||
choiceLabel: `支持 ${props.currentPair.left.name}`,
|
||||
choiceTone: "left",
|
||||
};
|
||||
}
|
||||
if (chooseItemId === props.currentPair.right?.id) {
|
||||
return {
|
||||
choiceLabel: `支持 ${props.currentPair.right.name}`,
|
||||
choiceTone: "right",
|
||||
};
|
||||
}
|
||||
return { choiceLabel: "已站队", choiceTone: "" };
|
||||
};
|
||||
|
||||
const normalizeComment = (item = {}, rootComment = null) => {
|
||||
const user = item.user || {};
|
||||
const replyToUser = item.replyToUser || {};
|
||||
const choiceMeta = resolveChoiceMeta(item.chooseItemId);
|
||||
|
||||
return {
|
||||
id: item.id,
|
||||
rootCommentId: item.rootCommentId || rootComment?.id || null,
|
||||
parentCommentId: item.parentCommentId || rootComment?.id || null,
|
||||
replyToCommentId: item.replyToCommentId || null,
|
||||
name: user.nickname || "匿名用户",
|
||||
avatar: buildAvatarUrl(user.avatar),
|
||||
time: formatDate(item.createdAt) || "刚刚",
|
||||
content: item.content || "",
|
||||
likes: Number(item.likeCount || 0),
|
||||
isLiked: !!item.isLiked,
|
||||
userAction: "",
|
||||
replyCount: Number(item.replyCount || 0),
|
||||
replyToName: replyToUser.nickname || "",
|
||||
choiceLabel: choiceMeta.choiceLabel,
|
||||
choiceTone: choiceMeta.choiceTone,
|
||||
chooseItemId: item.chooseItemId || "",
|
||||
repliesLoading: false,
|
||||
repliesLoaded: false,
|
||||
repliesHasMore: false,
|
||||
repliesPage: 1,
|
||||
replies: [],
|
||||
};
|
||||
};
|
||||
|
||||
const resetState = () => {
|
||||
comments.value = [];
|
||||
currentTab.value = "hot";
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
loading.value = false;
|
||||
sending.value = false;
|
||||
loadError.value = "";
|
||||
commentText.value = "";
|
||||
closeReplyPopup();
|
||||
};
|
||||
|
||||
const patchCommentItem = (commentId, updater) => {
|
||||
comments.value = comments.value.map((comment) => {
|
||||
if (comment.id !== commentId) return comment;
|
||||
return updater(comment);
|
||||
});
|
||||
};
|
||||
|
||||
const resolveHasMore = (res, list, page) => {
|
||||
const data = res?.data || res || {};
|
||||
const hasNext = data?.hasNext ?? res?.hasNext;
|
||||
if (typeof hasNext === "boolean") return hasNext;
|
||||
|
||||
const total = Number(data?.totalCount ?? data?.total ?? res?.totalCount ?? res?.total ?? 0);
|
||||
if (total > 0) {
|
||||
return page * Math.max(1, list.length) < total;
|
||||
}
|
||||
|
||||
const pages = Number(data?.pages || res?.pages || 0);
|
||||
if (pages > 0) return page < pages;
|
||||
|
||||
return list.length > 0;
|
||||
};
|
||||
|
||||
const loadComments = async ({ reset = false } = {}) => {
|
||||
if (!props.visible || !props.pkId || loading.value) return;
|
||||
if (!reset && !hasMore.value) return;
|
||||
|
||||
const page = reset ? 1 : currentPage.value;
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
loadError.value = "";
|
||||
const res = await fetchCommentList({
|
||||
pkId: props.pkId,
|
||||
page,
|
||||
orderBy: currentTab.value,
|
||||
});
|
||||
const source = res?.data || res || {};
|
||||
const rawList =
|
||||
source.list ||
|
||||
source.records ||
|
||||
res?.list ||
|
||||
res?.records ||
|
||||
(Array.isArray(source) ? source : []);
|
||||
const list = Array.isArray(rawList) ? rawList : [];
|
||||
const normalized = list.map((item) => normalizeComment(item));
|
||||
|
||||
comments.value = reset ? normalized : [...comments.value, ...normalized];
|
||||
hasMore.value = resolveHasMore(res, list, page);
|
||||
currentPage.value = page + 1;
|
||||
} catch (error) {
|
||||
loadError.value = "网络开了点小差，稍后重试";
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const refreshComments = async () => {
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
await loadComments({ reset: true });
|
||||
};
|
||||
|
||||
const switchTab = (tab) => {
|
||||
if (currentTab.value === tab) return;
|
||||
currentTab.value = tab;
|
||||
refreshComments();
|
||||
};
|
||||
|
||||
const submitMainComment = async () => {
|
||||
if (!isLoggedIn.value) {
|
||||
emit("need-login");
|
||||
return;
|
||||
}
|
||||
const content = commentText.value.trim();
|
||||
if (!content || sending.value || !props.pkId || !props.selectedItemId) return;
|
||||
|
||||
try {
|
||||
sending.value = true;
|
||||
await publishComment({
|
||||
pkId: props.pkId,
|
||||
chooseItemId: props.selectedItemId,
|
||||
content,
|
||||
});
|
||||
uni.showToast({ title: "评论已发布", icon: "none" });
|
||||
commentText.value = "";
|
||||
await refreshComments();
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "发布失败", icon: "none" });
|
||||
} finally {
|
||||
sending.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openReplyPopup = async (payload) => {
|
||||
if (!isLoggedIn.value) {
|
||||
emit("need-login");
|
||||
return;
|
||||
}
|
||||
replyTarget.value = payload;
|
||||
replyPopupVisible.value = true;
|
||||
await nextTick();
|
||||
replyInputFocus.value = false;
|
||||
await nextTick();
|
||||
replyInputFocus.value = true;
|
||||
};
|
||||
|
||||
const closeReplyPopup = () => {
|
||||
replyPopupVisible.value = false;
|
||||
replyInputFocus.value = false;
|
||||
replyContent.value = "";
|
||||
replyTarget.value = null;
|
||||
replyKeyboardHeight.value = 0;
|
||||
};
|
||||
|
||||
const submitReplyComment = async () => {
|
||||
if (!isLoggedIn.value) {
|
||||
emit("need-login");
|
||||
return;
|
||||
}
|
||||
const content = replyContent.value.trim();
|
||||
if (!content || !replyTarget.value || sendingReply.value || !props.pkId || !props.selectedItemId) return;
|
||||
|
||||
try {
|
||||
sendingReply.value = true;
|
||||
await publishComment({
|
||||
pkId: props.pkId,
|
||||
chooseItemId: props.selectedItemId,
|
||||
content,
|
||||
parentCommentId: replyTarget.value.parentCommentId,
|
||||
replyToCommentId: replyTarget.value.replyToCommentId,
|
||||
});
|
||||
uni.showToast({ title: "回复已发送", icon: "none" });
|
||||
closeReplyPopup();
|
||||
await refreshComments();
|
||||
} catch (error) {
|
||||
uni.showToast({ title: "回复失败", icon: "none" });
|
||||
} finally {
|
||||
sendingReply.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadReplies = async (comment, page = 1) => {
|
||||
if (!comment?.id || !props.pkId) return;
|
||||
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: true,
|
||||
}));
|
||||
|
||||
try {
|
||||
const res = await fetchCommentReplyList({
|
||||
pkId: props.pkId,
|
||||
rootCommentId: comment.id,
|
||||
page,
|
||||
});
|
||||
const source = res?.data || res || {};
|
||||
const rawList = source.list || res?.list || [];
|
||||
const list = Array.isArray(rawList) ? rawList : [];
|
||||
const normalizedReplies = list.map((reply) => normalizeComment(reply, comment));
|
||||
const hasMoreReplies = resolveHasMore(res, list, page);
|
||||
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: false,
|
||||
repliesLoaded: true,
|
||||
repliesPage: page,
|
||||
repliesHasMore: hasMoreReplies,
|
||||
replies: page === 1 ? normalizedReplies : [...(item.replies || []), ...normalizedReplies],
|
||||
}));
|
||||
} catch (error) {
|
||||
patchCommentItem(comment.id, (item) => ({
|
||||
...item,
|
||||
repliesLoading: false,
|
||||
}));
|
||||
uni.showToast({ title: "加载回复失败", icon: "none" });
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleReplies = (comment) => {
|
||||
if (comment.repliesLoading || comment.repliesLoaded) return;
|
||||
loadReplies(comment, 1);
|
||||
};
|
||||
|
||||
const handleLoadMoreReplies = (comment) => {
|
||||
if (comment.repliesLoading || !comment.repliesHasMore) return;
|
||||
loadReplies(comment, Number(comment.repliesPage || 1) + 1);
|
||||
};
|
||||
|
||||
const handleCommentLikeChange = ({ id, parentId, isReply, isLiked, likes }) => {
|
||||
comments.value = comments.value.map((item) => {
|
||||
if (!isReply && item.id !== id) return item;
|
||||
if (isReply && item.id !== parentId) return item;
|
||||
|
||||
if (isReply) {
|
||||
return {
|
||||
...item,
|
||||
replies: (item.replies || []).map((reply) => {
|
||||
if (reply.id !== id) return reply;
|
||||
return {
|
||||
...reply,
|
||||
isLiked,
|
||||
likes,
|
||||
};
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...item,
|
||||
isLiked,
|
||||
likes,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [props.pkId, props.visible, props.selectedItemId],
|
||||
([pkId, visible, selectedItemId]) => {
|
||||
if (!pkId || !visible || !selectedItemId) {
|
||||
resetState();
|
||||
return;
|
||||
}
|
||||
currentPage.value = 1;
|
||||
hasMore.value = true;
|
||||
comments.value = [];
|
||||
loadComments({ reset: true });
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.currentPair,
|
||||
() => {
|
||||
comments.value = comments.value.map((comment) => ({
|
||||
...comment,
|
||||
...resolveChoiceMeta(comment.chooseItemId),
|
||||
}));
|
||||
}
|
||||
);
|
||||
|
||||
if (uni.onKeyboardHeightChange) {
|
||||
keyboardHeightListener = (res) => {
|
||||
replyKeyboardHeight.value = res?.height || 0;
|
||||
};
|
||||
uni.onKeyboardHeightChange(keyboardHeightListener);
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (uni.offKeyboardHeightChange && keyboardHeightListener) {
|
||||
uni.offKeyboardHeightChange(keyboardHeightListener);
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
refreshComments,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pk-comment-section {
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border: 2rpx solid rgba(229, 232, 246, 0.92);
|
||||
box-shadow: 0 18rpx 42rpx rgba(87, 92, 145, 0.08);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.comment-tabs {
|
||||
display: flex;
|
||||
gap: 34rpx;
|
||||
}
|
||||
|
||||
.comment-tab {
|
||||
font-size: 30rpx;
|
||||
color: #8a90a0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 10rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comment-tab.active {
|
||||
color: #1f2432;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.comment-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 28rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, #6557ff, #4d44f1);
|
||||
}
|
||||
|
||||
.my-choice-pill {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(92, 67, 245, 0.1);
|
||||
}
|
||||
|
||||
.my-choice-pill--right {
|
||||
background: rgba(255, 141, 95, 0.12);
|
||||
}
|
||||
|
||||
.my-choice-pill-label {
|
||||
font-size: 22rpx;
|
||||
color: #8a90a0;
|
||||
}
|
||||
|
||||
.my-choice-pill-value {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #4d44f1;
|
||||
}
|
||||
|
||||
.my-choice-pill--right .my-choice-pill-value {
|
||||
color: #ff7a45;
|
||||
}
|
||||
|
||||
.compose-card {
|
||||
margin-bottom: 28rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, rgba(92, 67, 245, 0.08), rgba(92, 67, 245, 0.03));
|
||||
}
|
||||
|
||||
.compose-tip {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.compose-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: #202433;
|
||||
}
|
||||
|
||||
.compose-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #7b8191;
|
||||
}
|
||||
|
||||
.compose-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.compose-input {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
padding: 0 26rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #ffffff;
|
||||
font-size: 28rpx;
|
||||
color: #1f2432;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.compose-placeholder {
|
||||
color: #a0a6b5;
|
||||
}
|
||||
|
||||
.compose-send {
|
||||
min-width: 132rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
margin: 0;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #6557ff, #4d44f1);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.compose-send.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.compose-send::after,
|
||||
.comment-state-btn::after,
|
||||
.reply-popup-send::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.comment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 200rpx;
|
||||
}
|
||||
|
||||
.comment-state {
|
||||
min-height: 260rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 36rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f8f9ff;
|
||||
}
|
||||
|
||||
.comment-state-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #232734;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.comment-state-desc {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #8a90a0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.comment-state-btn {
|
||||
margin-top: 22rpx;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #111827;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.comment-footer {
|
||||
padding-top: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-footer-text {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.comment-footer-link {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #4f46e5;
|
||||
}
|
||||
|
||||
.reply-popup-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.24);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.reply-popup {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999;
|
||||
padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx);
|
||||
background: #ffffff;
|
||||
border-radius: 28rpx 28rpx 0 0;
|
||||
box-shadow: 0 -12rpx 36rpx rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.reply-popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.reply-popup-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.reply-popup-label {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.reply-popup-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.reply-popup-close {
|
||||
font-size: 24rpx;
|
||||
color: #8b8f98;
|
||||
}
|
||||
|
||||
.reply-popup-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.reply-popup-input {
|
||||
flex: 1;
|
||||
height: 84rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #f4f6fb;
|
||||
font-size: 28rpx;
|
||||
color: #1f2937;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.reply-popup-placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.reply-popup-send {
|
||||
min-width: 132rpx;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
margin: 0;
|
||||
padding: 0 24rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(135deg, #111827 0%, #374151 100%);
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reply-popup-send.disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user