diff --git a/src/components/setting-panel/KUNGalgameSettingPanel.vue b/src/components/setting-panel/KUNGalgameSettingPanel.vue
index c18c8b0c..41c90793 100644
--- a/src/components/setting-panel/KUNGalgameSettingPanel.vue
+++ b/src/components/setting-panel/KUNGalgameSettingPanel.vue
@@ -146,9 +146,6 @@ const handleClose = () => {
   span {
     display: flex;
     align-items: center;
-    &:nth-child(2) {
-      cursor: pointer;
-    }
   }
 }
 // 使设置按钮保持旋转
diff --git a/src/views/Home/content/aside/components/Aside.vue b/src/views/Home/content/aside/components/Aside.vue
index e1be66db..51e1d8c2 100644
--- a/src/views/Home/content/aside/components/Aside.vue
+++ b/src/views/Home/content/aside/components/Aside.vue
@@ -18,6 +18,7 @@ import asideItem from '../aside-item'
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
+  border: 1px solid @kungalgame-blue-4;
   span {
     width: 100%;
     height: 100%;
@@ -28,6 +29,10 @@ import asideItem from '../aside-item'
     /* 文字竖直显示 */
     writing-mode: vertical-rl;
     text-orientation: upright;
+    border-top: 1px solid @kungalgame-blue-4;
+    &:first-child {
+      border-top: none;
+    }
     a {
       width: 100%;
       height: 100%;
@@ -36,6 +41,7 @@ import asideItem from '../aside-item'
       align-items: center;
       color: @kungalgame-blue-5;
       &:hover {
+        transition: 0.2s;
         background-color: @kungalgame-trans-blue-2;
       }
     }
diff --git a/src/views/Home/content/aside/topic/Topic.vue b/src/views/Home/content/aside/topic/Topic.vue
index e60f3357..62932ee0 100644
--- a/src/views/Home/content/aside/topic/Topic.vue
+++ b/src/views/Home/content/aside/topic/Topic.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import SingleTopic from './components/SingleTopic.vue'
+import SingleNewTopic from './components/SingleNewTopic.vue'
 
 import singleTopic from './topic'
 </script>
@@ -11,7 +11,7 @@ import singleTopic from './topic'
     <div class="title">今日热门话题</div>
     <!-- 热门帖子的目录 -->
     <span class="top-topic-content" v-for="kun in singleTopic" :key="kun.index">
-      <SingleTopic :data="kun.data" :to="{ path: kun.router }" />
+      <SingleNewTopic :data="kun.data" :to="{ path: kun.router }" />
     </span>
   </div>
 </template>
diff --git a/src/views/Home/content/aside/topic/components/SingleHotTopic.vue b/src/views/Home/content/aside/topic/components/SingleHotTopic.vue
new file mode 100644
index 00000000..6c5bd27f
--- /dev/null
+++ b/src/views/Home/content/aside/topic/components/SingleHotTopic.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+
+const props = defineProps(['data'])
+const { title, isHotTopic, value, time } = props.data
+</script>
+
+<template>
+  <div class="hot-topic">
+    <!-- 热门帖子的标题 -->
+    <div class="top-topic-title">
+      鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲鲲
+    </div>
+    <!-- 热门帖子的热度值 -->
+    <div class="top-topic-number">
+      <Icon icon="bi:fire" />
+      <span>1007</span>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+/* 单个热门帖子的样式 */
+.hot-topic {
+  display: flex;
+  /* 设置空白左右居中 */
+  justify-content: space-between;
+  /* 设置每个帖子高度相等 */
+  flex-grow: 1;
+  color: @kungalgame-font-color-3;
+  align-items: center;
+  cursor: pointer;
+}
+/* 单个热门帖子的 hover */
+.hot-topic:hover {
+  box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
+}
+.hot-topic:active {
+  box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
+    inset -1px -1px 2px @kungalgame-white;
+}
+/* 单个帖子的标题样式 */
+.top-topic-title {
+  /* 单个帖子标题左侧的一段距离 */
+  padding-left: 10px;
+  /* 设置页面变化时不换行，显示省略号 */
+  /* 标题显示两行、超出部分隐藏 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+  -webkit-box-orient: vertical; /* 设置为纵向排列 */
+  -webkit-line-clamp: 2; /* 显示两行文本 */
+  /* 设置帖子的字体大小 */
+  font-size: smaller;
+}
+/* 设置单个帖子右侧的热度值盒子 */
+.top-topic-number {
+  /* 热度值距离右侧的距离 */
+  margin-right: 10px;
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+.top-topic-number {
+  color: @kungalgame-red-4;
+}
+.top-topic-number span {
+  width: 38px;
+  font-size: small;
+  margin-left: 5px;
+  color: @kungalgame-font-color-3;
+}
+</style>
diff --git a/src/views/Home/content/aside/topic/components/SingleTopic.vue b/src/views/Home/content/aside/topic/components/SingleNewTopic.vue
similarity index 83%
rename from src/views/Home/content/aside/topic/components/SingleTopic.vue
rename to src/views/Home/content/aside/topic/components/SingleNewTopic.vue
index 6469a92f..83f0f724 100644
--- a/src/views/Home/content/aside/topic/components/SingleTopic.vue
+++ b/src/views/Home/content/aside/topic/components/SingleNewTopic.vue
@@ -2,19 +2,21 @@
 import { Icon } from '@iconify/vue'
 
 const props = defineProps(['data'])
-console.log(props)
+const { title, isHotTopic, value, time } = props.data
 </script>
 
 <template>
   <div class="new-topic">
     <!-- 热门帖子的标题 -->
-    <div class="title">
-      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    </div>
+    <div class="title">{{ title }}</div>
     <!-- 热门帖子的热度值 -->
-    <div class="new-topic-number">
+    <div class="new-topic-number" v-if="isHotTopic">
       <Icon icon="svg-spinners:clock" />
-      <span>刚刚</span>
+      <span class="value">{{ value }}</span>
+    </div>
+    <div class="hot-topic" v-if="!isHotTopic">
+      <Icon icon="bi:fire" />
+      <span class="time">{{ time }}</span>
     </div>
   </div>
 </template>
diff --git a/src/views/Home/content/aside/topic/topic.ts b/src/views/Home/content/aside/topic/topic.ts
index 63367879..b7a53109 100644
--- a/src/views/Home/content/aside/topic/topic.ts
+++ b/src/views/Home/content/aside/topic/topic.ts
@@ -3,8 +3,9 @@ interface topic {
   router: string
   data: {
     title: string
-    icon: boolean
-    value: number
+    isHotTopic: boolean
+    value?: number
+    time?: string
   }
 }
 
@@ -15,8 +16,9 @@ const singleTopic: topic[] = [
     data: {
       title:
         '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -24,8 +26,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '10小时前',
     },
   },
   {
@@ -33,8 +36,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1天前',
     },
   },
   {
@@ -42,8 +46,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -51,8 +56,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -60,8 +66,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -69,8 +76,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -78,8 +86,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -87,8 +96,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
   {
@@ -96,8 +106,9 @@ const singleTopic: topic[] = [
     router: '/topic',
     data: {
       title: '啊这可海星',
-      icon: true,
+      isHotTopic: true,
       value: 1007,
+      time: '1小时前',
     },
   },
 ]