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/3] 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} /> Date: Mon, 10 Nov 2025 16:40:26 +0800 Subject: [PATCH 2/3] 1 --- src/components/SearchBar/index.module.scss | 4 ++-- src/container/listCustomNavbar/index.scss | 5 +++-- src/game_pages/list/index.module.scss | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index 2cf1c57..2f413d6 100644 --- a/src/components/SearchBar/index.module.scss +++ b/src/components/SearchBar/index.module.scss @@ -13,8 +13,8 @@ :global(.nut-searchbar-content) { 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); // 根据设计稿添加边框 + // 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; diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss index 762118e..5c165ef 100644 --- a/src/container/listCustomNavbar/index.scss +++ b/src/container/listCustomNavbar/index.scss @@ -86,7 +86,9 @@ align-items: center; gap: 5.85px; // 根据设计稿调整间距：5.853658676147461px padding: 7.8px; // 根据设计稿调整内边距：7.804878234863281px - width: 240px; // 根据设计稿：固定宽度 240px + flex: 1; // 响应式：占据剩余空间，适配不同屏幕 + max-width: 61%; // 根据设计稿：最大宽度 240px（大屏幕限制） + min-width: 0; // 允许在小屏幕上缩小 height: 29.27px; // 根据设计稿调整高度：29.27px min-height: 29.27px; // 确保最小高度 box-sizing: border-box; @@ -100,7 +102,6 @@ font-weight: 400; line-height: 17.57px; // 1.2857142857142858em ≈ 17.57px letter-spacing: -0.22px; // -1.6428571734045228% of 13.66px - flex-shrink: 0; // 防止搜索框被压缩 .searchIcon { flex-shrink: 0; // 防止图标被压缩 diff --git a/src/game_pages/list/index.module.scss b/src/game_pages/list/index.module.scss index 3c9f053..af11bda 100644 --- a/src/game_pages/list/index.module.scss +++ b/src/game_pages/list/index.module.scss @@ -91,7 +91,7 @@ } .listTopSearchWrapper { - background-color: #fafafa; + // background-color: #fafafa; // 使用 margin-top 负值来控制可见性，保持元素高度不变，筛选项位置固定 transition: margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease-out; From cf73de080efa9863566ae19c0e944eada51dcf06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Mon, 10 Nov 2025 16:52:23 +0800 Subject: [PATCH 3/3] 1 --- src/components/SearchBar/index.module.scss | 4 ++-- src/container/listCustomNavbar/index.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index 2f413d6..d9f9b04 100644 --- a/src/components/SearchBar/index.module.scss +++ b/src/components/SearchBar/index.module.scss @@ -14,7 +14,7 @@ :global(.nut-searchbar-content) { 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); // 根据设计稿添加边框 + border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿添加边框 padding: 8px 12px; // 根据设计稿调整内边距 height: 44px; // 根据设计稿设置高度 box-sizing: border-box; @@ -30,7 +30,7 @@ width: 44px; height: 44px; border-radius: 999px; // 根据设计稿：完全圆角 - border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿调整边框 + border: 0.5px solid rgba(0, 0, 0, 0.06); // 根据设计稿调整边框 background-color: #ffffff; display: flex; align-items: center; diff --git a/src/container/listCustomNavbar/index.scss b/src/container/listCustomNavbar/index.scss index 5c165ef..fc1bbda 100644 --- a/src/container/listCustomNavbar/index.scss +++ b/src/container/listCustomNavbar/index.scss @@ -87,7 +87,7 @@ gap: 5.85px; // 根据设计稿调整间距：5.853658676147461px padding: 7.8px; // 根据设计稿调整内边距：7.804878234863281px flex: 1; // 响应式：占据剩余空间，适配不同屏幕 - max-width: 61%; // 根据设计稿：最大宽度 240px（大屏幕限制） + max-width: 55%; // 根据设计稿：最大宽度 240px（大屏幕限制） min-width: 0; // 允许在小屏幕上缩小 height: 29.27px; // 根据设计稿调整高度：29.27px min-height: 29.27px; // 确保最小高度 @@ -95,7 +95,7 @@ background: #fff; 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); // 根据设计稿调整阴影 + // 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;