用vue实现京东移动端写一个顶部搜索框

可以使用以下代码实现：

<template>
<div class="search-bar">
<div class="search-input">
<input type="text" placeholder="搜索商品" v-model="searchText" @keyup.enter="search">
</div>
<div class="search-btn" @click="search">
<i class="iconfont icon-sousuo"></i>
</div>
</div>
</template>

<script>
export default {
data() {
return {
searchText: ''
}
},
methods: {
search() {
// 处理搜索逻辑
}
}
}
</script>

<style scoped>
.search-bar {
display: flex;
align-items: center;
height: 44px;
background-color: #f5f5f5;
padding: 0 10px;
}

.search-input {
flex: 1;
height: 30px;
background-color: #fff;
border-radius: 15px;
padding: 0 10px;
display: flex;
align-items: center;
}

.search-input input {
flex: 1;
height: 100%;
border: none;
outline: none;
font-size: 14px;
}

.search-btn {
width: 44px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.search-btn i {
font-size: 20px;
color: #999;
}
</style>