From 022aecc93de4fcd74c6e5b37b3e23a1b1632cbe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Mon, 10 Nov 2025 16:34:14 +0800 Subject: [PATCH] 1 --- src/components/DistanceQuickFilter/index.scss | 8 +- src/components/SearchBar/index.module.scss | 22 ++++-- src/container/listCustomNavbar/index.scss | 74 ++++++++++++++----- src/container/listCustomNavbar/index.tsx | 5 +- src/scss/common.scss | 2 + 5 files changed, 80 insertions(+), 31 deletions(-) diff --git a/src/components/DistanceQuickFilter/index.scss b/src/components/DistanceQuickFilter/index.scss index 1f5b485..2e5faeb 100644 --- a/src/components/DistanceQuickFilter/index.scss +++ b/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 { diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index 9d656f5..2cf1c57 100644 --- a/src/components/SearchBar/index.module.scss +++ b/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; - background-color: unset; + --nutui-searchbar-padding: 0; // 根据设计稿调整 + 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: 1px solid #0000000f; + border-radius: 999px; // 根据设计稿：完全圆角 + 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; diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss index 67dbd65..762118e 100644 --- a/src/container/listCustomNavbar/index.scss +++ b/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 { /* 初始状态：透明且稍微偏移 */ diff --git a/src/container/listCustomNavbar/index.tsx b/src/container/listCustomNavbar/index.tsx index 345d81a..408c470 100644 --- a/src/container/listCustomNavbar/index.tsx +++ b/src/container/listCustomNavbar/index.tsx @@ -188,8 +188,9 @@ const ListHeader = (props: IProps) => { src={img.ICON_LIST_SEARCH_SEARCH} />