main page aside new topic part

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -146,9 +146,6 @@ const handleClose = () => {
   span {
     display: flex;
     align-items: center;
-    &:nth-child(2) {
-      cursor: pointer;
-    }
   }
 }
 // 使设置按钮保持旋转

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;
       }
     }

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>

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>

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 class="title">{{ title }}</div>
-      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-    </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>

src/views/Home/content/aside/topic/topic.ts

@@ -3,8 +3,9 @@ interface topic {
   router: string
   data: {
     title: string
-    icon: boolean
+    isHotTopic: boolean
-    value: number
+    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小时前',
     },
   },
 ]