fix: menu scroll bar is blocked (#845)

#### What type of PR is this?
/kind improvement
/area console


#### What this PR does / why we need it:
使左侧菜单栏滚动条不被遮挡
#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3272

#### Screenshots:
![image](https://user-images.githubusercontent.com/28662535/217997111-36676220-b539-417d-b606-a1fe336c9474.png)
![image](https://user-images.githubusercontent.com/28662535/217997152-165bb976-8cfa-480a-b27a-6478c2bad568.png)
![image](https://user-images.githubusercontent.com/28662535/217997216-820de8fb-9526-4e23-9fec-17e8f2e8ebab.png)

#### Special notes for your reviewer:
分为logo、可滚动(搜索、菜单)、用户信息三部分,不妥就关闭这个PR吧
#### Does this PR introduce a user-facing change?

```release-note
完整显示左侧菜单栏滚动条
```
pull/847/head
longjuan 2023-02-10 12:26:15 +08:00 committed by GitHub
parent b83d3e4279
commit 3724a45889
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 97 additions and 88 deletions

View File

@ -187,7 +187,9 @@ onMounted(generateMenus);
<template> <template>
<div class="flex h-full"> <div class="flex h-full">
<aside class="navbar fixed hidden h-full overflow-y-auto md:block"> <aside
class="navbar fixed hidden h-full overflow-y-auto md:flex md:flex-col"
>
<div class="logo flex justify-center pt-5 pb-7"> <div class="logo flex justify-center pt-5 pb-7">
<a href="/" target="_blank" title="访问首页"> <a href="/" target="_blank" title="访问首页">
<IconLogo <IconLogo
@ -195,6 +197,7 @@ onMounted(generateMenus);
/> />
</a> </a>
</div> </div>
<div class="flex-1 overflow-y-auto">
<div class="px-3"> <div class="px-3">
<div <div
class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900" class="flex cursor-pointer items-center rounded bg-gray-100 p-2 text-gray-400 transition-all hover:text-gray-900"
@ -210,6 +213,8 @@ onMounted(generateMenus);
</div> </div>
</div> </div>
<RoutesMenu :menus="menus" /> <RoutesMenu :menus="menus" />
</div>
<div class="profile-placeholder">
<div class="current-profile"> <div class="current-profile">
<div v-if="userStore.currentUser?.spec.avatar" class="profile-avatar"> <div v-if="userStore.currentUser?.spec.avatar" class="profile-avatar">
<VAvatar <VAvatar
@ -263,6 +268,7 @@ onMounted(generateMenus);
</template> </template>
</FloatingDropdown> </FloatingDropdown>
</div> </div>
</div>
</aside> </aside>
<main class="content w-full overflow-y-auto pb-12 mb-safe md:pb-0"> <main class="content w-full overflow-y-auto pb-12 mb-safe md:pb-0">
@ -368,7 +374,9 @@ onMounted(generateMenus);
@apply bg-white; @apply bg-white;
z-index: 999; z-index: 999;
box-shadow: 0 4px 4px #f6c6ce; box-shadow: 0 4px 4px #f6c6ce;
padding-bottom: 70px;
.profile-placeholder {
height: 70px;
.current-profile { .current-profile {
height: 70px; height: 70px;
@ -397,6 +405,7 @@ onMounted(generateMenus);
} }
} }
} }
}
.content { .content {
@apply ml-0 @apply ml-0