hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

Fix topic page nav container

Browse source
This commit is contained in:
KUN1007 2023-04-30 14:53:48 +08:00
parent 5976afc81e
commit c9e3be748a
1 changed files with 15 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/views/topic/aside/nav/TopicAsideNav.vue
View file

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