<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>testtd</title>

    <meta name="Keywords" content="test"/>

    <meta name="Description" content="test"/>

    <link rel="stylesheet" href="Static/css/global.css"/>

    <link rel="stylesheet" href="Static/css/member.css"/>

    <style>

        /*add address*/

        .pay-notice{padding: 10px 0 25px 0;}

        .pay-notice h2 {

            padding-bottom: 10px; font-size: 24px;;

        }

        .pay-notice p {

            font-size: 14px;

            line-height: 22px;

        }

        .pay-module .tab-list {border:1px solid #cecece;}

        .pay-module .tab-list li{ position: relative; float: left; width: 33.3%; height: 68px;}

        .pay-module .tab-list li i{ display: none; position: absolute; left: 50%; margin-left: -11px; bottom:-12px;  width: 23px; height: 12px; background: url(static/img/dere2.png) no-repeat 0 0;}

        .pay-module .tab-list li h2{ font-size: 24px; font-size: 0; font-size: 1px\9;text-align: center;}

        .pay-module .tab-list li a{ display: block; height: 68px; line-height: 68px; color: #333;  background: #fafafa;  border-right: 1px solid #cecece;}

        .pay-module .tab-list li a:hover{ background: #fff;}

        .pay-module .tab-list li.active a{ color: #b00; background: #fff; }

        .pay-module .tab-list li.active i{ display: block;}

        .pay-module .tab-list li.last a{border-right: 0}

        .pay-module .tab-list li span{display: inline-block; vertical-align: middle;}

        .pay-module .tab-list li .code-ico{ background: url(http://pimg1.4008000000.com/app_images/4008000000/youhui/cpbaoxian/official/nvshenjiehd2016/nsj_ico.png) no-repeat; width: 49px; height: 49px; background-position: -111px 0;}

        .pay-module .tab-list li .txt{font-weight: 500;font-size: 24px; margin-left: 8px;}

        .panel{display: none;}


        .pay-code-box{width: 420px; margin: 60px auto;}

        .pay-code{float: left; margin-right: 20px;}

        .pay-code-arrow{float: left; width: 99px; height: 93px; background: url(http://pcss1.4008000000.com/app_images/4008000000/v20/zaixiangoumai/baoxian/saoyisao.png) no-repeat; margin-top: 170px;}


        /*zhifubao*/

        .goto-login-box{padding:60px 0 20px 250px;width:350px;margin:0}

        .login-title-area{margin-bottom:30px;border-bottom:2px solid #CBCBCB;position:relative;height:30px;padding:2px 0}

        .login-title-left{float:left;font-size:20px;background-color:#fff;text-decoration:none}

        .login-title .lt-text{color:#000;font-size:20px;background-color:#fff}

        .login-title-right{float:right;font-size:16px;line-height:33px;text-decoration:none}

        .login-title .rt-text{font-size:14px;font-weight:700;text-decoration:none;color:#1589ca}

        .mi-form-item{width:350px;margin-bottom:21px}

        .mi-label{text-align:left;height:auto;line-height:18px;padding:0;display:block;padding-bottom:8px;margin:0;width:auto;float:none;font:14px/1.5 tahoma,arial,\5b8b\4f53}

        .mi-input-account{height:24px;width:328px;font-size:16px;padding:7px 10px;border:1px solid #CCC;border-top-color:#a6a6a6;color:#4d4d4d;font:400 12px tahoma,arial,\5b8b\4f53;vertical-align:top;}

        .pay-giving{}

        .pay-giving ul li{height: 30px; line-height: 30px; margin: 4px 0;}

        .pay-giving ul li a{display: inline-block; background: #ffdfc9;line-height: 30px;height: 30px;font-size: 16px;width: 127px;border: 0; color: #f60; border-radius: 4px; text-align: center;}

        .pay-giving ul li a:hover {background: #fdccab;}

        .pay-giving ul li a.on{background-color: #b00; color: #fff;}

        .pay-giving .giving-money{background: url(http://pimg1.4008000000.com/app_images/4008000000/youhui/cpchexian/campaign/zhitong/zbyhq/ad.png) no-repeat; background-size: auto 30px; width: 73px; height: 30px; text-indent: 25px; display: inline-block; font-size: 25px; color: #fff; vertical-align: middle;}

        .giving-s,.giving-j{display: inline-block; padding: 0 5px; font-size: 16px;}

        .giving-s{margin-left: 25px;}

        .pay-desc{padding-top: 8px; color: #888;}

        .img_a{border:2px solid #fe6513;width:148px;height:38px}

        .goto-pay{display:block;margin:0 auto;width:348px;height:38px;border-radius:3px;color:#fefefe;text-align:center;font-weight:700;font-size:14px;line-height:38px;cursor:pointer;  border: 1px solid #0fa4db; background: #00aeef;}

        .goto-pay span{}

        .goto-pay:hover {line-height: 36px;text-decoration: none;background: #05b5f7;color: #fefefe;}

        .goto-pay:hover span {height: 36px; line-height: 36px; border: 1px solid #4bcaf9; display: block; cursor: pointer;color: #fefefe;}


    </style>

    <script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>

</head>

<body>

<div style="height: 100px;">dd</div>

    <!--面包屑 -->

    <div class="wide">

        <div class="ptb10 breadcrumb-area"><a href="/" title="首页">首页</a>&nbsp;&nbsp;\&nbsp;&nbsp;<a href="/member/" title="我的首页">我的首页</a>&nbsp;&nbsp;\&nbsp;&nbsp;<span id="pathTitle">我的首页</span></div>

    </div>

    <!--面包屑 -->

    <div class="buy-module">

        <div class="wide c">

            <!--左边-->

            <div class="wide-l">


            </div>

            <!--左边 end-->

            <div class="c wide-c-r">


                <div class="pay-notice">

                    <h2>产品下载</h2>

                    <p>phpwind是采用PHP+MySQL方式运行的开源社区程序。轻架构,高效率简易开发,助你快速搭建并轻松管理社区站点。<br>面向移动互联网应用需求,PW还提供移动社区客户端,把社区站点从PC迁移到手机,实现应用、数据融合互通,一站式多<br>终端服务,确保用户体验自然过渡。</p>


                </div>

                <!--form rechange begin-->

                <div class="pay-module">

                    <ul id="J_payTab" class="tab-list clearfix">

                        <li class="active">

                            <i></i>

                            <h2><a href="javascript:void(0);"><span class="code-ico"></span><span class="txt">erweima</span></a></h2>

                        </li>

                        <li>

                            <i></i>

                            <h2><a href="javascript:void(0);"><span class="alipay-ico"></span><span class="txt">zhifbuao</span></a></h2>

                        </li>

                        <li>

                            <i></i>

                            <h2><a href="javascript:void(0);"><span class="tenpay-ico"></span><span class="txt">caifutong</span></a></h2>

                        </li>


                    </ul>

                    <div id="J_payCont">

                        <div class="panel">


                            <div class="clearfix pay-code-box">

                                <div class="pay-code">

                                    <img src="http://pimg1.4008000000.com/app_images/4008000000/v20/zaixiangoumai/baoxian/code/sjsp_zizhujihuoka_code.png" width="300" height="300" alt="二维码">

                                </div>

                                <div class="pay-code-arrow"></div>

                            </div>


                        </div>

                        <!--alipay begin-->

                        <div class="panel" style="display: block;">

                            <div class="goto-login-box">

                                <div class="login-title-area">

                                    <div class="login-title">

                                        <div class="login-title-left">

                                            <p class="lt-text ft-yh">登录支付宝付款</p>

                                        </div>

                                    </div>

                                </div>

                                <!---->

                                <div class="login-panel" id="J_alipay">

                                    <div class="mi-form-item">

                                        <label class="mi-label">充值金额:</label>

                                        <input type="text" name="loginId" class="mi-input mi-input-account" value="" id="J_inputPayM" seed="NewQr_tAccountInput" placeholder="请输入充值金额," autocomplete="off" data-explain="">

                                    </div>

                                    <div class="mi-form-item">

                                        <label class="mi-label">充值即送:</label>

                                        <div class="pay-giving">

                                            <ul id="J_alipayMoney">

                                                <li><a class="pm" href="javascript:void(0);">10元</a></li>

                                                <li><a class="pm" href="javascript:void(0);">50元</a></li>

                                                <li><a class="pm" href="javascript:void(0);">100元</a><span class="giving-s">送</span><strong class="giving-money">10</strong><span class="giving-j">+</span><label class="giving-level">高级会员</label></li>

                                                <li><a class="pm" href="javascript:void(0);">200元</a></li>

                                                <li><a class="pm" href="javascript:void(0);">500元</a></li>

                                            </ul>

                                        </div>

                                    </div>

                                    <div class="mi-form-item">

                                        <label class="mi-label">付款说明:</label>

                                        <input type="email" name="loginId" class="mi-input mi-input-account" value="" id=""  placeholder="付款说明," autocomplete="off" data-explain="">

                                        <p class="pay-desc">付款说明付款说明付款说明</p>

                                    </div>

                                    <div class="mi-form-item"><a href="" class="goto-pay"><span>支付宝立即充值</span></a> </div>

                                </div>

                            </div>

                        </div>

                        <!--alipay end-->

                        <!--tenpay begin-->

                        <div class="panel">caifutong</div>

                        <!--tenpay end-->

                    </div>

                </div>


                <!--form rechange end-->


            </div>

        </div>

    </div>


    <!--

    http://www.w3cplus.com/css3/how-to-animate-box-shadow.html

    http://tobiasahlin.com/demo/animate-box-shadow/

    thinkphp:

    http://www.xcsoft.cn/article/156.html

    http://ht19820316.blog.163.com/blog/static/3395523320142611716910/

    -->

    <script>

        //http://www.4008000000.com/cpbaoxian/official/pinganyhd/index.shtml

        $(function(){

            var $J_payTabli = $("#J_payTab li");

            var $J_payCont = $("#J_payCont .panel");

            if($J_payTabli.length <= 2){

                $J_payTabli.css("width", 50 + "%");

            }

            $("#J_payTab li:last").addClass("last");

            $J_payTabli.click(function(){

                var $panel = $(".panel");

                var curr = $J_payTabli.index(this);

                $(this).addClass("active");

                $(this).siblings().removeClass("active");

                $J_payCont.eq(curr).show().siblings().hide();

            });


            //

            $("#J_alipayMoney li a").click(function(){

                var payM = parseInt($(this).html());

                $("#J_inputPayM").val(payM);

                $("#J_alipayMoney li a").removeClass("on");

                $(this).addClass("on");

            });


        });

    </script>

</body>

</html>