<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie use edge rendering mode-->
<meta name="renderer" content="webkit"><!--360 rendering mode-->
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
<title>Hosting Fees</title>
<link rel="stylesheet" href="../../css/basic.css">
<style type="text/css">
/*The following is the payment popup box*/
.pwd-box{
height: 1rem;
margin: auto;
width: 99%;
padding-left: 1px;
position: relative;
overflow: hidden;
}
.pwd-box input[type="tel"]{
width: 99%;
height: 0.8rem;
color: transparent;
position: absolute;
top: 0;
left: 0;
border: none;
font-size: 0.25rem;
opacity: 0;
z-index: 1;
letter-spacing: 0.636rem;
}
.fake-box input{
border-bottom: 1px solid black;
float: left;
z-index: 99999;
width: 0.8rem;
height: 0.8rem;
border-right: 1px solid black;
text-align: center;
font-size: 0.25rem;
border-top: 1px solid black;
}
.fake-box input:first-child{
border-top-left-radius: 0.2rem;
border-left: 1px solid black;
border-bottom-left-radius: 0.2rem;
}
.fake-box input:last-child{
border-top-right-radius: 0.2rem;
border-right: 1px solid black;
border-bottom-right-radius: 0.2rem;
}
.hide{display: none}
.body-area{
z-index: 999999;
position: fixed;
width: 378px;
height: 566px;
background-color: black;
opacity: 0.5;
top: 0;
}
.pwd-area{
width: 100%;
height: 100%;
position: absolute;
padding-top: 1rem;
top: 0rem;
}
.pwd-input-area{
text-align: center;
width: 6rem;
height: 3rem;
margin: auto;
background-color: white;
margin-top: 1rem;
position: relative;
}
.inputPwdArea{
line-height: 1rem;
font-size: 0.28rem}
.fake-box{
height: 0.9rem;
width: 5rem;
position: relative;
margin: auto;
}
.prompt-error{
color: #F23A38;
line-height: 1rem;
font-size: 0.28rem;
}
/*The following is the homepage*/
.pay-info-area{
padding-top: 0.5rem;
height: auto;
width: 90%;
margin: auto;
}
.pay-ul ul{
/*background-color: #00a0e9;*/
}
.pay-ul li{
position: relative;
height: 1.2rem;
width: 100%;
border-bottom: 1px solid #e3e3e3;
}
.li-type{
line-height: 1.6rem;
display: block;
color: #363636;
font-size: 0.28rem;
height: 100%;
width: 18%;
left: 0;
}
.input-area{
color: #666;
background-color: transparent;
font-size: 0.28rem;
width: 76%;
position: absolute;
right: 0;
bottom: 0.15rem;
height: 0.5rem;
padding-left: 6%;
outline: none;
}
.agreement a{
position: absolute;
left: 0.5rem;
top: 0.1rem;
color: #666;
font-size: 0.28rem;
}
.addMoney-btn-area{
width: 50%;
height: 0.8rem;
margin: 0.8rem auto;
}
.addMoney-btn {
height: 100%;
width: 100%;
background-color: #F23A38;
border-radius: 10px;
outline: none;
color: white;
font-size: 0.28rem;
}
.hidePayArea{display: none}
/* The following are coupons */
.cunPonList{
padding-top: 0.3rem;
width: 100%;
height:auto;
overflow: hidden;
padding-bottom: 0.3rem;
}
.cunPonList li {
float: left;
width: 36%;
margin: 0 6%;
height:1.2rem;
border: 1px solid #ADADAD;
position: relative;
}
.used,.use{
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.used{color: #363636;}
.use{color: #F23A38}
.use .try-cunPon{background-color: #F23A38}
.use .money-type{left: 0.1rem}
.use .money-num{left: 0.3rem}
.money-type{
font-size: 0.15rem;
position: absolute;
bottom: 0.3rem;
left: 0.2rem;
}
.money-num{
position: absolute;
font-size: 0.7rem;
bottom: 0.2rem;
left: 0.5rem;
}
.try-cunPon{
padding: 0 0.1rem;
background-color: #363636;
color: white;
font-size: 0.25rem;
position: absolute;
right: 0.3rem;
top: 0.2rem;
}
.font-cunPon{
position: absolute;
bottom: 0.3rem;
font-size: 0.23rem;
right: 0.3rem;
}
</style>
<script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--Navigation-->
<div class="top-nav-area">
<ul>
<a class="back-a" href="javascript:history.back(-1)"></a>
<li>Hosting Fees</li>
</ul>
</div>
<div class="main-body-area">
<div class="pay-info-area">
<ul class="pay-ul">
<li>
<span class="li-type">Managed Amount</span>
<input class="input-area" readonly type="text" value="100.00">
</li>
<li>
<span class="li-type">Actual Payment</span>
<input class="input-area" readonly type="text" value="90.00">
</li>
<li style="border-bottom: none;">
<span class="li-type" style="width: 100%">可用优惠券</span>
</li>
</ul>
</div>
<ul class="cunPonList">
<li>
<a href="#" class="used">
<span class="money-type">￥</span>
<span class="money-num">5</span>
<span class="try-cunPon">Click to use</span>
<span class="font-cunPon">No threshold discount</span>
</a>
</li>
<li>
<a href="#" class="use">
<span class="money-type">￥</span>
<span class="money-num">10</span>
<span class="try-cunPon">Click to use</span>
<span class="font-cunPon">No threshold discount</span>
</a>
</li>
</ul>
<div class="addMoney-btn-area">
<button class="addMoney-btn">托管</button>
</div>
</div>
<!--Subject-->
<div class="controlPay hidePayArea" style="position: absolute;top: 0">
<div class="body-area" style="z-index: 10"></div>
<div class="pwd-area" style="z-index: 100">
<div class="pwd-input-area">
<span class="inputPwdArea">Please enter wallet password</span>
<div class="pwd-box">
<input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
<div class="fake-box">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
<input type="password" readonly="">
</div>
</div>
<span class="prompt-error">Incorrect entry, please retype</span>
</div>
</div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/check/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function () {
$('.body-area').css('width', $(window).width() + 'px')
.css('height', $(window).height() + 'px')
.css('background-color','black').css('opacity','0.5');
$('.controlPay').css('width', $('.body-area').width() + 'px')
.css('height', $('.body-area').height() + 'px')
$(window).resize(function() {
$('.body-area').css('width', $(window).width() + 'px')
.css('height', $(window).height() + 'px');
$('.controlPay').css('width', $('.body-area').width() + 'px')
.css('height', $('.body-area').height() + 'px')
});
// document.documentElement.style.overflow = "hidden"; no scrolling
$('.addMoney-btn').click(function () {
$('.controlPay').removeClass('hidePayArea')
})
// $(".controlPay").hide();
})
</script>
<script>
var $input = $(".fake-box input");
$("#pwd-input").on("input", function() {
var pwd = $(this).val().trim();
for (var i = 0, len = pwd.length; i < len; i++) {
$input.eq("" + i + "").val(pwd[i]);
}
$input.each(function() {
var index = $(this).index();
if (index >= len) {
$(this).val("");
}
});
if (len == 6) {
// perform other operations
alert("success password is correct")
window.location.reload();
}
});
</script>
</body>
</html>