• 搜索页布局


    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;
            }
        }
    }
    
  • 相关阅读:
    正确使用日志的10个技巧
    为什么使用 SLF4J 而不是 Log4J 来做 Java 日志
    将 MyBatis3 的支持添加到 Spring
    Gson 解析教程
    JSON解析工具比较,主要GSON和FastJSON
    高性能JSON框架之FastJson的简单使用
    Overriding managed version XX for YY
    Access restriction 问题解决
    delphi 判断MDI窗体的子窗体是否存在
    delphi 解决RichViewEdit乱码问题
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/12185646.html
Copyright © 2020-2023  润新知