feat: topic page route, mobile style adaption

src/views/Home/content/article/components/SingleTopic.vue

@@ -9,7 +9,7 @@ const props = defineProps(['data'])
   <div class="topic">
     <UserPart :kungalgamer="props.data.uid" />
     <!-- TODO: 进入指定话题的路由 -->
-    <router-link to="/topic">
+    <router-link :to="`/topic/${props.data.tid}`">
       <TopicPart :data="props.data" />
     </router-link>
   </div>

src/views/topic/content/components/KUNGalgamerInfo.vue

@@ -18,10 +18,12 @@ const props = defineProps<{
       <!-- 头像图片 TODO: -->
       <img src="@/assets/images/KUN.jpg" alt="KUN" />
     </div>
-    <!-- 名字 -->
+    <div class="info">
-    <div class="name">{{ user.name }}</div>
+      <!-- 名字 -->
-    <!-- 萌萌点 -->
+      <div class="name">{{ user.name }}</div>
-    <div class="moemoepoint">{{ user.moemoepoint }}</div>
+      <!-- 萌萌点 -->
+      <div class="moemoepoint">{{ user.moemoepoint }}</div>
+    </div>
   </div>
 </template>
 
@@ -49,6 +51,7 @@ const props = defineProps<{
   display: flex;
   justify-content: center;
   margin-top: 17px;
+  font-size: 23px;
 }
 /* 萌萌点 */
 .moemoepoint {
@@ -56,4 +59,21 @@ const props = defineProps<{
   display: flex;
   justify-content: center;
 }
+
+@media (max-width: 700px) {
+  .kungalgamer {
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 27px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--kungalgame-blue-1);
+    border-top: 1px solid var(--kungalgame-blue-1);
+  }
+  .info {
+    margin-left: 50px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+}
 </style>

src/views/topic/content/components/Master.vue

@@ -136,7 +136,7 @@ const {
 /* 内容区的顶部 */
 .content-top {
   width: 100%;
-  height: 40px;
+  max-height: 100px;
   display: flex;
   text-align: center;
   /* 时间和标签分居两侧 */
@@ -144,6 +144,7 @@ const {
   /* 下面的分割线 */
   border-bottom: 1px solid var(--kungalgame-blue-1);
   box-sizing: border-box;
+  flex-grow: 1;
 }
 
 /* 楼主的话题和楼主的信息容器 */
@@ -192,4 +193,10 @@ const {
     flex-direction: column;
   }
 }
+
+@media (max-width: 700px) {
+  .content-center {
+    flex-direction: column;
+  }
+}
 </style>

src/views/topic/content/components/Reply.vue

@@ -196,4 +196,10 @@ defineProps<{
     flex-direction: column;
   }
 }
+
+@media (max-width: 700px) {
+  .article {
+    flex-direction: column;
+  }
+}
 </style>

src/views/topic/content/components/Tags.vue

@@ -13,11 +13,7 @@ const props = defineProps<{
     <!-- 标签的图标字体 -->
     <Icon class="tag" icon="mingcute:tag-2-fill" />
     <ul>
-      <li>啊这可海星</li>
+      <li v-for="(tag, index) in tags" :key="index">{{ tag }}</li>
-      <li>啊这可海星</li>
-      <li>啊这可海星</li>
-      <li>啊这可海星</li>
-      <li>啊这可海星</li>
     </ul>
   </div>
 </template>
@@ -29,18 +25,23 @@ const props = defineProps<{
   justify-content: center;
   align-items: center;
   color: var(--kungalgame-font-color-3);
+  flex-shrink: 0;
+  flex-grow: 1;
   /* 单个标签的盒子 */
   ul {
+    flex-grow: 1;
+    max-height: 100px;
+    width: 300px;
     display: flex;
     flex-wrap: wrap;
+    overflow-y: scroll;
     li {
-      margin-left: 5px;
+      margin: 5px;
       font-size: small;
       padding: 2px;
-      background-color: var(--kungalgame-blue-0);
+      background-color: var(--kungalgame-trans-blue-0);
-      overflow: hidden;
+      border: 1px solid var(--kungalgame-blue-1);
-      white-space: nowrap;
+      overflow-y: scroll;
-      border-radius: 5px;
       cursor: pointer;
       &:hover {
         background-color: var(--kungalgame-red-0);

src/views/topic/content/components/TopicFooter.vue

@@ -111,7 +111,8 @@ const handelReply = () => {
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    margin-left: 17px;
+    margin: 17px;
+    margin-right: 0;
     span {
       display: flex;
       margin-right: 3px;