html
<view class="search">
<view class="search-container">
<view class="search-left">
<image class="search-image" src="/images/index/search.png" />
<input class="search-input" placeholder="请输入你喜欢的商品" />
</view>
<view class="search-btn">搜索</view>
</view>
</view>
<view class="history">
<view class="history-title">
<view class="history-title-left">
搜索历史
</view>
<view class="history-title-right">
清除历史
</view>
</view>
<view class="history-content">
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
<view class="history-item">
手机
</view>
<view class="history-item">
办公室百叶窗
</view>
<view class="history-item">
垃圾袋
</view>
</view>
</view>
<view class="hot">
<view class="hot-title">
搜索历史
</view>
<view class="hot-content">
<view class="hot-item">
手机
</view>
<view class="hot-item">
办公室百叶窗
</view>
<view class="hot-item">
垃圾袋
</view>
</view>
</view>
css
.search {
height: 124rpx;
background-color: #F7F7F7;
display: flex;
justify-content: center;
.search-container {
margin-top: 30rpx;
height: 64rpx;
// border:1px solid red;
margin-left:22rpx;
margin-right:33rpx;
695rpx;
display: flex;
.search-left {
display: flex;
background-color: #FFFFFF;
border-radius: 32rpx;
.search-input {
// border:1px solid blue;
height: 64rpx;
line-height: 64rpx;
font-size: 28rpx;
500rpx;
}
.search-image {
34rpx;
height: 34rpx;
margin-left: 30rpx;
margin-top:15rpx;
margin-right: 15rpx;
}
}
.search-btn {
font-size: 32rpx;
line-height: 64rpx;
font-weight: bold;
color:#313131;
text-align: center;
margin-left:30rpx;
}
}
}
.history {
margin:0 auto;
710rpx;
margin-top:30rpx;
.history-title {
display: flex;
justify-content: space-between;
.history-title-left {
font-size: 28rpx;
color:#313131;
}
.history-title-right {
font-size: 28rpx;
color:#AAAAAA;
}
margin-bottom: 15rpx;
}
.history-content {
display: flex;
flex-wrap: wrap;
overflow: hidden;
.history-item {
margin-top:15rpx;
margin-left:10rpx;
margin-right:10rpx;
padding-left:20rpx;
padding-right: 20rpx;
height: 48rpx;
background-color: #eeeeee;
border-radius: 24rpx;
font-size: 24rpx;
line-height: 48rpx;
}
}
}
.hot {
margin:0 auto;
710rpx;
margin-top:50rpx;
.hot-title {
display: flex;
justify-content: space-between;
font-size: 28rpx;
color:#313131;
margin-bottom: 15rpx;
}
.hot-content {
display: flex;
flex-wrap: wrap;
overflow: hidden;
.hot-item {
margin-top:15rpx;
margin-left:10rpx;
margin-right:10rpx;
padding-left:20rpx;
padding-right: 20rpx;
height: 48rpx;
background-color: #eeeeee;
border-radius: 24rpx;
font-size: 24rpx;
line-height: 48rpx;
}
}
}