diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue index 15340591..0661c5d6 100644 --- a/src/views/topic/KUNGalgameTopicPage.vue +++ b/src/views/topic/KUNGalgameTopicPage.vue @@ -68,8 +68,6 @@ const getReplies = async (): Promise => { return (await useKUNGalgameTopicStore().getReplies(tid.value)).data } -// 滚动到某个回复的位置 - // 调用 getReplies 获取回复数据(watch 大法好!) watch( () => [ @@ -106,6 +104,12 @@ watchEffect(async () => { // 滚动到指定位置并标识 style if (childElement) { childElement.scrollIntoView({ behavior: 'smooth', block: 'center' }) + childElement.classList.add('active') + // 等待一段时间 + await new Promise((resolve) => { + setTimeout(resolve, 3000) + }) + childElement.classList.remove('active') } scrollToReplyId.value = -1 } diff --git a/src/views/topic/components/Master.vue b/src/views/topic/components/Master.vue index 6942a095..692e2870 100644 --- a/src/views/topic/components/Master.vue +++ b/src/views/topic/components/Master.vue @@ -94,8 +94,6 @@ const { display: flex; flex-direction: column; align-items: center; - /* 楼主话题距离其它人话题的距离 */ - margin-bottom: 5px; flex-shrink: 0; /* TODO: */ /* 楼主话题背景图 */ diff --git a/src/views/topic/components/Reply.vue b/src/views/topic/components/Reply.vue index ebdca483..2aabc6cf 100644 --- a/src/views/topic/components/Reply.vue +++ b/src/views/topic/components/Reply.vue @@ -145,6 +145,7 @@ defineProps<{ border-radius: 5px; background-color: var(--kungalgame-trans-white-5); box-shadow: var(--shadow); + transition: all 0.5s; } /* 其它人回复的内容区 */ .content { @@ -160,6 +161,7 @@ defineProps<{ } /* 其它人回复的上部右侧区域 */ .right { + width: 100%; display: flex; flex-direction: column; } @@ -203,6 +205,12 @@ defineProps<{ color: var(--kungalgame-font-color-3); } +/* 滚动到指定话题激活后的样式 */ +.active .container { + border: 2px solid var(--kungalgame-red-3); + background-color: var(--kungalgame-trans-red-1); +} + @media (max-width: 1000px) { .top { flex-direction: column; diff --git a/src/views/topic/components/Rewrite.vue b/src/views/topic/components/Rewrite.vue index 0292607e..ca30fd22 100644 --- a/src/views/topic/components/Rewrite.vue +++ b/src/views/topic/components/Rewrite.vue @@ -23,4 +23,10 @@ span { align-items: center; color: var(--kungalgame-font-color-3); } + +@media (max-width: 1000px) { + span { + margin-right: 10px; + } +}