diff --git a/UI修改计划.md b/UI修改计划.md index 8afa5d6..6881912 100644 --- a/UI修改计划.md +++ b/UI修改计划.md @@ -58,6 +58,8 @@ buildUrl(ASSET_BASE + 'logo.png') | PingFang SC/ 文件夹(7 个字重 ttf,见 2.3) | fonts/PingFang-Regular.subset.ttf 等(已生成,见 2.3) | 全局字体 | > 中文文件名由 buildUrl/uni.request 自动 URL 编码,三端均可正常访问;只有字体目录用英文名 `fonts/`。 +> +> Figma 导出的小图标(UI-009/0010)为本地静态资源,不上传服务器:`static/icons/products/icon_search.png`(48×48@3x)、`static/icons/products/icon_filter.png`(54×54@3x)。 ### 2.3 字体方案 @@ -213,14 +215,16 @@ uni.loadFontFace({ ### UI-009 产品页 · 搜索栏 · 图标与搜索按钮(P1) - 文件:[SearchBar.vue](pages/products/components/SearchBar.vue) -- 方案: - 1. 替换现有搜索图标为设计稿图标(**注意:切图文件夹内暂无搜索图标,需向设计索取或从设计稿导出**) - 2. 搜索框右侧增加"搜索"按钮,样式按设计稿 +- 方案(按 Figma node-id=1962-143): + 1. emoji 🔍 替换为设计稿导出的 `icon_search.png`(31rpx,Figma 3 倍图 48×48) + 2. 搜索框右侧增加"搜索"按钮:96×54rpx、`#FF6800`、圆角 27rpx、白字 25rpx,距框边缘 4rpx,点击触发搜索 + 3. 搜索框 209×32px → 402×62rpx,`#F5F5F5` 圆角 31rpx;占位文案"搜索产品" `#929292` 25rpx;上下留白 6px→12rpx ### UI-0010 产品页 · 搜索栏 · 筛选被遮挡(P1) -- 文件:[SearchBar.vue](pages/products/components/SearchBar.vue) / [products.vue](pages/products/products.vue) -- 方案:参考设计稿调整搜索栏与筛选按钮布局(层级/宽度/间距),确保筛选按钮完整可见可点 +- 文件:[SearchBar.vue](pages/products/components/SearchBar.vue) / [products.vue](pages/products/products.vue) / [products.css](pages/products/products.css) +- 被遮挡原因:筛选按钮原在搜索行右侧,小程序胶囊按钮恰好覆盖该区域 +- 方案(按设计稿+实际确认):筛选入口与已选标签合并为**同一行**([ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构):`[筛选图标 35rpx] [已选标签 scroll-x 横向滚动不换行] [清除(有标签才显示)]`;搜索行右侧留空避开胶囊;FilterDrawer 弹窗逻辑不变(入口 emit `open` → 父组件 `toggleFilter`) ### UI-0011 产品页 · 国家分类 · 间距(P3) @@ -270,8 +274,8 @@ uni.loadFontFace({ | UI-006 | ✅ 已改 | [WhyChoose.vue](pages/index/components/WhyChoose.vue):标题"为什么选择Inkrecah?"→"为什么选择Inkreach?";卡片去掉 margin-bottom,上下间距统一用 gap 20rpx 与左右一致;区块上下留白对称(96rpx) | | UI-007 | ✅ 已改 | [CompanyIntro.vue](pages/index/components/CompanyIntro.vue) 背景图改用远程切图原图 公司简介背景.png | | UI-008 | ✅ 已改 | CompanyIntro.vue `.phone-text` 字号 23rpx → 31rpx(16号) | -| UI-009 | ⏸ 暂缓 | 等设计/Figma(node-id=1962-143) | -| UI-0010 | ⏸ 暂缓 | 等设计/Figma(node-id=1962-143) | +| UI-009 | ✅ 已改 | [SearchBar.vue](pages/products/components/SearchBar.vue):emoji 🔍 → Figma 导出 icon_search.png(31rpx);新增橙色"搜索"按钮(96×54rpx `#FF6800` 圆角 27rpx,点击/键盘确认均触发搜索);搜索框 402×62rpx `#F5F5F5` 圆角 31rpx,占位"搜索产品" 25rpx `#929292` | +| UI-0010 | ✅ 已改 | 筛选入口从搜索行(被胶囊遮挡)移至商品区顶部;[ActiveFilters.vue](pages/products/components/ActiveFilters.vue) 重构为一行布局:筛选图标 + 已选标签横向滚动(scroll-x 不换行)+ 清除按钮,FilterDrawer 逻辑不变 | | UI-0011 | ✅ 已改 | [CountryBar.vue](pages/products/components/CountryBar.vue):国旗与名称间距 20rpx → 8rpx(4px);标签上下 row-gap 16rpx → 20rpx(+2px) | | UI-0012 | ✅ 已改 | [products.css](pages/products/products.css) 页面背景 + [ProductGrid.vue](pages/products/components/ProductGrid.vue) 右侧内容区背景 → #ECECEC | | UI-0013 | ✅ 已改 | tab_product_gray/orange.png 由 57×57 放大至 72×72(Pillow LANCZOS),与 home 图标一致 | diff --git a/pages/products/components/ActiveFilters.vue b/pages/products/components/ActiveFilters.vue index e83e33d..13fbafb 100644 --- a/pages/products/components/ActiveFilters.vue +++ b/pages/products/components/ActiveFilters.vue @@ -1,11 +1,27 @@ @@ -19,7 +35,7 @@ export default { } }, mounted() { - // 首次测量(可能为 0,因为 v-if 可能为 false) + // 首次测量自身高度给父组件布局用 this.$nextTick(() => this.emitHeight()) }, watch: { @@ -30,11 +46,6 @@ export default { }, methods: { emitHeight() { - // v-if 为 false 时 #activeFilters 不存在,返回 0 - if (!this.list || this.list.length === 0) { - this.$emit('height-change', 0) - return - } const query = uni.createSelectorQuery().in(this) query.select('#activeFilters').boundingClientRect() query.exec((res) => { @@ -45,6 +56,9 @@ export default { } }) }, + onOpen() { + this.$emit('open') + }, onRemove(key) { this.$emit('remove', key) }, @@ -56,26 +70,48 @@ export default { diff --git a/pages/products/products.vue b/pages/products/products.vue index 07d8c2c..2e07daf 100644 --- a/pages/products/products.vue +++ b/pages/products/products.vue @@ -6,7 +6,7 @@ :keyword="searchKeyword" @input="onSearchInput" @blur="onSearchBlur" - @filter="toggleFilter" + @search="onSearchBlur" @height-change="onSearchBarHeight" /> @@ -29,9 +29,10 @@ - +