1

src/container/listCustomNavbar/index.scss

@@ -34,9 +34,12 @@
   }
 
   .listNavCity {
+    font-family: "PingFang SC"; // 根据设计稿设置字体
     font-weight: 600;
     font-size: 13px;
-    line-height: 20px;
+    line-height: 20px; // 1.5384615384615385em ≈ 20px
+    letter-spacing: 0.38px; // 2.9230768863971415% of 13px
+    color: #000000; // 根据设计稿设置颜色
   }
 
   .infoWrapper {
@@ -44,10 +47,12 @@
   }
 
   .listNavInfoWrapper {
+    font-family: "PingFang SC"; // 根据设计稿设置字体
     font-weight: 400;
     font-size: 10px;
-    line-height: 12px;
-    color: #3c3c4399;
+    line-height: 12px; // 1.2em
+    letter-spacing: 0.38px; // 3.7999999523162837% of 10px
+    color: rgba(60, 60, 67, 0.6); // 根据设计稿调整颜色 fill_9UGMHJ
   }
 }
 
@@ -70,34 +75,66 @@
   .navContent {
     display: flex;
     align-items: center;
-    gap: 4px;
-    width: 65%;
+    gap: 4px; // 根据设计稿：gap: 4px
+    flex: 1; // 占据剩余空间
     height: max-content;
     // padding-top: 5px;
   }
 
   .searchContainer {
-    width: 100%;
     display: flex;
     align-items: center;
-    gap: 5.85px;
-    padding: 7.8px;
-    height: 30px;
+    gap: 5.85px; // 根据设计稿调整间距：5.853658676147461px
+    padding: 7.8px; // 根据设计稿调整内边距：7.804878234863281px
+    width: 240px; // 根据设计稿：固定宽度 240px
+    height: 29.27px; // 根据设计稿调整高度：29.27px
+    min-height: 29.27px; // 确保最小高度
     box-sizing: border-box;
     background: #fff;
-    border-radius: 30px;
-    border: 0.488px solid rgba(0, 0, 0, 0.06);
-    box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
-    height: 30px;
-    box-sizing: border-box;
-    font-size: 13.659px;
+    border-radius: 999px; // 根据设计稿：完全圆角
+    border: 0.49px solid rgba(0, 0, 0, 0.06); // 根据设计稿调整边框：0.4878048896789551px
+    box-shadow: 0px 3.9px 46.83px 0px rgba(0, 0, 0, 0.08); // 根据设计稿调整阴影
+    font-family: "PingFang SC"; // 根据设计稿设置字体
+    font-size: 13.66px; // 根据设计稿调整字体大小：13.658536911010742px
     font-style: normal;
     font-weight: 400;
-    line-height: 17.561px;
-    flex: 1;
+    line-height: 17.57px; // 1.2857142857142858em ≈ 17.57px
+    letter-spacing: -0.22px; // -1.6428571734045228% of 13.66px
+    flex-shrink: 0; // 防止搜索框被压缩
+
+    .searchIcon {
+      flex-shrink: 0; // 防止图标被压缩
+      width: 15.61px; // 根据设计稿：图标尺寸 15.61x15.61
+      height: 15.61px;
+    }
 
     .nut-input {
+      flex: 1; // 输入框占据剩余空间
       padding: 0;
+      font-family: "PingFang SC";
+      font-size: 13.66px; // 根据设计稿调整字体大小
+      font-weight: 400;
+      line-height: 17.57px; // 1.2857142857142858em
+      letter-spacing: -0.22px; // -1.6428571734045228%
+      min-width: 0; // 允许输入框缩小
+      height: 100%; // 输入框高度填满容器
+      
+      :global(.nut-input-inner) {
+        font-family: "PingFang SC";
+        font-size: 13.66px;
+        font-weight: 400;
+        line-height: 17.57px;
+        letter-spacing: -0.22px;
+        color: #000000; // 根据设计稿：文本颜色 fill_9WEVAH
+        height: 100%;
+      }
+      
+      :global(.nut-input-placeholder) {
+        color: rgba(60, 60, 67, 0.6); // placeholder 颜色
+        font-size: 13.66px;
+        line-height: 17.57px;
+        letter-spacing: -0.22px;
+      }
     }
   }
 }
@@ -129,9 +166,6 @@
     transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-/* 第一个元素样式 */
-.firstElement {}
-
 /* 第二个元素样式 */
 .secondElement {
   /* 初始状态：透明且稍微偏移 */

src/container/listCustomNavbar/index.tsx

@@ -188,8 +188,9 @@ const ListHeader = (props: IProps) => {
                 src={img.ICON_LIST_SEARCH_SEARCH}
               />
               <Input
-                placeholder="搜索上球局和场地"
-                // clearable={false}
+                placeholder="搜索上海的球局和场地"
+                className="navbarInput"
+                clearable={false}
                 disabled
                 value={searchValue}
                 onClick={handleInputClick}