diff --git a/web-admin/src/assets/styles/core/app.scss b/web-admin/src/assets/styles/core/app.scss index 9522a77b5..15c2924a8 100755 --- a/web-admin/src/assets/styles/core/app.scss +++ b/web-admin/src/assets/styles/core/app.scss @@ -1515,9 +1515,14 @@ body { background: var(--mint-surface); } +.app-layout-portal #app-sidebar { + border-right: 1px solid var(--mint-border, #d9e8e2) !important; +} + .app-layout-portal #app-sidebar .layout-sidebar { height: 100%; - border-right: 1px solid var(--mint-border) !important; + /* 避免与 #app-sidebar 双边框;竖线由 aside 绘制,不会被 .menu-left 盖住 */ + border-right: none !important; background: var(--mint-surface); } diff --git a/web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue b/web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue index ad25cf9b5..8152470cc 100644 --- a/web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue +++ b/web-admin/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue @@ -196,7 +196,8 @@ maxWidth: width, flexShrink: '0', boxSizing: 'border-box', - borderRight: '1px solid var(--mint-border, #d9e8e2)' + // 门户:竖线由 #app-sidebar 绘制,避免被内部等宽 .menu-left 盖住 + borderRight: isPortalMenu.value ? 'none' : '1px solid var(--mint-border, #d9e8e2)' } as Record }) @@ -469,18 +470,18 @@ @use './theme'; .layout-sidebar { - // 侧栏容器宽度固定,内部菜单在容器内完整展示 + // 侧栏容器宽度固定,内部菜单在容器内完整展示(用 100% 避免等宽子项盖住容器右边框) .menu-left-open { - width: v-bind(menuopenwidth); - min-width: v-bind(menuopenwidth); - max-width: v-bind(menuopenwidth); + width: 100%; + min-width: 0; + max-width: 100%; flex-shrink: 0; } .menu-left-close { - width: v-bind(menuclosewidth); - min-width: v-bind(menuclosewidth); - max-width: v-bind(menuclosewidth); + width: 100%; + min-width: 0; + max-width: 100%; flex-shrink: 0; } @@ -494,7 +495,7 @@ // 折叠后宽度 .el-menu--collapse { - width: v-bind(menuclosewidth); + width: 100%; } } diff --git a/web-admin/src/components/core/layouts/art-portal-header/index.vue b/web-admin/src/components/core/layouts/art-portal-header/index.vue index 510ff5d8e..68ecd86ac 100644 --- a/web-admin/src/components/core/layouts/art-portal-header/index.vue +++ b/web-admin/src/components/core/layouts/art-portal-header/index.vue @@ -90,7 +90,8 @@ justify-content: space-between; width: 100%; height: 56px; - padding: 0 var(--mint-content-padding, 24px); + /* 左侧无 padding:brand 区与侧栏同宽,右边框才能纵向对齐 */ + padding: 0 var(--mint-content-padding, 24px) 0 0; user-select: none; background: var(--mint-primary, #1ca851); border-bottom: 1px solid rgba(255, 255, 255, 0.12); @@ -106,12 +107,18 @@ } .portal-header-brand { + box-sizing: border-box; display: flex; flex-shrink: 0; gap: 12px; align-items: center; - margin-right: 4px; + /* +1px:与侧栏 #app-sidebar 外边框(内容宽 + 1px border)纵向对齐 */ + width: calc(var(--app-sidebar-open-width, 270px) + 1px); + min-width: calc(var(--app-sidebar-open-width, 270px) + 1px); + max-width: calc(var(--app-sidebar-open-width, 270px) + 1px); + padding-left: var(--mint-content-padding, 24px); padding-right: 16px; + overflow: hidden; cursor: pointer; border-right: 1px solid rgba(255, 255, 255, 0.22); } @@ -121,8 +128,11 @@ } .portal-header-title { - max-width: 290px; + flex: 1; + min-width: 0; margin: 0; + overflow: hidden; + text-overflow: ellipsis; font-size: 16px; font-weight: 700; line-height: 1.35; diff --git a/web-admin/src/views/index/index.vue b/web-admin/src/views/index/index.vue index f8b78189e..c855148a3 100755 --- a/web-admin/src/views/index/index.vue +++ b/web-admin/src/views/index/index.vue @@ -1,11 +1,11 @@