From 0a8336c991f807e69b054bc119e54cc8111afdf5 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Thu, 20 Apr 2023 17:38:03 +0800
Subject: [PATCH] Topic page frame

---
 src/App.vue                                   |  10 +-
 src/views/topic/KUNGalgameTopicPage.vue       |  75 +-
 .../topic/aside/KUNGalgameTopicAside.vue      |  15 +
 src/views/topic/aside/TopicAside.vue          |  65 --
 .../topic/aside/footer/TopicAsideFooter.vue   |  24 +
 .../topic/aside/master/TopicAsideMaster.vue   |  87 ++
 src/views/topic/aside/nav/TopicAsideNav.vue   |  97 ++
 src/views/topic/aside/same/TopicAsideSame.vue | 104 ++
 .../topic/content/KUNGalgameTopicContent.vue  |  23 +
 src/views/topic/content/TopicContent.vue      | 826 ---------------
 .../topic/content/master/TopicMaster.vue      | 548 ++++++++++
 .../topic/content/others/TopicOthers.vue      | 976 ++++++++++++++++++
 12 files changed, 1943 insertions(+), 907 deletions(-)
 create mode 100644 src/views/topic/aside/KUNGalgameTopicAside.vue
 delete mode 100644 src/views/topic/aside/TopicAside.vue
 create mode 100644 src/views/topic/aside/footer/TopicAsideFooter.vue
 create mode 100644 src/views/topic/aside/master/TopicAsideMaster.vue
 create mode 100644 src/views/topic/aside/nav/TopicAsideNav.vue
 create mode 100644 src/views/topic/aside/same/TopicAsideSame.vue
 create mode 100644 src/views/topic/content/KUNGalgameTopicContent.vue
 delete mode 100644 src/views/topic/content/TopicContent.vue
 create mode 100644 src/views/topic/content/master/TopicMaster.vue
 create mode 100644 src/views/topic/content/others/TopicOthers.vue

diff --git a/src/App.vue b/src/App.vue
index 117a657e..7236544c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,11 @@
-<script lang="ts">
+<script setup lang="ts">
 import KUNGalgameMainPage from "./views/Home/KUNGalgameMainPage.vue";
-export default {
-  name: "App",
-  components: { KUNGalgameMainPage },
-};
+import KUNGalgameTopicPage from "./views/topic/KUNGalgameTopicPage.vue";
 </script>
 
 <template>
-  <KUNGalgameMainPage />
+  <!-- <KUNGalgameMainPage /> -->
+  <KUNGalgameTopicPage/>
 </template>
 
 <style scoped></style>
diff --git a/src/views/topic/KUNGalgameTopicPage.vue b/src/views/topic/KUNGalgameTopicPage.vue
index 76990140..e81f093c 100644
--- a/src/views/topic/KUNGalgameTopicPage.vue
+++ b/src/views/topic/KUNGalgameTopicPage.vue
@@ -1,14 +1,69 @@
-<script lang="ts">
+<script setup lang="ts">
 import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
-export default {
-    name:'KUNGalgameTopicPage',
-    components:{KUNGalgameTopBar}
-};
+import KUNGalgameTopicAside from "./aside/KUNGalgameTopicAside.vue";
+import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
 </script>
 <template>
