xihuaDesign/src/views/website/components/layout/Header.tsx

import { css } from "@linaria/core";
import { Space } from "ant-design-vue";
import { defineComponent } from "vue";
import Menu from "./Menu";
import { useCategory } from "@/modules";

export default defineComponent(() => {
  const storeCategory = useCategory();

  return () => {
    const topCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
      return e.isHome == false;
    });
    const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
      return e.isHome == true;
    });
    return (
      <div class={HeaderLayout}>
        <div class={"lay_top flex align-center justify-between"}>
          <div>立足四川、面向全国，贴近行业，服务社会。</div>
          <div>
            <Space size={50}>
              {topCate.map((e) => {
                return (
                  <router-link to={`/detail/${e._id}`}>{e.name}</router-link>
                );
              })}
            </Space>
          </div>
        </div>
        <div class={"lay_menu flex"}>
          <div class={"menu_logo"}>
            <router-link to="/">
              <img src={getImageUrl("logo_header.png")} />
            </router-link>
          </div>
          <div class={"menu flex-1"}>
            <Menu data={mainCate} />
          </div>
        </div>
      </div>
    );
  };
});
const HeaderLayout = css`
  .lay_top {
    padding: 10px 30px;
    background: #242424;
    color: var(--vt-c-white);

    a {
      color: var(--vt-c-white);
      &:hover {
        text-decoration: underline;
      }
    }
  }
  .lay_menu {
    align-items: center;
    padding: 16px 30px;
    background: var(--vt-c-primary);
    .menu_logo {
      img {
        height: 54px;
        object-fit: contain;
      }
    }
    .menu {
      padding-left: 50px;
    }
  }
`;