搜索页布局

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;
        width: 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;
                width: 500rpx;
            }
            .search-image {
                width: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;
    width: 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;
    width: 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;
        }
    }
}