【黔大溪的日常】绘一个超简单的收银界面，直接可用喔
无聊？，不如看看/听听
→ 熙视听 Music | Past Lives - Slushii
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title id="tn">服务中心(pay.Kweichow-Qlt.xyz)</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<style>
*{margin:0;padding:0;list-style-type:none;}
body{margin: 0 auto;background:#f3f3f3;}
input,button{border:0;}
.head{margin:-1px auto;padding:5px 8px;width:100%;line-height:35px;background:#f3f3f3;color:#666;}
.head0{margin:-1px auto;padding:5px 0;width:100%;line-height:35px;background:#f3f3f3;color:#666;text-align:center;}
.head0 div{margin:0 auto;width:35px;height:35px;}
.qbline{margin:0 auto;padding:0 4px;line-height:35px;text-align:left;}
.qbline li{float:left;margin:5px auto;padding:5px 0;line-height:35px;width:100%;color:#999;background:#fff;}
.qbline div{float:right;color:#ccc;}
.qbline li:hover{background:#f9f9f9;}
.tabline{margin:0 10px;padding:0;line-height:22px;height:95px;text-align:center;background:#6699CC;color:#f9f9f9;border-radius:5px;}
.tabline li{float:left;margin:0 auto;line-height:34px;width:50%;}
.tabline div{margin:0 auto;padding:0 8px;font-size:22px;}
.tabline p{margin:0 auto;padding:0 8px;font-size:14px;text-align:left;}
.tabline span{margin:0 auto;padding:0 8px;font-size:12px;}
.tabline{margin:0 10px;padding:0;line-height:22px;height:95px;text-align:center;background:#6699CC;color:#f9f9f9;border-radius:5px;}
.czlist{margin:5px auto;padding:0 8px;line-height:35px;height:35px;width:100%;}
.czlist li{float:left;margin:0 auto;line-height:34px;width:20%;color:#999}
.czlist .on{color:#666;}
.czlist .on div{margin:0 auto;width:20px;height:2px;background:#999;}
.page{margin:0 auto;width:100%;line-height:35px;background:#000;color:#999;bottom:0;left:0;right:0;position:fixed;text-align:center;}
.show{display:block;}
.hidden{display:none;}
.l{float:left;}
.r{float:right;}
</style>
</head>
<body>
<div class="hidden" id="t_b0">
<div class="head0">
<div class="l" onclick="go()">←</div>
我的余额
<div class="r"></div>
</div>
<div class="tabline">
<ul>
<li>
<div id="a1">0.00</div><span>余额</span>
</li>
<li>
<div id="a2">0.00</div><span>兜哩金</span>
</li>
</ul>
</div>
<div class="czlist" id="cz">
<ul>
<li onclick="o_0_0(0)" class="on">余额明细<div></div></li>
<li onclick="o_0_0(1)">充值记录<div></div></li>
</ul>
</div>
<div class="show" id="c_l0"></div>
<div class="hidden" id="c_l1"></div>
</div>
<div class="hidden" id="t_b1">
<div class="head0">
<div class="l" onclick="go()">←</div>
我的收益
<div class="r"></div>
</div>
</div>
<div class="hidden" id="t_b2">
<div class="head0">
<div class="l" onclick="go()">←</div>
优惠券
<div class="r"></div>
</div>
</div>
<div class="hidden" id="t_b3">
<div class="head0">
<div class="l" onclick="go()">←</div>
代金券
<div class="r"></div>
</div>
</div>
<div class="" id="t">
<div class="head0">
<div class="l" onclick="gol()">←</div>
我的钱包
<div class="r"></div>
</div>
<div class="tabline">
<p>我的资产</p>
<ul>
<li>
<div id="a3">0.00</div>
<span>余额 ></span>
</li>
<li>
<div id="a4">0.00</div>
<span>收益 ></span>
</li>
</ul>
</div>
<ul class="qbline" id="q_list">
<li onclick="o_0(0)">我的余额<div>></div></li>
<li onclick="o_0(1)">我的收益<div>></div></li>
<li onclick="o_0(2)">优惠券<div>></div></li>
<li onclick="o_0(3)">代金券<div>></div></li>
</ul>
</div>
<script>
var t=document.getElementById('t');
var ql= document.getElementById('q_list');
var lis=ql.getElementsByTagName('li');
function o_0(p){
for(var i=0;i<lis.length;i++){
document.getElementById('t_b'+i).className="hidden";
t.className="show";
}
document.getElementById('t_b'+p).className="show";
t.className="hidden";
}
var cz=document.getElementById('cz');
var lis0=cz.getElementsByTagName('li');
function o_0_0(p){
for(var i=0;i<lis0.length;i++){
lis0[i].className="";
document.getElementById('c_l'+i).className="hidden";
}
lis0[p].className="on";
document.getElementById('c_l'+p).className="show";
}
function go(){
o_0()
}
function gol(){
window.history.back()
}
o_0_0(0)
function g(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r != null) {
return decodeURI(r[2]);
}
return null;
}
var cc=localStorage.getItem('code');
var a=g("a");
var b=g("b");
var c=g("c");
var id=g("pid");
var a_1=document.getElementById('a1');
var a_2=document.getElementById('a2');
var a_3=document.getElementById('a3');
var a_4=document.getElementById('a4');
if(id==cc){
a_1.innerText=a*1;//余额，
a_2.innerText=b*1;//兜哩金
a_3.innerText=a*1+b*1+c/100;//余额
a_4.innerText=c*1/100;//收益
}else{
alert("无权访问");
//gol()
}
</script>
</body>
</html>
