f

jsconfig.json

@@ -7,6 +7,7 @@
     "paths": {
       "@/components/*": ["src/components/*"],
       "@/layouts/*": ["src/layouts/*"],
+      "@/data/*": ["src/data/*"],
       "@/services/*": ["src/services/*"],
       "@/utils/*": ["src/utils/*"]
     }

package-lock.json

@@ -15,8 +15,12 @@
         "@types/react-dom": "^18.2.18",
         "astro": "^4.1.3",
         "axios": "^1.6.5",
+        "classnames": "^2.5.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
+      },
+      "devDependencies": {
+        "less": "^4.2.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1713,6 +1717,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -1836,6 +1845,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "devOptional": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2042,6 +2060,19 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.5.0",
       "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.5.0.tgz",
@@ -2587,11 +2618,37 @@
         "node": ">=16.17.0"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/import-meta-resolve": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
@@ -2741,6 +2798,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "devOptional": true
+    },
     "node_modules/is-wsl": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-3.1.0.tgz",
@@ -2811,6 +2874,45 @@
         "node": ">=6"
       }
     },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "devOptional": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/load-yaml-file": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/load-yaml-file/-/load-yaml-file-0.2.0.tgz",
@@ -2911,6 +3013,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmmirror.com/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -3486,6 +3612,23 @@
       "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
       "optional": true
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
     "node_modules/nlcst-to-string": {
       "version": "3.1.1",
       "resolved": "https://registry.npmmirror.com/nlcst-to-string/-/nlcst-to-string-3.1.1.tgz",
@@ -3727,6 +3870,15 @@
         "unist-util-visit-children": "^2.0.0"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-7.1.2.tgz",
@@ -3990,6 +4142,13 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/pump/-/pump-3.0.0.tgz",
@@ -4551,6 +4710,13 @@
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
@@ -4788,6 +4954,16 @@
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-17.0.45.tgz",
       "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -5012,6 +5188,12 @@
         }
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "devOptional": true
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",

package.json

@@ -17,7 +17,11 @@
     "@types/react-dom": "^18.2.18",
     "astro": "^4.1.3",
     "axios": "^1.6.5",
+    "classnames": "^2.5.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "less": "^4.2.0"
   }
 }

