Commit e71dd641 by libai

测试

parent 9bae544c
......@@ -25,42 +25,76 @@
margin: 0 auto;
}
.content {
width: 9.3rem;
width: 9.4rem;
margin: 0 auto;
margin-top: 0.9rem;
}
.content li {
position: relative;
height: 2.1rem;
width: 4.2rem;
border-radius: 0.1rem;
border: 1px solid #EBDFC1;
height: 2rem !important;
width: 3rem;
border-radius: 0.25rem;
border: 1px solid #FFFFFF;
background: #F1F2F2;
box-sizing: border-box;
float: left;
margin-left: 0.2rem;
margin-right: 0.2rem;
margin-bottom: 0.4rem;
}
.content li:nth-child(3n+3) {
margin-right: 0rem;
}
.content .li-click {
background: url("../images/select.png") no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
}
.content .hot-box {
width: 1.37rem;
height: 0.56rem;
line-height: 0.56rem;
background: url(../images/hot.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: -0.06rem;
top: -0.08rem;
color: #FFFF22;
font-size: 0.3rem;
font-weight: 700;
}
.content .hot-box span {
position: absolute;
left: -0.02rem;
top: -0.04rem;
width: 1.5rem;
transform: scale(0.8);
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
}
.content .hot-box img {
width: 0.42rem;
vertical-align: middle;
margin-top: -0.08rem;
}
.diamond-p {
text-align: center;
font-size: 0.35rem;
font-size: 0.33rem;
font-weight: 700;
margin-top: 0.55rem;
text-indent: -0.1rem;
}
.diamond-p img {
vertical-align: middle;
margin-top: -0.1rem;
margin-top: -0.12rem;
width: 0.4rem;
}
.money-p {
text-align: center;
font-size: 0.45rem;
font-size: 0.3rem;
font-weight: 500;
margin-top: 0.1rem;
color: #707070;
}
.hot {
position: absolute;
......@@ -81,25 +115,35 @@
margin-top: 0.25rem;
}
.pay-ul li {
width: 2.68rem;
height: 1rem;
position: relative;
width: 2.25rem;
height: 0.8rem;
float: left;
border-radius: 0.1rem;
margin-right: 0.3rem;
border: 1px solid #EBDFC1;
border: 1px solid #ABADAD;
text-align: center;
line-height: 1rem;
font-size: 0.4rem;
line-height: 0.8rem;
font-size: 0.3rem;
}
.pay-ul li img {
width: 0.5rem;
width: 0.45rem;
vertical-align: middle;
margin-top: -0.07rem;
margin-top: -0.1rem;
}
.pay-ul .pay-click {
background: url("../images/pay-click.png") no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
color: #11C1BF;
border: 1px solid #27E6E4;
}
.pay-ul .pay-click .pay-icon {
display: block;
}
.pay-ul .pay-icon {
width: 0.55rem;
position: absolute;
right: 0;
bottom: 0;
display: none;
}
.taobao-Pay {
width: 8.75rem;
......@@ -120,11 +164,10 @@
height: 1.25rem;
width: 7.55rem;
margin-left: 1.23rem;
color: #713900;
color: #005f5e;
font-size: 0.4rem;
margin-top: 0.4rem;
background: linear-gradient(to right, #FFF600, #FED73B);
box-shadow: 0rem 0.1rem 0.1rem #FFDFCD;
margin-top: 0.7rem;
background: linear-gradient(to right, #00d9d9, #10eaea);
border-radius: 1rem;
}
.b-tips {
......
......@@ -25,43 +25,78 @@
margin: 0 auto;
}
.content{
width: 9.3rem;
width: 9.4rem;
margin: 0 auto;
margin-top: 0.9rem;
li{
position: relative;
height: 2.1rem;
width: 4.2rem;
border-radius: 0.1rem;
border: 1px solid #EBDFC1;
height: 2rem !important;
width: 3rem;
border-radius: 0.25rem;
border: 1px solid #FFFFFF;
background: #F1F2F2;
box-sizing: border-box;
float: left;
margin-left: 0.2rem;
// margin-left: 0.15rem;
margin-right: 0.2rem;
margin-bottom: 0.4rem;
}
li:nth-child(3n+3){
margin-right: 0rem;
}
.li-click{
background: url("../images/select.png")no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
}
.hot-box{
width: 1.37rem;
height: 0.56rem;
line-height: 0.56rem;
background: url(../images/hot.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: -0.06rem;
top: -0.08rem;
color: #FFFF22;
span{
position: absolute;
left: -0.02rem;
top: -0.04rem;
width: 1.5rem;
transform: scale(0.8);
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
}
font-size: 0.3rem;
font-weight: 700;
img{
width: 0.42rem;
vertical-align: middle;
margin-top: -0.08rem;
}
}
}
.diamond-p{
text-align: center;
font-size: 0.35rem;
font-size: 0.33rem;
font-weight: 700;
margin-top: 0.55rem;
text-indent: -0.1rem;
img{
vertical-align: middle;
margin-top: -0.1rem;
margin-top: -0.12rem;
width: 0.4rem;
}
}
.money-p{
text-align: center;
font-size: 0.45rem;
font-size: 0.3rem;
font-weight: 500;
margin-top: 0.1rem;
color: #707070;
}
.hot{
position: absolute;
......@@ -81,27 +116,36 @@
.pay-ul{
margin-top: 0.25rem;
li{
width: 2.68rem;
height: 1rem;
position: relative;
width: 2.25rem;
height: 0.8rem;
float: left;
border-radius: 0.1rem;
margin-right: 0.3rem;
border: 1px solid #EBDFC1;
border: 1px solid #ABADAD;
text-align: center;
line-height: 1rem;
font-size: 0.4rem;
line-height: 0.8rem;
font-size: 0.3rem;
img{
width: 0.5rem;
width: 0.45rem;
vertical-align: middle;
margin-top: -0.07rem;
margin-top: -0.1rem;
}
}
.pay-click{
background: url("../images/pay-click.png")no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
color: #11C1BF;
border: 1px solid #27E6E4;
.pay-icon{
display: block;
}
}
.pay-icon{
width: 0.55rem;
position: absolute;
right: 0;
bottom: 0;
display: none;
}
}
.taobao-Pay{
width: 8.75rem;
......@@ -122,11 +166,12 @@
height: 1.25rem;
width: 7.55rem;
margin-left: 1.23rem;
color: #713900;
color: #005f5e;
font-size: 0.4rem;
margin-top: 0.4rem;
background: linear-gradient(to right, #FFF600, #FED73B);
box-shadow: 0rem 0.1rem 0.1rem #FFDFCD;
margin-top: 0.7rem;
background: linear-gradient(to right, #00d9d9, #10eaea);
// box-shadow: 0rem 0.1rem 0.1rem #FFDFCD;
border-radius: 1rem;
}
.b-tips{
......
.bg {
width: 10rem;
height: 10rem;
background: url(../images/bg.png) no-repeat;
background-size: 100% 100%;
background: #2E2C2F;
border-radius: 0.2rem 0.2rem 0 0;
position: fixed;
bottom: 0;
left: 0;
}
.title-p {
height: 1rem;
line-height: 1rem;
height: 1.3rem;
line-height: 1.3rem;
color: #fff;
font-size: 0.4rem;
text-align: center;
position: relative;
}
.title-p span {
color: #FFFF00;
color: #1BF5F9;
font-size: 0.3rem;
right: 0.6rem;
position: absolute;
bottom: -0.05rem;
}
.reg-ul {
width: 10rem;
margin: 0 auto;
width: 9.9rem;
margin-left: 0.1rem;
margin-top: 0.1rem;
}
.reg-ul li {
margin-left: 0.3rem;
margin-left: 0.2rem;
position: relative;
height: 1.55rem;
width: 4.4rem;
height: 2rem;
width: 3rem;
background: url(../images/select-no.png) no-repeat;
background-size: 100% 100%;
display: inline-block;
border-radius: 0.3rem;
border: 0.02rem solid #958B88;
margin-bottom: 0.25rem;
}
.reg-ul li .hot {
......@@ -46,10 +46,11 @@
.reg-ul li p:nth-child(1) {
color: #fff;
line-height: 0.6rem;
font-size: 0.3rem;
font-size: 0.4rem;
text-indent: -0.15rem;
text-align: center;
height: 0.6rem;
padding-top: 0.2rem;
padding-top: 0.5rem;
font-weight: 700;
}
.reg-ul li p:nth-child(1) img {
......@@ -59,24 +60,18 @@
margin-right: 0.05rem;
}
.reg-ul li p:nth-child(2) {
color: #FFFFFF;
font-size: 0.4rem;
font-weight: 700;
line-height: 0.5rem;
color: #B3B0B2;
font-size: 0.3rem;
line-height: 0.4rem;
text-align: center;
}
.reg-ul .reg-click {
background: url(../images/num-click.png) no-repeat;
background: url(../images/select.png) no-repeat;
background-size: 100% 100%;
border: none;
padding: 1px;
}
.reg-ul .reg-click .hot {
top: -0.13rem;
}
.reg-ul .reg-click p {
color: #58410B !important;
}
.reg-ul li:nth-child(even) .hot {
left: 3.65rem;
}
......@@ -91,6 +86,7 @@
margin-left: 0.6rem;
}
.pay-ul li {
position: relative;
border-radius: 0.1rem;
height: 0.82rem;
line-height: 0.82rem;
......@@ -110,22 +106,30 @@
.pay-ul li span {
color: #fff;
}
.pay-ul .pay-icon {
width: 0.55rem;
position: absolute;
right: 0;
bottom: -0.04rem;
margin-right: -0.02rem;
display: none;
}
.pay-click {
background: url(../images/pay-click.png) no-repeat;
background-size: 100% 100%;
border: none !important;
padding: 0.02rem;
border-radius: 0 !important;
border: 1px solid #08EDE4 !important;
border-radius: 0.1rem !important;
}
.pay-click .pay-icon {
display: block;
}
.bottom-box {
width: 9.15rem;
height: 1.15rem;
height: 2rem;
border-top: 1px solid #675362;
position: absolute;
bottom: 0;
left: 0.425rem;
color: #FFFFFF;
line-height: 1.15rem;
line-height: 1.55rem;
font-size: 0.3rem;
}
.bottom-box img {
......@@ -139,11 +143,39 @@
width: 2.1rem;
height: 0.8rem;
position: absolute;
background: linear-gradient(to right, #FFF502, #FFDB39);
top: 0.15rem;
background: linear-gradient(to right, #08E1DF, #22FCFC);
top: 0.35rem;
right: 0;
border-radius: 1rem;
line-height: 0.8rem;
text-align: center;
color: #000023;
color: #015A59;
}
.hot-box {
width: 1.37rem;
height: 0.56rem;
line-height: 0.56rem;
background: url(../images/hot.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: -0.06rem;
top: -0.08rem;
color: #FFFF22;
font-size: 0.3rem;
font-weight: 700;
}
.hot-box span {
position: absolute;
left: -0.02rem;
top: -0.04rem;
width: 1.5rem;
transform: scale(0.8);
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
}
.hot-box img {
width: 0.42rem;
vertical-align: middle;
margin-top: -0.08rem;
}
.bg{
width: 10rem;
height: 10rem;
background:url(../images/bg.png)no-repeat;
background-size: 100% 100%;
background: #2E2C2F;
border-radius: 0.2rem 0.2rem 0 0;
position: fixed;
bottom: 0;
left: 0;
}
.title-p{
height: 1rem;
line-height: 1rem;
height: 1.3rem;
line-height: 1.3rem;
color: #fff;
font-size: 0.4rem;
text-align: center;
position: relative;
span{
color: #FFFF00;
color: #1BF5F9;
font-size: 0.3rem;
right: 0.6rem;
position: absolute;
......@@ -23,12 +23,12 @@
}
}
.reg-ul{
width: 10rem;
margin: 0 auto;
width: 9.9rem;
// margin: 0 auto;
margin-left: 0.1rem;
margin-top: 0.1rem;
li{
margin-left: 0.3rem;
margin-left: 0.2rem;
.hot{
width: 0.92rem;
position: absolute;
......@@ -36,20 +36,22 @@
top: -0.15rem;
}
position: relative;
height: 1.55rem;
width: 4.4rem;
height: 2rem;
width: 3rem;
background:url(../images/select-no.png)no-repeat;
background-size: 100% 100%;
display: inline-block;
border-radius: 0.3rem;
border: 0.02rem solid #958B88;
// background:pink;
// border-radius: 0.3rem;
margin-bottom: 0.25rem;
p:nth-child(1){
color: #fff;
line-height: 0.6rem;
font-size: 0.3rem;
font-size: 0.4rem;
text-indent: -0.15rem;
text-align: center;
height: 0.6rem;
padding-top: 0.2rem;
padding-top: 0.5rem;
font-weight: 700;
img{
width: 0.43rem;
......@@ -59,26 +61,26 @@
}
}
p:nth-child(2){
color: #FFFFFF;
font-size: 0.4rem;
font-weight: 700;
line-height: 0.5rem;
color: #B3B0B2;
font-size: 0.3rem;
// font-weight: 700;
line-height: 0.4rem;
text-align: center;
}
}
.reg-click{
background: url(../images/num-click.png)no-repeat;
background:url(../images/select.png) no-repeat;
background-size: 100% 100%;
border: none;
padding: 1px;
// border: 0.02rem solid #00FFFF;
// padding: 1px;
// padding: 1px;
.hot{
top: -0.13rem;
}
p{
color: #58410B !important;
// color: #58410B !important;
}
}
li:nth-child(even){
......@@ -98,6 +100,7 @@
.pay-ul{
margin-left: 0.6rem;
li{
position: relative;
border-radius: 0.1rem;
height: 0.82rem;
line-height: 0.82rem;
......@@ -119,23 +122,34 @@
// display: inline-block;
}
}
.pay-icon{
width: 0.55rem;
position: absolute;
right: 0;
bottom: -0.04rem;
margin-right: -0.02rem;
display: none;
}
}
.pay-click{
background:url(../images/pay-click.png)no-repeat;
background-size: 100% 100%;
border: none !important;
padding: 0.02rem;
border-radius: 0 !important;
// background:url(../images/pay-click.png)no-repeat;
// background-size: 100% 100%;
border: 1px solid #08EDE4 !important;
// padding: 0.02rem;
border-radius: 0.1rem !important;
.pay-icon{
display: block;
}
}
.bottom-box{
width: 9.15rem;
height: 1.15rem;
height: 2rem;
border-top: 1px solid #675362;
position: absolute;
bottom: 0;
left: 0.425rem;
color:#FFFFFF;
line-height: 1.15rem;
line-height: 1.55rem;
font-size: 0.3rem;
img{
width: 0.5rem;
......@@ -149,11 +163,39 @@
width: 2.1rem;
height: 0.8rem;
position: absolute;
background:linear-gradient(to right, #FFF502, #FFDB39);
top: 0.15rem;
background:linear-gradient(to right, #08E1DF, #22FCFC);
top: 0.35rem;
right: 0;
border-radius: 1rem;
line-height: 0.8rem;
text-align: center;
color: #000023;
color: #015A59;
}
.hot-box{
width: 1.37rem;
height: 0.56rem;
line-height: 0.56rem;
background: url(../images/hot.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: -0.06rem;
top: -0.08rem;
color: #FFFF22;
span{
position: absolute;
left: -0.02rem;
top: -0.04rem;
width: 1.5rem;
transform: scale(0.8);
display: inline-block;
height: 0.6rem;
line-height: 0.6rem;
}
font-size: 0.3rem;
font-weight: 700;
img{
width: 0.42rem;
vertical-align: middle;
margin-top: -0.08rem;
}
}
\ No newline at end of file

685 Bytes | W: | H:

1.02 KB | W: | H:

guodongRecharge/images/alipay.png
guodongRecharge/images/alipay.png
guodongRecharge/images/alipay.png
guodongRecharge/images/alipay.png
  • 2-up
  • Swipe
  • Onion skin

1.16 KB | W: | H:

684 Bytes | W: | H:

guodongRecharge/images/hot.png
guodongRecharge/images/hot.png
guodongRecharge/images/hot.png
guodongRecharge/images/hot.png
  • 2-up
  • Swipe
  • Onion skin

26.1 KB | W: | H:

35.6 KB | W: | H:

guodongRecharge/images/n-banner.png
guodongRecharge/images/n-banner.png
guodongRecharge/images/n-banner.png
guodongRecharge/images/n-banner.png
  • 2-up
  • Swipe
  • Onion skin

2.55 KB | W: | H:

1012 Bytes | W: | H:

guodongRecharge/images/pay-click.png
guodongRecharge/images/pay-click.png
guodongRecharge/images/pay-click.png
guodongRecharge/images/pay-click.png
  • 2-up
  • Swipe
  • Onion skin

1.35 KB | W: | H:

1.79 KB | W: | H:

guodongRecharge/images/select.png
guodongRecharge/images/select.png
guodongRecharge/images/select.png
guodongRecharge/images/select.png
  • 2-up
  • Swipe
  • Onion skin

721 Bytes | W: | H:

1.01 KB | W: | H:

guodongRecharge/images/weipay.png
guodongRecharge/images/weipay.png
guodongRecharge/images/weipay.png
guodongRecharge/images/weipay.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -43,11 +43,11 @@
<div class="pay-box">
<p class="pay-tips">选择支付方式</p>
<ul class="pay-ul clearfix">
<li >
<img src="images/weipay.png" alt=""> 微信支付 <i style="display: none">weipay</i>
</li>
<li class="pay-click">
<img src="images/alipay.png" alt=""> 支付宝 <i style="display: none">alipay</i>
<img class="pay-img1" src="images/weipay.png" alt=""> 微信支付 <i style="display: none">weipay</i><img class="pay-icon" src="images/pay-click.png" alt="">
</li>
<li >
<img class="pay-img2" src="images/alipay1.png" alt=""> 支付宝 <i style="display: none">alipay</i><img class="pay-icon" src="images/pay-click.png" alt="">
</li>
</ul>
<!--<div class="taobao-Pay"><img style="margin-left: 0.1rem;" src="images/diamond.png" alt=""> 更多大额充值<span-->
......@@ -104,6 +104,7 @@
}else{
var weiPkg='h5'
}
$(".recording").on("click", function () {
window.location.href='https://activity.ishuaji.cn/eggplant/expenses/recharge.html?uid='+sessionStorage.bbb+'&token='+sessionStorage.kkk+'&pkg=qingliang';
})
......@@ -149,28 +150,29 @@ try{
else html += '<li>';
if (msg.data.third[i].addnum == 0) {
if(msg.data.third[i].coinnum==0) html += '<p class="diamond-p"><img src="images/diamond.png" alt="">' + msg.data.third[i].diamond + '</p>';
else html += '<p class="diamond-p"><img src="images/diamond.png" alt="">' + msg.data.third[i].diamond + '(' + msg.data.third[i].coinnum + '银币)</p>';
else html += '<p class="diamond-p"><img src="images/diamond.png" alt="">' + msg.data.third[i].diamond + '</p>';
} else {
html += '<p class="diamond-p"><img src="images/diamond.png" alt="">' + msg.data.third[i].diamond + '<span style="color: #645340;">(' + msg.data.third[i].addnum + '钻石)</span></p>';
html += '<div class=hot-box><span><img src="images/diamond.png">' + msg.data.third[i].addnum + '</span></div>'
html += '<p class="diamond-p"><img src="images/diamond.png" alt="">' + msg.data.third[i].diamond + '<span style="color: #645340;"></span></p>';
}
html += '<p class="money-p">¥<span class="pay-money">' + msg.data.third[i].amount + '</span></p>';
if (msg.data.third[i].sale == 1) {
if(i%2==0){
html += '<img class="hot" src="images/hot.png" alt="">';
}else{
html += '<img class="hot" style="left:3.6rem" src="images/hot.png" alt="">';
}
// if (msg.data.third[i].sale == 1) {
// if(i%2==0){
// html += '<img class="hot" src="images/hot.png" alt="">';
// }else{
// html += '<img class="hot" style="left:3.6rem" src="images/hot.png" alt="">';
// }
}
// }
html += '</li>';
}
// html+='<li class="rich-god" style="height: 1.7rem;"><p class="diamond-p" style="margin-top: 0.3rem;"><img src="images/diamond.png" alt="">100000<span style="color: #ff6600;">(10000钻石)</span></p><p class="money-p">¥<span class="pay-money">10000</span></p></li>'
$(".content").html(html);
var k=$(window).height()/$(window).width();
if(k<1.8){
$(".diamond-p").css("margin-top",'0.3rem')
$(".diamond-p").css("margin-top",'0.5rem')
$(".content li").css("height",'1.7rem')
$(".b-tips").css("margin-top","0.5rem")
$(".content").css("margin-top","0.7rem")
......@@ -186,12 +188,21 @@ try{
})
}
})
sessionStorage.pay = "alipay"
sessionStorage.pay = "weipay"
$(".pay-ul li").on("click", function () {
payBl = true;
$(this).addClass("pay-click");
$(this).siblings("li").removeClass("pay-click")
sessionStorage.pay = $(this).children("i").text()
if(sessionStorage.pay=="alipay"){
$(".pay-img1").attr("src","images/weipay1.png")
$(".pay-img2").attr("src","images/alipay.png")
}
else{
$(".pay-img1").attr("src","images/weipay.png")
$(".pay-img2").attr("src","images/alipay1.png")
}
})
$(".pay-btn").on("click", function () {
if (moneyBl && payBl) {
......
......@@ -46,8 +46,8 @@
</ul>
<p class="pay-title">选择支付方式</p>
<ul class="pay-ul">
<li data-type='weipay' class="pay-click"><img src="images/weipay2.png" alt=""><span>微信支付</p></li>
<li data-type='alipay'><img src="images/alipay2.png" alt=""><span>支付宝</p></li>
<li data-type='weipay' class="pay-click"><img src="images/weipay2.png" alt=""><span>微信支付</p><img class="pay-icon" src="images/pay-click.png" alt=""></li>
<li data-type='alipay'><img src="images/alipay2.png" alt=""><span>支付宝</p><img class="pay-icon" src="images/pay-click.png" alt=""></li>
</ul>
<div class="bottom-box">
余额 :<img src="images/diamond.png"><span>25</span>
......@@ -115,10 +115,10 @@
for(var i=0;i<msg.data.third.length;i++){
if(msg.data.third[i].amount==100)html+='<li class="reg-click" data-type='+msg.data.third[i].amount+'>';
else html+='<li data-type='+msg.data.third[i].amount+'>';
if(msg.data.third[i].addnum==0) html+='<p><img src="images/diamond.png">'+msg.data.third[i].diamond+'</p>';
else html+='<p><img src="images/diamond.png">'+msg.data.third[i].diamond+'(' + msg.data.third[i].addnum + '钻石)</p>';
html+='<p><img src="images/diamond.png">'+msg.data.third[i].diamond+'</p>';
html+='<p>¥'+msg.data.third[i].amount+'</p>';
if(msg.data.third[i].sale==1)html+='<img class="hot" src="images/hot.png" alt="">'
if(msg.data.third[i].addnum!=0)html += '<div class=hot-box><span><img src="images/diamond.png">' + msg.data.third[i].addnum + '</span></div>'
// if(msg.data.third[i].sale==1)html+='<img class="hot" src="images/hot.png" alt="">'
html+='</li>';
}
$(".reg-ul").html(html);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment