<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式--> <meta name="renderer" content="webkit"><!--360渲染模式--> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no"> <title>托管费用</title> <link rel="stylesheet" href="../../css/basic.css"> <style type="text/css"> /*以下为支付弹框*/ .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; } /*以下为主页*/ .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} /*以下为优惠券*/ .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> <!--导航--> <div class="top-nav-area"> <ul> <a class="back-a" href="javascript:history.back(-1)"></a> <li>托管费用</li> </ul> </div> <div class="main-body-area"> <div class="pay-info-area"> <ul class="pay-ul"> <li> <span class="li-type">托管金额</span> <input class="input-area" readonly type="text" value="100.00"> </li> <li> <span class="li-type">实际支付</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">点击使用</span> <span class="font-cunPon">无门槛优惠</span> </a> </li> <li> <a href="#" class="use"> <span class="money-type">¥</span> <span class="money-num">10</span> <span class="try-cunPon">点击使用</span> <span class="font-cunPon">无门槛优惠</span> </a> </li> </ul> <div class="addMoney-btn-area"> <button class="addMoney-btn">托管</button> </div> </div> <!--主体--> <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">请输入钱包密码</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">输入错误,请重新输入</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";禁止滚动 $('.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) { //执行其他操作 alert("success 密码正确") window.location.reload(); } }); </script> </body> </html>
仿微信密码输入框
猜你喜欢
转载自570109268.iteye.com/blog/2397514
今日推荐
周排行