From 1ccb114bf35af81de848cd0e2cf85d576acb6299 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Fri, 6 Oct 2023 20:37:20 +0800
Subject: [PATCH] feat: some style

---
 src/api/topic/types/reply.ts                    |  1 +
 src/views/topic/components/comment/Comments.vue | 13 ++++++++++---
 src/views/topic/components/footer/Footer.vue    | 16 +++++++---------
 src/views/topic/components/reply/Reply.vue      | 11 +++++++++++
 4 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/api/topic/types/reply.ts b/src/api/topic/types/reply.ts
index 818dfc54..2eb88347 100644
--- a/src/api/topic/types/reply.ts
+++ b/src/api/topic/types/reply.ts
@@ -22,6 +22,7 @@ export interface TopicReply {
   edited: number
   content: string
   upvotes: number[]
+  upvote_time: number
   likes: number[]
   dislikes: number[]
   tags: string[]
diff --git a/src/views/topic/components/comment/Comments.vue b/src/views/topic/components/comment/Comments.vue
index ebe34b2d..feb128c7 100644
--- a/src/views/topic/components/comment/Comments.vue
+++ b/src/views/topic/components/comment/Comments.vue
@@ -177,14 +177,21 @@ const handleClickReply = (uid: number, name: string) => {
 }
 .operate ul {
   display: flex;
+  justify-content: center;
   align-items: center;
   li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     margin-right: 10px;
+    .icon {
+      cursor: pointer;
+      color: var(--kungalgame-font-color-2);
+      margin-right: 2px;
+    }
   }
 }
-.icon {
-  color: var(--kungalgame-font-color-2);
-}
+
 /* 单个评论 */
 .text {
   font-size: 12px;
diff --git a/src/views/topic/components/footer/Footer.vue b/src/views/topic/components/footer/Footer.vue
index c55fcd1a..b903dad3 100644
--- a/src/views/topic/components/footer/Footer.vue
+++ b/src/views/topic/components/footer/Footer.vue
@@ -99,8 +99,8 @@ const handleClickRewrite = () => {
           :to-uid="masterUid"
         />
 
-        <!-- 浏览数 -->
-        <li>
+        <!-- 浏览数，楼主才会显示 -->
+        <li v-if="props.info.views > 0">
           <span class="icon"><Icon icon="ic:outline-remove-red-eye" /></span>
           {{ info.views }}
         </li>
@@ -143,9 +143,8 @@ const handleClickRewrite = () => {
       </span>
 
       <!-- 回复的插槽 -->
-      <span>
-        <slot name="comment"></slot>
-      </span>
+
+      <slot name="comment"></slot>
     </div>
   </div>
 </template>
@@ -211,6 +210,7 @@ const handleClickRewrite = () => {
   color: var(--kungalgame-blue-4);
   cursor: pointer;
   transition: all 0.2s;
+  margin-right: 10px;
   &::before,
   &::after {
     content: '';
@@ -254,10 +254,8 @@ const handleClickRewrite = () => {
   .footer {
     flex-direction: column;
   }
-  .right {
-    span:last-child {
-      margin-right: 0;
-    }
+  .reply {
+    margin-right: 0;
   }
 }
 </style>
diff --git a/src/views/topic/components/reply/Reply.vue b/src/views/topic/components/reply/Reply.vue
index 7739052f..d6df9787 100644
--- a/src/views/topic/components/reply/Reply.vue
+++ b/src/views/topic/components/reply/Reply.vue
@@ -19,6 +19,9 @@ import Rewrite from '../Rewrite.vue'
 // 导入发布人个人信息
 import KUNGalgamerInfo from '../KUNGalgamerInfo.vue'
 
+// 导入计算时间差的函数
+import { hourDiff } from '@/utils/time'
+
 import { TopicReply } from '@/api/index'
 
 // 导入话题页面 store
@@ -52,9 +55,11 @@ const handleClickComment = (rid: number) => {
     appear
   >
     <div>
+      <!-- 被推 10 小时内样式改变 -->
       <div
         class="other-topic-container"
         v-for="(reply, index) in repliesData"
+        :class="hourDiff(reply.upvote_time, 10) ? 'active-upvote' : ''"
         :key="`${index}`"
         :id="`kungalgame-reply-${reply.floor}`"
       >
@@ -245,6 +250,12 @@ const handleClickComment = (rid: number) => {
   font-size: 24px;
   color: var(--kungalgame-font-color-2);
   display: flex;
+  margin-right: 17px;
+}
+
+/* 回复被推的样式 */
+.active-upvote .container {
+  border: 2px solid var(--kungalgame-pink-3);
 }
 
 /* 滚动到指定话题激活后的样式 */