• 搜索页布局


    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;
            }
        }
    }
    
  • 相关阅读:
    [转]一致性hash算法
    [转]算法的时间复杂度和空间复杂度详解
    [转]B树(多向平衡查找树)详解
    spring中ApplicationContextAware接口描述
    [转]web.xml中<url-pattern>详解
    [转]linux中vim命令
    [转]Java GC的原理
    [转]浅谈UML的概念和模型之UML九种图
    Jmeter做读取csv接口测试
    IDLE崩溃:IDLE's subprocess didn't make connection. Either IDLE can't start a...
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12185646.html
Copyright © 2020-2023  润新知