index.wxml
<!--搜索框部分-->
<view class="search">
<view class="search-btn">🔍</view>
<input type="text" placeholder="请输入搜索内容" bindinput="onSearchInput" value="{{search}}" />
<view class="search_btn" bindtap="onSearch">搜索</view>
</view>
index.wxss
/* 搜索框*/
.search {
display: flex;
align-items: center;
height: 90rpx;
width: 720rpx;
justify-content: space-between;
padding: 0 20rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
background-color: blue;
opacity: 0.8;
border-radius: 40rpx;
}
.search input {
width: 480rpx;
}
.search .search_btn {
height: 55rpx;
width: 110rpx;
border-radius: 55rpx;
background-color: blue;
color: #ffffff;
text-align: center;
line-height: 55rpx;
cursor: pointer;
}
来源：https://blog.csdn.net/m0_59704905/article/details/138454173