qqrz.html 11.8 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/qqrz.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"> GLOBAL CERTIFICATION </p>
            <!--盒模型内容-->
            <div class="mid_box_big">

            <div class="mid_box">
                <!--图片-->
                <div class="mid_box_pic">
                    <img src="../images/bicon_38@2x.png">
                </div>
                <!--简介-->
                <div class="mid_box_intro">
                    蓝天使简介
                </div>
                <!--文字-->
                <div class="mid_box_text">
                    蓝天使认证为国际环保产品认证标志,起源于1978年蓝天使认证是世界公认的严格的环保产品认证标志。德国乃至欧洲普遍认可的环保产品认证标志,在世界范围内得到广泛认同。
                    <br>蓝天使标志产品认证采取严格审慎的态度,每年仅有少数产品完成审定,厂家都以获得蓝天使认证为荣。
                    根据统计显示,92%的德国民众十分了解蓝天使认证的意义,37% 的民众选购商品时对蓝天使十分看重。
                    即使获得蓝天使认证的产品每年都要接受严格的市场抽检,符合认证标准的产品,方可继续使用蓝天使。
                </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>
</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"
    }

    // 下拉菜单栏
    $(document).ready(function(){
        $(".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");
            }
        })


        // 页数
        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_big">\n' +
                                    '\n' +
                                    '            <div class="mid_box">\n' +
                                    '                <!--图片-->\n' +
                                    '                <div class="mid_box_pic">\n' +
                                    '                    <img src="../images/bicon_38@2x.png">\n' +
                                    '                </div>\n' +
                                    '                <!--简介-->\n' +
                                    '                <div class="mid_box_intro">\n' +
                                    '                    蓝天使简介\n' +
                                    '                </div>\n' +
                                    '                <!--文字-->\n' +
                                    '                <div class="mid_box_text">\n' +
                                    '                    蓝天使认证为国际环保产品认证标志,起源于1978年蓝天使认证是世界公认的严格的环保产品认证标志。德国乃至欧洲普遍认可的环保产品认证标志,在世界范围内得到广泛认同。\n' +
                                    '                    <br>蓝天使标志产品认证采取严格审慎的态度,每年仅有少数产品完成审定,厂家都以获得蓝天使认证为荣。\n' +
                                    '                    根据统计显示,92%的德国民众十分了解蓝天使认证的意义,37% 的民众选购商品时对蓝天使十分看重。\n' +
                                    '                    即使获得蓝天使认证的产品每年都要接受严格的市场抽检,符合认证标准的产品,方可继续使用蓝天使。\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '\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
        });

    })

    $(document).ready(function () {

    })

</script>

</body>
</html>