feat: some style

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[]

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;

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>

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);
 }
 
 /* 滚动到指定话题激活后的样式 */