如果你是一个前端开发工程师，你需要在vue项目中实现一个瓜子二手车首页顶部的搜索框，请写出代码

好的，下面是一个简单的Vue组件实现瓜子二手车首页顶部的搜索框：

<template>
  <div class="search-box">
    <input type="text" v-model="searchText" placeholder="请输入搜索关键词"/>
    <button @click="handleSearch">搜索</button>
  </div>
</template>

<script>
export default {
  name: 'SearchBox',
  data () {
    return {
      searchText: ''
    }
  },
  methods: {
    handleSearch () {
      // 触发搜索事件，向父组件发送搜索请求
      this.$emit('search', this.searchText)
    }
  }
}
</script>

<style scoped>
.search-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background-color: #f5f5f5;
}

.search-box input {
  flex: 1;
  height: 30px;
  margin-right: 10px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
}

.search-box button {
  height: 30px;
  padding: 0 20px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 14px;
  background-color: #ff5722;
  color: #fff;
}
</style>

在父组件中，可以使用该组件，并监听search事件，处理搜索请求：

<template>
  <div>
    <SearchBox @search="handleSearch"/>
    <!-- 展示搜索结果 -->
    <div v-if="searchResult.length">
      <h3>搜索结果</h3>
      <ul>
        <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue'

export default {
  name: 'HomePage',
  components: {
    SearchBox
  },
  data () {
    return {
      searchResult: []
    }
  },
  methods: {
    handleSearch (keyword) {
      // 处理搜索请求，获取搜索结果并更新searchResult
      this.searchResult = [
        { id: 1, name: '搜索结果1' },
        { id: 2, name: '搜索结果2' },
        { id: 3, name: '搜索结果3' }
      ]
    }
  }
}
</script>