Skip to content

libai / guodong

Go to a project
Commit 13701a23 by libai
Options

测试

parent 581baf84
Inline Side-by-side
Showing with 196 additions and 108 deletions
css/index.css
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
overflow: hidden; overflow: hidden;
background: #ffdc04; background: #84B2C3;
} }
.bg-icon { .bg-icon {
width: 100vw; width: 100vw;
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
.content2 { .content2 {
width: 100vw; width: 100vw;
height: 112.76vw; height: 112.76vw;
background: url(../images/content2.jpg) no-repeat; background: url(../images/content2.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.foot-box { .foot-box {
......
css/index.less
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 100vw; width: 100vw;
height: 56.25vw; height: 56.25vw;
overflow: hidden; overflow: hidden;
background: rgb(255,220,4); background: #84B2C3;
} }
.bg-icon{ .bg-icon{
width: 100vw; width: 100vw;
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
.content2{ .content2{
width:100vw; width:100vw;
height: 112.76vw; height: 112.76vw;
background: url(../images/content2.jpg)no-repeat; background: url(../images/content2.png)no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.foot-box{ .foot-box{
......
css/phonepay.css
...@@ -15,24 +15,25 @@ ...@@ -15,24 +15,25 @@
position: relative; position: relative;
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4;
margin: 0 auto; margin: 0 auto;
border-radius: 0.1rem; border-radius: 1rem;
text-align: center; text-align: center;
} }
.input-box .ok-click { .input-box .ok-click {
position: absolute; position: absolute;
top: 0.13rem; top: 0.08rem;
right: 0.18rem; right: 0.08rem;
width: 1.3rem; width: 1.6rem;
height: 0.64rem; height: 0.75rem;
line-height: 0.64rem; line-height: 0.75rem;
text-align: center; text-align: center;
color: #723700; color: #006160;
font-size: 0.33rem; font-size: 0.33rem;
font-weight: 700; font-weight: 700;
border-radius: 2rem; border-radius: 2rem;
background: linear-gradient(to right, #FBE7AC, #F7C86C); background: linear-gradient(to right, #07E3E1, #07E3E1);
} }
.input-box input { .input-box input {
background: rgba(0, 0, 0, 0);
height: 0.9rem; height: 0.9rem;
width: 7rem; width: 7rem;
text-align: center; text-align: center;
...@@ -40,18 +41,20 @@ ...@@ -40,18 +41,20 @@
margin-left: -1.3rem; margin-left: -1.3rem;
} }
.pay-ul { .pay-ul {
width: 9.3rem; width: 9.6rem;
min-height: 6rem; min-height: 4.7rem;
margin: 0 auto; margin: 0 auto;
} }
.pay-ul li { .pay-ul li {
position: relative; position: relative;
height: 1.634rem; height: 2rem;
width: 4.351rem; width: 3rem;
border: 1px solid #E5E5E5; background: url(../images/click-no-bg.png);
background-size: 100% 100%;
float: left; float: left;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
border-radius: 0.1rem; margin-left: 0.1rem;
margin-right: 0.1rem;
} }
.pay-ul li p { .pay-ul li p {
line-height: 0.55rem; line-height: 0.55rem;
...@@ -60,25 +63,26 @@ ...@@ -60,25 +63,26 @@
text-align: center; text-align: center;
} }
.pay-ul li p:nth-child(1) { .pay-ul li p:nth-child(1) {
padding-top: 0.3rem; padding-top: 0.47rem;
} }
.pay-ul li p:nth-child(2) { .pay-ul li p:nth-child(1) img {
color: #ABABAB; width: 0.45rem;
font-size: 0.37rem; vertical-align: middle;
margin-top: -0.1rem;
margin-right: 0.1rem;
} }
.pay-ul li:nth-child(even) { .pay-ul li p:nth-child(2) {
margin-left: 0.37rem; color: #767676;
font-size: 0.3rem;
} }
.pay-ul .li-click { .pay-ul .li-click {
background: url(../images/select.png) no-repeat; background: url(../images/click-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid #fff;
} }
.pay-tips { .pay-tips {
color: #1C1C1C; color: #1C1C1C;
font-size: 0.33rem; font-size: 0.33rem;
margin-left: 0.55rem; margin-left: 0.55rem;
margin-top: 0.3rem;
} }
.payfor-ul { .payfor-ul {
margin-left: 0.55rem; margin-left: 0.55rem;
...@@ -86,25 +90,37 @@ ...@@ -86,25 +90,37 @@
} }
.payfor-ul li { .payfor-ul li {
float: left; float: left;
width: 2.84rem; width: 2.3rem;
line-height: 1.06rem; line-height: 0.8rem;
height: 1.06rem; height: 0.8rem;
border: 1px solid #DBDBDB; border: 0.02rem solid #9C9E9E;
margin-right: 0.25rem; margin-right: 0.25rem;
border-radius: 0.1rem; border-radius: 0.1rem;
position: relative;
font-size: 0.35rem; font-size: 0.35rem;
} }
.payfor-ul li img { .payfor-ul li img {
font-size: 0; font-size: 0;
width: 0.55rem; width: 0.45rem;
vertical-align: middle; vertical-align: middle;
margin-left: 0.3rem; margin-left: 0.3rem;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: -0.05rem;
} }
.payfor-ul .payfor-click { .payfor-ul .payfor-click {
background: url(../images/pay-select.png) no-repeat; border: 0.02rem solid #05E3E0;
background-size: 100% 100%; color: #02B9B7;
border: 1px solid #fff; }
.payfor-ul .payfor-click .pay-click {
display: block;
}
.payfor-ul .pay-click {
display: none;
width: 0.57rem;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0;
} }
.reg-btn { .reg-btn {
width: 7.5rem; width: 7.5rem;
...@@ -115,8 +131,8 @@ ...@@ -115,8 +131,8 @@
width: 7.5rem; width: 7.5rem;
height: 1.2rem; height: 1.2rem;
border-radius: 1rem; border-radius: 1rem;
background: linear-gradient(to right, #FBE7AC, #F7C86C); background: linear-gradient(to right, #08E3E0, #20FCF9);
color: #723700; color: #004646;
line-height: 1.2rem; line-height: 1.2rem;
text-align: center; text-align: center;
font-size: 0.45rem; font-size: 0.45rem;
...@@ -160,9 +176,10 @@ ...@@ -160,9 +176,10 @@
.tips-box { .tips-box {
transition: 0.35s all; transition: 0.35s all;
position: fixed; position: fixed;
height: 13.5rem; height: 13.04rem;
width: 10rem; width: 10rem;
background: #FFFFFF; background: url(../images/tip-bg.png) no-repeat;
background-size: 100% 100%;
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
bottom: -13.5rem; bottom: -13.5rem;
left: 0; left: 0;
...@@ -190,23 +207,45 @@ ...@@ -190,23 +207,45 @@
.id-tips-box { .id-tips-box {
width: 10rem; width: 10rem;
height: 1rem; height: 1rem;
background: #f0f0f0;
position: relative; position: relative;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
} }
.id-tips-box .id-span { .id-tips-box .id-span {
color: #D59007; color: #21CAC8;
font-size: 0.35rem; font-size: 0.3rem;
position: absolute; position: absolute;
height: 1rem; height: 1rem;
right: 0.6rem; right: 0.8rem;
line-height: 1rem; line-height: 1rem;
} }
.id-tips-box .god-span { .id-tips-box .god-span {
position: absolute; position: absolute;
left: 0.6rem; left: 0.8rem;
line-height: 1rem; line-height: 1rem;
font-size: 0.35rem; font-size: 0.3rem;
color: #FF205E; color: #FF205E;
} }
.pay-gift {
position: absolute;
width: 1.37rem;
height: 0.56rem;
background: url(../images/pay-gift.png) no-repeat;
background-size: 100% 100%;
left: -0.1rem;
top: -0.1rem;
font-size: 0.3rem;
line-height: 0.56rem;
color: #FDED2A;
}
.pay-gift img {
width: 0.45rem;
vertical-align: middle;
margin-top: -0.05rem;
}
.pay-gift span {
display: inline-block;
height: 0.56rem;
width: 1.37rem;
transform: scale(0.85);
position: absolute;
top: -0.03rem;
}
css/phonepay.less
...@@ -15,23 +15,24 @@ ...@@ -15,23 +15,24 @@
position: relative; position: relative;
border: 1px solid #E4E4E4; border: 1px solid #E4E4E4;
margin: 0 auto; margin: 0 auto;
border-radius: 0.1rem; border-radius: 1rem;
text-align: center; text-align: center;
.ok-click{ .ok-click{
position: absolute; position: absolute;
top: 0.13rem; top: 0.08rem;
right: 0.18rem; right: 0.08rem;
width: 1.3rem; width: 1.6rem;
height: 0.64rem; height: 0.75rem;
line-height: 0.64rem; line-height: 0.75rem;
text-align: center; text-align: center;
color: #723700; color: #006160;
font-size: 0.33rem; font-size: 0.33rem;
font-weight: 700; font-weight: 700;
border-radius: 2rem; border-radius: 2rem;
background: linear-gradient(to right,#FBE7AC,#F7C86C); background: linear-gradient(to right,#07E3E1,#07E3E1);
} }
input{ input{
background: rgba(0,0,0,0);
height: 0.9rem; height: 0.9rem;
width: 7rem; width: 7rem;
text-align: center; text-align: center;
...@@ -41,17 +42,19 @@ ...@@ -41,17 +42,19 @@
} }
.pay-ul{ .pay-ul{
width: 9.3rem; width:9.6rem;
min-height: 6rem; min-height: 4.7rem;
margin: 0 auto; margin: 0 auto;
li{ li{
position: relative; position: relative;
height: 1.634rem; height: 2rem;
width: 4.351rem; width: 3rem;
border: 1px solid #E5E5E5; background: url(../images/click-no-bg.png);
background-size: 100% 100%;
float: left; float: left;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
border-radius: 0.1rem; margin-left: 0.1rem;
margin-right: 0.1rem;
p{ p{
line-height: 0.55rem; line-height: 0.55rem;
height: 0.55rem; height: 0.55rem;
...@@ -59,52 +62,71 @@ ...@@ -59,52 +62,71 @@
text-align: center; text-align: center;
} }
p:nth-child(1){ p:nth-child(1){
padding-top: 0.3rem; padding-top: 0.47rem;
img{
width: 0.45rem;
vertical-align: middle;
margin-top: -0.1rem;
margin-right: 0.1rem;
}
} }
p:nth-child(2){ p:nth-child(2){
color: #ABABAB; color: #767676;
font-size: 0.37rem; font-size: 0.3rem;
} }
} }
li:nth-child(even){ // li:nth-child(even){
margin-left: 0.37rem; // margin-left: 0.37rem;
} // }
.li-click{ .li-click{
background: url(../images/select.png)no-repeat; background: url(../images/click-bg.png);
background-size: 100% 100%; background-size: 100% 100%;
border: 1px solid #fff;
} }
} }
.pay-tips{ .pay-tips{
color: #1C1C1C; color: #1C1C1C;
font-size: 0.33rem; font-size: 0.33rem;
margin-left: 0.55rem; margin-left: 0.55rem;
margin-top: 0.3rem; // margin-top: 0.3rem;
} }
.payfor-ul{ .payfor-ul{
margin-left: 0.55rem; margin-left: 0.55rem;
margin-top: 0.2rem; margin-top: 0.2rem;
li{ li{
float: left; float: left;
width: 2.84rem; width: 2.3rem;
line-height: 1.06rem; line-height: 0.8rem;
height: 1.06rem; height: 0.8rem;
border: 1px solid #DBDBDB; border: 0.02rem solid #9C9E9E;
margin-right: 0.25rem; margin-right: 0.25rem;
border-radius: 0.1rem; border-radius: 0.1rem;
position: relative;
img{ img{
font-size: 0; font-size: 0;
width: 0.55rem; width: 0.45rem;
vertical-align: middle; vertical-align: middle;
margin-left: 0.3rem; margin-left: 0.3rem;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: -0.05rem;
} }
font-size: 0.35rem; font-size: 0.35rem;
} }
.payfor-click{ .payfor-click{
background: url(../images/pay-select.png)no-repeat; // background: url(../images/pay-select.png)no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
border: 1px solid #fff; border: 0.02rem solid #05E3E0;
color: #02B9B7;
.pay-click{
display: block;
}
}
.pay-click{
display: none;
width: 0.57rem;
position: absolute;
bottom: 0;
right: 0;
margin-right: 0;
} }
} }
.reg-btn{ .reg-btn{
...@@ -116,8 +138,8 @@ ...@@ -116,8 +138,8 @@
width: 7.5rem; width: 7.5rem;
height: 1.2rem; height: 1.2rem;
border-radius: 1rem; border-radius: 1rem;
background: linear-gradient(to right,#FBE7AC,#F7C86C); background: linear-gradient(to right,#08E3E0,#20FCF9);
color: #723700; color: #004646;
line-height: 1.2rem; line-height: 1.2rem;
text-align: center; text-align: center;
font-size: 0.45rem; font-size: 0.45rem;
...@@ -161,9 +183,10 @@ ...@@ -161,9 +183,10 @@
.tips-box{ .tips-box{
transition: 0.35s all; transition: 0.35s all;
position: fixed; position: fixed;
height: 13.5rem; height: 13.04rem;
width: 10rem; width: 10rem;
background: #FFFFFF; background: url(../images/tip-bg.png)no-repeat;
background-size: 100% 100%;
border-radius: 0.5rem 0.5rem 0 0; border-radius: 0.5rem 0.5rem 0 0;
bottom: -13.5rem; bottom: -13.5rem;
left:0; left:0;
...@@ -191,23 +214,48 @@ ...@@ -191,23 +214,48 @@
.id-tips-box{ .id-tips-box{
width: 10rem; width: 10rem;
height: 1rem; height: 1rem;
background: rgb(240,240,240); // background: rgb(240,240,240);
position: relative; position: relative;
margin-top: 0.3rem; // margin-top: 0.3rem;
margin-bottom: 0.3rem; // margin-bottom: 0.3rem;
.id-span{ .id-span{
color: #D59007; color: #21CAC8;
font-size: 0.35rem; font-size: 0.3rem;
position: absolute; position: absolute;
height: 1rem; height: 1rem;
right: 0.6rem; right: 0.8rem;
line-height: 1rem; line-height: 1rem;
} }
.god-span{ .god-span{
position: absolute; position: absolute;
left: 0.6rem; left: 0.8rem;
line-height: 1rem; line-height: 1rem;
font-size: 0.35rem; font-size: 0.3rem;
color: #FF205E; color: #FF205E;
} }
}
.pay-gift{
position: absolute;
width: 1.37rem;
height: 0.56rem;
background:url(../images/pay-gift.png)no-repeat;
background-size: 100% 100%;
left: -0.1rem;
top: -0.1rem;
font-size: 0.3rem;
line-height: 0.56rem;
color: #FDED2A;
img{
width: 0.45rem;
vertical-align: middle;
margin-top: -0.05rem;
}
span{
display: inline-block;
height: 0.56rem;
width: 1.37rem;
transform: scale(0.85);
position: absolute;
top: -0.03rem;
}
} }
\ No newline at end of file
images/alipay.png
images/alipay.png

1.52 KB | W: | H:

images/alipay.png

1.02 KB | W: | H:

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

1.4 KB | W: | H:

images/pay-gift.png

684 Bytes | W: | H:

images/pay-gift.png
images/pay-gift.png
images/pay-gift.png
images/pay-gift.png
  • 2-up
  • Swipe
  • Onion skin
index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script> <!-- <script type="text/javascript" charset="UTF-8" src="//res.cdn.openinstall.io/openinstall.js"></script> -->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta charset="UTF-8"> <meta charset="UTF-8">
......
login.html
...@@ -37,16 +37,10 @@ ...@@ -37,16 +37,10 @@
.payfor-ul li img{ .payfor-ul li img{
margin-left: 0; margin-left: 0;
} }
.pay-gift{
position: absolute;
width: 1.35rem;
right: -0.12rem;
top: -0.03rem;
}
</style> </style>
<body> <body>
<div class="bg"> <div class="bg">
<div style="height: 1rem;"></div> <div style="height: 1rem;"></div>
<div class="input-box"> <div class="input-box">
<input placeholder="请输入您的ID，点击确认" type="number"> <div class="ok-click">确认</div> <input placeholder="请输入您的ID，点击确认" type="number"> <div class="ok-click">确认</div>
...@@ -59,22 +53,21 @@ ...@@ -59,22 +53,21 @@
<!--<p>¥30</p>--> <!--<p>¥30</p>-->
<!--<p>300钻石(送1000银币)</p>--> <!--<p>300钻石(送1000银币)</p>-->
<!--</li>--> <!--</li>-->
</ul> </ul>
<p class="pay-tips">选择支付方式</p> <p class="pay-tips">选择支付方式</p>
<ul class="payfor-ul clearfix"> <ul class="payfor-ul clearfix">
<li class="payfor-click"><img src="images/weichar.png" alt="">微信<i style="display: none">weipay</i></li> <li class="payfor-click"><img class="wei-icon" src="images/weipay.png" alt="">微信<i style="display: none">weipay</i><img class="pay-click" src="images/pay-click.png" alt=""></li>
<li><img src="images/alipay.png" alt="">支付宝<i style="display: none">alipay</i></li> <li><img class="ali-icon" src="images/alipay1.png" alt="">支付宝<i style="display: none">alipay</i><img class="pay-click" src="images/pay-click.png" alt=""></li>
</ul> </ul>
<div class="reg-btn reg-btn-no">确定充值</div> <div class="reg-btn reg-btn-no">确定充值</div>
</div> </div>
<div class="shadow"></div> <div class="shadow"></div>
<div class="tips-box"> <div class="tips-box">
<h2>如何获取果冻ID?</h2> <!-- <h2>如何获取果冻ID?</h2>
<p>1.打开果冻直播，选择我的</p> <p>1.打开果冻直播，选择我的</p>
<div><img src="images/tips1.png" alt=""></div> <div><img src="images/tips1.png" alt=""></div>
<p>2.在我的页面复制果冻ID</p> <p>2.在我的页面复制果冻ID</p>
<div><img src="images/tips2.png" alt=""></div> <div><img src="images/tips2.png" alt=""></div> -->
</div> </div>
<div class="Safari"> <div class="Safari">
<img src="images/Safari.png" alt=""> <img src="images/Safari.png" alt="">
...@@ -87,7 +80,7 @@ ...@@ -87,7 +80,7 @@
var cdn="https://zhibocdn.ishuaji.cn/comm"; var cdn="https://zhibocdn.ishuaji.cn/comm";
var ua = window.navigator.userAgent.toLowerCase(); var ua = window.navigator.userAgent.toLowerCase();
sessionStorage.pay='weipay'; sessionStorage.pay='weipay';
var amount=30 var amount=100
if (ua.match(/MicroMessenger/i) == 'micromessenger'||ua.match(/MicroMessenger/i) == 'QQ') { if (ua.match(/MicroMessenger/i) == 'micromessenger'||ua.match(/MicroMessenger/i) == 'QQ') {
$(".Safari").fadeIn(500); $(".Safari").fadeIn(500);
} }
...@@ -97,7 +90,7 @@ ...@@ -97,7 +90,7 @@
}) })
$(".shadow,.tips-box").on("click", function () { $(".shadow,.tips-box").on("click", function () {
$(".shadow").fadeOut(350); $(".shadow").fadeOut(350);
$(".tips-box").css("bottom","-13.5rem"); $(".tips-box").css("bottom","-13.04rem");
}) })
$.ajax({ $.ajax({
url:$ip+'/pay/normal/recharge.html', url:$ip+'/pay/normal/recharge.html',
...@@ -108,12 +101,12 @@ ...@@ -108,12 +101,12 @@
var html=[]; var html=[];
for(var i=0;i<data.data.third.length;i++){ for(var i=0;i<data.data.third.length;i++){
var list=data.data.third[i]; var list=data.data.third[i];
if(i==0)html+='<li data-type="'+list.rid+'" class="li-click">'; if(i==2)html+='<li data-type="'+list.rid+'" class="li-click">';
else html+='<li data-type="'+list.rid+'">'; else html+='<li data-type="'+list.rid+'">';
html+='<p>'+list.diamond+'钻石</p>'; html+='<p><img src="images/diamond.png">'+list.diamond+'</p>';
html+='<p>¥'+list.amount+'</p>'; html+='<p>¥'+list.amount+'</p>';
html+='<i style="display: none">'+list.amount+'</i>' html+='<i style="display: none">'+list.amount+'</i>'
if(list.addnum==180)html+='<img class="pay-gift" src="images/pay-gift.png">' if(list.addnum>0)html+='<div class="pay-gift"><span>送<img src="images/diamond.png">'+list.addnum+'</span></div>'
html+='</li>'; html+='</li>';
} }
$(".pay-ul").html(html); $(".pay-ul").html(html);
...@@ -173,6 +166,13 @@ ...@@ -173,6 +166,13 @@
sessionStorage.pay=$(this).children("i").text() sessionStorage.pay=$(this).children("i").text()
$(".payfor-ul li").removeClass("payfor-click"); $(".payfor-ul li").removeClass("payfor-click");
$(this).addClass("payfor-click") $(this).addClass("payfor-click")
if(sessionStorage.pay=='weipay'){
$(".wei-icon").attr("src","images/weipay.png")
$(".ali-icon").attr("src","images/alipay1.png")
}else{
$(".wei-icon").attr("src","images/weipay1.png")
$(".ali-icon").attr("src","images/alipay.png")
}
}) })
$(".login-input").on("input", function () { $(".login-input").on("input", function () {
$(".login-face").attr("src","images/ping2.png"); $(".login-face").attr("src","images/ping2.png");
......
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