mirror of
				https://github.com/continew-org/continew-admin-ui.git
				synced 2025-10-31 00:57:11 +08:00 
			
		
		
		
	fix: 修复系统名太长会使菜单栏右侧黑边过长的问题
This commit is contained in:
		| @@ -1,10 +1,10 @@ | ||||
| <template> | ||||
|   <div v-if="isDesktop" class="asider" :class="{ 'app-menu-dark': appStore.menuDark }" | ||||
|     :style="appStore.menuDark ? appStore.themeCSSVar : undefined"> | ||||
|     <Logo :collapsed="appStore.menuCollapse"></Logo> | ||||
|     <a-layout-sider class="menu" collapsible breakpoint="xl" hide-trigger :width="225" | ||||
|     <a-layout-sider class="menu" collapsible breakpoint="xl" hide-trigger :width="230" | ||||
|       :collapsed="appStore.menuCollapse" @collapse="handleCollapse"> | ||||
|       <a-scrollbar outer-class="h-full" style="height: 100%; overflow: auto"> | ||||
|       <Logo :collapsed="appStore.menuCollapse"></Logo> | ||||
|       <a-scrollbar outer-class="menu-scroll-view" style="height: 100%; overflow: auto"> | ||||
|         <Menu></Menu> | ||||
|       </a-scrollbar> | ||||
|     </a-layout-sider> | ||||
| @@ -47,6 +47,8 @@ const handleCollapse = (isCollapsed: boolean) => { | ||||
|  | ||||
| :deep(.arco-layout-sider-children) { | ||||
|   overflow: hidden; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
| } | ||||
|  | ||||
| .asider { | ||||
| @@ -58,6 +60,11 @@ const handleCollapse = (isCollapsed: boolean) => { | ||||
|   color: var(--color-text-1); | ||||
|   background-color: var(--color-bg-1); | ||||
|  | ||||
|   .menu-scroll-view { | ||||
|     flex: 1; | ||||
|     overflow: hidden; | ||||
|   } | ||||
|  | ||||
|   .menu { | ||||
|     flex: 1; | ||||
|     overflow: hidden; | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
|   <section class="system-logo" :class="{ collapsed: props.collapsed }" @click="toHome"> | ||||
|     <img v-if="logo" class="logo" :src="logo" alt="logo" /> | ||||
|     <img v-else class="logo" src="/logo.svg" alt="logo" /> | ||||
|     <span class="system-name">{{ title }}</span> | ||||
|     <span class="system-name gi_line_1">{{ title }}</span> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| @@ -39,6 +39,7 @@ const toHome = () => { | ||||
|   cursor: pointer; | ||||
|   user-select: none; | ||||
|   box-sizing: border-box; | ||||
|  | ||||
|   &.collapsed { | ||||
|     padding: 0; | ||||
|     display: flex; | ||||
| @@ -48,6 +49,7 @@ const toHome = () => { | ||||
|       display: none; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .logo { | ||||
|     width: 32px; | ||||
|     height: 32px; | ||||
| @@ -56,10 +58,12 @@ const toHome = () => { | ||||
|     overflow: hidden; | ||||
|     flex-shrink: 0; | ||||
|   } | ||||
|  | ||||
|   .system-name { | ||||
|     padding-left: 6px; | ||||
|     white-space: nowrap; | ||||
|     transition: color 0.3s; | ||||
|  | ||||
|     &:hover { | ||||
|       color: $color-theme !important; | ||||
|       cursor: pointer; | ||||
|   | ||||
		Reference in New Issue
	
	Block a user