Browse Source

头部菜单样式

master_hella_20240701
yufei0306 7 months ago
parent
commit
885cd2f84a
  1. 8
      src/layout/components/CategoryHeader.vue
  2. 4
      src/layout/components/useRenderLayout.tsx
  3. 1
      src/styles/var.css

8
src/layout/components/CategoryHeader.vue

@ -49,7 +49,7 @@ export default defineComponent({
id={`${variables.namespace}-tool-header`}
class={[
prefixCls,
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:bg-[var(--el-bg-color)]'
]}
>
@ -64,6 +64,12 @@ export default defineComponent({
const { renderMenuTitle } = useRenderMenuTitle()
const categoryRouters = unref(routers).filter(item=>item.meta.hidden!=true&&item.path!='/')
console.log('categoryRouters==',categoryRouters)
//
if(categoryRouters.length>0){
appStore.setCategoryRoutePath(categoryRouters[0].path)
}
{/* default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) */}
return categoryRouters.map((v) => {
const meta = (v.meta ?? {}) as RouteMeta

4
src/layout/components/useRenderLayout.tsx

@ -78,7 +78,7 @@ export const useRenderLayout = () => {
<div
class={[
`${prefixCls}-content`,
'absolute top-0 h-[100%]',
'absolute top-[var(--top-category-height)] h-[calc(100%-var(--top-category-height))]',
{
'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
collapse.value && !mobile.value && !mobile.value,
@ -94,7 +94,7 @@ export const useRenderLayout = () => {
class={[
`${prefixCls}-content-scrollbar`,
{
'!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
'!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
}
]}

1
src/styles/var.css

@ -32,6 +32,7 @@
--top-header-hover-color: #f6f6f6;
--top-tool-height: var(--logo-height);
--top-category-height: var(--logo-height);
--top-tool-p-x: 0;

Loading…
Cancel
Save