修复bug

components/SearchInput.vue

@@ -12,20 +12,20 @@ export default {
 	},
 	data() {
 		return {
-			localValue: this.value, // 创建本地副本
+			localValue: this.value,
 			isInputFocused: false,
 		};
 	},
 	watch: {
 		value(newVal) {
-			this.localValue = newVal; // 监听外部 value 变化并同步到本地
+			this.localValue = newVal;
 		}
 	},
 	methods: {
 		handleInput(event) {
 			const newValue = event.target.value;
 			this.localValue = newValue;
-			this.$emit('input', newValue); // 触发 input 事件以支持 v-model
+			this.$emit('input', newValue);
 		},
 		// 新增：处理查询事件
 		handleSearch() {
@@ -36,7 +36,7 @@ export default {
 </script>
 
 <template>
-	<div class="input-container" :class="{ focused: isInputFocused || localValue }">
+	<div class="input-container flex items-center" :class="{ focused: isInputFocused || localValue }">
 		<input
 			type="text"
 			:placeholder="placeholder"
@@ -54,21 +54,24 @@ export default {
 	</div>
 </template>
 
-
 <style scoped lang="scss">
-/* 添加输入框容器聚焦状态样式 */
 .input-container {
-	position: relative;
-
+	height: 60px;
+	padding: 10px 20px;
+	border-radius: 12px;
+	background-color: #fff;
 	input {
-		width: 100%;
-		height: 60px;
-		padding: 0 20px;
-		border-radius: 12px;
-		border: 2px solid transparent;
 		outline: none;
 		font-size: $normal-font-size;
 		transition: border-color 0.3s ease;
+		color: #1e293b;
+		flex: 1;
+		background: #fff !important;
+		border: none;
+		padding: 0;
+		margin: 0;
+		box-shadow: none;
+		height: 40px;
 
 		&::placeholder {
 			color: #ccc;
@@ -76,14 +79,12 @@ export default {
 	}
 
 	img {
-		position: absolute;
-		right: 15px;
-		top: 50%;
-		transform: translateY(-50%);
+		position: relative;
+		right: 0;
 		width: 54px;
 		height: 40px;
-		pointer-events: none;
 		cursor: pointer;
+		margin-left: 10px;
 	}
 
 	&.focused {