实现ui问题

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>