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