-        <!-- 总容器 -->
-        <div class="main-wrapper">
-            <KUNGalgameTopBar/>
-        </div>
+  <!-- 总容器 -->
+  <div class="main-wrapper">
+    <KUNGalgameTopBar />
+    <!-- 下面帖子详情区的容器 -->
+    <div class="topic-wrapper">
+      <!-- 下方可视内容区的容器 -->
+      <div class="content-wrapper">
+        <KUNGalgameTopicAside />
+        <KUNGalgameTopicContent />
+      </div>
+    </div>
+  </div>
 </template>
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+/* 页面总容器 */
+.main-wrapper {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  min-width: 1040px;
+  /* 背景图片 */
+  /* background-image: url(../img/bg.png); */
+  /*         background-image: url(../img/bg-dark.png); */
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  background-size: cover;
+  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
+    sans-serif;
+}
+/* 下面帖子详情区的容器 */
+.topic-wrapper {
+  display: flex;
+  flex-shrink: 0;
+}
+/* 下方可视内容区的容器 */
+.content-wrapper {
+  width: 90%;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  /* 设置背景的毛玻璃效果 */
+  backdrop-filter: blur(5px);
+  background-color: var(--kungalgame-trans-white-5);
+  /* 设置背景边框和圆角 */
+  border-radius: 5px;
+  padding: 5px;
+  box-sizing: border-box;
+}
+/* 左侧内容区 */
+.content-left-part {
+  top: 73px;
+  position: sticky;
+  /* 左侧区域的总高度 */
+  height: 1000px;
+  /* 左侧区域宽度 */
+  width: 250px;
+  /* 左侧内容区为弹性盒，方便分成上下两部分 */
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/views/topic/aside/KUNGalgameTopicAside.vue b/src/views/topic/aside/KUNGalgameTopicAside.vue
new file mode 100644
index 00000000..87e930ca
--- /dev/null
+++ b/src/views/topic/aside/KUNGalgameTopicAside.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import TopicAsideNav from "./nav/TopicAsideNav.vue";
+import TopicAsideSame from "./same/TopicAsideSame.vue";
+import TopicAsideMaster from "./master/TopicAsideMaster.vue";
+import TopicAsideFooter from "./footer/TopicAsideFooter.vue";
+</script>
+<template>
+  <div class="content-left-part">
+    <TopicAsideNav />
+    <TopicAsideSame />
+    <TopicAsideMaster />
+    <TopicAsideFooter />
+  </div>
+</template>
+<style scoped></style>
diff --git a/src/views/topic/aside/TopicAside.vue b/src/views/topic/aside/TopicAside.vue
deleted file mode 100644
index bb1cc115..00000000
--- a/src/views/topic/aside/TopicAside.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script lang="ts">
-export default {};
-</script>
-<template>
-  <div class="content-left-part">
-    <!-- 帖子详情页的交互 -->
-    <div class="topic-page-nav">
-      <!-- 交互区容器 -->
-      <div class="topic-page-nav-container">
-        <ul>
-          <li><i class="fa-solid fa-people-group fa-bounce"></i>进入帖子池</li>
-          <li><i class="fa-solid fa-arrows-up-to-line"></i>返回到顶端</li>
-          <li><i class="fa-solid fa-house"></i>返回到首页</li>
-        </ul>
-        <ul>
-          <li><i class="fa-regular fa-clock"></i>按时间排序</li>
-          <li><i class="fa-regular fa-thumbs-up"></i>按点赞排序</li>
-          <li><i class="fa-regular fa-comment-dots"></i>按回复排序</li>
-        </ul>
-      </div>
-    </div>
-    <!-- 相同标签下的其它帖子 -->
-    <div class="same-tag-topic">
-      <ul>
-        <li><a href="#">相同标签下的其它帖子</a></li>
-        <li>
-          <a href="#"
-            >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-          >
-        </li>
-        <li>
-          <a href="#">啊这可海星啊这可海星啊这可海星啊这可海星</a>
-        </li>
-        <li>
-          <a href="#"
-            >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-          >
-        </li>
-        <li>
-          <a href="#"
-            >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
-          >
-        </li>
-        <li><a href="#">啊这啊这可海星啊这可海星</a></li>
-      </ul>
-    </div>
-    <!-- 楼主的其它帖子 -->
-    <div class="master-other-topic">
-      <ul>
-        <li><a href="#">楼主的其它帖子</a></li>
-        <li><a href="#">啊这可海星</a></li>
-        <li><a href="#">啊这可海星</a></li>
-        <li><a href="#">啊这可海星</a></li>
-        <li><a href="#">啊这可海星</a></li>
-        <li><a href="#">啊这可海星</a></li>
-      </ul>
-    </div>
-    <!-- 版权描述,版本号 -->
-    <div class="kungalgame-footer-copyright">
-      <span>Copyright © 2023 KUNgalgame</span>
-      <span>All rights reserved | Version 0.01</span>
-    </div>
-  </div>
-</template>
-<style scoped></style>
diff --git a/src/views/topic/aside/footer/TopicAsideFooter.vue b/src/views/topic/aside/footer/TopicAsideFooter.vue
new file mode 100644
index 00000000..0a483b74
--- /dev/null
+++ b/src/views/topic/aside/footer/TopicAsideFooter.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 版权描述,版本号 -->
+  <div class="kungalgame-footer-copyright">
+    <span>Copyright © 2023 KUNgalgame</span>
+    <span>All rights reserved | Version 0.01</span>
+  </div>
+</template>
+
+<style scoped>
+/* 版权描述,版本号 */
+.kungalgame-footer-copyright {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  /* 距离上面的距离 */
+  margin-top: 17px;
+  /* 文字间距 */
+  letter-spacing: 1px;
+}
+</style>
diff --git a/src/views/topic/aside/master/TopicAsideMaster.vue b/src/views/topic/aside/master/TopicAsideMaster.vue
new file mode 100644
index 00000000..acedde86
--- /dev/null
+++ b/src/views/topic/aside/master/TopicAsideMaster.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 楼主的其它帖子 -->
+  <div class="master-other-topic">
+    <ul>
+      <li><a href="#">楼主的其它帖子</a></li>
+      <li><a href="#">啊这可海星</a></li>
+      <li><a href="#">啊这可海星</a></li>
+      <li><a href="#">啊这可海星</a></li>
+      <li><a href="#">啊这可海星</a></li>
+      <li><a href="#">啊这可海星</a></li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+/* 楼主的其它帖子 */
+.master-other-topic {
+  width: 100%;
+  height: 1px;
+  flex-grow: 4;
+  /* 上方区域的配色 */
+  border: 1px solid var(--kungalgame-trans-pink-2);
+  /* 隐藏溢出的颜色 */
+  overflow: hidden;
+  border-radius: 5px;
+  background-color: var(--kungalgame-trans-pink-0);
+  box-shadow: var(--shadow);
+}
+.master-other-topic ul {
+  height: 100%;
+  /* 整体为一个无序列表，列表为弹性盒 */
+  display: flex;
+  flex-direction: column;
+}
+.master-other-topic ul li {
+  height: 1px;
+  width: 100%;
+  /* 每个项目相对于标题的占比 */
+  flex-grow: 3;
+  display: flex;
+  /* 垂直居中 */
+  align-items: center;
+  /* 设置左侧的 border 方便制作 hover */
+  border-left: 4px solid transparent;
+  /* 内边距盒子 */
+  box-sizing: border-box;
+}
+/* 上方的 hover 效果 */
+.master-other-topic ul li:hover {
+  border-left: 4px solid var(--kungalgame-blue-3);
+  background-color: var(--kungalgame-trans-pink-1);
+  transition: 0.3s;
+}
+/* 单个标题的样式 */
+.master-other-topic ul li a {
+  /* 左右两侧的距离 */
+  margin: 0 17px;
+  color: var(--kungalgame-font-color-3);
+  /* 标题显示两行、超出部分隐藏 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+  -webkit-box-orient: vertical; /* 设置为纵向排列 */
+  -webkit-line-clamp: 2; /* 显示两行文本 */
+  /* 标题的字体属性 */
+  font-size: small;
+  line-height: 1.5em;
+  box-sizing: border-box;
+}
+/* 大标题（相同标签下的其它帖子）的样式 */
+.master-other-topic ul li:nth-child(1) {
+  /* 左侧没有 border，没有 hover */
+  border-left: 0;
+  /* 相对于单个帖子标题的比例 */
+  flex-grow: 2;
+  line-height: 40px;
+  font-size: 1.8ch;
+  font-weight: bold;
+  background-color: var(--kungalgame-trans-pink-1);
+  /* 与单个帖子标题的分割线 */
+  border-bottom: 1px solid var(--kungalgame-trans-pink-2);
+  /* 水平居中 */
+  justify-content: center;
+}
+</style>
diff --git a/src/views/topic/aside/nav/TopicAsideNav.vue b/src/views/topic/aside/nav/TopicAsideNav.vue
new file mode 100644
index 00000000..b8e0333d
--- /dev/null
+++ b/src/views/topic/aside/nav/TopicAsideNav.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="topic-page-nav">
+    <!-- 交互区容器 -->
+    <div class="topic-page-nav-container">
+      <ul>
+        <li><i class="fa-solid fa-people-group fa-bounce"></i>进入帖子池</li>
+        <li><i class="fa-solid fa-arrows-up-to-line"></i>返回到顶端</li>
+        <li><i class="fa-solid fa-house"></i>返回到首页</li>
+      </ul>
+      <ul>
+        <li><i class="fa-regular fa-clock"></i>按时间排序</li>
+        <li><i class="fa-regular fa-thumbs-up"></i>按点赞排序</li>
+        <li><i class="fa-regular fa-comment-dots"></i>按回复排序</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 帖子详情页的交互 */
+.topic-page-nav {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  /* 左边第一个部分的边 */
+  border: 1px solid var(--kungalgame-trans-red-4);
+  box-shadow: var(--shadow);
+  border-radius: 5px;
+  /* 距离顶部的距离 */
+  margin-bottom: 17px;
+  /* 隐藏溢出的边角 */
+  overflow: hidden;
+}
+/* 两个列表的容器 */
+.topic-page-nav-container {
+  flex-grow: 1;
+  display: flex;
+  background-color: var(--kungalgame-trans-yellow-0);
+}
+/* 两列的无序列表 */
+.topic-page-nav ul {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  flex-grow: 1;
+}
+.topic-page-nav ul:nth-child(1) {
+  border-right: 1px dashed var(--kungalgame-trans-purple-4);
+  box-sizing: border-box;
+}
+/* 每个功能 */
+.topic-page-nav ul li {
+  padding: 0 11px;
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px dashed var(--kungalgame-trans-purple-4);
+  box-sizing: border-box;
+  /* 页面变化时不换行 */
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.topic-page-nav ul li i {
+  margin-right: 4px;
+  font-size: 17px;
+}
+/* 功能区 hover */
+.topic-page-nav ul li::before {
+  transform: scaleX(0);
+  transform-origin: bottom right;
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  inset: 0 0 0 0;
+  background-color: var(--kungalgame-trans-blue-3);
+  z-index: -1;
+  transition: transform 0.3s ease;
+}
+.topic-page-nav ul:nth-child(1) li:nth-child(1):before {
+  background-color: var(--kungalgame-red-4);
+}
+.topic-page-nav ul li:hover::before {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+</style>
diff --git a/src/views/topic/aside/same/TopicAsideSame.vue b/src/views/topic/aside/same/TopicAsideSame.vue
new file mode 100644
index 00000000..1772ecce
--- /dev/null
+++ b/src/views/topic/aside/same/TopicAsideSame.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 相同标签下的其它帖子 -->
+  <div class="same-tag-topic">
+    <ul>
+      <li><a href="#">相同标签下的其它帖子</a></li>
+      <li>
+        <a href="#"
+          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
+        >
+      </li>
+      <li>
+        <a href="#">啊这可海星啊这可海星啊这可海星啊这可海星</a>
+      </li>
+      <li>
+        <a href="#"
+          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
+        >
+      </li>
+      <li>
+        <a href="#"
+          >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星</a
+        >
+      </li>
+      <li><a href="#">啊这啊这可海星啊这可海星</a></li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+/* 相同标签下的其它帖子 */
+.same-tag-topic {
+  height: 1px;
+  flex-grow: 4;
+  width: 100%;
+  /* 上方区域的配色 */
+  border: 1px solid var(--kungalgame-trans-blue-2);
+  /* 隐藏溢出的颜色 */
+  overflow: hidden;
+  border-radius: 5px;
+  background-color: var(--kungalgame-trans-blue-0);
+  /* 左侧两个部分之间的距离 */
+  margin-bottom: 17px;
+  /* 盒子的阴影 */
+  box-shadow: var(--shadow);
+}
+.same-tag-topic ul {
+  height: 100%;
+  /* 整体为一个无序列表，列表为弹性盒 */
+  display: flex;
+  flex-direction: column;
+}
+.same-tag-topic ul li {
+  height: 1px;
+  width: 100%;
+  /* 每个项目相对于标题的占比 */
+  flex-grow: 3;
+  display: flex;
+  /* 垂直居中 */
+  align-items: center;
+  /* 设置左侧的 border 方便制作 hover */
+  border-left: 4px solid transparent;
+  /* 内边距盒子 */
+  box-sizing: border-box;
+}
+/* 上方的 hover 效果 */
+.same-tag-topic ul li:hover {
+  border-left: 4px solid var(--kungalgame-red-3);
+  background-color: var(--kungalgame-trans-blue-1);
+  transition: 0.3s;
+}
+/* 单个标题的样式 */
+.same-tag-topic ul li a {
+  /* 左右两侧的距离 */
+  margin: 0 17px;
+  color: var(--kungalgame-font-color-3);
+  /* 标题显示两行、超出部分隐藏 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+  -webkit-box-orient: vertical; /* 设置为纵向排列 */
+  -webkit-line-clamp: 2; /* 显示两行文本 */
+  /* 标题的字体属性 */
+  font-size: small;
+  line-height: 1.5em;
+  box-sizing: border-box;
+}
+/* 大标题（相同标签下的其它帖子）的样式 */
+.same-tag-topic ul li:nth-child(1) {
+  /* 左侧没有 border，没有 hover */
+  border-left: 0;
+  /* 相对于单个帖子标题的比例 */
+  flex-grow: 2;
+  line-height: 40px;
+  font-size: 1.8ch;
+  font-weight: bold;
+  background-color: var(--kungalgame-trans-blue-1);
+  /* 与单个帖子标题的分割线 */
+  border-bottom: 1px solid var(--kungalgame-trans-blue-2);
+  /* 水平居中 */
+  justify-content: center;
+}
+</style>
diff --git a/src/views/topic/content/KUNGalgameTopicContent.vue b/src/views/topic/content/KUNGalgameTopicContent.vue
new file mode 100644
index 00000000..d3609914
--- /dev/null
+++ b/src/views/topic/content/KUNGalgameTopicContent.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import TopicMaster from './master/TopicMaster.vue';
+import TopicOthers from './others/TopicOthers.vue';
+</script>
+<template>
+  <div class="content-right-part">
+    <TopicMaster/>
+    <TopicOthers/>
+  </div>
+</template>
+<style scoped>
+/* 右侧内容区 */
+.content-right-part {
+  height: 100%;
+  width: 1px;
+  flex-grow: 4;
+  /* 右侧内容区为弹性盒（用户可以一直向下滑） */
+  display: flex;
+  flex-direction: column;
+  /* 右侧部分距离左侧的距离 */
+  margin-left: 10px;
+}
+</style>
diff --git a/src/views/topic/content/TopicContent.vue b/src/views/topic/content/TopicContent.vue
deleted file mode 100644
index e5bb5603..00000000
--- a/src/views/topic/content/TopicContent.vue
+++ /dev/null
@@ -1,826 +0,0 @@
-<script lang="ts">
-export default {};
-</script>
-<template>
-  <div class="content-right-part">
-    <!-- 楼主帖子容器 -->
-    <div class="master-topic-container">
-      <!-- 楼主标志 -->
-      <div class="master-topic-floor">
-        <button class="master-btn">F0</button>
-      </div>
-      <!-- 楼主帖子内容区的容器 -->
-      <div class="master-topic-content-container">
-        <!-- 楼主帖子头部 -->
-        <div class="master-topic-header">
-          <!-- 楼主帖子标题 -->
-          <div class="master-topic-title">
-            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-          </div>
-        </div>
-        <!-- 楼主帖子内容区 -->
-        <div class="master-topic-content">
-          <!-- 内容区的顶部 -->
-          <div class="master-topic-content-top">
-            <!-- 帖子的标签 -->
-            <div class="master-topic-tags">
-              <!-- 标签的图标字体 -->
-              <i class="fa-solid fa-tags"></i>
-              <ul>
-                <li>啊这可海星</li>
-                <li>啊这可海星</li>
-                <li>啊这可海星</li>
-                <li>啊这可海星</li>
-                <li>啊这可海星</li>
-              </ul>
-            </div>
-            <!-- 发帖时间 -->
-            <div class="master-topic-time">
-              <!-- 沙漏图标字体 -->
-              <i class="fa-solid fa-hourglass-half"></i>
-              <div>2019年10月7日-10:07:00 发布</div>
-            </div>
-          </div>
-          <!-- 内容区的中部 -->
-          <div class="master-topic-content-center">
-            <!-- 内容区左侧楼主的信息 -->
-            <div class="master-topic-content-center-left">
-              <!-- 楼主的头像 -->
-              <div class="master-avatar">
-                <!-- 楼主的头像图片 -->
-                <img src="../img/KUN.jpg" alt="KUN" />
-                <!-- 楼主的等级 -->
-                <div class="master-rank">站长</div>
-              </div>
-              <!-- 楼主的名字 -->
-              <div class="master-name">啊这可海星啊这</div>
-              <!-- 楼主的萌萌点 -->
-              <div class="master-moemoepoint">1007</div>
-            </div>
-            <!-- 内容区右侧的帖子展示区 -->
-            <div class="master-topic-content-center-right">
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-              啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-            </div>
-          </div>
-          <!-- 内容区的底部 -->
-          <div class="master-topic-content-bottom">
-            <!-- 帖子状态 -->
-            <span>帖子状态：<span>正常</span></span>
-            <!-- 是否重新编辑 -->
-            <span>在2019年10月7日10:07:00重新编辑</span>
-          </div>
-        </div>
-        <!-- 楼主帖子底部 -->
-        <div class="master-topic-footer">
-          <!-- 底部左侧部分（点赞、推贴、踩） -->
-          <div class="master-topic-footer-left">
-            <ul>
-              <!-- 推贴 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-              </li>
-              <!-- 点赞 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-              </li>
-              <!-- 踩 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-              </li>
-            </ul>
-          </div>
-          <!-- 底部右侧部分（回复、评论、只看、编辑） -->
-          <div class="master-topic-footer-right">
-            <ul>
-              <li>
-                <div class="kungalgame-reply-btn">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  回帖
-                </div>
-              </li>
-              <!-- 回复 -->
-              <li>
-                <a href="#"><i class="fa-solid fa-reply"></i></a>
-              </li>
-              <!-- 只看 -->
-              <li>
-                <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-              </li>
-              <!-- 编辑 -->
-              <li>
-                <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 其它人的回帖 -->
-    <div class="other-topic-container">
-      <!-- 每个人的帖子 -->
-      <div class="other-topic-single-container">
-        <!-- 楼层标志 -->
-        <div class="other-topic-floor">
-          <button class="other-btn">F999</button>
-        </div>
-        <!-- 其他人帖子内容区的容器 -->
-        <div class="other-topic-content-container">
-          <!-- 其它人回帖的内容区 -->
-          <div class="other-topic-content">
-            <!-- 其他人回帖的上部 -->
-            <div class="other-topic-content-top">
-              <!-- 其它人回帖的上部左侧区域 -->
-              <div class="other-topic-content-left">
-                <!-- 其他人的头像 -->
-                <div class="other-avatar">
-                  <!-- 其他人的头像图片 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 其他人的等级 -->
-                  <div class="other-rank">萌葱</div>
-                </div>
-                <!-- 其他人的名字 -->
-                <div class="other-name">啊这可海星啊这</div>
-                <!-- 其他人的萌萌点 -->
-                <div class="other-moemoepoint">1007</div>
-              </div>
-              <!-- 其它人回帖的上部右侧区域 -->
-              <div class="other-topic-content-right">
-                <!-- 右侧的上部区域 -->
-                <div class="other-topic-content-right-top">
-                  <!-- 上部区域的左边 -->
-                  <div class="other-topic-content-right-top-left">
-                    <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
-                  </div>
-                  <!-- 上部区域的右边 -->
-                  <div class="other-topic-content-right-top-right">
-                    <span>在2019年10月7日10:07:00重新编辑</span>
-                  </div>
-                </div>
-                <!-- 右侧部分分文本 -->
-                <div class="other-topic-content-right-text">
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                </div>
-              </div>
-            </div>
-            <!-- 其他人回帖的下部 -->
-            <div class="other-topic-content-bottom">
-              <!-- 其他人回帖的下部分左侧 -->
-              <div class="other-topic-content-bottom-left">
-                <i class="fa-solid fa-tag"></i>
-                <ul>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                </ul>
-              </div>
-              <!-- 其他人回帖的下部分右侧 -->
-              <div class="other-topic-content-bottom-right">
-                <!-- 其他人回帖的时间 -->
-                <div class="other-topic-time">
-                  <i class="fa-solid fa-hourglass-half"></i>
-                  <div>发布于2019年10月7日-10:07:00</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 其它人回帖的底部 -->
-          <div class="other-topic-footer">
-            <!-- 顶部的点赞、推贴等 -->
-            <div class="other-topic-footer-top">
-              <!-- 点赞、推贴、踩 -->
-              <div class="other-topic-footer-top-left">
-                <ul>
-                  <!-- 推贴 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-                  </li>
-                  <!-- 点赞 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-                  </li>
-                  <!-- 踩 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-                  </li>
-                </ul>
-              </div>
-              <!-- 回复、评论、编辑 -->
-              <div class="other-topic-footer-top-right">
-                <ul>
-                  <!-- 回复按钮 -->
-                  <li>
-                    <div class="kungalgame-reply-btn">
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      回帖
-                    </div>
-                  </li>
-                  <!-- 回复 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-reply"></i></a>
-                  </li>
-                  <!-- 评论 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
-                  </li>
-                  <!-- 只看 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-                  </li>
-                  <!-- 编辑 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <!-- 底部的评论 -->
-            <div class="other-topic-footer-bottom">
-              <!-- 评论的标题 -->
-              <div class="other-topic-comment-title">
-                <span>评论</span>
-              </div>
-              <!-- 评论容器 -->
-              <div class="other-topic-comment-container">
-                <!-- 单个评论容器 -->
-                <div class="single-comment-container">
-                  <!-- 用户头像 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 单个评论的内容区 -->
-                  <div class="single-comment-content">
-                    <!-- 单个评论内容区顶部 -->
-                    <div class="single-comment-content-top">
-                      <!-- 顶部左侧名字 -->
-                      <div class="single-comment-left">
-                        鲲回复@<a href="#">啊这可海星啊这</a>
-                      </div>
-                      <!-- 顶部吧右侧点赞、踩 -->
-                      <div class="single-comment-right">
-                        <ul>
-                          <!-- 点赞 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-up"></i
-                            ></a>
-                          </li>
-                          <!-- 踩 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-down"></i
-                            ></a>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                    <!-- 单个评论内容区底部 -->
-                    <div class="single-comment-content-bottom">
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                    </div>
-                  </div>
-                </div>
-                <!-- 单个评论容器 -->
-                <div class="single-comment-container">
-                  <!-- 用户头像 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 单个评论的内容区 -->
-                  <div class="single-comment-content">
-                    <!-- 单个评论内容区顶部 -->
-                    <div class="single-comment-content-top">
-                      <!-- 顶部左侧名字 -->
-                      <div class="single-comment-left">
-                        鲲回复@<a href="#">啊这可海星啊这</a>
-                      </div>
-                      <!-- 顶部吧右侧点赞、踩 -->
-                      <div class="single-comment-right">
-                        <ul>
-                          <!-- 点赞 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-up"></i
-                            ></a>
-                          </li>
-                          <!-- 踩 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-down"></i
-                            ></a>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                    <!-- 单个评论内容区底部 -->
-                    <div class="single-comment-content-bottom">
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                    </div>
-                  </div>
-                </div>
-                <!-- 单个评论容器 -->
-                <div class="single-comment-container">
-                  <!-- 用户头像 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 单个评论的内容区 -->
-                  <div class="single-comment-content">
-                    <!-- 单个评论内容区顶部 -->
-                    <div class="single-comment-content-top">
-                      <!-- 顶部左侧名字 -->
-                      <div class="single-comment-left">
-                        鲲回复@<a href="#">啊这可海星啊这</a>
-                      </div>
-                      <!-- 顶部吧右侧点赞、踩 -->
-                      <div class="single-comment-right">
-                        <ul>
-                          <!-- 点赞 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-up"></i
-                            ></a>
-                          </li>
-                          <!-- 踩 -->
-                          <li>
-                            <a href="#"
-                              ><i class="fa-regular fa-thumbs-down"></i
-                            ></a>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                    <!-- 单个评论内容区底部 -->
-                    <div class="single-comment-content-bottom">
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                      啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 单个帖子 -->
-      <div class="other-topic-single-container">
-        <!-- 楼层标志 -->
-        <div class="other-topic-floor">
-          <button class="other-btn">F999</button>
-        </div>
-        <!-- 其他人帖子内容区的容器 -->
-        <div class="other-topic-content-container">
-          <!-- 其它人回帖的内容区 -->
-          <div class="other-topic-content">
-            <!-- 其他人回帖的上部 -->
-            <div class="other-topic-content-top">
-              <!-- 其它人回帖的上部左侧区域 -->
-              <div class="other-topic-content-left">
-                <!-- 其他人的头像 -->
-                <div class="other-avatar">
-                  <!-- 其他人的头像图片 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 其他人的等级 -->
-                  <div class="other-rank">萌葱</div>
-                </div>
-                <!-- 其他人的名字 -->
-                <div class="other-name">啊这可海星啊这</div>
-                <!-- 其他人的萌萌点 -->
-                <div class="other-moemoepoint">1007</div>
-              </div>
-              <!-- 其它人回帖的上部右侧区域 -->
-              <div class="other-topic-content-right">
-                <!-- 右侧的上部区域 -->
-                <div class="other-topic-content-right-top">
-                  <!-- 上部区域的左边 -->
-                  <div class="other-topic-content-right-top-left">
-                    <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
-                  </div>
-                  <!-- 上部区域的右边 -->
-                  <div class="other-topic-content-right-top-right">
-                    <span>在2019年10月7日10:07:00重新编辑</span>
-                  </div>
-                </div>
-                <!-- 右侧部分分文本 -->
-                <div class="other-topic-content-right-text">
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                </div>
-              </div>
-            </div>
-            <!-- 其他人回帖的下部 -->
-            <div class="other-topic-content-bottom">
-              <!-- 其他人回帖的下部分左侧 -->
-              <div class="other-topic-content-bottom-left">
-                <i class="fa-solid fa-tag"></i>
-                <ul>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                </ul>
-              </div>
-              <!-- 其他人回帖的下部分右侧 -->
-              <div class="other-topic-content-bottom-right">
-                <!-- 其他人回帖的时间 -->
-                <div class="other-topic-time">
-                  <i class="fa-solid fa-hourglass-half"></i>
-                  <div>发布于2019年10月7日-10:07:00</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 其它人回帖的底部 -->
-          <div class="other-topic-footer">
-            <!-- 顶部的点赞、推贴等 -->
-            <div class="other-topic-footer-top">
-              <!-- 点赞、推贴、踩 -->
-              <div class="other-topic-footer-top-left">
-                <ul>
-                  <!-- 推贴 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-                  </li>
-                  <!-- 点赞 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-                  </li>
-                  <!-- 踩 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-                  </li>
-                </ul>
-              </div>
-              <!-- 回复、评论、编辑 -->
-              <div class="other-topic-footer-top-right">
-                <ul>
-                  <!-- 回复按钮 -->
-                  <li>
-                    <div class="kungalgame-reply-btn">
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      回帖
-                    </div>
-                  </li>
-                  <!-- 回复 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-reply"></i></a>
-                  </li>
-                  <!-- 评论 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
-                  </li>
-                  <!-- 只看 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-                  </li>
-                  <!-- 编辑 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <!-- 底部的评论 -->
-            <div class="other-topic-footer-bottom"></div>
-          </div>
-        </div>
-      </div>
-      <div class="other-topic-single-container">
-        <!-- 楼层标志 -->
-        <div class="other-topic-floor">
-          <button class="other-btn">F999</button>
-        </div>
-        <!-- 其他人帖子内容区的容器 -->
-        <div class="other-topic-content-container">
-          <!-- 其它人回帖的内容区 -->
-          <div class="other-topic-content">
-            <!-- 其他人回帖的上部 -->
-            <div class="other-topic-content-top">
-              <!-- 其它人回帖的上部左侧区域 -->
-              <div class="other-topic-content-left">
-                <!-- 其他人的头像 -->
-                <div class="other-avatar">
-                  <!-- 其他人的头像图片 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 其他人的等级 -->
-                  <div class="other-rank">萌葱</div>
-                </div>
-                <!-- 其他人的名字 -->
-                <div class="other-name">啊这可海星啊这</div>
-                <!-- 其他人的萌萌点 -->
-                <div class="other-moemoepoint">1007</div>
-              </div>
-              <!-- 其它人回帖的上部右侧区域 -->
-              <div class="other-topic-content-right">
-                <!-- 右侧的上部区域 -->
-                <div class="other-topic-content-right-top">
-                  <!-- 上部区域的左边 -->
-                  <div class="other-topic-content-right-top-left">
-                    <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
-                  </div>
-                  <!-- 上部区域的右边 -->
-                  <div class="other-topic-content-right-top-right">
-                    <span>在2019年10月7日10:07:00重新编辑</span>
-                  </div>
-                </div>
-                <!-- 右侧部分分文本 -->
-                <div class="other-topic-content-right-text">
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                </div>
-              </div>
-            </div>
-            <!-- 其他人回帖的下部 -->
-            <div class="other-topic-content-bottom">
-              <!-- 其他人回帖的下部分左侧 -->
-              <div class="other-topic-content-bottom-left">
-                <i class="fa-solid fa-tag"></i>
-                <ul>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                </ul>
-              </div>
-              <!-- 其他人回帖的下部分右侧 -->
-              <div class="other-topic-content-bottom-right">
-                <!-- 其他人回帖的时间 -->
-                <div class="other-topic-time">
-                  <i class="fa-solid fa-hourglass-half"></i>
-                  <div>发布于2019年10月7日-10:07:00</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 其它人回帖的底部 -->
-          <div class="other-topic-footer">
-            <!-- 顶部的点赞、推贴等 -->
-            <div class="other-topic-footer-top">
-              <!-- 点赞、推贴、踩 -->
-              <div class="other-topic-footer-top-left">
-                <ul>
-                  <!-- 推贴 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-                  </li>
-                  <!-- 点赞 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-                  </li>
-                  <!-- 踩 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-                  </li>
-                </ul>
-              </div>
-              <!-- 回复、评论、编辑 -->
-              <div class="other-topic-footer-top-right">
-                <ul>
-                  <!-- 回复按钮 -->
-                  <li>
-                    <div class="kungalgame-reply-btn">
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      回帖
-                    </div>
-                  </li>
-                  <!-- 回复 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-reply"></i></a>
-                  </li>
-                  <!-- 评论 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
-                  </li>
-                  <!-- 只看 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-                  </li>
-                  <!-- 编辑 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <!-- 底部的评论 -->
-            <div class="other-topic-footer-bottom"></div>
-          </div>
-        </div>
-      </div>
-      <div class="other-topic-single-container">
-        <!-- 楼层标志 -->
-        <div class="other-topic-floor">
-          <button class="other-btn">F999</button>
-        </div>
-        <!-- 其他人帖子内容区的容器 -->
-        <div class="other-topic-content-container">
-          <!-- 其它人回帖的内容区 -->
-          <div class="other-topic-content">
-            <!-- 其他人回帖的上部 -->
-            <div class="other-topic-content-top">
-              <!-- 其它人回帖的上部左侧区域 -->
-              <div class="other-topic-content-left">
-                <!-- 其他人的头像 -->
-                <div class="other-avatar">
-                  <!-- 其他人的头像图片 -->
-                  <img src="../img/KUN.jpg" alt="KUN" />
-                  <!-- 其他人的等级 -->
-                  <div class="other-rank">萌葱</div>
-                </div>
-                <!-- 其他人的名字 -->
-                <div class="other-name">啊这可海星啊这</div>
-                <!-- 其他人的萌萌点 -->
-                <div class="other-moemoepoint">1007</div>
-              </div>
-              <!-- 其它人回帖的上部右侧区域 -->
-              <div class="other-topic-content-right">
-                <!-- 右侧的上部区域 -->
-                <div class="other-topic-content-right-top">
-                  <!-- 上部区域的左边 -->
-                  <div class="other-topic-content-right-top-left">
-                    <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
-                  </div>
-                  <!-- 上部区域的右边 -->
-                  <div class="other-topic-content-right-top-right">
-                    <span>在2019年10月7日10:07:00重新编辑</span>
-                  </div>
-                </div>
-                <!-- 右侧部分分文本 -->
-                <div class="other-topic-content-right-text">
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                  啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
-                </div>
-              </div>
-            </div>
-            <!-- 其他人回帖的下部 -->
-            <div class="other-topic-content-bottom">
-              <!-- 其他人回帖的下部分左侧 -->
-              <div class="other-topic-content-bottom-left">
-                <i class="fa-solid fa-tag"></i>
-                <ul>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                  <li>啊这可海星</li>
-                </ul>
-              </div>
-              <!-- 其他人回帖的下部分右侧 -->
-              <div class="other-topic-content-bottom-right">
-                <!-- 其他人回帖的时间 -->
-                <div class="other-topic-time">
-                  <i class="fa-solid fa-hourglass-half"></i>
-                  <div>发布于2019年10月7日-10:07:00</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 其它人回帖的底部 -->
-          <div class="other-topic-footer">
-            <!-- 顶部的点赞、推贴等 -->
-            <div class="other-topic-footer-top">
-              <!-- 点赞、推贴、踩 -->
-              <div class="other-topic-footer-top-left">
-                <ul>
-                  <!-- 推贴 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
-                  </li>
-                  <!-- 点赞 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
-                  </li>
-                  <!-- 踩 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
-                  </li>
-                </ul>
-              </div>
-              <!-- 回复、评论、编辑 -->
-              <div class="other-topic-footer-top-right">
-                <ul>
-                  <!-- 回复按钮 -->
-                  <li>
-                    <div class="kungalgame-reply-btn">
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      <span></span>
-                      回帖
-                    </div>
-                  </li>
-                  <!-- 回复 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-reply"></i></a>
-                  </li>
-                  <!-- 评论 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
-                  </li>
-                  <!-- 只看 -->
-                  <li>
-                    <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
-                  </li>
-                  <!-- 编辑 -->
-                  <li>
-                    <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <!-- 底部的评论 -->
-            <div class="other-topic-footer-bottom"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<style scoped></style>
diff --git a/src/views/topic/content/master/TopicMaster.vue b/src/views/topic/content/master/TopicMaster.vue
new file mode 100644
index 00000000..6a4c64b2
--- /dev/null
+++ b/src/views/topic/content/master/TopicMaster.vue
@@ -0,0 +1,548 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 楼主帖子容器 -->
+  <div class="master-topic-container">
+    <!-- 楼主标志 -->
+    <div class="master-topic-floor">
+      <button class="master-btn">F0</button>
+    </div>
+    <!-- 楼主帖子内容区的容器 -->
+    <div class="master-topic-content-container">
+      <!-- 楼主帖子头部 -->
+      <div class="master-topic-header">
+        <!-- 楼主帖子标题 -->
+        <div class="master-topic-title">
+          啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+        </div>
+      </div>
+      <!-- 楼主帖子内容区 -->
+      <div class="master-topic-content">
+        <!-- 内容区的顶部 -->
+        <div class="master-topic-content-top">
+          <!-- 帖子的标签 -->
+          <div class="master-topic-tags">
+            <!-- 标签的图标字体 -->
+            <i class="fa-solid fa-tags"></i>
+            <ul>
+              <li>啊这可海星</li>
+              <li>啊这可海星</li>
+              <li>啊这可海星</li>
+              <li>啊这可海星</li>
+              <li>啊这可海星</li>
+            </ul>
+          </div>
+          <!-- 发帖时间 -->
+          <div class="master-topic-time">
+            <!-- 沙漏图标字体 -->
+            <i class="fa-solid fa-hourglass-half"></i>
+            <div>2019年10月7日-10:07:00 发布</div>
+          </div>
+        </div>
+        <!-- 内容区的中部 -->
+        <div class="master-topic-content-center">
+          <!-- 内容区左侧楼主的信息 -->
+          <div class="master-topic-content-center-left">
+            <!-- 楼主的头像 -->
+            <div class="master-avatar">
+              <!-- 楼主的头像图片 -->
+              <img src="../img/KUN.jpg" alt="KUN" />
+              <!-- 楼主的等级 -->
+              <div class="master-rank">站长</div>
+            </div>
+            <!-- 楼主的名字 -->
+            <div class="master-name">啊这可海星啊这</div>
+            <!-- 楼主的萌萌点 -->
+            <div class="master-moemoepoint">1007</div>
+          </div>
+          <!-- 内容区右侧的帖子展示区 -->
+          <div class="master-topic-content-center-right">
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+            啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+          </div>
+        </div>
+        <!-- 内容区的底部 -->
+        <div class="master-topic-content-bottom">
+          <!-- 帖子状态 -->
+          <span>帖子状态：<span>正常</span></span>
+          <!-- 是否重新编辑 -->
+          <span>在2019年10月7日10:07:00重新编辑</span>
+        </div>
+      </div>
+      <!-- 楼主帖子底部 -->
+      <div class="master-topic-footer">
+        <!-- 底部左侧部分（点赞、推贴、踩） -->
+        <div class="master-topic-footer-left">
+          <ul>
+            <!-- 推贴 -->
+            <li>
+              <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
+            </li>
+            <!-- 点赞 -->
+            <li>
+              <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
+            </li>
+            <!-- 踩 -->
+            <li>
+              <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
+            </li>
+          </ul>
+        </div>
+        <!-- 底部右侧部分（回复、评论、只看、编辑） -->
+        <div class="master-topic-footer-right">
+          <ul>
+            <li>
+              <div class="kungalgame-reply-btn">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                回帖
+              </div>
+            </li>
+            <!-- 回复 -->
+            <li>
+              <a href="#"><i class="fa-solid fa-reply"></i></a>
+            </li>
+            <!-- 只看 -->
+            <li>
+              <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
+            </li>
+            <!-- 编辑 -->
+            <li>
+              <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 楼主帖子容器 */
+.master-topic-container {
+  width: 100%;
+  /* 楼主帖子最小高度 */
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* 楼主帖子距离其它人帖子的距离 */
+  margin-bottom: 5px;
+  /* TODO: */
+  /* 楼主帖子背景图 */
+  /*   background-image: url(../../img/bg-dark.png); */
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}
+/* 楼主标志位置 */
+.master-topic-floor {
+  /* 标志在最左边 */
+  margin-left: 100%;
+  /* 定位 */
+  margin-bottom: -70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  /* 位于内容上方 */
+  z-index: 1;
+}
+/* 楼主标志属性 */
+.master-btn {
+  border: none;
+  /* 大小 */
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  letter-spacing: 2px;
+  background: linear-gradient(
+    var(--kungalgame-blue-1),
+    var(--kungalgame-pink-1)
+  );
+  opacity: 0.8;
+  font-size: 37px;
+  font-weight: bold;
+  font-style: oblique;
+  color: var(--kungalgame-pink-1);
+  text-shadow: -1px 0 var(--kungalgame-blue-4), 0 -1px var(--kungalgame-blue-4),
+    1px 0 var(--kungalgame-blue-4), 0 1px var(--kungalgame-blue-4),
+    1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
+    -1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
+    4px 2px 2px var(--kungalgame-red-4);
+}
+
+/* 楼主帖子内容区的容器 */
+.master-topic-content-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border: 1px solid var(--kungalgame-blue-1);
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  background-color: var(--kungalgame-trans-white-3);
+  box-sizing: border-box;
+}
+/* 楼主帖子头部 */
+.master-topic-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--kungalgame-font-color-3);
+  font-size: 17px;
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  box-sizing: border-box;
+}
+/* 楼主帖子标题 */
+.master-topic-title {
+  font-size: 17px;
+  font-weight: bold;
+  /* 文字间距 */
+  letter-spacing: 1px;
+  /* 文字不换行 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+/* 楼主帖子内容区 */
+.master-topic-content {
+  width: 100%;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+/* 内容区的顶部 */
+.master-topic-content-top {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  text-align: center;
+  /* 时间和标签分居两侧 */
+  justify-content: space-between;
+  /* 下面的分割线 */
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  box-sizing: border-box;
+}
+/* 帖子的标签 */
+.master-topic-tags {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 图标字体 */
+.master-topic-tags i {
+  padding: 0 20px;
+  color: var(--kungalgame-blue-4);
+}
+/* 单个标签的盒子 */
+.master-topic-tags ul {
+  display: flex;
+}
+/* 单个标签的样式 */
+.master-topic-tags ul li {
+  margin-left: 5px;
+  font-size: small;
+  padding: 2px;
+  background-color: var(--kungalgame-blue-0);
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.master-topic-tags ul li:hover {
+  background-color: var(--kungalgame-red-0);
+  transition: 0.2s;
+}
+/* 发帖时间 */
+.master-topic-time {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: small;
+  /* 文字间距 */
+  letter-spacing: 1px;
+  /* 窗口缩小不换行 */
+  overflow: hidden;
+  white-space: nowrap;
+}
+/* 沙漏的样式 */
+.master-topic-time i {
+  padding: 0 10px;
+  color: var(--kungalgame-red-4);
+}
+/* 发帖时间的样式 */
+.master-topic-time div {
+  padding-right: 20px;
+}
+/* 内容区的中部 */
+.master-topic-content-center {
+  width: 100%;
+  display: flex;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  box-sizing: border-box;
+}
+/* 内容区左侧楼主的信息 */
+.master-topic-content-center-left {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+}
+/* 楼主的头像 */
+.master-avatar {
+  margin-top: 17px;
+}
+/* 楼主的等级 */
+.master-rank {
+  font-size: 10px;
+  position: absolute;
+  margin-left: 90px;
+}
+/* 楼主的头像图片 */
+.master-avatar img {
+  width: 100px;
+}
+/* 楼主的名字 */
+.master-name {
+  font-size: small;
+  display: flex;
+  justify-content: center;
+  margin-top: 17px;
+}
+/* 楼主的萌萌点 */
+.master-moemoepoint {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+/* 内容区右侧的帖子展示区 */
+.master-topic-content-center-right {
+  font-size: 15px;
+  padding: 17px;
+  border-left: 1px solid var(--kungalgame-blue-1);
+}
+/* 内容区的底部 */
+.master-topic-content-bottom {
+  width: 100%;
+  height: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+}
+/* 内容区域下方字体样式 */
+.master-topic-content-bottom span {
+  margin: 0 10px;
+  font-size: 12px;
+  letter-spacing: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 帖子状态 */
+.master-topic-content-bottom span span {
+  background-color: var(--kungalgame-green-3);
+  color: var(--kungalgame-white);
+}
+/* 楼主帖子底部 */
+.master-topic-footer {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+/* 底部左侧部分（点赞、推贴、踩） */
+.master-topic-footer-left ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 单个图标 */
+.master-topic-footer-left ul li {
+  margin-left: 17px;
+}
+.master-topic-footer-left ul li a {
+  color: var(--kungalgame-font-color-2);
+  font-size: 20px;
+}
+.master-topic-footer-left ul li:nth-child(1) a {
+  color: var(--kungalgame-red-4);
+}
+/* 底部右侧部分（回复、评论、只看、编辑） */
+.master-topic-footer-right ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+}
+.master-topic-footer-right ul li {
+  margin-right: 17px;
+}
+.master-topic-footer-right ul li a {
+  color: var(--kungalgame-font-color-2);
+  font-size: 20px;
+}
+/* button 的容器 li */
+.master-topic-footer-right ul li:nth-child(1) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 回帖按钮 */
+.kungalgame-reply-btn {
+  position: relative;
+  display: inline-block;
+  padding: 7px 17px;
+  color: var(--kungalgame-blue-3);
+  overflow: hidden;
+  border: 2px solid var(--kungalgame-blue-2);
+  filter: hue-rotate(0deg);
+  transition: all 0.1s linear;
+  cursor: pointer;
+}
+.kungalgame-reply-btn:hover {
+  border: 2px solid transparent;
+  color: var(--kungalgame-orange-3);
+}
+.kungalgame-reply-btn:hover span {
+  position: absolute;
+  display: block;
+}
+.kungalgame-reply-btn:hover span:nth-child(1) {
+  filter: hue-rotate(0deg);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, var(--kungalgame-blue-3));
+  animation: animate1 1s linear infinite;
+}
+@keyframes animate1 {
+  0% {
+    left: -100%;
+  }
+  50%,
+  100% {
+    left: 100%;
+  }
+}
+.kungalgame-reply-btn:hover span:nth-child(2) {
+  filter: hue-rotate(60deg);
+  top: -100%;
+  right: 0;
+  width: 3px;
+  height: 100%;
+  background: linear-gradient(180deg, transparent, var(--kungalgame-blue-3));
+  animation: animate2 1s linear infinite;
+  animation-delay: 0.25s;
+}
+@keyframes animate2 {
+  0% {
+    top: -100%;
+  }
+  50%,
+  100% {
+    top: 100%;
+  }
+}
+.kungalgame-reply-btn:hover span:nth-child(3) {
+  filter: hue-rotate(120deg);
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  background: linear-gradient(270deg, transparent, var(--kungalgame-blue-3));
+  animation: animate3 1s linear infinite;
+  animation-delay: 0.5s;
+}
+@keyframes animate3 {
+  0% {
+    right: -100%;
+    height: 3px;
+  }
+  50%,
+  100% {
+    height: 2px;
+    right: 100%;
+  }
+}
+.kungalgame-reply-btn:hover span:nth-child(4) {
+  filter: hue-rotate(300deg);
+  bottom: -100%;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  background: linear-gradient(360deg, transparent, var(--kungalgame-blue-3));
+  animation: animate4 1s linear infinite;
+  animation-delay: 0.75s;
+}
+@keyframes animate4 {
+  0% {
+    bottom: -100%;
+  }
+  50%,
+  100% {
+    bottom: 100%;
+  }
+}
+</style>
diff --git a/src/views/topic/content/others/TopicOthers.vue b/src/views/topic/content/others/TopicOthers.vue
new file mode 100644
index 00000000..67d3f3fc
--- /dev/null
+++ b/src/views/topic/content/others/TopicOthers.vue
@@ -0,0 +1,976 @@
+<script setup lang="ts"></script>
+
+<template>
+  <!-- 其它人的回帖 -->
+  <div class="other-topic-container">
+    <!-- 每个人的帖子 -->
+    <div class="other-topic-single-container">
+      <!-- 楼层标志 -->
+      <div class="other-topic-floor">
+        <button class="other-btn">F999</button>
+      </div>
+      <!-- 其他人帖子内容区的容器 -->
+      <div class="other-topic-content-container">
+        <!-- 其它人回帖的内容区 -->
+        <div class="other-topic-content">
+          <!-- 其他人回帖的上部 -->
+          <div class="other-topic-content-top">
+            <!-- 其它人回帖的上部左侧区域 -->
+            <div class="other-topic-content-left">
+              <!-- 其他人的头像 -->
+              <div class="other-avatar">
+                <!-- 其他人的头像图片 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 其他人的等级 -->
+                <div class="other-rank">萌葱</div>
+              </div>
+              <!-- 其他人的名字 -->
+              <div class="other-name">啊这可海星啊这</div>
+              <!-- 其他人的萌萌点 -->
+              <div class="other-moemoepoint">1007</div>
+            </div>
+            <!-- 其它人回帖的上部右侧区域 -->
+            <div class="other-topic-content-right">
+              <!-- 右侧的上部区域 -->
+              <div class="other-topic-content-right-top">
+                <!-- 上部区域的左边 -->
+                <div class="other-topic-content-right-top-left">
+                  <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
+                </div>
+                <!-- 上部区域的右边 -->
+                <div class="other-topic-content-right-top-right">
+                  <span>在2019年10月7日10:07:00重新编辑</span>
+                </div>
+              </div>
+              <!-- 右侧部分分文本 -->
+              <div class="other-topic-content-right-text">
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+              </div>
+            </div>
+          </div>
+          <!-- 其他人回帖的下部 -->
+          <div class="other-topic-content-bottom">
+            <!-- 其他人回帖的下部分左侧 -->
+            <div class="other-topic-content-bottom-left">
+              <i class="fa-solid fa-tag"></i>
+              <ul>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+              </ul>
+            </div>
+            <!-- 其他人回帖的下部分右侧 -->
+            <div class="other-topic-content-bottom-right">
+              <!-- 其他人回帖的时间 -->
+              <div class="other-topic-time">
+                <i class="fa-solid fa-hourglass-half"></i>
+                <div>发布于2019年10月7日-10:07:00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 其它人回帖的底部 -->
+        <div class="other-topic-footer">
+          <!-- 顶部的点赞、推贴等 -->
+          <div class="other-topic-footer-top">
+            <!-- 点赞、推贴、踩 -->
+            <div class="other-topic-footer-top-left">
+              <ul>
+                <!-- 推贴 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
+                </li>
+                <!-- 点赞 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
+                </li>
+                <!-- 踩 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
+                </li>
+              </ul>
+            </div>
+            <!-- 回复、评论、编辑 -->
+            <div class="other-topic-footer-top-right">
+              <ul>
+                <!-- 回复按钮 -->
+                <li>
+                  <div class="kungalgame-reply-btn">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    回帖
+                  </div>
+                </li>
+                <!-- 回复 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-reply"></i></a>
+                </li>
+                <!-- 评论 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
+                </li>
+                <!-- 只看 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
+                </li>
+                <!-- 编辑 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 底部的评论 -->
+          <div class="other-topic-footer-bottom">
+            <!-- 评论的标题 -->
+            <div class="other-topic-comment-title">
+              <span>评论</span>
+            </div>
+            <!-- 评论容器 -->
+            <div class="other-topic-comment-container">
+              <!-- 单个评论容器 -->
+              <div class="single-comment-container">
+                <!-- 用户头像 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 单个评论的内容区 -->
+                <div class="single-comment-content">
+                  <!-- 单个评论内容区顶部 -->
+                  <div class="single-comment-content-top">
+                    <!-- 顶部左侧名字 -->
+                    <div class="single-comment-left">
+                      鲲回复@<a href="#">啊这可海星啊这</a>
+                    </div>
+                    <!-- 顶部吧右侧点赞、踩 -->
+                    <div class="single-comment-right">
+                      <ul>
+                        <!-- 点赞 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-up"></i
+                          ></a>
+                        </li>
+                        <!-- 踩 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-down"></i
+                          ></a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <!-- 单个评论内容区底部 -->
+                  <div class="single-comment-content-bottom">
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                  </div>
+                </div>
+              </div>
+              <!-- 单个评论容器 -->
+              <div class="single-comment-container">
+                <!-- 用户头像 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 单个评论的内容区 -->
+                <div class="single-comment-content">
+                  <!-- 单个评论内容区顶部 -->
+                  <div class="single-comment-content-top">
+                    <!-- 顶部左侧名字 -->
+                    <div class="single-comment-left">
+                      鲲回复@<a href="#">啊这可海星啊这</a>
+                    </div>
+                    <!-- 顶部吧右侧点赞、踩 -->
+                    <div class="single-comment-right">
+                      <ul>
+                        <!-- 点赞 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-up"></i
+                          ></a>
+                        </li>
+                        <!-- 踩 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-down"></i
+                          ></a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <!-- 单个评论内容区底部 -->
+                  <div class="single-comment-content-bottom">
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                  </div>
+                </div>
+              </div>
+              <!-- 单个评论容器 -->
+              <div class="single-comment-container">
+                <!-- 用户头像 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 单个评论的内容区 -->
+                <div class="single-comment-content">
+                  <!-- 单个评论内容区顶部 -->
+                  <div class="single-comment-content-top">
+                    <!-- 顶部左侧名字 -->
+                    <div class="single-comment-left">
+                      鲲回复@<a href="#">啊这可海星啊这</a>
+                    </div>
+                    <!-- 顶部吧右侧点赞、踩 -->
+                    <div class="single-comment-right">
+                      <ul>
+                        <!-- 点赞 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-up"></i
+                          ></a>
+                        </li>
+                        <!-- 踩 -->
+                        <li>
+                          <a href="#"
+                            ><i class="fa-regular fa-thumbs-down"></i
+                          ></a>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <!-- 单个评论内容区底部 -->
+                  <div class="single-comment-content-bottom">
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                    啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 单个帖子 -->
+    <div class="other-topic-single-container">
+      <!-- 楼层标志 -->
+      <div class="other-topic-floor">
+        <button class="other-btn">F999</button>
+      </div>
+      <!-- 其他人帖子内容区的容器 -->
+      <div class="other-topic-content-container">
+        <!-- 其它人回帖的内容区 -->
+        <div class="other-topic-content">
+          <!-- 其他人回帖的上部 -->
+          <div class="other-topic-content-top">
+            <!-- 其它人回帖的上部左侧区域 -->
+            <div class="other-topic-content-left">
+              <!-- 其他人的头像 -->
+              <div class="other-avatar">
+                <!-- 其他人的头像图片 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 其他人的等级 -->
+                <div class="other-rank">萌葱</div>
+              </div>
+              <!-- 其他人的名字 -->
+              <div class="other-name">啊这可海星啊这</div>
+              <!-- 其他人的萌萌点 -->
+              <div class="other-moemoepoint">1007</div>
+            </div>
+            <!-- 其它人回帖的上部右侧区域 -->
+            <div class="other-topic-content-right">
+              <!-- 右侧的上部区域 -->
+              <div class="other-topic-content-right-top">
+                <!-- 上部区域的左边 -->
+                <div class="other-topic-content-right-top-left">
+                  <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
+                </div>
+                <!-- 上部区域的右边 -->
+                <div class="other-topic-content-right-top-right">
+                  <span>在2019年10月7日10:07:00重新编辑</span>
+                </div>
+              </div>
+              <!-- 右侧部分分文本 -->
+              <div class="other-topic-content-right-text">
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+              </div>
+            </div>
+          </div>
+          <!-- 其他人回帖的下部 -->
+          <div class="other-topic-content-bottom">
+            <!-- 其他人回帖的下部分左侧 -->
+            <div class="other-topic-content-bottom-left">
+              <i class="fa-solid fa-tag"></i>
+              <ul>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+              </ul>
+            </div>
+            <!-- 其他人回帖的下部分右侧 -->
+            <div class="other-topic-content-bottom-right">
+              <!-- 其他人回帖的时间 -->
+              <div class="other-topic-time">
+                <i class="fa-solid fa-hourglass-half"></i>
+                <div>发布于2019年10月7日-10:07:00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 其它人回帖的底部 -->
+        <div class="other-topic-footer">
+          <!-- 顶部的点赞、推贴等 -->
+          <div class="other-topic-footer-top">
+            <!-- 点赞、推贴、踩 -->
+            <div class="other-topic-footer-top-left">
+              <ul>
+                <!-- 推贴 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
+                </li>
+                <!-- 点赞 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
+                </li>
+                <!-- 踩 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
+                </li>
+              </ul>
+            </div>
+            <!-- 回复、评论、编辑 -->
+            <div class="other-topic-footer-top-right">
+              <ul>
+                <!-- 回复按钮 -->
+                <li>
+                  <div class="kungalgame-reply-btn">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    回帖
+                  </div>
+                </li>
+                <!-- 回复 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-reply"></i></a>
+                </li>
+                <!-- 评论 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
+                </li>
+                <!-- 只看 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
+                </li>
+                <!-- 编辑 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 底部的评论 -->
+          <div class="other-topic-footer-bottom"></div>
+        </div>
+      </div>
+    </div>
+    <div class="other-topic-single-container">
+      <!-- 楼层标志 -->
+      <div class="other-topic-floor">
+        <button class="other-btn">F999</button>
+      </div>
+      <!-- 其他人帖子内容区的容器 -->
+      <div class="other-topic-content-container">
+        <!-- 其它人回帖的内容区 -->
+        <div class="other-topic-content">
+          <!-- 其他人回帖的上部 -->
+          <div class="other-topic-content-top">
+            <!-- 其它人回帖的上部左侧区域 -->
+            <div class="other-topic-content-left">
+              <!-- 其他人的头像 -->
+              <div class="other-avatar">
+                <!-- 其他人的头像图片 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 其他人的等级 -->
+                <div class="other-rank">萌葱</div>
+              </div>
+              <!-- 其他人的名字 -->
+              <div class="other-name">啊这可海星啊这</div>
+              <!-- 其他人的萌萌点 -->
+              <div class="other-moemoepoint">1007</div>
+            </div>
+            <!-- 其它人回帖的上部右侧区域 -->
+            <div class="other-topic-content-right">
+              <!-- 右侧的上部区域 -->
+              <div class="other-topic-content-right-top">
+                <!-- 上部区域的左边 -->
+                <div class="other-topic-content-right-top-left">
+                  <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
+                </div>
+                <!-- 上部区域的右边 -->
+                <div class="other-topic-content-right-top-right">
+                  <span>在2019年10月7日10:07:00重新编辑</span>
+                </div>
+              </div>
+              <!-- 右侧部分分文本 -->
+              <div class="other-topic-content-right-text">
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+              </div>
+            </div>
+          </div>
+          <!-- 其他人回帖的下部 -->
+          <div class="other-topic-content-bottom">
+            <!-- 其他人回帖的下部分左侧 -->
+            <div class="other-topic-content-bottom-left">
+              <i class="fa-solid fa-tag"></i>
+              <ul>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+              </ul>
+            </div>
+            <!-- 其他人回帖的下部分右侧 -->
+            <div class="other-topic-content-bottom-right">
+              <!-- 其他人回帖的时间 -->
+              <div class="other-topic-time">
+                <i class="fa-solid fa-hourglass-half"></i>
+                <div>发布于2019年10月7日-10:07:00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 其它人回帖的底部 -->
+        <div class="other-topic-footer">
+          <!-- 顶部的点赞、推贴等 -->
+          <div class="other-topic-footer-top">
+            <!-- 点赞、推贴、踩 -->
+            <div class="other-topic-footer-top-left">
+              <ul>
+                <!-- 推贴 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
+                </li>
+                <!-- 点赞 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
+                </li>
+                <!-- 踩 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
+                </li>
+              </ul>
+            </div>
+            <!-- 回复、评论、编辑 -->
+            <div class="other-topic-footer-top-right">
+              <ul>
+                <!-- 回复按钮 -->
+                <li>
+                  <div class="kungalgame-reply-btn">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    回帖
+                  </div>
+                </li>
+                <!-- 回复 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-reply"></i></a>
+                </li>
+                <!-- 评论 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
+                </li>
+                <!-- 只看 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
+                </li>
+                <!-- 编辑 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 底部的评论 -->
+          <div class="other-topic-footer-bottom"></div>
+        </div>
+      </div>
+    </div>
+    <div class="other-topic-single-container">
+      <!-- 楼层标志 -->
+      <div class="other-topic-floor">
+        <button class="other-btn">F999</button>
+      </div>
+      <!-- 其他人帖子内容区的容器 -->
+      <div class="other-topic-content-container">
+        <!-- 其它人回帖的内容区 -->
+        <div class="other-topic-content">
+          <!-- 其他人回帖的上部 -->
+          <div class="other-topic-content-top">
+            <!-- 其它人回帖的上部左侧区域 -->
+            <div class="other-topic-content-left">
+              <!-- 其他人的头像 -->
+              <div class="other-avatar">
+                <!-- 其他人的头像图片 -->
+                <img src="../img/KUN.jpg" alt="KUN" />
+                <!-- 其他人的等级 -->
+                <div class="other-rank">萌葱</div>
+              </div>
+              <!-- 其他人的名字 -->
+              <div class="other-name">啊这可海星啊这</div>
+              <!-- 其他人的萌萌点 -->
+              <div class="other-moemoepoint">1007</div>
+            </div>
+            <!-- 其它人回帖的上部右侧区域 -->
+            <div class="other-topic-content-right">
+              <!-- 右侧的上部区域 -->
+              <div class="other-topic-content-right-top">
+                <!-- 上部区域的左边 -->
+                <div class="other-topic-content-right-top-left">
+                  <span>回复给@<a href="#">啊这可海星啊这</a>（楼主）</span>
+                </div>
+                <!-- 上部区域的右边 -->
+                <div class="other-topic-content-right-top-right">
+                  <span>在2019年10月7日10:07:00重新编辑</span>
+                </div>
+              </div>
+              <!-- 右侧部分分文本 -->
+              <div class="other-topic-content-right-text">
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+                啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星
+              </div>
+            </div>
+          </div>
+          <!-- 其他人回帖的下部 -->
+          <div class="other-topic-content-bottom">
+            <!-- 其他人回帖的下部分左侧 -->
+            <div class="other-topic-content-bottom-left">
+              <i class="fa-solid fa-tag"></i>
+              <ul>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+                <li>啊这可海星</li>
+              </ul>
+            </div>
+            <!-- 其他人回帖的下部分右侧 -->
+            <div class="other-topic-content-bottom-right">
+              <!-- 其他人回帖的时间 -->
+              <div class="other-topic-time">
+                <i class="fa-solid fa-hourglass-half"></i>
+                <div>发布于2019年10月7日-10:07:00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 其它人回帖的底部 -->
+        <div class="other-topic-footer">
+          <!-- 顶部的点赞、推贴等 -->
+          <div class="other-topic-footer-top">
+            <!-- 点赞、推贴、踩 -->
+            <div class="other-topic-footer-top-left">
+              <ul>
+                <!-- 推贴 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-hand-point-up"></i></a>
+                </li>
+                <!-- 点赞 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-up"></i></a>
+                </li>
+                <!-- 踩 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-thumbs-down"></i></a>
+                </li>
+              </ul>
+            </div>
+            <!-- 回复、评论、编辑 -->
+            <div class="other-topic-footer-top-right">
+              <ul>
+                <!-- 回复按钮 -->
+                <li>
+                  <div class="kungalgame-reply-btn">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    回帖
+                  </div>
+                </li>
+                <!-- 回复 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-reply"></i></a>
+                </li>
+                <!-- 评论 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-comment-dots"></i></a>
+                </li>
+                <!-- 只看 -->
+                <li>
+                  <a href="#"><i class="fa-solid fa-arrows-to-eye"></i></a>
+                </li>
+                <!-- 编辑 -->
+                <li>
+                  <a href="#"><i class="fa-regular fa-pen-to-square"></i></a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 底部的评论 -->
+          <div class="other-topic-footer-bottom"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 其它人的回帖 */
+/* 每个人的帖子 */
+.other-topic-container,
+.other-topic-single-container {
+  width: 100%;
+  min-height: 300px;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+/* 其它人的楼层 */
+.other-topic-floor {
+  /* 标志在最左边 */
+  margin-left: 100%;
+  /* 定位 */
+  margin-bottom: -25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* 位于内容上方 */
+  z-index: 1;
+}
+/* 其他人的楼层样式 */
+.other-btn {
+  border: none;
+  /* 大小 */
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: linear-gradient(
+    var(--kungalgame-blue-1),
+    var(--kungalgame-pink-1)
+  );
+  opacity: 0.7;
+  font-size: 18px;
+  font-weight: bold;
+  font-style: oblique;
+  color: var(--kungalgame-pink-1);
+  text-shadow: -1px 0 var(--kungalgame-blue-5), 0 -1px var(--kungalgame-blue-5),
+    1px 0 var(--kungalgame-blue-5), 0 1px var(--kungalgame-blue-5),
+    1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
+    -1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
+    4px 2px 2px var(--kungalgame-red-4);
+}
+/* 其他人帖子内容区容器 */
+.other-topic-content-container {
+  width: 100%;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  border: 1px solid var(--kungalgame-blue-1);
+  border-radius: 5px;
+  background-color: var(--kungalgame-trans-white-3);
+  box-shadow: var(--shadow);
+}
+/* 其它人回帖的内容区 */
+.other-topic-content {
+  width: 100%;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+/* 其他人回帖的上部 */
+.other-topic-content-top {
+  display: flex;
+  flex-grow: 1;
+}
+/* 其它人回帖的上部左侧区域 */
+.other-topic-content-left {
+  padding: 0 20px;
+}
+/* 其他人的头像 */
+.other-avatar {
+  margin-top: 17px;
+}
+/* 其他人的头像图片 */
+.other-avatar img {
+  width: 100px;
+}
+/* 其他人的等级 */
+.other-rank {
+  font-size: 10px;
+  position: absolute;
+  margin-left: 90px;
+}
+/* 其他人的名字 */
+.other-name {
+  font-size: small;
+  display: flex;
+  justify-content: center;
+  margin-top: 17px;
+}
+/* 其他人的萌萌点 */
+.other-moemoepoint {
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
+}
+/* 其它人回帖的上部右侧区域 */
+.other-topic-content-right {
+  display: flex;
+  flex-direction: column;
+}
+/* 右侧的上部区域 */
+.other-topic-content-right-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0;
+  letter-spacing: 1px;
+}
+/* 上部区域的左边 */
+.other-topic-content-right-top-left {
+  font-size: 17px;
+}
+/* 被回复的人 */
+.other-topic-content-right-top-left span a {
+  color: var(--kungalgame-blue-5);
+  font-weight: 500;
+}
+.other-topic-content-right-top-left span a:hover {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+/* 上部区域的右边 */
+.other-topic-content-right-top-right {
+  font-size: 12px;
+}
+.other-topic-content-right-top-right span {
+  margin-right: 30px;
+}
+/* 右侧部分分文本 */
+.other-topic-content-right-text {
+  padding: 7px;
+  border-left: 1px solid var(--kungalgame-blue-1);
+  font-size: 15px;
+}
+/* 其他人回帖的下部 */
+.other-topic-content-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--kungalgame-blue-1);
+  padding-bottom: 7px;
+}
+/* 其他人回帖的下部分左侧 */
+.other-topic-content-bottom-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 单个标签的盒子 */
+.other-topic-content-bottom-left ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+/* 图标字体 */
+.other-topic-content-bottom-left i {
+  padding: 0 20px;
+  color: var(--kungalgame-blue-4);
+}
+/* 单个标签的样式 */
+.other-topic-content-bottom-left ul li {
+  margin-left: 5px;
+  font-size: small;
+  padding: 2px;
+  background-color: var(--kungalgame-blue-0);
+  overflow: hidden;
+  white-space: nowrap;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.other-topic-content-bottom-left ul li:hover {
+  background-color: var(--kungalgame-red-1);
+  transition: 0.2s;
+}
+/* 其他人回帖的下部分右侧 */
+.other-topic-content-bottom-right {
+  margin-right: 20px;
+}
+/* 其他人回帖的时间 */
+.other-topic-time {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: small;
+  /* 文字间距 */
+  letter-spacing: 1px;
+  /* 窗口缩小不换行 */
+  overflow: hidden;
+  white-space: nowrap;
+}
+/* 沙漏的样式 */
+.other-topic-time i {
+  padding: 0 10px;
+  color: var(--kungalgame-red-4);
+}
+/* 发帖时间的样式 */
+.other-topic-time div {
+  padding-right: 20px;
+}
+/* 其它人回帖的底部 */
+.other-topic-footer {
+  display: flex;
+  flex-direction: column;
+}
+/* 顶部的点赞、推贴等 */
+.other-topic-footer-top {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+/* 点赞、推贴、踩 */
+.other-topic-footer-top-left {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.other-topic-footer-top-left ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.other-topic-footer-top-left ul li {
+  margin-left: 17px;
+}
+.other-topic-footer-top-left ul li a {
+  color: var(--kungalgame-font-color-2);
+  font-size: 20px;
+}
+.other-topic-footer-top-left ul li:nth-child(1) a {
+  color: var(--kungalgame-red-4);
+}
+/* 回复、评论、编辑 */
+.other-topic-footer-top-right ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left: 10px;
+}
+.other-topic-footer-top-right ul li {
+  margin-right: 17px;
+}
+.other-topic-footer-top-right ul li a {
+  color: var(--kungalgame-font-color-2);
+  font-size: 20px;
+}
+/* 其它人回帖的底部 */
+.other-topic-footer {
+  width: 100%;
+  min-height: 50px;
+}
+/* 底部的评论 */
+.other-topic-footer-bottom {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+/* 评论的标题 */
+.other-topic-comment-title {
+  margin: 0 auto;
+}
+/* 评论容器 */
+.other-topic-comment-container {
+  width: 95%;
+  margin: 0 auto;
+}
+/* 单个评论容器 */
+.single-comment-container {
+  display: flex;
+  margin: 10px 0;
+}
+.single-comment-container img {
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+}
+/* 单个评论的内容区 */
+.single-comment-content {
+  display: flex;
+  flex-direction: column;
+}
+/* 单个评论内容区顶部 */
+.single-comment-content-top {
+  display: flex;
+  justify-content: space-between;
+}
+/* 顶部左侧名字 */
+.single-comment-left {
+  font-size: 15px;
+}
+.single-comment-left a {
+  color: var(--kungalgame-blue-5);
+}
+.single-comment-left a:hover {
+  text-decoration: underline;
+}
+.single-comment-right ul {
+  display: flex;
+  align-items: center;
+}
+.single-comment-right ul li {
+  margin-right: 10px;
+}
+.single-comment-right ul li a {
+  color: var(--kungalgame-font-color-2);
+}
+/* 单个评论内容区底部 */
+.single-comment-content-bottom {
+  font-size: 12px;
+  text-indent: 25px;
+  /* 标题显示两行、超出部分隐藏 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 显示省略号 */
+  display: -webkit-box; /* 将文本框转化为弹性伸缩盒子 */
+  -webkit-box-orient: vertical; /* 设置为纵向排列 */
+  -webkit-line-clamp: 10; /* 显示两行文本 */
+}
+</style>