{extend name="./main"}

{block name="CSS"}
{/block}

{block name="content"}
<!--中间内容start-->
<div class="newmianboady" style="">

    <style type="text/css">
        html, body {
            background: #fff;
            height: auto;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .swiper-slide {
            /*text-align: center;*/
            font-size: 18px;
            /*background: #f9f9f9;*/

            /* 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;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
        }

        .gallery-top {
            height: 100%;
            width: 100%;
        }

        .gallery-thumbs {
            box-sizing: border-box;
            padding: 10px 0;
        }

        .gallery-thumbs .swiper-slide {
            opacity: 1;
        }

        .gallery-thumbs .swiper-slide-active {
            opacity: 1;
            background: #f9f9f9;
        }

        .mt-number-animate .out:nth-child(1) .mt-number-animate-dom {
            transition: 1s;
            -webkit-transition: 1s;
        }

        .mt-number-animate .out:nth-child(2) .mt-number-animate-dom {
            transition: 1.2s;
            -webkit-transition: 1.2s;
        }

        .mt-number-animate .out:nth-child(3) .mt-number-animate-dom {
            transition: 1.4s;
            -webkit-transition: 1.4s;
        }

        .mt-number-animate .out:nth-child(5) .mt-number-animate-dom {
            transition: 1.6s;
            -webkit-transition: 1.6s;
        }

        .mt-number-animate .out:nth-child(6) .mt-number-animate-dom {
            transition: 1.8s;
            -webkit-transition: 1.8s;
        }

        .mt-number-animate .out:nth-child(7) .mt-number-animate-dom {
            transition: 2s;
            -webkit-transition: 2s;
        }

        .mt-number-animate .out:nth-child(9) .mt-number-animate-dom {
            transition: 2.2s;
            -webkit-transition: 2.2s;
        }

        .mt-number-animate .out:nth-child(10) .mt-number-animate-dom {
            transition: 2.4s;
            -webkit-transition: 2.4s;
        }
    </style>
    <!--头部start-->

    <!--第一部分内容  轮播图start-->
    <div class="htmleaf-container" style="">
        <div class="banner">
            <ul id="oul" class="pc-banner" style="">
                <li style="">
                    <div class="index-lunbo1">
                        <div class="animate-title" style="left: 352px">知宇发卡系统</div>
                        <div class="animate-img01"></div>
                        <div class="animate-img"></div>
                        <div class="animate-title3" style="width:595px ">
                            <p>让发卡 <span>更简单</span></p>
                            <p>致力于解决虚拟商品的快捷寄售服务，</p>
                            <p>为商户及其买家提供快速的销售和购买体验。</p>
                        </div>
                    </div>
                </li>
                <li style=": px;">
                    <div class="index-lunbo1 index-lunbo2">
                        <div class="animate-title" style="left: 236px;">知宇支付系统</div>
                        <div class="animate-img2"></div>
                        <div class="animate-title3" style="width:470px;">
                            <p>让财务 <span>对账更简单</span></p>
                            <p>提供统一对账报表，合并结算</p>
                            <p>财务无需多通道对账，并可灵活进行当日交易结算</p>
                        </div>
                    </div>

                </li>
                <li style=": px;">
                    <div class="index-lunbo1">
                        <div class="animate-title" style="top:142px">知宇支付系统</div>
                        <div class="animate-img03"></div>
                        <div class="animate-img3"></div>
                        <div class="animate-title3">
                            <p>让交易 <span>运营更轻松</span></p>
                            <p>统一解决支付交易问题，无需多渠道沟通</p>
                            <p>提供7*24小时专属服务、多维度数据统计分析</p>
                        </div>
                    </div>

                </li>
                <li style="">
                    <div class="index-lunbo1">
                        <div class="animate-title" style="left: 352px">知宇支付系统</div>
                        <div class="animate-img01"></div>
                        <div class="animate-img"></div>
                        <div class="animate-title3" style="width:595px ">
                            <p>让支付 <span>接入更容易</span></p>
                            <p>一次性接入主流支付方式，线上、线下场景全覆盖</p>
                            <p>支持收款、付款、商户账户等业务需求，并提供灵活的api接口调用</p>
                        </div>
                    </div>
                </li>
            </ul>
            <ul id="olu" class="mobile-banner" style="clear: both">
                <li style="">
                    <a href=""><img style="width: 100%" src="__RES__/app/t3/image/pbanner01.png" alt=""/>
                    </a>

                </li>
                <li style="">
                    <a href=""><img style="width: 100%" src="__RES__/app/t3/image/pbanner02.png" alt=""/>
                    </a>

                </li>
                <li style="">
                    <a href=""><img style="width: 100%" src="__RES__/app/t3/image/pbanner03.png" alt=""/>
                    </a>

                </li>
                <li style="">
                    <a href=""><img style="width: 100%" src="__RES__/app/t3/image/pbanner01.png" alt=""/>

                    </a>

                </li>
                <div style="clear: both"></div>
            </ul>


            <div class="banenrfoor">
                <l class="changeimg"><img src=__RES__/app/t3/image/banner_0.png></l>
                <ol class=""></ol>
            </div>
            <div class="banner_content">
                <p></p>
                <p></p>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="ymm-modt">
                <div class="ymm-modline"></div>
                <p class="ymm-modtitle">管家服务</p>
                <p class="ymm-moddisc">成就你的无限可能</p>
            </div>
            <div class="container">
                <div class="row">
                    <ul class="col-md-12 ymm-serve">
                        <div class="row">
                            <li class="col-md-2 col-xs-6">
                                <img src="__RES__/app/t3/image/1.png" alt=""/>
                                <p>管收款</p>
                                <p>全场景高效接入主流支付 方式，降低接入成本</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                            <li class="col-md-2 col-xs-6">
                                <img class="ymm-gfk" src="__RES__/app/t3/image/2.png" alt=""/>
                                <p>管付款</p>
                                <p>对私、对公付款，支持web 界面操作及API调用</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                            <li class="col-md-2 col-xs-6">
                                <img src="__RES__/app/t3/image/3.png" alt=""/>
                                <p>管账户</p>
                                <p>帮助上下游企业交易清分， 提升资金流转效率</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                            <li class="col-md-2 col-xs-6">
                                <img src="__RES__/app/t3/image/4.png" alt=""/>
                                <p>管资金</p>
                                <p>提供期限灵活的理财服务， 提升闲置资金收益</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                            <li class="col-md-2 col-xs-6">
                                <img src="__RES__/app/t3/image/5.png" alt=""/>
                                <p>管营销</p>
                                <p>提供支付环节营销工具， 增加用户拉新及粘性</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                            <li class="col-md-2 col-xs-6">
                                <img src="__RES__/app/t3/image/6.png" alt=""/>
                                <p>管数据</p>
                                <p>多维度可视化数据看板， 助力企业商业决策</p>
                                <a class="ymm-aboutproduct" href="/register">注册体验</a>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="ymm-modt">
                <div class="ymm-modline"></div>
                <p class="ymm-modtitle">为什么选择我们</p>
                <p class="ymm-moddisc">管家提供安全、快速、全面、省心的产品服务 </p>
            </div>
            <div class="col-md-12 ymm-why">
                <div class="row">
                    <div class="col-md-4 col-xs-12  ymm-whyL">
                        <div class="row ">
                            <div class="swiper-container gallery-thumbs">
                                <ul class="swiper-wrapper">
                                    <li class="swiper-slide">
                                        <img src="__RES__/app/t3/image/01.png" alt=""/>
                                        <span>资金安全</span>
                                    </li>
                                    <li class="swiper-slide">
                                        <img src="__RES__/app/t3/image/02.png" alt=""/>
                                        <span>服务省心</span>
                                    </li>
                                    <li class="swiper-slide">
                                        <img src="__RES__/app/t3/image/03.png" alt=""/>
                                        <span>功能齐全</span>
                                    </li>
                                    <li class="swiper-slide">
                                        <img src="__RES__/app/t3/image/04.png" alt=""/>
                                        <span>入网快速</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12 ymm-whyR ">
                        <div class="swiper-container gallery-top">
                            <ul class="swiper-wrapper">
                                <li class="swiper-slide">
                                    <div class="col-md-8 col-xs-12">
                                        <p>资金安全有保障</p>
                                        <p>对接各种支付通道，正规商户资料，资金由持牌机构进行托管。</p>
                                        <img src="__RES__/app/t3/image/tu4.png" alt=""/>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="col-md-8 col-xs-12">
                                        <p>统一售后服务</p>
                                        <p>节约商户运营人力成本,统一7*24客户服务 全天候运维数据监控</p>
                                        <img src="__RES__/app/t3/image/tu.png" alt=""/>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="col-md-8 col-xs-12">
                                        <p>强大的管理后台</p>
                                        <p>订单管理、财务管理、交易对账等运营功能</p>
                                        <img src="__RES__/app/t3/image/tu2.png" alt=""/>
                                    </div>
                                </li>
                                <li class="swiper-slide">
                                    <div class="col-md-8 col-xs-12">
                                        <p>自助入网&nbsp;电子化签约</p>
                                        <p>让商户入网更快速、便捷</p>
                                        <img src="__RES__/app/t3/image/tu3.png" alt=""/>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="ymm-modt">
                <div class="ymm-modline"></div>
                <p class="ymm-modtitle">我们的实力</p>
                <p class="ymm-moddisc">支付系统技术开发商领军企业，成熟的支付系统架构。 </p>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 ymm-why ymm-portfolio">
                        <div class="row">
                            <div class="col-md-4 hidden-xs hidden-sm">
                                <img src="__RES__/app/t3/image/yu.png" alt=""/>
                            </div>
                            <div class="col-md-8 col-xs-12">
                                <div class="row">
                                    <dl class="col-md-12">
                                        <div class="row">
                                            <dt class="col-md-3  col-xs-12">服务客户数（个）</dt>
                                            <dd class="col-md-9 col-xs-12">
                                                <div class="numberRun"></div>
                                                <span class="ymm-add">+</span>
                                            </dd>
                                        </div>
                                    </dl>
                                    <dl class="col-md-12">
                                        <div class="row">
                                            <dt class="col-md-3  col-xs-12">服务商户数（个）</dt>
                                            <dd class="col-md-9 col-xs-12">
                                                <div class="numberRun2"></div>
                                                <span class="ymm-add">+</span>
                                            </dd>
                                        </div>
                                    </dl>
                                    <dl class="col-md-12">
                                        <div class="row">
                                            <dt class="col-md-3  col-xs-12">年资金处理量（万）</dt>
                                            <dd class="col-md-9 col-xs-12">
                                                <div class="numberRun3"></div>
                                                <span class="ymm-add">+</span>
                                            </dd>
                                        </div>
                                    </dl>
                                    <dl class="col-md-12">
                                        <div class="row">
                                            <dt class="col-md-3 col-xs-12">金融机构数（家）</dt>
                                            <dd class="col-md-9 col-xs-12">
                                                <div class="numberRun4"></div>
                                                <span class="ymm-add">+</span>
                                            </dd>
                                        </div>
                                    </dl>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="ymm-modt">
                <div class="ymm-modline"></div>
                <p class="ymm-modtitle">我们的合作伙伴</p>
                <p class="ymm-moddisc">积累14年商户服务经验，支持各行业支付产品诉求 </p>
            </div>
            <div class="container">
                <div class="row">
                    <ul class="ymm-partner">
                        <li>
                            <img src="__RES__/app/t3/image/1_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/2_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/3_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/4_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/5_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/6_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/7_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/8_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/9_1.png" alt=""/>
                        </li>
                        <li>
                            <img src="__RES__/app/t3/image/10_1.png" alt=""/>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script src='__RES__/app/t3/js/numscroll.js'></script>
    <script>

        $().ready(function () {
            //  兼容ie9的动效
            if (navigator.userAgent.indexOf("MSIE") > 0) {

                if (navigator.userAgent.indexOf("MSIE 9.0") > 0) {
                    $('.mod2-dd').each(function () {
                        $(this).mouseover(function () {

                            $(this).find(".mod2-ff").addClass('mod2-ff2').stop(true, false).animate({opacity: '0.85'}, '700');
                            $(this).find(".mod2-ff-con").stop(true, false).animate({opacity: '1', top: '50%'}, '700');
                        });
                        $(this).mouseout(function () {
                            $(this).find(".mod2-ff").removeClass('mod2-ff2');
                            $(this).find(".mod2-ff-con").stop(true, false).animate({opacity: '0', top: '60%'}, '0');
                        });
                    })
                }
            }

            //    页面初始化
            function init() {
                var _width = document.documentElement.clientWidth;
                //    alert($('.mod2-con>img').height()+1)
                if (_width <= 768) {
                    //      $('.mod2-ff').css('height',$('.mod2-con>img').height()+1);
                }
                ;

            };
            init();
            //    页面窗口改变事件
            $(window).resize(function () {
                init();

            });


            //轮播
            //获取窗口宽度
            var window_width = $(window).width();
            $('.htmleaf-container').css('width', window_width);
            //=========设置参数==========
            //图片统一高度：
            var images_height = '600px';
            if (window_width > 768) {
                images_height = '600px';
            } else {
                images_height = '194';
                /* $('.banner').css('height',images_height);*/
            }
            //图片路径/链接(数组形式):
            var images_url = [
                'style/glyphicons-halflings-regular.eot',
                'style/glyphicons-halflings-regular.eot',
                'style/glyphicons-halflings-regular.eot'
            ];
            var images_count = images_url.length;
            //创建节点
            //图片列表节点
            /*  for(var j=0;j<images_count+1;j++){
            $('.banner ul').append('<li></li>');
            }*/
            //轮播圆点按钮节点nav2.png
            for (var j = 0; j < images_count; j++) {
                if (j == 0) {
                    i = j + 1;
                    // $('.banner ol').append("<li class='current'><img src='/image/nav"+i+".png'></li>")
                    $('.banner ol').append("<li class='current'></li>")
                } else {
                    i = j + 1;
                    //$('.banner ol').append("<li><img src='/image/nav"+i+".png'></li>")
                    $('.banner ol').append("<li></li>")
                }

            }

            /* $('.banner').css('height',600);*/
            $('.banner ul').css('width', (images_count + 1) * 100 + '%');

            //=========================

            var num = 0;
            $(window).resize(function () {
                var window_width = $(window).width();
                if (window_width > 768) {
                    images_height = '600px';
                } else {
                    images_height = '215px';
                }
                $('.htmleaf-container').css('width', window_width);


                $('.banner ul li').css({width: window_width});
                clearInterval(timer);
                nextPlay();
                timer = setInterval(nextPlay, 3000);
            });
            //console.log(window_width);
            $('.banner ul li').width(window_width);
            //轮播圆点
            $('.banner ol li').mouseover(function () {
                $(this).addClass('current').siblings().removeClass('current');

                var i = $(this).index();
                //console.log(i);
                $('.banner ul').stop().animate({left: -i * window_width}, 500);
                num = i;
                var imgback = $('.current').index();
                myselfanmate(imgback)
            });
            //自动播放
            var timer = null;

            function prevPlay() {
                num--;

                if (num < 0) {
                    //悄悄把图片跳到最后一张图(复制页,与第一张图相同),然后做出图片播放动画，left参数是定位而不是移动的长度
                    $('.banner ul').css({left: -window_width * images_count}).stop().animate({left: -window_width * (images_count - 1)}, 500);
                    num = images_count - 1;
                    var imgback = $('.current').index();
                    myselfanmate(imgback)
                } else {
                    //console.log(num);
                    $('.banner ul').stop().animate({left: -num * window_width}, 500);
                    var imgback = $('.current').index();
                    myselfanmate(imgback)
                }
                if (num == images_count - 1) {
                    $('.banner ol li').eq(images_count - 1).addClass('current').siblings().removeClass('current');
                    var imgback = $('.current').index();
                    myselfanmate(imgback)
                } else {
                    $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
                    var imgback = $('.current').index();
                    myselfanmate(imgback)

                }
            }

            function nextPlay() {
                num++;

                var imgback = $('.current').index() + 1;
                $('.banner ol li').css("background", "")

                if (num > images_count) {
                    $('.banner ol li').css("background", "")
                    //播放到最后一张(复制页)后,悄悄地把图片跳到第一张,因为和第一张相同,所以难以发觉,
                    $('.banner ul').css({left: 0}).stop().animate({left: -window_width}, 500);
                    //css({left:0})是直接悄悄改变位置，animate({left:-window_width},500)是做出移动动画
                    //随后要把指针指向第二张图片,表示已经播放至第二张了。
                    num = 1;
                    myselfanmate(imgback)

                } else {
                    $('.banner ol li').css("background", "")
                    //在最后面加入一张和第一张相同的图片，如果播放到最后一张，继续往下播，悄悄回到第一张(肉眼看不见)，从第一张播放到第二张
                    //console.log(num);
                    $('.banner ul').stop().animate({left: -num * window_width}, 500);
                    myselfanmate(imgback)
                }
                if (num == images_count) {

                    $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
                    myselfanmate(imgback)
                } else {

                    $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
                    myselfanmate(imgback)
                }
            }

            function myselfanmate(imgback) {


                var ind = $(".banner ol li").empty("img");
                $('.changeimg').empty("img");


                $('.current').append('<img src=static/app/t3/image/nav1-' + imgback + '.png>');
                $('.changeimg').append('<img src=static/app/t3/image/banner_' + imgback + '.png>');

            }

            timer = setInterval(nextPlay, 3000);
            //鼠标经过banner，停止定时器,离开则继续播放
            $('.banner').mouseenter(function () {
                clearInterval(timer);
                //左右箭头显示(淡入)
                $('.banner i').fadeIn();
            }).mouseleave(function () {
                timer = setInterval(nextPlay, 3000);
                //左右箭头隐藏(淡出)
                $('.banner i').fadeOut();
            });
            //播放下一张
            $('.banner .right').click(function () {
                nextPlay();
            });
            //返回上一张
            $('.banner .left').click(function () {
                prevPlay();
            });

            //移动端触屏事件
            function addEvetnDown(obj) {
                $(obj).on('touchstart', function (e) {

                    var touch = e.originalEvent, startX = touch.changedTouches[0].pageX,
                        startY = touch.changedTouches[0].pageY;
                    $(this).on('touchmove', function (e) {
                        touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                        if (touch.pageX - startX > 10) {

                            clearInterval(timer);
                            prevPlay();

                            timer = setInterval(nextPlay, 3000);
                            /*你的操作代码*/
                            $(this).off('touchmove');
                        } else if (touch.pageX - startX < -10) {
                            console.log("左划");
                            var imgback = $('.current').index();
                            $('.banner ol li').css("background", "")
                            myselfanmate(imgback)
                            clearInterval(timer);
                            nextPlay();
                            timer = setInterval(nextPlay, 3000);
                            /*你的操作代码*/
                            $(this).off('touchmove');
                        }
                        ;
                        if (touch.pageY - startY > 10) {
                            console.log("上");
                            /*你的操作代码*/
                            $(this).off('touchmove');
                        } else if (touch.pageY - startY < -10) {
                            console.log("下");
                            /*你的操作代码*/
                            $(this).off('touchmove');
                        }
                        ;
                        e.preventDefault();
                        e.stopPropagation();
                    });
                    /* return false; */
                })
            }

            addEvetnDown('#oul');
            addEvetnDown('#olu');


        });
    </script>
    <script>
        var galleryTop = new Swiper('.gallery-top', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 15,
            autoplay: 3000,
            direction: 'vertical'
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 15,
            centeredSlides: true,
            slidesPerView: 'auto',
            touchRatio: 0.2,
            slideToClickedSlide: true,
            virtualTranslate: true,
            direction: 'vertical'
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
        galleryTop.disableTouchControl();

        $('.ymm-partner li').mouseover(function () {
            var $index = $(this).index() + 1;
            $(this).find('img').attr('src', 'static/app/t3/image/' + $index + '_2.png');
        })
        $('.ymm-partner li').mouseout(function () {
            var $index = $(this).index() + 1;
            $(this).find('img').attr('src', 'static/app/t3/image/' + $index + '_1.png');
        })

    </script>
    <script src="__RES__/app/t3/js/header-footer.js"></script>

</div>
<!--中间内容end-->
{/block}
