yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐞 fix:top布局模式下主容器高度、工具栏高出1px

pull/502/head
preschooler 2024-08-19 16:52:43 +08:00
parent a059013c39
commit 0cc3d4884f
2 changed files with 9 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/layout/components/useRenderLayout.tsx
View File

@ -126,7 +126,7 @@ export const useRenderLayout = () => {
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute left-0 top-[var(--logo-height)+1px] h-[calc(100%-1px-var(--logo-height))] w-full flex"> <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
<Menu class="relative layout-border__right !h-full"></Menu> <Menu class="relative layout-border__right !h-full"></Menu>
<div <div
class={[ class={[
@ -157,9 +157,9 @@ export const useRenderLayout = () => {
'layout-border__bottom absolute', 'layout-border__bottom absolute',
{ {
'!fixed top-0 left-0 z-10': fixedHeader.value, '!fixed top-0 left-0 z-10': fixedHeader.value,
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[calc(var(--logo-height)+1px)]': 'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)] mt-[var(--logo-height)]':
collapse.value && fixedHeader.value, collapse.value && fixedHeader.value,
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[calc(var(--logo-height)+1px)]': 'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)] mt-[var(--logo-height)]':
!collapse.value && fixedHeader.value !collapse.value && fixedHeader.value
} }
]} ]}
@ -190,24 +190,14 @@ export const useRenderLayout = () => {
<Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu> <Menu class="h-[var(--top-tool-height)] flex-1 px-10px"></Menu>
<ToolHeader></ToolHeader> <ToolHeader></ToolHeader>
</div> </div>
<div <div class={[`${prefixCls}-content`, 'w-full h-[calc(100%-var(--top-tool-height))]']}>
class={[
`${prefixCls}-content`,
'w-full',
{
'h-[calc(100%-var(--app-footer-height))]': !fixedHeader.value,
'h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]': fixedHeader.value
}
]}
>
<ElScrollbar <ElScrollbar
v-loading={pageLoading.value} v-loading={pageLoading.value}
class={[ class={[
`${prefixCls}-content-scrollbar`, `${prefixCls}-content-scrollbar`,
{ {
'mt-[var(--tags-view-height)] !pb-[calc(var(--tags-view-height)+var(--app-footer-height))]': '!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value, fixedHeader.value
'pb-[var(--app-footer-height)]': !fixedHeader.value
} }
]} ]}
> >
@ -216,7 +206,7 @@ export const useRenderLayout = () => {
class={[ class={[
'layout-border__bottom layout-border__top relative', 'layout-border__bottom layout-border__top relative',
{ {
'!fixed w-full top-[calc(var(--top-tool-height)+1px)] left-0': fixedHeader.value '!fixed w-full top-[var(--top-tool-height)] left-0': fixedHeader.value
} }
]} ]}
style="transition: width var(--transition-time-02), left var(--transition-time-02);" style="transition: width var(--transition-time-02), left var(--transition-time-02);"
@ -238,7 +228,7 @@ export const useRenderLayout = () => {
<ToolHeader class="flex-1"></ToolHeader> <ToolHeader class="flex-1"></ToolHeader>
</div> </div>
<div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-[calc(100%-2px)] flex"> <div class="absolute left-0 top-[var(--logo-height)] h-[calc(100%-var(--logo-height))] w-full flex">
<TabMenu></TabMenu> <TabMenu></TabMenu>
<div <div
class={[ class={[

2
uno.config.ts
View File

@ -12,7 +12,7 @@ export default defineConfig({
${selector} { ${selector} {
display: flex; display: flex;
height: 100%; height: 100%;
padding: 1px 10px 0; padding: 0 10px;
cursor: pointer; cursor: pointer;
align-items: center; align-items: center;
transition: background var(--transition-time-02); transition: background var(--transition-time-02);