src/components/NavMenu/SubMenu.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function SubMenu(props) {
+
+  const { pathPrefix, menus, show, onShowChange } = props;
+  const [style, setStyle] = React.useState({});
+  const [current, setCurrent] = React.useState(null);
+  const ref = React.useRef();
+
+  const onMouseLeaveCapture = e => {
+    if (e.target === ref.current) {
+      // onShowChange(false);
+    }
+  }
+
+  React.useEffect(() => {
+    const pageNav = document.getElementById('pageNav');
+    const rect = pageNav.getBoundingClientRect();
+    setStyle({
+      top: (rect.bottom + rect.top) + 'px',
+    });
+
+    // astro 暂时不支持 onXXXCapture 事件绑定模式
+    const el = ref.current;
+    el.addEventListener('mouseleave', onMouseLeaveCapture, true);
+
+    return () => {
+      el.removeEventListener('mouseleave', onMouseLeaveCapture, true);
+    }
+  }, []);
+
+  return (
+    <div
+      id="sub-menu"
+      ref={ref}
+      style={style}
+      className={classNames("container-fluid bg-white", { show })}
+    >
+      <div className="row">
+        {
+          menus?.map((menu) => (
+            <div className={classNames("col p-5", { 'has-level3': menu.levelDeep >= 3 })} key={menu.path}>
+              <p className="menu-level-1 fs-4">
+                <a
+                  className="sub-menu-link link-dark p-2 border-bottom"
+                  href={`${pathPrefix}${menu.path}`}
+                >{menu.name}</a>
+              </p>
+              <div className="row">
+                <div className="col pe-0">
+                {
+                  menu.children?.map((item) => (
+                    <p
+                      key={item.path}
+                      className={classNames("menu-level-2 mb-1", { 'bg-white': item === current })}
+                      onMouseEnter={() => setCurrent(item)}
+                    >
+                      <a className="sub-menu-link link-dark p-2" href={`${pathPrefix}${item.path}`}>{item.name}</a>
+                    </p>
+                  ))
+                }
+                </div>
+                {
+                  menu.levelDeep >= 3 && (
+                    <div className={classNames("col", { 'bg-white': current?.children?.length > 0 })}>
+                      {
+                        current?.children?.map((it) => (
+                          <p className="menu-level-3 mb-1">
+                            <a className="sub-menu-link link-dark p-2" href={`${pathPrefix}${it.path}`}>{it.name}</a>
+                          </p>
+                        ))
+                      }
+                    </div>
+                  )
+                }
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  );
+}

src/components/NavMenu/index.jsx

@@ -0,0 +1,82 @@
+import React, { Fragment } from 'react';
+import menus from '@/data/menu'
+import SubMenu from './SubMenu';
+import './style.less';
+
+export default function NavMenu(props) {
+
+  const { lang } = props;
+  const pathPrefix = `/${lang}`;
+
+  const [current, setCurrent] = React.useState();
+  const [show, setShow] = React.useState(false);
+
+  const onMouseMove = (e, menu) => {
+    setCurrent(menu);
+    setShow(menu.children?.length > 0)
+  }
+
+  return (
+    <Fragment>
+      <nav
+        id="pageNav"
+        className="navbar navbar-expand-lg navbar-light bg-light fixed-top p-0 py-3"
+        style={{ '--bs-bg-opacity': 0.9 }}
+      >
+        <div className="container-fluid">
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <a className="navbar-brand" href={`/${lang}/`}>
+            <img
+              src="https://e.huawei.com/-/mediae/images/common/logo/logo_huawei.png"
+              alt="Academe"
+              width="120"
+              className="d-inline-block align-text-top"
+            />
+          </a>
+          <div id="navbarSupportedContent" className="collapse navbar-collapse">
+            <div className="me-auto"></div>
+      
+            <ul id="menu-nav" className="navbar-nav me-auto mb-2 mb-lg-0">
+              {
+                menus.map((menu) => (
+                  <li
+                    className="nav-item px-2 text-center"
+                    key={menu.path}
+                    onMouseMove={(e) => onMouseMove(e, menu)}
+                  >
+                    <a
+                      className="nav-link"
+                      aria-current="page"
+                      href={`${pathPrefix}${menu.path}`}>{menu.name}</a>
+                  </li>
+                ))
+              }
+            </ul>
+            <form className="d-flex">
+              <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
+              <button className="btn btn-outline-success" type="submit">Search</button>
+            </form>
+      
+          </div>
+        </div>      
+      </nav>
+              
+      <SubMenu
+        show={show}
+        pathPrefix={pathPrefix}
+        menus={current?.children}
+        onShowChange={setShow}
+      />
+    </Fragment>
+  );
+}

src/components/NavMenu/style.less

@@ -0,0 +1,84 @@
+
+#sub-menu {
+  visibility: hidden;
+  position: absolute;
+  max-height: 0;
+  left: 0;
+  opacity: 0;
+  transition: all .2s ease-in-out;
+  z-index: -1;
+
+  .sub-menu-link {
+    width: 100%;
+    display: inline-block;
+    cursor: pointer;
+    margin-bottom: 0;
+    border-bottom: 1px solid transparent;
+    text-decoration: none;
+
+    &:hover {
+      border-bottom-color: var(--bs-red) !important;
+    }
+  }
+  
+  .has-level3 {
+    flex: 2;
+    background-color: #eee;
+
+    .menu-level-2 {
+      & > .sub-menu-link:hover {
+        border-bottom-color: transparent !important;
+        background-color: #fff;
+      }
+    }
+  }
+
+}
+
+
+@media (min-width: 992px) {
+  #pageNav {
+
+    li.nav-item {
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0.5rem;
+        left: 100%;
+        width: 0;
+        height: calc(100% + 0.5rem);
+        border-bottom: 2px solid;
+        border-bottom-color: var(--bs-red);
+        transition: 0.2s all linear;
+        z-index: -1;
+      }
+
+      &:hover {
+
+        &::before {
+          transition-delay: 0.1s;
+          width: 100%;
+          left: 0;
+        }
+
+        & ~ li.nav-item::before {
+          left: 0;
+        }
+
+      }
+
+    }
+  }
+
+  #sub-menu {
+    &.show {
+      visibility: visible;
+      opacity: 1;
+      max-height: 80vh;
+      z-index: 999;
+    }
+  }
+}

