index.html 23.9 KB

原文件审查历史永久链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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="../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="../css/swiper.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1011505_vdlnckj4lm.css">
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>

    <style>
        .icon-caidan{
            font-size: 0.6rem;
            margin-left: 0.3rem;
        }
        .icon-guanbi{
            margin-top: 0.06rem;
            font-size: 0.5rem;
            margin-left: 0.3rem;
        }
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-container2 {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .pic4_banner_mid{
            width: 2.28rem;
            height: 3.1rem;
            display: flex;
            margin:0  0.3rem;
        }
        .pic4_banner_mid img{
            width: 100%;
            height: 100%;
        }
        .swiper-slide-active{
            width: 3.1rem;
            height: 100%;
        }
        .swiper-wrapper{
            display: flex;
            align-items: center;
        }
        .year{

        }
        .year:first-child{
            margin-left: 0;
        }
        .time_2007{
            margin-top: 0.5rem;
            margin-left: 1.43rem;
        }
        .time_2008{
            margin-left: 2.34rem;
        }
        .time_2012{
            margin-top: 0.5rem;
            margin-left: 2.4rem;
        }
        .time_2018{
            margin-left: 2.3rem;
        }
        .on{
            display: block;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="container">
            <!--头部-->
            <div class="header">
                <!--左 菜单条目-->
                <div class="iconfont icon-caidan menu">
                </div>
                <!--关闭菜单图标-->
                <!--<div class="iconfont icon-guanbi" ></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">
                <!-- Swiper -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="../images/bicon_01@2x.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/bicon_23@2x.png">
                        </div>
                        <div class="swiper-slide">
                            <img src="../images/bicon_43@2x.png">
                        </div>

                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>

            </div>
            <!--图片展示-->
            <div class="pic1">
                <div class="pic1_dynamic">
                    源于德国
                </div>
                <div class="pic1_subtitle">
                    FORM GERMANY
                </div>
                <div class="pic1_mid">

                </div>
                <div class="pic1_mid_bottom">
                    <p class="text_show">可耐美由两位经济学家和一位化学家组建，基于全球环境恶化、变暖寻求解决方案而成立。
                        德国总部设在德国杜塞尔多夫（Düsseldorf），“创新+整合”是我们的核心竞争力可耐美由两位经济学家和一位化学家组建。
                    </p>
                    <p style="display: none;">
                        1
                    </p>
                    <p style="display: none;">
                        2
                    </p>
                    <p style="display: none;">
                        3
                    </p>
                    <p style="display: none;">
                        4
                    </p>
                </div>
                <!--图标-->
                <div class="pic1_mid_icon">
                    <div class="pic1_mid_icon_left">
                        <img src="../images/aicon_08.png">
                    </div>
                    <div class="pic1_mid_icon_right">
                        <img src="../images/aicon_07.png">
                    </div>
                </div>
                <!--时间轴-->
                <div class="pic_time_box">
                    <div class="pic_item_box_top">
                        <p class="year time_color">1988</p>
                        <p class="year time_2008">2008</p>
                        <p class="year time_2018">2018</p>
                        <p class="year time_2007">2007</p>
                        <p class="year time_2012">2012</p>
                    </div>
                    <!--<div class="pic_item_box_bottom">-->
                        <!--<p class="year ">2007</p>-->
                        <!--<p class="year">2012</p>-->
                    <!--</div>-->
                </div>


                <div class="pic1_mid_time">
                    <img src="../images/xian2@2x.png">
                </div>
            </div>
            <!--最新动态-->
            <div class="pic2">
                <div class="pic2_dynamic">
                    最新动态
                </div>
                <div class="pic2_subtitle">
                    NEWS
                </div>


                <!--动态消息列表-->
                <div class="pic2_big_box">
                    <div class="pic2_box" onclick="btn_zxdt()">
                        <div class="pic2_box_left">
                            <img src="../images/bicon_03@2x.png">
                        </div>
                        <div class="pic2_box_right">
                            <div class="pic2_box_right_top">
                                品质优越，更广泛的满足高端人群的需求
                                品质优越，更广泛的满足高端人群的需求
                            </div>
                            <div class="pic2_box_right_bottom">
                                2018-11-01
                            </div>
                        </div>
                    </div>
                    <div class="pic2_box" onclick="btn_zxdt()">
                        <div class="pic2_box_left">
                            <img src="../images/bicon_03@2x.png">
                        </div>
                        <div class="pic2_box_right">
                            <div class="pic2_box_right_top">
                                品质优越，更广泛的满足高端人群的需求
                                品质优越，更广泛的满足高端人群的需求
                            </div>
                            <div class="pic2_box_right_bottom">
                                2018-11-01
                            </div>
                        </div>
                    </div>
                </div>


                <!--查看更多-->
                <div class="pic2_viewMore" onclick="btn_zxdt()">
                    查看更多+
                </div>


            </div>
            <!--四小块-->
            <div class="pic3">
                <!--在线选色-->
                <div class="pic3_block select_color">
                    <!--pic3盒子-->
                    <div class="pic3_block_box">
                        <!--图片-->
                        <div class="pic3_pic_box">
                            <div class="pic3_pic">
                                <img src="../images/bicon_04@2x.png">
                            </div>
                        </div>
                        <!--大标题-->
                        <div class="pic3_big_text">
                            在线选色
                        </div>
                        <!--小标题-->
                        <div class="pic3_small_text">
                            进入某个空间，我们最先被触发得感知是—色彩
                            进入某个空间，我们最先被触发得感知是—色彩
                        </div>
                        <!--查看更多-->
                        <div class="pic3_viewMore" onclick="btn_sckj()">
                            查看更多
                        </div>

                    </div>
                </div>
                <!--产品中心-->
                <div class="pic3_block product_color">
                    <!--pic3盒子-->
                    <div class="pic3_block_box">
                        <!--图片-->
                        <div class="pic3_pic_box">
                            <div class="pic3_pic product_pic">
                            <img src="../images/bicon_05@2x.png">
                            </div>
                        </div>
                        <!--大标题-->
                        <div class="pic3_big_text">
                            产品中心
                        </div>
                        <!--小标题-->
                        <div class="pic3_small_text">

                            德国原装进口，施工完无味，
                            健康安全

                        </div>
                        <!--查看更多-->
                        <div class="pic3_viewMore" onclick="btn_cpzx()">
                            查看更多
                        </div>

                    </div>
                </div>
                <!--加盟可耐美-->
                <div class="pic3_block join_color">
                    <!--pic3盒子-->
                    <div class="pic3_block_box">
                        <!--图片-->
                        <div class="pic3_pic_box">
                            <div class="pic3_pic join_pic">
                                <img src="../images/bicon_06@2x.png">
                            </div>
                        </div>
                        <!--大标题-->
                        <div class="pic3_big_text">
                            加盟可耐美
                        </div>
                        <!--小标题-->
                        <div class="pic3_small_text">
                            加盟可耐美,0元加盟费
                        </div>
                        <!--查看更多-->
                        <div class="pic3_viewMore" onclick="btn_jm()">
                            查看更多
                        </div>

                    </div>
                </div>
                <!--防伪查询-->
                <div class="pic3_block inquire_color">
                    <!--pic3盒子-->
                    <div class="pic3_block_box">
                        <!--图片-->
                        <div class="pic3_pic_box">
                            <div class="pic3_pic inquire_pic">
                                <img src="../images/bicon_07@2x.png">
                            </div>
                        </div>
                        <!--大标题-->
                        <div class="pic3_big_text">
                            防伪查询
                        </div>
                        <!--小标题-->
                        <div class="pic3_small_text">
                            为消费者权利保驾护航
                        </div>
                        <!--查看更多-->
                        <div class="pic3_viewMore" onclick="btn_khfw()">
                            查看更多
                        </div>

                    </div>
                </div>
            </div>
            <!--产品认证-->
            <div class="pic4">
                <div class="pic4_dynamic">
                    可耐美产品认证
                </div>
                <div class="pic4_subtitle">
                    CERTIFICATION COSMETIC PRODUCTS
                </div>
                <!--图片轮播-->
                <div class="pic4_banner">

                    <div class="swiper-container2" id="d_slider">
                        <div class="swiper-wrapper ">
                            <div class="swiper-slide pic4_banner_mid ">
                                <img src="../images/bicon_08@2x.png" alt="">
                            </div>
                            <div class="swiper-slide pic4_banner_mid">
                                <img src="../images/bicon_08@2x.png"  alt="">
                            </div>
                            <div class="swiper-slide pic4_banner_mid">
                                <img src="../images/bicon_08@2x.png" alt="">
                            </div>
                        </div>

                    </div>


                </div>
                <!--查看更多-->
                <div class="pic4_viewMore" onclick="btn_qqrz()">
                    查看更多+
                </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>

</body>

<!-- Swiper JS -->
<script src="../js/jquery.min.js"></script>
<script src="../js/swiper-3.4.2.jquery.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_zxdt(){
        window.location.href = 'zxdt.html';
    }

    //---------------------加载更多_竖轴-----------------------

    $(".pic2_viewMore").click(function(){
        btn_onclik();
    })
    function btn_onclik() {
        var page = 0;
        // 每页展示10个
        var size = 3;

        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="pic2_box" onclick="btn_zxdt()">\n' +
                            '                            <div class="pic2_box_left">\n' +
                            '                                <img src="../images/bicon_03@2x.png">\n' +
                            '                            </div>\n' +
                            '                            <div class="pic2_box_right">\n' +
                            '                                <div class="pic2_box_right_top">\n' +
                            '                                    品质优越，更广泛的满足高端人群的需求\n' +
                            '                                    品质优越，更广泛的满足高端人群的需求\n' +
                            '                                </div>\n' +
                            '                                <div class="pic2_box_right_bottom">\n' +
                            '                                    2018-11-01\n' +
                            '                                </div>\n' +
                            '                            </div>\n' +
                            '                        </div>'


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

    //主菜单功能实现
    $(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");
            }

        })

    })

    //头部swiper功能
    var swiper = new Swiper('.swiper-container',{

        loop: true, // 循环模式选项

        pagination: {
            el: '.swiper-pagination',
        },
    });


    window.onload=function () {
        document.addEventListener('touchstart',function (event) {
            if(event.touches.length>1){
                event.preventDefault();
            }
        })
        var lastTouchEnd=0;
        document.addEventListener('touchend',function (event) {
            var now=(new Date()).getTime();
            if(now-lastTouchEnd<=300){
                event.preventDefault();
            }
            lastTouchEnd=now;
        },false)
    }

    //swiper功能
    var swiper2 = new Swiper('#d_slider',{
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        allowTouchMove: true,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 3,
        },
        centeredSlides: true,
        // spaceBetween : 20,
        // slidesOffsetBefore: 0,
        loop: true,
        slidesPerView : 'auto',
        on: {},
        // pagination: {
        //     el: '.swiper-pagination',
        //     clickable :true,
        //     renderBullet: function (index, className) {
        //         return '<div class="' + className + '"><span></span><i></i></div>';
        //     },
        // },
        // navigation: {
        //     nextEl: '.arrow-right',
        //     prevEl: '.arrow-left',
        // },
    });
    //颜色切换
    $('.pic_time_box').on('click','.year',function () {
        var t = $(this)
        if (t.hasClass('year')){
            t.addClass('time_color').siblings().removeClass('time_color')

        }else {
            t.removeClass('time_color')
        }
    })
    //通过颜色切换调用内容切换
    $('.pic_item_box_top>p').click(function () {
        console.log(11)
        $('.pic_item_box_top>p').eq($('.pic1_mid_bottom>p').index()).addClass('on').siblings().removeClass('on');
        $('.pic1_mid_bottom>p').hide().eq($(this).index()).show();
    })


</script>
</html>