cplb.html 7.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/cplb.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="home_container">
        <!--头部-->
        <!--<div class="top">-->
            <!--<div class="top_img">-->
                <!--<img src="images/fh@2x.png" width="100%">-->
            <!--</div>-->
            <!--<div class="top_text">-->
                <!--产品列表-->
            <!--</div>-->
        <!--</div>-->
        <!--主体文字-->
        <div class="main">
            <div class="main_search">
                <!--搜索关键词-->
                <div class="main_search_input">
                    <div class="main_search_input_img">
                    <img src="images/icon-Search@2x.png">
                    </div>
                    <input type="text" placeholder="关键词">
                </div>
                <div class="main_search_menu">
                    <img src="images/me@2x.png" width="100%" height="100%">
                </div>
            </div>
            <div class="main_item" onclick="btn_sub()">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>
            <div class="main_item">
                <div class="main_item_title">
                    标题
                </div>
                <div class="main_item_time">
                    时间
                </div>
            </div>


        </div>

        <!--设置onclick样式-->
        <div class="menu_container" style="display: none">
            <div class="menu_container_items">
                <div class="menu_container_top">
                    <p>产品筛选</p>
                </div>
                <!--产品类型-->
                <div class="menu_container_item">
                <div class="menu_container_item_left">
                    产品类型:
                </div>
                <div class="menu_container_item_right">
                    <select>
                        <option hidden>总结样本</option>
                        <option>2222</option>
                        <option>3333</option>
                    </select>
                </div>

            </div>
                <!--品牌-->
                <div class="menu_container_item">
                    <div class="menu_container_item_left">
                        品牌:
                    </div>
                    <div class="menu_container_item_right">
                        <select>
                            <option hidden>请选择品牌</option>
                            <option>2222</option>
                            <option>3333</option>
                        </select>
                    </div>

                </div>
                <!--旧品牌-->
                <div class="menu_container_item">
                    <div class="menu_container_item_left">
                        旧品牌:
                    </div>
                    <div class="menu_container_item_right">
                        <select>
                            <option hidden>请选择旧品牌</option>
                            <option>1111</option>
                            <option>2222</option>
                        </select>
                    </div>

                </div>
                <!--样本类型-->
                <div class="menu_container_item">
                    <div class="menu_container_item_left">
                        样本类型:
                    </div>
                    <div class="menu_container_item_right">
                        <select>
                            <option hidden>请选择样本类型</option>
                            <option>1111</option>
                            <option>2222</option>
                        </select>
                    </div>

                </div>
                <!--语言-->
                <div class="menu_container_item">
                    <div class="menu_container_item_left">
                        语言:
                    </div>
                    <div class="menu_container_item_right">
                        <select>
                            <option hidden >请选择语言</option>
                            <option>2222</option>
                            <option>3333</option>
                        </select>
                    </div>

                </div>
                <!--重置 and 确定-->
                <div class="menu_container_bottom">
                    <div class="menu_left_reset">
                        重置
                    </div>
                    <div class="menu_right_sub" id="btn_close">
                        确认
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript">
    $(function () {
        //遮罩层 以及内容
        $(".main_search_menu").click(function () {
            $(".menu_container").css("display","block")
            $(this).css("background","#CCCCCC")
        })
        $("#btn_close").click(function () {
            $(".menu_container").css("display","none")
            $(".main_search_menu").css("background","#0A84D9")
        })
    //页面跳转

    })
</script>
<script>
    function btn_sub() {
        window.location.href = "cpgg.html";
    }
</script>
</body>
</html>