src/data/menu.js

@@ -0,0 +1,114 @@
+
+export default [
+  {
+    path: '/',
+    name: '首页',
+  },
+  {
+    path: '/products-solutions',
+    name: '产品与解决方案',
+    children: [
+      {
+        path: '/products-solutions/lot',
+        name: '智慧物联',
+        children: [
+          {
+            path: '/products-solutions/lot/building',
+            name: '智慧楼宇',
+          },
+          {
+            path: '/products-solutions/lot/agriculture',
+            name: '智慧农业',
+          },
+          {
+            path: '/products-solutions/lot/community',
+            name: '智慧社区',
+          },
+          {
+            path: '/products-solutions/lot/exhibition-all',
+            name: '智慧展馆',
+          },
+        ]
+      },
+      {
+        path: '/products-solutions/industrial-internet',
+        name: '工业互联网',
+        children: [
+          {
+            path: '/products-solutions/industrial-internet/mes',
+            name: '云致MES',
+          },
+          {
+            path: '/products-solutions/industrial-internet/erp',
+            name: 'ERP',
+          },
+        ],
+      },
+      {
+        path: '/product/gov-ent-health',
+        name: '政企医疗',
+        levelDeep: 3,
+        children: [
+          {
+            path: '/products-solutions/gov-ent-health/gov',
+            name: '政务服务',
+            children: [
+              {
+                path: '/products-solutions/gov-ent-health/gov/civilized-city',
+                name: '文明创城',
+              },
+            ],
+          },
+          {
+            path: '/products-solutions/gov-ent-health/bank',
+            name: '银行业务',
+            children: [
+              {
+                path: '/products-solutions/gov-ent-health/bank/custom',
+                name: '定制开发',
+              },
+            ],
+          },
+          {
+            path: '/products-solutions/gov-ent-health/healthcare',
+            name: '医院医疗',
+          },
+        ]
+      },
+      {
+        path: '/product/others',
+        name: '其他业务',
+        children: [
+          {
+            path: '/products-solutions/others/eshop',
+            name: '电商系统',
+          },
+          {
+            path: '/products-solutions/others/shigongli',
+            name: '旅游住宿',
+          },
+          {
+            path: '/products-solutions/others/house',
+            name: '房源交易',
+          },
+          {
+            path: '/products-solutions/others/crm',
+            name: 'CRM管理',
+          },
+        ],
+      }
+    ],
+  },
+  {
+    path: '/news',
+    name: '最新资讯',
+  },
+  {
+    path: '/about',
+    name: '关于云致',
+  },
+  {
+    path: '/concat-us',
+    name: '联系我们',
+  }
+]

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/[lang]/index.astro

@@ -11,6 +11,7 @@ import BigImg from '@/components/BigImg.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
 import LeftRightCarousel from '@/components/LeftRightCarousel.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
+import NavMenu from '@/components/NavMenu/index.jsx'
 // import Dynamic from '@/components/Dynamic.astro'
 import { getContentList } from '@/services/apis'
 
@@ -34,7 +35,7 @@ const title = getName(categary)
 
 <Layout title={title}>
   <!-- 导航栏 -->
-  <Navbar lang={lang} />
+  <NavMenu lang={lang} client:load />
   <FirstScreen />
   <BigImg />
   <LeftMiddleRightImgText />