bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-11-10 16:34:14 +08:00
parent e7b8aab80c
commit 022aecc93d
5 changed files with 80 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/DistanceQuickFilter/index.scss
View File

@@ -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 {

22
src/components/SearchBar/index.module.scss
View File

@@ -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;

74
src/container/listCustomNavbar/index.scss
View File

@@ -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 {
/* 初始状态：透明且稍微偏移 */

5
src/container/listCustomNavbar/index.tsx
View File

@@ -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}

2
src/scss/common.scss
View File

@@ -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;