修改主页,添加机型

src/components/Navbar.css

@@ -1,9 +1,14 @@
+.root: {}
+:root {
+  --navbar-height: 60px;
+}
 .navbar {
   background: white;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   position: sticky;
   top: 0;
   z-index: 1000;
+  min-height: var(--navbar-height);
 }
 
 .navbar-inner {
@@ -13,6 +18,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
+  z-index: 1002;
 }
 
 .logo {
@@ -44,6 +51,14 @@
 .nav-item:hover .dropdown {
   display: block;
 }
+.nav-item:hover .dropdown.mega {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.nav-item.open .dropdown {
+  display: block;
+}
 
 .dropdown {
   display: none;
@@ -76,7 +91,9 @@
 }
 
 .search-input {
+  height: 36px;
   padding: 8px 12px;
+  font-size: 14px;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
 }
@@ -90,3 +107,111 @@
 .username {
   color: #666;
 }
+
+.navbar-right .btn {
+  height: 36px;
+  padding: 0 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+}
+.dropdown.mega {
+  display: none;
+  padding: 28px;
+  width: min(95vw, 1400px);
+  border-radius: 10px;
+  position: fixed;
+  top: var(--navbar-height);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1001;
+  gap: 20px;
+  background: #fff;
+  pointer-events: auto;
+}
+.nav-item.open .dropdown.mega,
+.nav-item:hover .dropdown.mega {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.mega-col {
+  width: 320px;
+  padding: 0 16px;
+}
+.mega-col:first-child {
+  position: sticky;
+  left: 0;
+}
+
+.mega-col.mega-wide {
+  flex: 1;
+  min-width: 800px;
+}
+
+.mega-title {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 12px;
+  font-size: 15px;
+}
+
+.mega-products {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+.mega-product {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.mega-product img {
+  width: 100%;
+  height: 480px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+}
+
+.mega-product-info .name {
+  font-weight: 600;
+  color: #333;
+  font-size: 16px;
+  text-align: center;
+}
+
+.mega-product-info .desc {
+  color: #666;
+  font-size: 13px;
+  text-align: center;
+}
+.mega-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mega-item {
+  padding: 12px 14px;
+  border: 1px solid #e8e8e8;
+  background: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+}
+
+.mega-item:hover {
+  border-color: #1890ff;
+}
+
+.mega-item.active {
+  background: #e6f7ff;
+  border-color: #1890ff;
+}