quick-pay
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <meta http-equiv="Content-Language" content="zh-cn">
	    <meta name="apple-mobile-web-app-capable" content="no"/>
	    <meta name="apple-touch-fullscreen" content="yes"/>
	    <meta name="format-detection" content="telephone=no,email=no"/>
	    <meta name="apple-mobile-web-app-status-bar-style" content="white">
	    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	    <meta http-equiv="Expires" content="0">
	    <meta http-equiv="Pragma" content="no-cache">
	    <meta http-equiv="Cache-control" content="no-cache">
	    <meta http-equiv="Cache" content="no-cache">
	    <meta name="viewport"
	          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/home.css" />
	</head>
	<body>
		<div class="page-wrapper">
			<!--header-->
			<div class="header-top">
				<div class="container">
					<div class="row">
					  <div class="col-sm-6">
					  	<img src="images/logo.png"/>
					  </div>
					  <div class="col-sm-6">
					  	<div class="login-reg">
					  		<a href="javascript:void(0)">登录</a>
					  		/
					  		<a href="javascript:void(0)">注册</a>
					  	</div>
					  </div>
					</div>
				</div>
			</div>
			<!--/header-->

			<!--navigation-->
			<div class="navigation-container">
				<div class="container">
					<div class="row">
					  <div class="col-md-12">
					  	<nav class="navbar navbar-default">
						  <div class="container-fluid">
						    <div class="navbar-header">
						      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						        <span class="sr-only">Toggle navigation</span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						      </button>
						    </div>

						    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						      <ul class="nav navbar-nav">
						      	<li><a href="javascript:;">首页</a></li>
						        <li class="dropdown">
						          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">开始接入<span class="caret"></span></a>
						          <ul class="dropdown-menu">
						            <li><a href="javascript:;">载入文档</a></li>
						            <li><a href="http://demo.ukafu.com/">演示下载</a></li>
						          </ul>
						        </li>
						        <li><a href="javascript:;">应用下载</a></li>
						        <li><a href="javascript:;">常见问题</a></li>
						      </ul>
						    </div>
						  </div>
						</nav>
					  </div>
					</div>
				</div>
			</div>
			<!--/navigation-->


			<!--banner-->
			<div class="banner-container">
				<img src="images/banner.png" width="100%"/>
				<!--<div class="button-group">
					<div class=""></div>
				</div>-->
			</div>
			<!--/banner-->


			<!--experience-->
			<div class="experience-container">
				<!--title-->
				<div class="experience-title">
					<h3>支付流程体验</h3>
					<p>体验接入后您用户的付款流程，收款码会变成您的个人收款码，款项直入您支付宝微信账户，并及时回调</p>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-sm-3">
							<div class="item-pay-img-container"><img src="images/items-1.png"/></div>
							<p class="item-pay-title">五分钱体验回调</p>
							<div class="radio-group-container">
									<input type="radio" name="items-pay" id="dom-alipay" value="order.php?act=new&paytype=ALIPAY" checked/>
									<label for="dom-alipay">支付宝支付</label>
									<input type="radio" name="items-pay" id="dom-wechat" value="order.php?act=new&paytype=WXPAY" />
									<label for="dom-wechat">微信支付</label>
							</div>
							<div class="items-bg-public item-bg-content-1"><a href="javascript:pay();">立即支付</a></div>
						</div>
						<div class="col-sm-3">
							<div class="item-pay-img-container"><img src="images/items-2.png"/></div>
							<p class="item-pay-title">自定义金额测试</p>
							<div class="custom-pay-text">
								<input type="number" name="" id="" value="" placeholder="请输入金额"/>
							</div>
							<div class="items-bg-public item-bg-content-2"><a href="javascript:custompay();">立即支付</a></div>
						</div>
						<div class="col-sm-3">
							<div class="item-pay-img-container"><img src="images/items-3.png"/></div>
							<p class="item-pay-title">调取支付宝APP</p>
							<p class="item-pay-description">无需扫码，点击支付。请用手机浏览体验</p>
							<div class="items-bg-public item-bg-content-3"><a href="javascript:;">手机上点这里</a></div>
						</div>
						<div class="col-sm-3">
							<div class="item-pay-img-container"><img src="images/items-4.png"/></div>
							<p class="item-pay-title">微信内支付</p>
							<p class="item-pay-description">关注工作号，体验微信支付，包括转发好友，朋友圈，公众号</p>
							<div class="items-bg-public item-bg-content-4"><a href="javascript:;">查看二维码</a></div>
						</div>
					</div>
				</div>
			</div>
			<!--/experience-->

			<!--specification-->
			<div class="specification-container">
				<div class="specification-title">
					<h4>套餐选择</h4>
					<p>两款不同的计费方式，满足你不同的需求</p>
				</div>
				<div class="container">
					<div class="row">
						<div class="col-sm-6">
							<div class="specification-items-container">
								<ul class="items-ul">
									<li class="items-li">专业版0.9元/天</li>
									<li class="items-li">适合交易比较大的收款，更节约成本</li>
									<li class="items-li">免手续费</li>
									<li class="items-li">客服指导安装app设置插件</li>
									<li class="items-li">7x12小时在线客服</li>
									<li class="items-li">
										支付插件定期维护更新
										<div class="immediately-join"><a href="javascript:;">立即加入</a></div>
									</li>
								</ul>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="specification-items-container">
								<ul class="items-ul">
									<li class="items-li" style="background:#FF7D7D;">高级版0.1元/天</li>
									<li class="items-li">适合交易比较少的收款，费用低</li>
									<li class="items-li">3%手续费</li>
									<li class="items-li">客服指导安装app设置插件</li>
									<li class="items-li">7x12小时在线客服</li>
									<li class="items-li">
										支付插件定期维护更新
										<div class="immediately-join"><a href="javascript:;">立即加入</a></div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--/specification-->

			<!--footer-->
			<div class="footer-container">
				<p>大连致一科技有限公司</p>
				<p>QQ:765858558  电话/微信0411-39510411</p>
				<p>备案号: 辽ICP备16018292号-4</p>
			</div>
			<!--/footer-->
		</div>

		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
    <script type="text/javascript">
			function pay(){
					var inputs = $('.radio-group-container').find('input');
					var checkedValue = '';
					inputs.each(function(i,d){
							if($(d).is(':checked')){
								checkedValue = $(d).val();
							}
					});
					window.location.href = checkedValue;
			}
			function custompay(){
				var money = $('.custom-pay-text').find('input').val();
				if(!money || !$.isNumeric(money)) return;
				window.location.href = 'order.php?act=new&paytype=ALIPAY&money=' + money;
			}
			new function () {
		      var _self = this;
		      _self.width = screen.width;//设置默认最大宽度
		      _self.fontSize = 25;//默认字体大小
		      _self.widthProportion = function () {
		        var _dom = (document.body && document.body.clientWidth || document.getElementsByTagName("html")[0].offsetWidth) / _self.width;
		        return _dom;
		      };
		      _self.changePage = function () {
		        document.getElementsByTagName("html")[0].setAttribute("style", "font-size:" + _self.widthProportion() * _self.fontSize + "px");
		      }

		      _self.changePage();
		      window.addEventListener('resize', function () {
		        _self.width = screen.width;//设置默认最大宽度
		        _self.changePage();
		      }, false);
		  };

		</script>
	</body>
</html>