refactor: 重构搜索栏使用Vant组件并优化样式

components/m/home-components/SearchBar.vue

@@ -1,64 +1,45 @@
 <template>
   <div class="search-container">
-    <div class="search-input">
-      <span class="icon">🔍</span>
-      <input
-        v-model="searchValue"
-        type="text"
-        class="input"
-        placeholder="搜一搜"
-        @keyup.enter="onSearch"
-      />
-    </div>
-    <button class="search-btn" @click="onSearch">
-      <img src="~/assets/images/info.png" alt="info" />
-    </button>
+    <!-- <span class="icon">🔍</span> -->
+    <!-- <input v-model="searchValue" type="text" class="input" placeholder="搜一搜" @keyup.enter="onSearch" /> -->
+    <van-search
+      v-model="searchValue"
+      shape="round"
+      class="vant-input"
+      background="#fff"
+      placeholder="请输入搜索关键词"
+    />
   </div>
-  
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-const searchValue = ref('')
-function onSearch() {
-  console.log('Search for:', searchValue.value)
-}
+  const searchValue = ref('')
+  function onSearch() {
+    console.log('Search for:', searchValue.value)
+  }
 </script>
 
 <style scoped lang="scss">
-.search-container {
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.search-input {
-  display: flex;
-  align-items: center;
-  background: #efeff1;
-  border-radius: 32rpx;
-  padding: 0 22.11rpx;
-  flex: 1;
-}
-.search-input .icon { margin-right: 8px; }
-.search-input .input {
-  flex: 1;
-  height: 64rpx;
-  border: none;
-  outline: none;
-  background: transparent;
-}
-.search-btn {
-  margin-left: 19.44rpx;
-  width: 43.75rpx;
-  height: 43.75rpx;
-  background-color: #fff;
-  border: none;
-  padding: 0;
-}
-.search-btn img {
-  width: 100%;
-  height: 100%;
-}
+  .search-container {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    .vant-input {
+      flex: 1;
+      padding: 0px !important;
+      /* 设置 Vant Search 内部输入高度 */
+      --van-search-input-height: 48px;
+      :deep(.van-search__content) {
+        min-height: 48px;
+      }
+      :deep(.van-field__control) {
+        height: 48px;
+        line-height: 48px;
+      }
+    }
+  }
 </style>

package.json

@@ -23,6 +23,7 @@
     "pinia": "^3.0.3",
     "postcss-px-to-viewport": "^1.1.1",
     "qrcode.vue": "^3.6.0",
+    "vant": "^4.9.21",
     "vue": "^3.5.18",
     "vue-pdf-embed": "^2.1.3",
     "vue-router": "^4.5.1",

pages/mobile/index.vue

@@ -98,13 +98,15 @@ function navigateTo(category: string) {
   display: flex;
   flex-direction: column;
   background-color: #fff;
+  padding: 21px;
+  box-sizing: border-box;
 }
 
 .banner-section {
-  margin-top: 20rpx;
-  border-radius: 20rpx;
+  margin-top: 25px;
+  border-radius: 20px;
   overflow: hidden;
-  height: 300rpx;
+  height: 285px;
 }
 
 .banner-swiper {
@@ -116,6 +118,7 @@ function navigateTo(category: string) {
   height: 100%;
   img {
     height: 100%;
+    width: 100%;
   }
 }
 
@@ -140,13 +143,13 @@ function navigateTo(category: string) {
 }
 
 .category-grid {
-  margin-top: 40rpx;
+  margin-top: 33px;
 }
 
 .category-row {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 30rpx;
+  margin-bottom: 40px;
 }
 
 .category-item {
@@ -157,8 +160,8 @@ function navigateTo(category: string) {
 }
 
 .category-icon {
-  width: 100rpx;
-  height: 100rpx;
+  width: 78px;
+  height: 78px;
   border-radius: 20rpx;
   display: flex;
   justify-content: center;
@@ -191,7 +194,7 @@ function navigateTo(category: string) {
 }
 
 .category-text {
-  font-size: 24rpx;
-  color: #333;
+  font-size: 25px;
+  color: #191919;
 }
 </style>