richod
/
qidong_app


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="initial-scale=1">
	{php echo register_jssdk(false);} 
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if(clientWidth>=375){
                        // 这里的640 取决于设计稿的宽度
                        docEl.style.fontSize = '100px';
                    }else{
                        docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            recalc();
        })(document, window);
        wx.ready(function () {
            sharedata = {
                title: '{$title}',
                desc: '{$description}',
                link: '{$_W['siteurl']}&fromopenid={$openid}',
                imgUrl: '{$_W['uniaccount']['logo']}',
                success: function(){
                    alert('分享成功!');
                },
                cancel: function(){

                }
            };
            wx.onMenuShareAppMessage(sharedata);
        });
    </script>
    <!--<link rel="stylesheet" href="css/pay1.css">-->
    <title>{$_W['account']['name']}支付中心</title>
</head>

<style>
    @font-face {
        font-family: 'iconfont';  /* project id 757364 */
        src: url('//at.alicdn.com/t/font_757364_j2u5y42zlrm.eot');
        src: url('//at.alicdn.com/t/font_757364_j2u5y42zlrm.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_757364_j2u5y42zlrm.woff') format('woff'),
        url('//at.alicdn.com/t/font_757364_j2u5y42zlrm.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_757364_j2u5y42zlrm.svg#iconfont') format('svg');
    }
    .iconfont{
        font-family:"iconfont" !important;
        font-size:0.16rem;font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.002rem;
        -moz-osx-font-smoothing: grayscale;
    }
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
    input, textarea, th, td {
        margin: 0;
        padding: 0;
    }
    body, button, input, select, textarea {
        font: 12px/1.5 tahoma, arial, \5b8b\4f53;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
    }

    address, cite, dfn, em, var {
        font-style: normal;
    }

    code, kbd, pre, samp {
        font-family: couriernew, courier, monospace;
    }

    small {
        font-size: 12px;
    }

    ul, ol {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    sup {
        vertical-align: text-top;
    }

    sub {
        vertical-align: text-bottom;
    }

    legend {
        color: #000;
    }

    fieldset, img {
        border: 0;
    }

    button, input, select, textarea {
        font-size: 100%;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    body{
        background: #fff;
    }
    .top-box{
        width: 100%;
    }
    .product-box{
        width: 100%;
        /*background: #e0e2ed;*/
        text-align: center;
        line-height: 0.4rem;
    }
    .title{
        width: 100%;
        text-align: center;
        color: #655e56;
        font-size:0.2rem;
        background: #fff;
        font-family: cursive;
    }
    .buy-button{
        border: 0.01rem solid #fff;
        outline: 0;
        -webkit-appearance: none;
        background-color:#fff;
        border-radius: 0.04rem;
        width: 1rem;
        height: 0.3rem;
    }
    .product{
        width: 100%;
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-size: 0.14rem;
        margin-top: 0.1rem;
        color: #d55dff;
        font-weight: 500;
    }

    .img3 .product{
        font-size: 0.18rem;
    }
    .img2 .btn-box{
        display: none;
    }
    .img4 .btn-box{
        display: none;
    }
    .btn-box{
        margin-top: 0.1rem;
    }
    .fans{
        width:100%;
        margin: 0 auto;
        /*font-size: 0.14rem;*/
        color:#262626;
        text-align: center;
        /*border-radius: 0.1rem;*/

    }
    .vip{
        width: 100%;
        font-size:0.5rem;
        text-align: center;
        line-height: 0.5rem;
        font-weight: bold;
        /*font-family: cursive;*/
    }
    .container{
        width: 100%;
        margin: 0 auto;
        margin-bottom: 0.1rem;
    }
    .slide{
        width: 100%;
        min-height: 1.8rem;
        overflow: hidden;
        position: relative;
    }
    .slide .img{
        overflow: hidden;
        position: absolute;
        transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s;
        border-radius:0.09rem;
    }
    .slide .img img{
        width: calc(100% - 0.14rem);
        height: calc(100% - 0.14rem);
        margin: 0.07rem;
    }
    .slide .img1{
        width: 40%;
        height: 40%;
        top: 30%;
        left: -50%;
        z-index: 1;
    }
    .slide .img2{
        width: 60%;
        height: 60%;
        top: 20%;
        left: -20%;
        z-index: 2;

    }
    .slide .img3{
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        z-index: 3;
    }
    .slide .img4{
        width: 60%;
        height: 60%;
        top: 20%;
        left: 60%;
        z-index: 2;
    }
    .slide .img5{
        width: 40%;
        height: 40%;
        top: 30%;
        left: 110%;
        z-index: 1;
    }
    .slide-bt{
        position: absolute;
        left: 50%;
        bottom: 1%;
        z-index: 10;
    }
    .slide-bt span{
        width: 0.24rem;
        height: 0.08rem;
        background: #c9caca;
        float: left;
        margin: 0.05rem;
        border-radius: 0.04rem;
    }
    .slide .slide-bt .on{
        background: #ffd200;
    }
    .state{
        width: 96%;
        height: 0.6rem;
        padding: 0 0.1rem;
        line-height:0.3rem;
        margin: 0 auto;
        font-size: 0.16rem;
        margin-top: 0.3rem;
        font-family: serif;
        color:#5f5e5e;
    }
    .dh-btn{
        width:95%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 0.3rem;
        text-align: center;
        line-height: 0.4rem;
        padding-bottom:0.1rem;
    }
    .dh-left{
        width: 40%;
        height: 0.4rem;
        border: 0.01rem solid #bfb4bd;
        border-radius: 0.1rem;
        box-shadow:0.01rem 0.03rem 0.06rem #d1d6d6;
    }
    .dh-right{
        width: 40%;
        height: 0.4rem;
        border-radius: 0.1rem;
        border: 0.01rem solid #bfb4bd;
        box-shadow:0.01rem 0.03rem 0.06rem #d1d6d6;
    }
    .fans-box{
        width:95%;
        margin:0 auto;
        overflow:hidden;
        height:0.2rem;
        /*background: #9ee6df;*/
        /*border: 0.02rem solid #1bffc5;*/
        margin-top: 0.1rem;

    }

    .box{ height:35px; background:#000; overflow:hidden;margin-top:0.3rem}
    .t_news{ height:19px;  color:#fff; padding-left:10px; margin:8px 0; overflow:hidden; position:relative;}
    .t_news b{ line-height:19px; font-weight:bold; display:inline-block;}
    .news_li,.swap{ line-height:19px; display:inline-block; position:absolute; top:0; left:72px;z-index: 99999}
    .news_li a,.swap a{ color:#fff;}
    .swap{top:19px;}

</style>
<body>
<!--顶部图片-->
<div class="top-box">
    <img src="{$_W['attachurl']}{$payimg}" alt="" style="width:100%">
</div>
<!--商品-->
<div class="product-box">
    <!--选择商品标题-->
    <div class="title">左右滑动或点击选择产品</div>
    <!--商品卡片-->
    <div class="container">
        <div id="slide" class="slide" class="index-slide" alt="star">
            {loop $navmsg $index $items}
            <div class="img" style="background: url('{$_W['attachurl']}{$items['add1']}')no-repeat center center/ 100% auto;">
                <!--产品标题-->
                <div class="product">{$items['title']} {$items['jiage']}元</div>
                <div class="vip">{$items['type']}</div>
                <!--购买按钮-->
                <div class="btn-box">
                    <button type="button" class="buy-button" onclick="javascript:window.location='{php echo $this->createMobileUrl('pay');}&jsonid={$jsonid}&money={$items['jiage']}&title={$items['title']}'">点击购买</button>
                </div>
            </div>
            {/loop}
            <div class="slide-bt"></div>
        </div>
    </div>
</div>

<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="javascript:window.location='tel:{$webcall}';" class="weui-footer__link">{$webcall}</a>
    </p>
    <p class="weui-footer__text"></p>
</div>
</div>
 

<div style="background: #fff;box-shadow:0.023rem 0.06rem 0.09rem rgb(209,209,209);border-radius: 0.12rem;width:97%;margin: 0 auto;border: 0.01rem solid #d2d2d2">
    {if count($fromlist)>0}
    <div class="fans" style="">
        <div style="margin:0 auto;font-size:0.2rem;padding: 0.1rem 0;color: #262626;">您目前有{php echo count($fromlist)}位粉丝</div>
        <div class="fans-box" style="">
            {loop $fromlist $index $items}
            {if $items['avartar']<>''}
            <img style="width:0.2rem;height: 0.2rem;border-radius: 50%;display: block;float: left;margin-right: 0.1rem;" src="{$items['avartar']}"/>
            {/if}
            {/loop}
        </div>
    </div>
    {/if}
    <div class="state">粉丝活动说明:已购买客户,有多少粉丝送多少天时长,粉丝购买全年法律赠送一个月时长</div>
    <!--按钮-->
    <div class="dh-btn">
        <div class="dh-left"><i class="iconfont">&#xe797;</i>兑换时长</div>
        <div class="dh-right"><i class="iconfont">&#xe7c5;</i>我也要粉丝</div>
    </div>
</div>
<!--实时轮播-->
<div class="box">
    <div class="t_news">
        <b>最新播报：</b>
        <ul class="news_li">
            {loop $bobao $items}
            <li><a href="#" style="color:#fff">{$items['title']}</a></li>
            {/loop}
        </ul>
        <ul class="swap"></ul>
    </div>
</div>

</body>
<script>
    var autoLb = false;          //autoLb=true为开启自动轮播
    var autoLbtime = 1;         //autoLbtime为轮播间隔时间（单位秒）
    var touch = true;           //touch=true为开启触摸滑动
    var slideBt = true;         //slideBt=true为开启滚动按钮


    var slideNub;               //轮播图片数量

    //窗口大小改变时改变轮播图宽高
    $(window).resize(function(){
        $(".slide").height($(".slide").width()*0.56);
    });


    $(function(){
        $(".slide").height($(".slide").width()*0.56);
        slideNub = $(".slide .img").size();             //获取轮播图片数量
        for(i=0;i<slideNub;i++){
            $(".slide .img:eq("+i+")").attr("data-slide-imgId",i);
        }


        //根据轮播图片数量设定图片位置对应的class
        if(slideNub==1){
            for(i=0;i<slideNub;i++){
                $(".slide .img:eq("+i+")").addClass("img3");
            }
        }
        if(slideNub==2){
            for(i=0;i<slideNub;i++){
                $(".slide .img:eq("+i+")").addClass("img"+(i+3));
            }
        }
        if(slideNub==3){
            for(i=0;i<slideNub;i++){
                $(".slide .img:eq("+i+")").addClass("img"+(i+2));
            }
        }
        if(slideNub>3&&slideNub<6){
            for(i=0;i<slideNub;i++){
                $(".slide .img:eq("+i+")").addClass("img"+(i+1));
            }
        }
        if(slideNub>=6){
            for(i=0;i<slideNub;i++){
                if(i<5){
                    $(".slide .img:eq("+i+")").addClass("img"+(i+1));
                }else{
                    $(".slide .img:eq("+i+")").addClass("img5");
                }
            }
        }


        //根据轮播图片数量设定轮播图按钮数量
        if(slideBt){
            for(i=1;i<=slideNub;i++){
                $(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>");
            }
            $(".slide-bt").width(slideNub*34);
            $(".slide-bt").css("margin-left","-"+slideNub*17+"px");
        }


        //自动轮播
        if(autoLb){
            setInterval(function(){
                right();
            }, autoLbtime*1000);
        }


        if(touch){
            k_touch();
        }
        slideLi();
        imgClickFy();
    });
    //右滑动
    function right(){
        var fy = new Array();
        for(i=0;i<slideNub;i++){
            fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
        }
        for(i=0;i<slideNub;i++){
            if(i==0){
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
            }else{
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
            }
        }
        imgClickFy();
        slideLi();
    };
    //左滑动
    function left(){
        var fy = new Array();
        for(i=0;i<slideNub;i++){
            fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
        }
        for(i=0;i<slideNub;i++){
            if(i==(slideNub-1)){
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
            }else{
                $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
            }
        }
        imgClickFy();
        slideLi();
    };
    //轮播图片左右图片点击翻页
    function imgClickFy(){
        $(".slide .img").removeAttr("onclick");
        $(".slide .img2").attr("onclick","left()");
        $(".slide .img4").attr("onclick","right()");
    };
    //修改当前最中间图片对应按钮选中状态
    function slideLi(){
        var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
        $(".slide-bt span").removeClass("on");
        $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on");
    };
    //轮播按钮点击翻页
    function tz(id){
        var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
        if(tzcs>0){
            for(i=0;i<tzcs;i++){
                setTimeout(function(){
                    right();
                },1);
            }
        }
        if(tzcs<0){
            tzcs=(-tzcs);
            for(i=0;i<tzcs;i++){
                setTimeout(function(){
                    left();
                },1);
            }
        };
        slideLi();
    };
    //触摸滑动模块
    function k_touch() {
        var _start = 0, _end = 0, _content = document.getElementById("slide");
        _content.addEventListener("touchstart", touchStart, false);
        _content.addEventListener("touchmove", touchMove, false);
        _content.addEventListener("touchend", touchEnd, false);
        function touchStart(event) {
            var touch = event.targetTouches[0];
            _start = touch.pageX;
        }
        function touchMove(event) {
            var touch = event.targetTouches[0];
            _end = (_start - touch.pageX);
        }

        function touchEnd(event) {
            if (_end < -100) {
                left();
                _end=0;
            }else if(_end > 100){
                right();
                _end=0;
            }
        }
    };
    // JavaScript Document
    function b(){
        t = parseInt(x.css('top'));
        y.css('top','19px');
        x.animate({top: t - 19 + 'px'},'slow');	//19为每个li的高度
        if(Math.abs(t) == h-19){ //19为每个li的高度
            y.animate({top:'0px'},'slow');
            z=x;
            x=y;
            y=z;
        }
        setTimeout(b,3000);//滚动间隔时间 现在是3秒
    }
    $(document).ready(function(){
        $('.swap').html($('.news_li').html());
        x = $('.news_li');
        y = $('.swap');
        h = $('.news_li li').length * 19; //19为每个li的高度
        setTimeout(b,3000);//滚动间隔时间 现在是3秒

    });
    //获取粉丝数量
    var fansize;
    fansize=$(".fans-box img").length;
    //点击弹出提示
    $(".dh-left").click(function () {
        if(fansize<30) {
            alert("满30个粉丝即可兑换1个月免费法律顾问")
        }
    });
    //分享
    $(".dh-right").click(function () {
             alert("正在为您生成专属分享海报...");
		  window.location='{php echo $this->createMobileUrl("2weima");}';
    })


</script>
</html>