搜索栏样式更新

pages/index/index.json

@@ -3,6 +3,7 @@
     "van-button": "@vant/weapp/button",
     "van-search": "@vant/weapp/search/index",
     "van-row": "@vant/weapp/row/index",
-    "van-col": "@vant/weapp/col/index"
+    "van-col": "@vant/weapp/col/index",
+    "van-icon": "@vant/weapp/icon/index"
   }
 }

pages/index/index.wxml

@@ -1,8 +1,10 @@
-<view class="index">
-  <!-- 搜索栏 -->
-  <van-search value="{{ value }}" placeholder="请输入商家名称" use-action-slot bind:change="onChange" bind:search="onSearch">
-    <view slot="action" bind:tap="onClick">搜索</view>
-  </van-search>
+<!-- 搜索框 -->
+<view class="search_container">
+  <view class="inputContent">
+    <van-icon name="search" />
+    <input type="text" bindinput="onInput" bindconfirm="onInput" placeholder="搜索商品名称" />
+    <button bindtap="onSearch" bintap="onSearch">搜索</button>
+  </view>
 
   <!-- 主页轮播图 -->
   <swiper class="swiper" indicator-dots indicator-color="#CBCBCB" indicator-active-color="#F9872C" autoplay interval="2000" circular>
@@ -15,5 +17,6 @@
     </swiper-item>
   </swiper>
 
-<!-- 商品标签页 -->
+  <!-- 商品标签页 -->
+ 
 </view>

pages/index/index.wxss

@@ -1,6 +1,38 @@
+/* 搜索框样式 */
+.inputContent {
+  width: 95%;
+  margin: 0 auto;
+  height: 80rpx;
+  background-color: #F4F4F4;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 60rpx;
+
+}
+
+/* 搜索输入框样式 */
+.inputContent input {
+  font-size: 28rpx;
+  margin-left: -90rpx;
+}
+
+/* 搜索按钮样式 */
+.inputContent button {
+  width: 170rpx;
+  height: 60rpx;
+  border-radius: 60rpx;
+  font-size: 28rpx;
+  color: white;
+  line-height: 60rpx;
+  background-color: #F9872C;
+  margin-left: 0;
+  margin-right: -30rpx;
+}
+
 /* 轮播图样式 */
 .swiper {
-  height: 270rpx ;
+  height: 270rpx;
   margin: 20rpx;
   border-radius: 10px;
 }
@@ -10,4 +42,3 @@
   width: 100%;
   height: 100%;
 }
-