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

fold style

Browse source
This commit is contained in:
KUN1007 2023-05-24 15:49:06 +08:00
parent 7df03b8a1e
commit c2e0267333
1 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/views/Home/content/aside/MainPageAside.vue
View file

@ -7,6 +7,10 @@ import { Icon } from '@iconify/vue'
import { ref } from 'vue' import { ref } from 'vue'
// 用户点击项目跳转 // 用户点击项目跳转
import router from '@/router' import router from '@/router'
import { is } from 'dom7'
// 单个 item 样式
const itemStyle = {}
const handleClick = () => { const handleClick = () => {
router.push('/rank') router.push('/rank')
@ -15,15 +19,15 @@ const handleClick = () => {
// localStorage.setItem('KUNGalgameMainPageAsideBar', 'true') // localStorage.setItem('KUNGalgameMainPageAsideBar', 'true')
// const asideBarStatus = // const asideBarStatus =
// localStorage.getItem('KUNGalgameMainPageAsideBar') || true // localStorage.getItem('KUNGalgameMainPageAsideBar') || true
const topic = ref(true) const isActive = ref(false)
const asideWidth = ref('240px') const asideWidth = ref('40px')
const handleFold = () => { const handleFold = () => {
if (topic.value) { if (isActive.value) {
asideWidth.value = '40px' asideWidth.value = '40px'
} else { } else {
asideWidth.value = '240px' asideWidth.value = '240px'
} }
topic.value = !topic.value isActive.value = !isActive.value
} }
</script> </script>
@ -33,13 +37,22 @@ const handleFold = () => {
<!-- 侧边栏交互 --> <!-- 侧边栏交互 -->
<div class="nav-aside" @click="handleFold"> <div class="nav-aside" @click="handleFold">
<!-- fa 箭头图标字体 --> <!-- fa 箭头图标字体 -->
<Icon icon="line-md:arrow-left" /> <Icon
<span>折叠左侧区域</span> icon="line-md:arrow-left"
style="font-size: 17px"
v-show="isActive"
/>
<Icon
icon="line-md:arrow-right"
style="font-size: 17px"
v-show="!isActive"
/>
<span v-show="isActive">折叠左侧区域</span>
</div> </div>
<!-- 侧边栏功能区 --> <!-- 侧边栏功能区 -->
<div class="item-box"> <div class="item-box" v-show="isActive">
<!-- 发布新文章 --> <!-- 发布新文章 -->
<div class="new-article" v-show="topic"> <div class="new-article">
<!-- 发布新文章的按钮 --> <!-- 发布新文章的按钮 -->
<button class="btn-new-article">发布帖子</button> <button class="btn-new-article">发布帖子</button>
</div> </div>
@ -53,8 +66,8 @@ const handleFold = () => {
<div>帖子池</div> <div>帖子池</div>
</div> </div>
</div> </div>
<HotTopic v-show="topic" /> <HotTopic v-show="isActive" />
<NewTopic v-show="topic" /> <NewTopic v-show="isActive" />
</div> </div>
</template> </template>
@ -75,10 +88,7 @@ const handleFold = () => {
} }
/* 侧边栏交互 */ /* 侧边栏交互 */
.nav-aside { .nav-aside {
width: 100%; height: 38px;
height: 1px;
/* 折叠区相当于侧边栏的占比 */
flex-grow: 1;
/* 内容居中（折叠左侧区域） */ /* 内容居中（折叠左侧区域） */
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -89,11 +99,6 @@ const handleFold = () => {
color: @kungalgame-font-color-3; color: @kungalgame-font-color-3;
cursor: pointer; cursor: pointer;
} }
@media (max-width: 50px) {
.nav-aside {
background-color: aqua;
}
}
/* 侧边栏功能区 */ /* 侧边栏功能区 */
.item-box { .item-box {
width: 100%; width: 100%;