xwbd.html 13.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<title>新闻报道</title>-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1043230_hcei2fa3b4q.css">
    <link rel="stylesheet" type="text/css" href="css/xwbd.css">
    <link rel="stylesheet" type="text/css" href="css/dropload.css">
    <script src="js/base.js"></script>

    <style>
        .iconfont{
            font-size: 0.38rem;
        }
        .icon-zuo{
            color: #959595;
            font-size: 0.38rem;
        }
        .icon-iconfont-edu12{
            color: #959595;
            font-size: 0.5rem;
            position: relative;
        }
        .icon-shangsanjiao{
            height: 0.5rem;
            font-size: 0.6rem;
            margin-left: 1.2rem;
            position: absolute;
            top: -0.4rem;
            color: #F4F5F9;
        }
        .margin_lef{
            margin-left: 0.2rem;
        }
        .menu{
            /*display: flex;*/
            position: absolute;
            top: 0.8rem;
            left: -1.4rem;
        }
    </style>
</head>
<body>
<div class="container">
    <!--头部信息-->
    <div class="head">
        <!--左图标-->
        <div class="iconfont icon-zuo">

        </div>
        <!--新闻报道-->
        <div class="head_new">
            新闻报道
        </div>
        <!--右菜单-->
        <div class="iconfont icon-iconfont-edu12">
            <!--菜单栏功能-->
            <div class="menu">

                <!--菜单列表-->
                <div class="head_menu">
                    <!--箭头-->
                    <div class="iconfont icon-shangsanjiao"></div>
                    <!--菜单-->
                    <div class="head_menu_item index">
                        <!--图标-->
                        <div class="iconfont icon-zhuye2 margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            首页
                        </div>
                    </div>
                    <div class="head_menu_item ">
                        <!--图标-->
                        <div class="iconfont icon-fangzi margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            关于展品
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-fangkuai margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            展品范围
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-diqiu1 margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            展商名录
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-zuanshi margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            参展申请
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-lanzi margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            观众名录
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-gouwuche1 margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            参观登记
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-luyin margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            论坛活动
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-ic_language_px margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            新闻报道
                        </div>
                    </div>
                    <div class="head_menu_item">
                        <!--图标-->
                        <div class="iconfont icon-shuben margin_lef"></div>
                        <!--文字-->
                        <div class="head_menu_item_text">
                            商旅服务
                        </div>
                    </div>
                </div>
            </div>
        </div>

        </div>

    <!--条目信息-->
    <div class="items">
        <div class="items_box">
            <div class="item">
                <!--左边-->
                <div class="item_left">
                    <img src="images/10.png">
                </div>
                <!--中部-->
                <div class="item_mid">
                    <p class="item_mid_big">

                        智能时代"云"发展"新模式"驻
                        占天津

                    </p>
                    <p class="item_mid_small">
                        前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
                    </p>
                </div>
                <!--右边-->
                <div class="item_right ">

                    <p>12月</p>
                    <p>25日</p>
                    <p>星期二</p>
                </div>
            </div>
            <div class="item">
                <!--左边-->
                <div class="item_left">
                    <img src="images/10.png">
                </div>
                <!--中部-->
                <div class="item_mid">
                    <p class="item_mid_big">

                        智能时代"云"发展"新模式"驻
                        占天津

                    </p>
                    <p class="item_mid_small">
                        前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......
                    </p>
                </div>
                <!--右边-->
                <div class="item_right color_gray">

                    <p>12月</p>
                    <p>25日</p>
                    <p>星期二</p>
                </div>
            </div>
        </div>
    </div>


    <!--底部菜单-->
    <div class="bottom_menu">
        <div class="bottom_menu_index index">
            <!--上图标-->
            <div class="iconfont icon-zhuye2"></div>
            <!--下文字-->
            <div class="bottom_menu_index_text">
                首页
            </div>
        </div>
        <div class="bottom_menu_index tel">
            <!--上图标-->
            <div class="iconfont icon-dianhua-copy"></div>
            <!--下文字-->
            <div class="bottom_menu_index_text">
                电话咨询
            </div>
        </div>
        <div class="bottom_menu_index exhibition">
            <!--上图标-->
            <div class="iconfont icon-user-address"></div>
            <!--下文字-->
            <div class="bottom_menu_index_text">
                网上展厅
            </div>
        </div>
        <div class="bottom_menu_index personal">
            <!--上图标-->
            <div class="iconfont icon-gerenzhongxin"></div>
            <!--下文字-->
            <div class="bottom_menu_index_text">
                个人中心
            </div>
        </div>
    </div>

</div>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>

<script>
    //底部四个按钮
    $('.index').click(function () {
        window.location.href = "index.html"
    })
    $('.tel').click(function () {
        window.location.href = "index.html"
    })
    $('.exhibition').click(function () {
        window.location.href = "wszt.html"
    })
    $('.personal').click(function () {
        window.location.href = "personal_center.html"
    })

    //返回功能
    $('.icon-zuo').click(function () {
        window.history.back();
    })

    $('.item').click(function () {
        window.location.href  = "nrxq.html";
    })
    //菜单功能
    $(document).ready(function () {


        // 页数
        var page = 1;
        // 每次循环展示10个
        var size = 10;
        $('.items').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="item">\n' +
                                    '            <!--左边-->\n' +
                                    '            <div class="item_left">\n' +
                                    '                <img src="images/10.png">\n' +
                                    '            </div>\n' +
                                    '            <!--中部-->\n' +
                                    '            <div class="item_mid">\n' +
                                    '                <p class="item_mid_big">\n' +
                                    '\n' +
                                    '                    智能时代"云"发展"新模式"驻\n' +
                                    '                    占天津\n' +
                                    '\n' +
                                    '                </p>\n' +
                                    '                <p class="item_mid_small">\n' +
                                    '                    前几日,百度云在上海召开了主题为“Inception引领智能变革”的2018 ......\n' +
                                    '                </p>\n' +
                                    '            </div>\n' +
                                    '            <!--右边-->\n' +
                                    '            <div class="item_right color_gray">\n' +
                                    '\n' +
                                    '                <p>12月</p>\n' +
                                    '                <p>25日</p>\n' +
                                    '                <p>星期二</p>\n' +
                                    '            </div>\n' +
                                    '        </div>'




                            }

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

    })
</script>

</html>