调整布局border,优化显示

This commit is contained in:
ray_wuhao 2023-03-11 18:43:31 +08:00
parent 077f5a8b67
commit 142612cfbd
4 changed files with 24 additions and 19 deletions

View File

@ -19,6 +19,7 @@
gap: 8px 12px; gap: 8px 12px;
font-weight: 600; font-weight: 600;
overflow: hidden; overflow: hidden;
border-right: solid 1px var(--n-border-color);
&.ray-menu__logo-url { &.ray-menu__logo-url {
position: sticky; position: sticky;

View File

@ -2,6 +2,7 @@ $space: calc($layoutRouterViewContainer / 2);
.menu-tag { .menu-tag {
height: $layoutMenuHeight; height: $layoutMenuHeight;
border-bottom: solid 1px var(--n-border-color);
& .menu-tag-sapce { & .menu-tag-sapce {
width: calc(100% - $space * 2); width: calc(100% - $space * 2);

View File

@ -10,7 +10,7 @@
*/ */
import './index.scss' import './index.scss'
import { NScrollbar, NTag, NSpace } from 'naive-ui' import { NScrollbar, NTag, NSpace, NLayoutHeader } from 'naive-ui'
import { useMenu } from '@/store' import { useMenu } from '@/store'
import type { MenuOption } from 'naive-ui' import type { MenuOption } from 'naive-ui'
@ -61,12 +61,14 @@ const MenuTag = defineComponent({
}, },
render() { render() {
return ( return (
<NLayoutHeader>
<NScrollbar class="menu-tag" xScrollable> <NScrollbar class="menu-tag" xScrollable>
<NSpace class="menu-tag-sapce" wrap={false} align="center"> <NSpace class="menu-tag-sapce" wrap={false} align="center">
{this.modelMenuTagOptions.map((curr, idx) => ( {this.modelMenuTagOptions.map((curr, idx) => (
<NTag <NTag
closable={ closable={
curr.key !== '/dashboard' && this.modelMenuTagOptions.length > 1 curr.key !== '/dashboard' &&
this.modelMenuTagOptions.length > 1
} }
onClose={() => this.handleCloseTag(idx)} onClose={() => this.handleCloseTag(idx)}
type={curr.key === this.menuKey ? 'success' : 'info'} type={curr.key === this.menuKey ? 'success' : 'info'}
@ -78,6 +80,7 @@ const MenuTag = defineComponent({
))} ))}
</NSpace> </NSpace>
</NScrollbar> </NScrollbar>
</NLayoutHeader>
) )
}, },
}) })

View File

@ -25,7 +25,7 @@ const Layout = defineComponent({
if (settingStore.menuTagSwitch) { if (settingStore.menuTagSwitch) {
cssVar = { cssVar = {
'--layout-content-height': 'calc(100% - 110px)', '--layout-content-height': 'calc(100% - 111px)',
} }
} else { } else {
cssVar = { cssVar = {