From c9e3be748ac5f013e0b9c106d23ddb11ff55cae1 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Sun, 30 Apr 2023 14:53:48 +0800
Subject: [PATCH] Fix topic page nav container

---
 src/views/topic/aside/nav/TopicAsideNav.vue | 49 +++++++--------------
 1 file changed, 15 insertions(+), 34 deletions(-)

diff --git a/src/views/topic/aside/nav/TopicAsideNav.vue b/src/views/topic/aside/nav/TopicAsideNav.vue
index cda1e766..5bd90b15 100644
--- a/src/views/topic/aside/nav/TopicAsideNav.vue
+++ b/src/views/topic/aside/nav/TopicAsideNav.vue
@@ -6,18 +6,14 @@
 <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>
+    <ul class="topic-page-nav-container">
+      <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>
+      <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>
 </template>
 
@@ -41,41 +37,29 @@
   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;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 /* 每个功能 */
-.topic-page-nav ul li {
+.topic-page-nav-container > 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 {
+.topic-page-nav-container > li > i {
   margin-right: 4px;
   font-size: 17px;
 }
 /* 功能区 hover */
-.topic-page-nav ul li::before {
+.topic-page-nav-container > li::before {
   transform: scaleX(0);
   transform-origin: bottom right;
   content: " ";
@@ -86,14 +70,11 @@
   bottom: 0;
   left: 0;
   inset: 0 0 0 0;
-  background-color: var(--kungalgame-trans-blue-3);
+  background-color: var(--kungalgame-trans-red-4);
   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 {
+.topic-page-nav-container > li:hover::before {
   transform: scaleX(1);
   transform-origin: bottom left;
 }