1

src/components/index/Search.vue

 <template>
   <view class="search">
-    <wd-icon name="thin-arrow-left" class="icon"></wd-icon>
+    <image
+      @tap="test2"
+      class="arrow"
+      src="../../static/arrow.png"
+      mode="aspectFit|aspectFill|widthFix"
+    />
     <slot></slot>
-    <view class="searchBox"><input type="text" :value="test" /></view>
+    <view class="searchBox">
+      <image
+        class="magnifyingGlass"
+        src="../../static/magnifyingGlass.png"
+        mode="aspectFit|aspectFill|widthFix"
+      />
+      <input type="text" :value="test" class="text" />
+    </view>
   </view>
 </template>
 
@@ -22,6 +34,12 @@ onMounted(() => {
     },
   });
 });
+
+const test2 = () => {
+  xma.navigateTo({
+    url: '/page/index/index',
+  });
+};
 function toUIComponentsDoc() {
   window.open('https://wot-design-uni.netlify.app/component/button.html');
 }
@@ -42,9 +60,10 @@ function onHandleClick() {
   margin-top: 44rpx;
   display: flex;
   align-items: center;
-  .icon {
-    width: 22rpx;
-    height: 22rpx;
+  padding-left: 20rpx;
+  .arrow {
+    width: 15rpx;
+    height: 24rpx;
   }
   .searchBox {
     opacity: 1;
@@ -52,6 +71,18 @@ function onHandleClick() {
     height: 56rpx;
     background: #ffffff;
     border-radius: 28rpx 28rpx 28rpx 28rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 20rpx;
+    margin-left: 20rpx;
+    .magnifyingGlass {
+      width: 26rpx;
+      height: 26rpx;
+    }
+    .text {
+      margin-left: 10rpx;
+      font-size: 24rpx;
+    }
   }
 }
 </style>

src/pages/index/index.vue

@@ -36,7 +36,8 @@ function onHandleClick() {
     overflow: hidden;
     .food {
       width: 178rpx;
-      height: 52rpx;
+      height: 45rpx;
+      margin-left: 25rpx;
     }
   }
 }