|
|
|
@ -38,30 +38,41 @@ const mobile = computed(() => appStore.getMobile) |
|
|
|
const fixedMenu = computed(() => appStore.getFixedMenu) |
|
|
|
// 搜索图片
|
|
|
|
const search = computed(() => appStore.search) |
|
|
|
const scrollBarHeight = computed(() => { |
|
|
|
return (window.innerHeight - appStore.getCategoryMenuHeight - 85)+'px' |
|
|
|
}) |
|
|
|
|
|
|
|
export const useRenderLayout = () => { |
|
|
|
const renderClassic = () => { |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div |
|
|
|
class={[ |
|
|
|
'absolute top-0 left-0 h-full layout-border__right', |
|
|
|
{ '!fixed z-3000': mobile.value } |
|
|
|
]} |
|
|
|
> |
|
|
|
<div style="display:flex;flex-direction:row;width:100%;background:#0069ef;" class={['h-[var(--top-category-height)]']}> |
|
|
|
{logo.value ? ( |
|
|
|
<Logo |
|
|
|
class={[ |
|
|
|
'bg-[var(--left-menu-bg-color)] relative', |
|
|
|
'h-[var(--top-category-height)]', |
|
|
|
'bg-[var(--el-color-primary)] relative', |
|
|
|
'w-[var(--left-menu-max-width)]', |
|
|
|
{ |
|
|
|
'!pl-0': mobile.value && collapse.value, |
|
|
|
'w-[var(--left-menu-min-width)]': appStore.getCollapse, |
|
|
|
'w-[var(--left-menu-max-width)]': !appStore.getCollapse |
|
|
|
} |
|
|
|
]} |
|
|
|
style="transition: all var(--transition-time-02);" |
|
|
|
style="transition: all var(--transition-time-02);background:#0069ef;" |
|
|
|
></Logo> |
|
|
|
) : undefined} |
|
|
|
{appStore.getShowCategoryMenu?(<CategoryHeader class={[ |
|
|
|
'bg-[var(--top-header-bg-color)]', |
|
|
|
{ |
|
|
|
'layout-border__bottom': !tagsView.value |
|
|
|
} |
|
|
|
]}></CategoryHeader>):undefined} |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class={[ |
|
|
|
'absolute top-[var(--top-category-height)] left-0 h-full layout-border__right1', |
|
|
|
{ '!fixed z-3000': mobile.value } |
|
|
|
]} |
|
|
|
> |
|
|
|
{/* {search.value && !appStore.getCollapse? (<div class={[ |
|
|
|
prefixCls, |
|
|
|
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between' |
|
|
|
@ -73,12 +84,12 @@ export const useRenderLayout = () => { |
|
|
|
'w-[var(--left-menu-max-width)]': !appStore.getCollapse |
|
|
|
} |
|
|
|
]} isModal={false} /> </div>) : undefined} */} |
|
|
|
<Menu class={[{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu> |
|
|
|
<Menu class={['top-0',{ '!h-[calc(100%-var(--logo-height))]': logo.value }]}></Menu> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class={[ |
|
|
|
`${prefixCls}-content`, |
|
|
|
'absolute top-[var(--top-category-height)] h-[calc(100%-var(--top-category-height))]', |
|
|
|
'absolute top-[var(--top-category-height)]', |
|
|
|
{ |
|
|
|
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]': |
|
|
|
collapse.value && !mobile.value && !mobile.value, |
|
|
|
@ -88,21 +99,11 @@ export const useRenderLayout = () => { |
|
|
|
} |
|
|
|
]} |
|
|
|
style="transition: all var(--transition-time-02);" |
|
|
|
> |
|
|
|
<ElScrollbar |
|
|
|
v-loading={pageLoading.value} |
|
|
|
class={[ |
|
|
|
`${prefixCls}-content-scrollbar`, |
|
|
|
{ |
|
|
|
'!h-[calc(100%-var(--top-tool-height)-var(--top-category-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]': |
|
|
|
fixedHeader.value |
|
|
|
} |
|
|
|
]} |
|
|
|
> |
|
|
|
<div |
|
|
|
class={[ |
|
|
|
{ |
|
|
|
'fixed top-0 left-0 z-10': fixedHeader.value, |
|
|
|
'top-[var(--top-category-height) left-0 z-10': fixedHeader.value, |
|
|
|
'w-[calc(100%-var(--left-menu-min-width))] !left-[var(--left-menu-min-width)]': |
|
|
|
collapse.value && fixedHeader.value && !mobile.value, |
|
|
|
'w-[calc(100%-var(--left-menu-max-width))] !left-[var(--left-menu-max-width)]': |
|
|
|
@ -110,14 +111,9 @@ export const useRenderLayout = () => { |
|
|
|
'!w-full !left-0': mobile.value |
|
|
|
} |
|
|
|
]} |
|
|
|
style="transition: all var(--transition-time-02);" |
|
|
|
style="transition: all var(--transition-time-02);width:100%;" |
|
|
|
> |
|
|
|
{appStore.getShowCategoryMenu?(<CategoryHeader class={[ |
|
|
|
'bg-[var(--top-header-bg-color)]', |
|
|
|
{ |
|
|
|
'layout-border__bottom': !tagsView.value |
|
|
|
} |
|
|
|
]}></CategoryHeader>):undefined} |
|
|
|
|
|
|
|
<ToolHeader |
|
|
|
class={[ |
|
|
|
'bg-[var(--top-header-bg-color)]', |
|
|
|
@ -131,7 +127,17 @@ export const useRenderLayout = () => { |
|
|
|
<TagsView class="layout-border__bottom layout-border__top"></TagsView> |
|
|
|
) : undefined} |
|
|
|
</div> |
|
|
|
|
|
|
|
<ElScrollbar |
|
|
|
v-loading={pageLoading.value} |
|
|
|
height={scrollBarHeight.value} |
|
|
|
class={[ |
|
|
|
`${prefixCls}-content-scrollbar`, |
|
|
|
{ |
|
|
|
'!h-[calc(100%-var(--app-content-padding)-var(--top-tool-height)-var(--top-category-height)-var(--tags-view-height))] ': |
|
|
|
fixedHeader.value |
|
|
|
} |
|
|
|
]} |
|
|
|
> |
|
|
|
<AppView></AppView> |
|
|
|
</ElScrollbar> |
|
|
|
</div> |
|
|
|
|
