调整布局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,23 +61,26 @@ const MenuTag = defineComponent({
}, },
render() { render() {
return ( return (
<NScrollbar class="menu-tag" xScrollable> <NLayoutHeader>
<NSpace class="menu-tag-sapce" wrap={false} align="center"> <NScrollbar class="menu-tag" xScrollable>
{this.modelMenuTagOptions.map((curr, idx) => ( <NSpace class="menu-tag-sapce" wrap={false} align="center">
<NTag {this.modelMenuTagOptions.map((curr, idx) => (
closable={ <NTag
curr.key !== '/dashboard' && this.modelMenuTagOptions.length > 1 closable={
} curr.key !== '/dashboard' &&
onClose={() => this.handleCloseTag(idx)} this.modelMenuTagOptions.length > 1
type={curr.key === this.menuKey ? 'success' : 'info'} }
onClick={this.handleTagClick.bind(this, curr)} onClose={() => this.handleCloseTag(idx)}
bordered={false} type={curr.key === this.menuKey ? 'success' : 'info'}
> onClick={this.handleTagClick.bind(this, curr)}
{typeof curr.label === 'function' ? curr.label() : curr.label} bordered={false}
</NTag> >
))} {typeof curr.label === 'function' ? curr.label() : curr.label}
</NSpace> </NTag>
</NScrollbar> ))}
</NSpace>
</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 = {