zxdt.html 11.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最新动态</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1011505_vdlnckj4lm.css">
    <link rel="stylesheet" type="text/css" href="../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/zxdt.css">
    <link rel="stylesheet" type="text/css" href="../css/dropload.css">


    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <style>
        .menu_default{
            position: fixed;
            top: 0.88rem;
            left: 0;
            z-index: 10;
            background: #fff;
        }
        .menu_item{
            display: flex;
            justify-content: space-between;
            height: 0.79rem;
            align-items: center;
            border-bottom: 1px solid #e6e6e6;
            margin: 0 0.32rem;
        }
        .menu_item:first-child{
            margin-top: 0.24rem;
        }
        .menu_item:last-child{
            border: none;
        }
        .menu_text{
            font-size: 0.26rem;
            margin-left: 0.14rem;
        }
        .icon-jinru{
            color: #666666;
        }
        .icon-caidan{
            font-size: 0.6rem;
            margin-left: 0.3rem;
        }
        .icon-guanbi{
            margin-top: 0.06rem;
            font-size: 0.5rem;
            margin-left: 0.3rem;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="container">
        <!--头部-->
        <div class="header">
            <!--左 菜单条目-->
            <div class="iconfont icon-caidan">
            </div>
            <!--中 主页面图标-->
            <div class="header_mid">
                <img src="../images/LOGO.png" >
            </div>
        </div>
        <!--左边菜单栏时出现列表-->
        <div class="container menu_default " style="display: none">
            <!--首页-->
            <div class="menu_item" onclick="btn_index()">
                <div class="menu_text" >首页</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_company()">
                <div class="menu_text" >公司简介</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_jm()">
                <div class="menu_text">加盟可耐美</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_cpzx()">
                <div class="menu_text" >产品中心</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_sckj()">
                <div class="menu_text">色彩空间</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_qqrz()">
                <div class="menu_text">全球认证</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_khfw()">
                <div class="menu_text">客户服务</div>
                <div class="iconfont icon-jinru"></div>
            </div>
            <div class="menu_item" onclick="btn_lxwm()">
                <div class="menu_text" >联系我们</div>
                <div class="iconfont icon-jinru"></div>
            </div>


        </div>

        <!-------------图片------------->
        <div class="banner">
            <img src="../images/bicon_28@2x.png">
        </div>
        <!--全球认证-->
        <div class="mid">
            <p class="mid_big_text"> 最新动态 </p>
            <p class="mid_small_text"> NEWS </p>
            <!--最新动态盒子-->

            <div class="mid_box_big">
            <div class="mid_box" onclick="btn_dtxq()">
                <!--图片-->
                <div class="mid_box_left">
                    <img src="../images/bicon_03@2x.png">
                </div>
                <!--文字简介-->
                <div class="mid_box_right">
                    <!--文字-->
                    <div class="mid_box_right_top">
                        品质优质,更广泛的满足高端人群的需求
                        品质优质,更广泛的满足高端人群的需求
                    </div>
                    <!--时间-->
                    <div class="mid_box_right_bottom">
                        2018-11-01
                    </div>
                </div>
            </div>
            </div>








            <!--加载更多-->
            <!--<div class="mid_load">-->
                <!--加载更多-->
            <!--</div>-->
        </div>


        <!--底部介绍-->
        <div class="bottom">
            <p class="bottom_addr">
                公司地址:北京市大兴区欣雅街兴创国际中心3A-1501室
            </p>
            <p class="bottom_tel">
                电话 : 010-64482186
            </p>
            <p class="bottom_fax">
                传真:010-6448-2226
            </p>
            <p class="bottom_email">
                公司邮箱:beijing@germanyclime.cn
            </p>
            <p class="bottom_copyright">Copyright © 2015 All Rights Reserved 可耐美 版权所有</p>
        </div>
        <!--底部菜单栏-->
        <div class="footer_menu">
            <div class="footer_item" onclick="btn_sckj()">
                <div class="footer_item_icon icon_select"></div>
                <div class="footer_item_text">在线选色</div>
            </div>
            <div class="footer_item" onclick="btn_cpzx()">
                <div class="footer_item_icon icon_product"></div>
                <div class="footer_item_text">产品中心</div>
            </div>
            <div class="footer_item" onclick="btn_khfw()">
                <div class="footer_item_icon icon_inquire"></div>
                <div class="footer_item_text">防伪查询</div>
            </div>
            <div class="footer_item">
                <div class="footer_item_icon icon_join icon_big" onclick="btn_jm()"></div>
                <div class="footer_item_text">加盟可耐美</div>
            </div>
        </div>
    </div>
</div>
<script src="../js/dropload.min.js"></script>
<script>
    function btn_index() {
        window.location.href = "index.html"
    }
    function btn_company(){
        window.location.href = "gsjj.html"
    }
    function btn_jm(){
        window.location.href = "jm_3.html"
    }
    function btn_cpzx(){
        window.location.href = "cpzx_2.html"
    }
    function btn_sckj(){
        window.location.href = "sckj.html"
    }
    function btn_qqrz(){
        window.location.href = "qqrz.html"
    }
    function btn_khfw(){
        window.location.href = "fwcx_4.html"
    }
    function btn_lxwm(){
        window.location.href = "lxwm_5.html"
    }

    //跳转至动态详情
    function btn_dtxq(){
        window.location.href = 'dtxq.html'
    }

    $(".icon-caidan").click(function () {
        $(".menu_default").slideToggle();
        if($(this).hasClass("icon-caidan")){
            $(this).addClass("icon-guanbi");
            $(this).removeClass("icon-caidan");
            $("body").css("overflow","hidden");
        }else{
            $(this).removeClass("icon-guanbi");
            $(this).addClass("icon-caidan");
            $("body").css("overflow","auto");
        }
        // $(".icon-guanbi").css("display","none");
    })

    //菜单功能
    $(document).ready(function () {


        // 页数
        var page = 0;
        // 每页展示10个
        var size = 3;
        $('.mid').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="mid_box" onclick="btn_dtxq()">\n' +
                                    '                <!--图片-->\n' +
                                    '                <div class="mid_box_left">\n' +
                                    '                    <img src="../images/bicon_03@2x.png">\n' +
                                    '                </div>\n' +
                                    '                <!--文字简介-->\n' +
                                    '                <div class="mid_box_right">\n' +
                                    '                    <!--文字-->\n' +
                                    '                    <div class="mid_box_right_top">\n' +
                                    '                        品质优质,更广泛的满足高端人群的需求\n' +
                                    '                        品质优质,更广泛的满足高端人群的需求\n' +
                                    '                    </div>\n' +
                                    '                    <!--时间-->\n' +
                                    '                    <div class="mid_box_right_bottom">\n' +
                                    '                        2018-11-01\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>'




                            }

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

    })


</script>

</body>
</html>