实现ui问题

pages/products/components/ActiveFilters.vue

@@ -1,11 +1,27 @@
 <template>
-  <!-- 已选筛选标签 - Figma 1519:250 圆角 60px -->
-  <view class="active-filters" id="activeFilters" v-if="list.length > 0">
-    <view class="active-filter-tag" v-for="(item, index) in list" :key="index">
-      <text class="filter-text">{{ item.label }}</text>
-      <text class="filter-remove" @tap="onRemove(item.key)">×</text>
+  <!-- 筛选条件条：[筛选图标] [已选标签横向滚动] [清除] 同一行，防换行 -->
+  <view class="active-filters" id="activeFilters">
+    <!-- 筛选入口：打开筛选抽屉 -->
+    <view class="filter-entry" @tap="onOpen">
+      <image
+        class="filter-entry-icon"
+        src="/static/icons/products/icon_filter.png"
+        mode="aspectFit"
+      />
     </view>
-    <view class="clear-all" @tap="onClearAll">清除全部</view>
+
+    <!-- 已选标签：横向滚动，不换行 -->
+    <scroll-view class="tags-scroll" scroll-x>
+      <view class="tags-inner">
+        <view class="active-filter-tag" v-for="(item, index) in list" :key="index">
+          <text class="filter-text">{{ item.label }}</text>
+          <text class="filter-remove" @tap="onRemove(item.key)">×</text>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 清除：有标签时才显示 -->
+    <view class="clear-all" v-if="list.length > 0" @tap="onClearAll">清除</view>
   </view>
 </template>
 
@@ -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 {
 </script>
 
 <style scoped>
-/* 顶部筛选条 - 白底,不占高度时隐藏 */
+/* 顶部筛选条 - 白底，筛选图标 + 横向滚动标签 + 清除，同一行 */
 .active-filters {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 16rpx;
-  padding: 20rpx 20rpx;
+  padding: 16rpx 20rpx;
   background: #ffffff;
   border-bottom: 1rpx solid #eeeeee;
 }
-/* 单个标签 - padding 6px 10px 圆角 60px */
-.active-filter-tag {
+/* 筛选入口图标（设计稿 18x18px → 35rpx） */
+.filter-entry {
   display: flex;
   align-items: center;
+  padding: 8rpx 16rpx 8rpx 0;
+  flex-shrink: 0;
+}
+.filter-entry-icon {
+  width: 35rpx;
+  height: 35rpx;
+}
+/* 标签区：横向滚动不换行 */
+.tags-scroll {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+}
+.tags-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 4rpx 0;
+}
+/* 单个标签 - padding 6px 10px 圆角 60px，不换行 */
+.active-filter-tag {
+  display: inline-flex;
+  align-items: center;
   gap: 8rpx;
   padding: 12rpx 20rpx;
   background: #ffffff;
   border: 1rpx solid #ff6800;
   border-radius: 60rpx;
   line-height: 1.2;
+  flex-shrink: 0;
 }
 /* 文字 12px Medium 橙色 */
 .filter-text {
@@ -88,7 +124,8 @@ export default {
   color: #ff6800;
 }
 .clear-all {
-  margin-left: auto;
+  padding-left: 16rpx;
+  flex-shrink: 0;
   font-size: 24rpx;
   color: #999999;
 }

pages/products/components/SearchBar.vue

@@ -2,19 +2,17 @@
   <!-- 搜索栏 -->
   <view class="search-bar" id="searchBar" :style="{ paddingTop: statusBarHeight + 'px' }">
     <view class="search-input-wrap">
-      <text class="search-icon">🔍</text>
+      <image class="search-icon" src="/static/icons/products/icon_search.png" mode="aspectFit" />
       <input
         class="search-input"
-        placeholder="搜索商品"
+        placeholder="搜索产品"
         placeholder-class="search-placeholder"
         :value="keyword"
         @input="onInput"
         @blur="onBlur"
+        @confirm="onConfirm"
       />
-    </view>
-    <view class="filter-btn" @tap="onFilter">
-      <text class="filter-icon">⚙</text>
-      <text class="filter-text">筛选</text>
+      <view class="search-btn" @tap="onSearch">搜索</view>
     </view>
   </view>
 </template>
@@ -61,56 +59,60 @@ export default {
     onBlur() {
       this.$emit('blur')
     },
-    onFilter() {
-      this.$emit('filter')
+    onConfirm() {
+      // 键盘确认键与搜索按钮同一行为
+      this.$emit('blur')
+    },
+    onSearch() {
+      this.$emit('search')
     }
   }
 }
 </script>
 
 <style scoped>
+/* 设计稿：左右留白 10px(20rpx)，上下留白 6px(12rpx)，搜索框 209x32px(402x62rpx) */
 .search-bar {
-  display: flex;
-  align-items: center;
-  gap: 20rpx;
-  padding: 20rpx 32rpx;
+  padding: 12rpx 20rpx;
   background: #ffffff;
-  border-bottom: 2rpx solid #f5f5f5;
   box-sizing: border-box;
 }
 .search-input-wrap {
-  flex: 1;
   display: flex;
   align-items: center;
-  height: 72rpx;
-  padding: 0 24rpx;
+  width: 402rpx;
+  height: 62rpx;
+  padding: 0 4rpx 0 21rpx;
   background: #f5f5f5;
-  border-radius: 36rpx;
+  border-radius: 31rpx;
+  box-sizing: border-box;
 }
 .search-icon {
-  font-size: 28rpx;
-  margin-right: 12rpx;
+  width: 31rpx;
+  height: 31rpx;
+  flex-shrink: 0;
+  margin-right: 8rpx;
 }
 .search-input {
   flex: 1;
-  font-size: 26rpx;
+  min-width: 0;
+  font-size: 25rpx;
   color: #333333;
 }
 .search-placeholder {
-  color: #999999;
+  color: #929292;
 }
-.filter-btn {
+/* 设计稿：搜索按钮 50x28px(96x54rpx)，#FF6800，圆角 14px(27rpx)，距边缘 2px(4rpx) */
+.search-btn {
   display: flex;
   align-items: center;
-  gap: 8rpx;
-  padding: 12rpx 20rpx;
-  font-size: 26rpx;
-  color: #666666;
-}
-.filter-icon {
-  font-size: 28rpx;
-}
-.filter-text {
-  font-size: 26rpx;
+  justify-content: center;
+  width: 96rpx;
+  height: 54rpx;
+  flex-shrink: 0;
+  background: #ff6800;
+  border-radius: 27rpx;
+  font-size: 25rpx;
+  color: #ffffff;
 }
 </style>