对接数据

components/SearchInput.vue

@@ -0,0 +1,97 @@
+<script>
+export default {
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			localValue: this.value, // 创建本地副本
+			isInputFocused: false,
+		};
+	},
+	watch: {
+		value(newVal) {
+			this.localValue = newVal; // 监听外部 value 变化并同步到本地
+		}
+	},
+	methods: {
+		handleInput(event) {
+			const newValue = event.target.value;
+			this.localValue = newValue;
+			this.$emit('input', newValue); // 触发 input 事件以支持 v-model
+		},
+		// 新增：处理查询事件
+		handleSearch() {
+			this.$emit('search', this.localValue);
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="input-container" :class="{ focused: isInputFocused || localValue }">
+		<input
+			type="text"
+			:placeholder="placeholder"
+			:value="localValue"
+			@input="handleInput"
+			@focus="isInputFocused = true"
+			@blur="isInputFocused = false"
+			@keydown.enter="handleSearch"
+		>
+		<img
+			alt=""
+			:src="isInputFocused || localValue ? '/search/home_search_s.png' : '/search/home_search.png'"
+			@click="handleSearch"
+		/>
+	</div>
+</template>
+
+
+<style scoped lang="scss">
+/* 添加输入框容器聚焦状态样式 */
+.input-container {
+	position: relative;
+
+	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;
+
+		&::placeholder {
+			color: #ccc;
+		}
+	}
+
+	img {
+		position: absolute;
+		right: 15px;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 54px;
+		height: 40px;
+		pointer-events: none;
+		cursor: pointer;
+	}
+
+	&.focused {
+		background:
+			linear-gradient(white, white) padding-box,
+			linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%) border-box;
+		border-radius: 12px;
+		border: 1px solid transparent;
+	}
+}
+</style>