<!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="http://pcss1.4008000000.com/app_css/4008000000/v20/base.css"/>
<link rel="stylesheet" href="pay.css"/>
<script type="text/javascript" src="http://pscript1.4008000000.com/app_js/paui/1.0.1/build/pa.ui.min.js"></script>
</head>
<body style="padding-top: 100px;">
<div class="cashier-center-container">
<div class="cashiser-switch-wrapper c" id="J-csWrapper">
<!-- 扫码支付页面 -->
<div class="fl cashier-center-view">
<div data-role="qrPayArea" class="qrcode-integration qrcode-area" id="J_qrPayArea">
<div class="qrcode-header">
<div class="ft-center">扫一扫付款（元）</div>
<div class="ft-center qrcode-header-money">49.90</div>
</div>
<div class="c qrcode-img-wrapper">
<div data-role="qrPayImg" class="qrcode-img-area">
<div style="position: relative;display: inline-block;">
<img src="mpingan.jpg" width="168" height="168">
</div>
</div>
<div class="qrcode-img-explain fn-clear">
<img class="fl" src="https://t.alipayobjects.com/p_w_picpaths/T1bdtfXfdiXXXXXXXX.png" alt="扫一扫标识" seed="qrcodeImgExplain-tImagesT1bdtfXfdiXXXXXXXX" smartracker="on">
<div class="fl">打开手机支付宝<br>扫一扫继续付款</div>
</div>
</div>
<div class="qrcode-foot">
<div class="qrcode-explain">
<a href="javascript:void(0);" class="qrcode-downloadApp" target="_blank">首次使用请下载手机支付宝</a>
</div>
</div>
</div>
<!-- 指引区域 -->
<div class="qrguide-area" id="J_qrguideArea">
<img src="ss.png" class="qrguide-area-img background" seed="J_qrguideArea-qrguideAreaImg" smartracker="on">
</div>
</div>
<!-- 点击切换区域 -->
<div class="fl view-switch qrcode-show">
<div class="tc switch-qrcode-tip" id="J_tip_qr">
<div class="switch-tip-font">手机不在身边?</div>
<div class="switch-tip-icon-wrapper">
<img class="switch-tip-icon-img" src="pc.jpg" alt="支付宝图标" width="77" height="71">
</div>
<a class="switch-tip-btn" href="javascript:void(0)" seed="J_tip_qr-switchTipBtn" smartracker="on">< 登录账户付款</a>
</div>
<div class="tc switch-pc-tip" id="J_tip_pc">
<div class="switch-tip-font">试试手机支付宝</div>
<div class="switch-tip-icon-wrapper">
<img class="switch-tip-icon-img" src="m.jpg" alt="支付宝图标" width="55" height="75">
</div>
<a class="switch-tip-btn" href="javascript:void(0)" seed="J_tip_pc-switchTipBtn" smartracker="on">扫一扫付款 ></a>
</div>
</div>
<!-- PC 付款登录页面 -->
<div class="fl cashier-center-view view-pc" id="J_view_pc">
<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 class="dn login-title-right">
<a href="javascript:void(0);" class="to-mobile rt-text" id="J_signUp" seed="NewQr_register" style="color: rgb(21, 137, 202);">新用户注册</a>
</div>
</div>
</div>
<!---->
<div class="login-panel">
<div class="mi-form-item">
<label class="mi-label">充值金额：</label>
<input type="email" name="loginId" class="mi-input mi-input-account" value="" id="J_tLoginId" seed="NewQr_tAccountInput" placeholder="请输入充值金额，" autocomplete="off" data-explain="">
</div>
<div class="mi-form-item">
<label class="mi-label">充值方式：</label>
<div class="pay-select">
<img src="https://script1s.4008000000.com/app_series/shop/shop/payment/p_w_picpaths/bank/alipay.gif" class="fl img_a" otype="button">
<img src="https://script1s.4008000000.com/app_series/shop/shop/payment/p_w_picpaths/bank/tenpay.gif" class="fr img_a">
</div>
</div>
<div class="mi-form-item"><a href="" class="goto-pay"><span>立即充值</span></a> </div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#J_tip_qr").click(function(){
//$("#J-csWrapper").addClass("ml-853");
$("#J-csWrapper").animate({"margin-left":"-853px"},300);
$("#J_tip_qr").hide();
});
$("#J_tip_pc").click(function(){
//$("#J-csWrapper").addClass("ml-853");
$("#J-csWrapper").animate({"margin-left":"0px"},300);
$("#J_tip_qr").show();
});
});
</script>
</body>
</html>
.tc{text-align:center}
.cashier-center-container{overflow:hidden;position:relative;z-index:1;width:1000px;min-height:460px;background-color:#fff;border-bottom:3px solid #b3b3b3;margin:0 auto}
.cashiser-switch-wrapper{width:1860px}
.ml-853{margin-left: -853px;}
.fn-clear{zoom:1}
.cashier-center-view{position:relative;width:853px}
.qrcode-area{margin:0 auto;position:relative}
.qrcode-integration{width:300px}
.qrcode-integration .qrcode-header{display:block;width:auto;margin:0;padding:0;margin-top:75px;margin-bottom:16px}
.ft-center{text-align:center}
.qrcode-header-money{font-size:26px;font-weight:700;color:#f60}
.qrcode-integration .qrcode-img-wrapper{position:relative;width:168px;height:auto;min-height:168px;margin:0 auto;padding:6px;border:1px solid #d3d3d3;-webkit-box-shadow:1px 1px 1px #ccc;box-shadow:1px 1px 1px #ccc}
.qrcode-integration .qrcode-img-area{width:168px;height:168px;text-align:center}
.qrcode-foot{height:65px;padding:10px 0;text-align:center}
.qrguide-area{position:absolute;top:62px;left:530px;width:204px;height:183px;cursor:pointer}
.qrcode-img-explain{padding:10px 0 6px}
.qrcode-img-explain img{margin-left:20px;margin-top:5px}
.qrcode-img-explain div{margin-left:10px}
.view-switch.qrcode-show{border-left:1px solid #d9d9d9;border-top-left-radius:4px;border-bottom-left-radius:4px}
.view-switch{width:146px;height:526px;background-color:#e6e6e6;cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;user-select:none}
.switch-qrcode-tip,.switch-pc-tip{height: 400px;padding-top:126px;}
.switch-tip-font{font-size:16px;font-family:tahoma,arial,'\5FAE\8F6F\96C5\9ED1','\5B8B\4F53'}
.switch-tip-icon-wrapper{margin-top:4px;height:113px}
.switch-tip-icon-img{margin-top:20px}
.switch-tip-btn{display:block;width:106px;height:36px;margin:6px auto 0;border:1px solid #0fa4db;background-color:#00aeef;border-radius:5px;font-size:12px;font-weight:400;line-height:36px;text-align:center;color:#fff;text-decoration:none}
.switch-tip-btn:hover{color:#fff;text-decoration:none}
.cashier-center-view .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{padding:0 0 12px 0;width:350px}
.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:14px;padding:7px 10px;border:1px solid #CCC;border-top-color:#a6a6a6;color:#4d4d4d;font:400 12px tahoma,arial,\5b8b\4f53;vertical-align:top;margin-bottom:21px}
.pay-select{height:40px;padding-bottom:21px}
.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;}
