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

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 {

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;