审查视图

乔爽 authored
1 2 3 4 5 6 7 8
<!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">
乔爽 authored
9
    <link rel="stylesheet" type="text/css" href="css/dropload.css">
乔爽 authored
10 11 12 13 14 15
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="home_container">
乔爽 authored
16
乔爽 authored
17 18 19
        <!--主体文字-->
        <div class="main">
            <div class="main_search">
20 21
                <!--搜索按钮-->
                <button class="main_search_button">搜索</button>
乔爽 authored
22 23 24 25 26 27 28 29
                <!--搜索关键词-->
                <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">
乔爽 authored
30
                    <img src="images/me@2x.png" >
乔爽 authored
31 32
                </div>
            </div>
乔爽 authored
33 34

            <div class="main_items">
乔爽 authored
35 36
            <div class="main_item" onclick="btn_sub()">
                <div class="main_item_title">
37
                    标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
38 39 40 41
                    标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                    标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                    标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
                    标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
乔爽 authored
42 43
                </div>
                <div class="main_item_time">
44
                    2019.2.23
乔爽 authored
45 46
                </div>
            </div>
乔爽 authored
47
乔爽 authored
48
乔爽 authored
49
            </div>
乔爽 authored
50 51 52 53

        </div>

        <!--设置onclick样式-->
乔爽 authored
54
        <div class="menu_container btn_return" style="display: none" >
乔爽 authored
55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
            <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>
乔爽 authored
144 145
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
乔爽 authored
146 147 148 149 150 151 152 153 154 155 156 157
<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")
        })
    //页面跳转
乔爽 authored
158 159 160 161 162 163 164 165
        $(".btn_return").click(function () {
            $(this).css("display","none")
            $(".main_search_menu").css("background","#0A84D9")
        })

        $(".menu_container_items").click(function(){
            window.event.stopPropagation()
        })
乔爽 authored
166 167 168 169 170 171 172

    })
</script>
<script>
    function btn_sub() {
        window.location.href = "cpgg.html";
    }
乔爽 authored
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246

    $(document).ready(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 3;
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update">↑释放更新</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            loadDownFn: function (me) {
                page++;
                // 拼接HTML
                var result = '';
                var s = "";
                var show = "";
                var list_compressor = "";
                var list_answer = "";
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        var arrLen = data.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {
                                result += '<div class="main_item" onclick="btn_sub()">\n' +
                                    '                <div class="main_item_title">\n' +
                                    '                    标题\n' +
                                    '                </div>\n' +
                                    '                <div class="main_item_time">\n' +
                                    '                    时间\n' +
                                    '                </div>\n' +
                                    '            </div>'


                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试,延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面,放到最后面
                            $('.main_items').append(result);
                            // 每次数据插入,必须重置
                            me.resetload();
                        }, 500);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });

    })
乔爽 authored
247 248 249
</script>
</body>
</html>