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

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

@ -6,19 +6,15 @@
<template> <template>
<div class="topic-page-nav"> <div class="topic-page-nav">
<!-- 交互区容器 --> <!-- 交互区容器 -->
<div class="topic-page-nav-container"> <ul class="topic-page-nav-container">
<ul>
<li><i class="fa-solid fa-people-group fa-bounce"></i>进入帖子池</li> <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-arrows-up-to-line"></i>返回到顶端</li>
<li><i class="fa-solid fa-house"></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-clock"></i>按时间排序</li>
<li><i class="fa-regular fa-thumbs-up"></i>按点赞排序</li> <li><i class="fa-regular fa-thumbs-up"></i>按点赞排序</li>
<li><i class="fa-regular fa-comment-dots"></i>按回复排序</li> <li><i class="fa-regular fa-comment-dots"></i>按回复排序</li>
</ul> </ul>
</div> </div>
</div>
</template> </template>
<style scoped> <style scoped>
@ -41,41 +37,29 @@
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
background-color: var(--kungalgame-trans-yellow-0); background-color: var(--kungalgame-trans-yellow-0);
} display: grid;
/* 两列的无序列表 */ grid-template-columns: repeat(2, 1fr);
.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 { .topic-page-nav-container > li {
padding: 0 11px; padding: 0 11px;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
border-bottom: 1px dashed var(--kungalgame-trans-purple-4);
box-sizing: border-box; box-sizing: border-box;
/* 页面变化时不换行 */ /* 页面变化时不换行 */
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.topic-page-nav ul li i { .topic-page-nav-container > li > i {
margin-right: 4px; margin-right: 4px;
font-size: 17px; font-size: 17px;
} }
/* 功能区 hover */ /* 功能区 hover */
.topic-page-nav ul li::before { .topic-page-nav-container > li::before {
transform: scaleX(0); transform: scaleX(0);
transform-origin: bottom right; transform-origin: bottom right;
content: " "; content: " ";
@ -86,14 +70,11 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
inset: 0 0 0 0; inset: 0 0 0 0;
background-color: var(--kungalgame-trans-blue-3); background-color: var(--kungalgame-trans-red-4);
z-index: -1; z-index: -1;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.topic-page-nav ul:nth-child(1) li:nth-child(1):before { .topic-page-nav-container > li:hover::before {
background-color: var(--kungalgame-red-4);
}
.topic-page-nav ul li:hover::before {
transform: scaleX(1); transform: scaleX(1);
transform-origin: bottom left; transform-origin: bottom left;
} }