mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-11 16:57:09 +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