feat: 添加移动端页面组件和图片资源

components/m/home-components/SearchBar.vue

@@ -0,0 +1,64 @@
+<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>
+  </div>
+  
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+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%;
+}
+</style>