1

src/components/DistanceQuickFilter/index.scss

@@ -5,7 +5,7 @@
 
   .nut-menu-bar {
     --nutui-menu-bar-line-height: 30px;
-    background-color: #fafafa;
+    background-color: #fafafa !important; // 明确设置背景色，避免组件默认样式覆盖
     box-shadow: unset;
     // padding: 0 15px;
     gap: 5px;
@@ -22,11 +22,13 @@
     align-items: center;
     gap: 2px;
     border-radius: 999px;
-    // border: 0.5px solid rgba(0, 0, 0, 0.06);
+    border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿添加边框
     background: #ffffff;
+    font-family: "PingFang SC"; // 根据设计稿设置字体
     font-size: 14px;
     font-weight: 600;
-    line-height: 20px;
+    line-height: 20px; // 1.4285714285714286em ≈ 20px
+    letter-spacing: -0.23px; // -1.6428571726594652% of 14px
   }
 
   .nut-menu-title.active {

src/components/SearchBar/index.module.scss

@@ -1,14 +1,23 @@
 .searchBar {
   --nutui-searchbar-font-size: 16px;
   --nutui-searchbar-input-height: 44px;
-  --nutui-searchbar-content-border-radius: 44px;
+  --nutui-searchbar-content-border-radius: 999px; // 根据设计稿：完全圆角
   --nutui-searchbar-input-text-color: #000000;
   --nutui-searchbar-input-padding: 0 0 0 10px;
-  --nutui-searchbar-padding: 10px 0 10px 0;
+  --nutui-searchbar-padding: 0; // 根据设计稿调整
-  background-color: unset;
+  background-color: transparent; // 明确设置为透明，避免组件默认背景色
+
+  :global(.nut-searchbar) {
+    background-color: transparent !important; // 确保组件容器背景透明
+  }
 
   :global(.nut-searchbar-content) {
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
+    background-color: #ffffff !important; // 明确设置搜索框背景色为白色
+    box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08); // 根据设计稿调整阴影
+    border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿添加边框
+    padding: 8px 12px; // 根据设计稿调整内边距
+    height: 44px; // 根据设计稿设置高度
+    box-sizing: border-box;
   }
 
   .searchBarLeft {
@@ -20,12 +29,13 @@
     position: relative;
     width: 44px;
     height: 44px;
-    border-radius: 50%;
+    border-radius: 999px; // 根据设计稿：完全圆角
-    border: 1px solid #0000000f;
+     border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿调整边框
     background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
+    // box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.08); // 根据设计稿添加阴影
 
     &.active {
       background-color: #000000;

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;
+    line-height: 12px; // 1.2em
-    color: #3c3c4399;
+    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;
+    gap: 4px; // 根据设计稿：gap: 4px
-    width: 65%;
+    flex: 1; // 占据剩余空间
     height: max-content;
     // padding-top: 5px;
   }
 
   .searchContainer {
-    width: 100%;
     display: flex;
     align-items: center;
-    gap: 5.85px;
+    gap: 5.85px; // 根据设计稿调整间距：5.853658676147461px
-    padding: 7.8px;
+    padding: 7.8px; // 根据设计稿调整内边距：7.804878234863281px
-    height: 30px;
+    width: 240px; // 根据设计稿：固定宽度 240px
+    height: 29.27px; // 根据设计稿调整高度：29.27px
+    min-height: 29.27px; // 确保最小高度
     box-sizing: border-box;
     background: #fff;
-    border-radius: 30px;
+    border-radius: 999px; // 根据设计稿：完全圆角
-    border: 0.488px solid rgba(0, 0, 0, 0.06);
+    border: 0.49px solid rgba(0, 0, 0, 0.06); // 根据设计稿调整边框：0.4878048896789551px
-    box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0px 3.9px 46.83px 0px rgba(0, 0, 0, 0.08); // 根据设计稿调整阴影
-    height: 30px;
+    font-family: "PingFang SC"; // 根据设计稿设置字体
-    box-sizing: border-box;
+    font-size: 13.66px; // 根据设计稿调整字体大小：13.658536911010742px
-    font-size: 13.659px;
     font-style: normal;
     font-weight: 400;
-    line-height: 17.561px;
+    line-height: 17.57px; // 1.2857142857142858em ≈ 17.57px
-    flex: 1;
+    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="搜索上球局和场地"
+                placeholder="搜索上海的球局和场地"
-                // clearable={false}
+                className="navbarInput"
+                clearable={false}
                 disabled
                 value={searchValue}
                 onClick={handleInputClick}

src/scss/common.scss

@@ -19,6 +19,8 @@ $color-text-tertiary: rgba(60, 60, 67, 0.3) !default;
 $color-white: #FFFFFF !default;
 $color-background: #FAFAFA !default;
 
+
+
 // 字体大小和行高混入
 @mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) {
   font-family: $font-family-primary;