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 @@
width: 100vw;
height: 56.25vw;
overflow: hidden;
background: #ffdc04;
background: #84B2C3;
}
.bg-icon {
width: 100vw;
......@@ -32,7 +32,7 @@
.content2 {
width: 100vw;
height: 112.76vw;
background: url(../images/content2.jpg) no-repeat;
background: url(../images/content2.png) no-repeat;
background-size: 100% 100%;
}
.foot-box {
......
css/index.less
......@@ -3,7 +3,7 @@
width: 100vw;
height: 56.25vw;
overflow: hidden;
background: rgb(255,220,4);
background: #84B2C3;
}
.bg-icon{
width: 100vw;
......@@ -32,7 +32,7 @@
.content2{
width:100vw;
height: 112.76vw;
background: url(../images/content2.jpg)no-repeat;
background: url(../images/content2.png)no-repeat;
background-size: 100% 100%;
}
.foot-box{
......
css/phonepay.css
......@@ -15,24 +15,25 @@
position: relative;
border: 1px solid #E4E4E4;
margin: 0 auto;
border-radius: 0.1rem;
border-radius: 1rem;
text-align: center;
}
.input-box .ok-click {
position: absolute;
top: 0.13rem;
right: 0.18rem;
width: 1.3rem;
height: 0.64rem;
line-height: 0.64rem;
top: 0.08rem;
right: 0.08rem;
width: 1.6rem;
height: 0.75rem;
line-height: 0.75rem;
text-align: center;
color: #723700;
color: #006160;
font-size: 0.33rem;
font-weight: 700;
border-radius: 2rem;
background: linear-gradient(to right, #FBE7AC, #F7C86C);
background: linear-gradient(to right, #07E3E1, #07E3E1);
}
.input-box input {
background: rgba(0, 0, 0, 0);
height: 0.9rem;
width: 7rem;
text-align: center;
......@@ -40,18 +41,20 @@
margin-left: -1.3rem;
}
.pay-ul {
width: 9.3rem;
min-height: 6rem;
width: 9.6rem;
min-height: 4.7rem;
margin: 0 auto;
}
.pay-ul li {
position: relative;
height: 1.634rem;
width: 4.351rem;
border: 1px solid #E5E5E5;
height: 2rem;
width: 3rem;
background: url(../images/click-no-bg.png);
background-size: 100% 100%;
float: left;
margin-bottom: 0.3rem;
border-radius: 0.1rem;
margin-left: 0.1rem;
margin-right: 0.1rem;
}
.pay-ul li p {
line-height: 0.55rem;
......@@ -60,25 +63,26 @@
text-align: center;
}
.pay-ul li p:nth-child(1) {
padding-top: 0.3rem;
padding-top: 0.47rem;
}
.pay-ul li p:nth-child(2) {
color: #ABABAB;
font-size: 0.37rem;
.pay-ul li p:nth-child(1) img {
width: 0.45rem;
vertical-align: middle;
margin-top: -0.1rem;
margin-right: 0.1rem;
}
.pay-ul li:nth-child(even) {
margin-left: 0.37rem;
.pay-ul li p:nth-child(2) {
color: #767676;
font-size: 0.3rem;
}
.pay-ul .li-click {
background: url(../images/select.png) no-repeat;
background: url(../images/click-bg.png);
background-size: 100% 100%;
border: 1px solid #fff;
}
.pay-tips {
color: #1C1C1C;
font-size: 0.33rem;
margin-left: 0.55rem;
margin-top: 0.3rem;
}
.payfor-ul {
margin-left: 0.55rem;
......@@ -86,25 +90,37 @@
}
.payfor-ul li {
float: left;
width: 2.84rem;
line-height: 1.06rem;
height: 1.06rem;
border: 1px solid #DBDBDB;
width: 2.3rem;
line-height: 0.8rem;
height: 0.8rem;
border: 0.02rem solid #9C9E9E;
margin-right: 0.25rem;
border-radius: 0.1rem;
position: relative;
font-size: 0.35rem;
}
.payfor-ul li img {
font-size: 0;
width: 0.55rem;
width: 0.45rem;
vertical-align: middle;
margin-left: 0.3rem;
margin-right: 0.15rem;
margin-top: -0.05rem;
}
.payfor-ul .payfor-click {
background: url(../images/pay-select.png) no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
border: 0.02rem solid #05E3E0;
color: #02B9B7;
}
.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 {
width: 7.5rem;
......@@ -115,8 +131,8 @@
width: 7.5rem;
height: 1.2rem;
border-radius: 1rem;
background: linear-gradient(to right, #FBE7AC, #F7C86C);
color: #723700;
background: linear-gradient(to right, #08E3E0, #20FCF9);
color: #004646;
line-height: 1.2rem;
text-align: center;
font-size: 0.45rem;
......@@ -160,9 +176,10 @@
.tips-box {
transition: 0.35s all;
position: fixed;
height: 13.5rem;
height: 13.04rem;
width: 10rem;
background: #FFFFFF;
background: url(../images/tip-bg.png) no-repeat;
background-size: 100% 100%;
border-radius: 0.5rem 0.5rem 0 0;
bottom: -13.5rem;
left: 0;
......@@ -190,23 +207,45 @@
.id-tips-box {
width: 10rem;
height: 1rem;
background: #f0f0f0;
position: relative;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
}
.id-tips-box .id-span {
color: #D59007;
font-size: 0.35rem;
color: #21CAC8;
font-size: 0.3rem;
position: absolute;
height: 1rem;
right: 0.6rem;
right: 0.8rem;
line-height: 1rem;
}
.id-tips-box .god-span {
position: absolute;
left: 0.6rem;
left: 0.8rem;
line-height: 1rem;
font-size: 0.35rem;
font-size: 0.3rem;
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 @@
position: relative;
border: 1px solid #E4E4E4;
margin: 0 auto;
border-radius: 0.1rem;
border-radius: 1rem;
text-align: center;
.ok-click{
position: absolute;
top: 0.13rem;
right: 0.18rem;
width: 1.3rem;
height: 0.64rem;
line-height: 0.64rem;
top: 0.08rem;
right: 0.08rem;
width: 1.6rem;
height: 0.75rem;
line-height: 0.75rem;
text-align: center;
color: #723700;
color: #006160;
font-size: 0.33rem;
font-weight: 700;
border-radius: 2rem;
background: linear-gradient(to right,#FBE7AC,#F7C86C);
background: linear-gradient(to right,#07E3E1,#07E3E1);
}
input{
background: rgba(0,0,0,0);
height: 0.9rem;
width: 7rem;
text-align: center;
......@@ -41,17 +42,19 @@
}
.pay-ul{
width: 9.3rem;
min-height: 6rem;
width:9.6rem;
min-height: 4.7rem;
margin: 0 auto;
li{
position: relative;
height: 1.634rem;
width: 4.351rem;
border: 1px solid #E5E5E5;
height: 2rem;
width: 3rem;
background: url(../images/click-no-bg.png);
background-size: 100% 100%;
float: left;
margin-bottom: 0.3rem;
border-radius: 0.1rem;
margin-left: 0.1rem;
margin-right: 0.1rem;
p{
line-height: 0.55rem;
height: 0.55rem;
......@@ -59,52 +62,71 @@
text-align: center;
}
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){
color: #ABABAB;
font-size: 0.37rem;
color: #767676;
font-size: 0.3rem;
}
}
li:nth-child(even){
margin-left: 0.37rem;
}
// li:nth-child(even){
// margin-left: 0.37rem;
// }
.li-click{
background: url(../images/select.png)no-repeat;
background: url(../images/click-bg.png);
background-size: 100% 100%;
border: 1px solid #fff;
}
}
.pay-tips{
color: #1C1C1C;
font-size: 0.33rem;
margin-left: 0.55rem;
margin-top: 0.3rem;
// margin-top: 0.3rem;
}
.payfor-ul{
margin-left: 0.55rem;
margin-top: 0.2rem;
li{
float: left;
width: 2.84rem;
line-height: 1.06rem;
height: 1.06rem;
border: 1px solid #DBDBDB;
width: 2.3rem;
line-height: 0.8rem;
height: 0.8rem;
border: 0.02rem solid #9C9E9E;
margin-right: 0.25rem;
border-radius: 0.1rem;
position: relative;
img{
font-size: 0;
width: 0.55rem;
width: 0.45rem;
vertical-align: middle;
margin-left: 0.3rem;
margin-right: 0.15rem;
margin-top: -0.05rem;
}
font-size: 0.35rem;
}
.payfor-click{
background: url(../images/pay-select.png)no-repeat;
background-size: 100% 100%;
border: 1px solid #fff;
// background: url(../images/pay-select.png)no-repeat;
// background-size: 100% 100%;
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{
......@@ -116,8 +138,8 @@
width: 7.5rem;
height: 1.2rem;
border-radius: 1rem;
background: linear-gradient(to right,#FBE7AC,#F7C86C);
color: #723700;
background: linear-gradient(to right,#08E3E0,#20FCF9);
color: #004646;
line-height: 1.2rem;
text-align: center;
font-size: 0.45rem;
......@@ -161,9 +183,10 @@
.tips-box{
transition: 0.35s all;
position: fixed;
height: 13.5rem;
height: 13.04rem;
width: 10rem;
background: #FFFFFF;
background: url(../images/tip-bg.png)no-repeat;
background-size: 100% 100%;
border-radius: 0.5rem 0.5rem 0 0;
bottom: -13.5rem;
left:0;
......@@ -191,23 +214,48 @@
.id-tips-box{
width: 10rem;
height: 1rem;
background: rgb(240,240,240);
// background: rgb(240,240,240);
position: relative;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
// margin-top: 0.3rem;
// margin-bottom: 0.3rem;
.id-span{
color: #D59007;
font-size: 0.35rem;
color: #21CAC8;
font-size: 0.3rem;
position: absolute;
height: 1rem;
right: 0.6rem;
right: 0.8rem;
line-height: 1rem;
}
.god-span{
position: absolute;
left: 0.6rem;
left: 0.8rem;
line-height: 1rem;
font-size: 0.35rem;
font-size: 0.3rem;
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>
<html lang="en">
<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 http-equiv="Pragma" content="no-cache">
<meta charset="UTF-8">
......
login.html
......@@ -37,16 +37,10 @@
.payfor-ul li img{
margin-left: 0;
}
.pay-gift{
position: absolute;
width: 1.35rem;
right: -0.12rem;
top: -0.03rem;
}
</style>
<body>
<div class="bg">
<div style="height: 1rem;"></div>
<div class="input-box">
<input placeholder="请输入您的ID，点击确认" type="number"> <div class="ok-click">确认</div>
......@@ -59,22 +53,21 @@
<!--<p>¥30</p>-->
<!--<p>300钻石(送1000银币)</p>-->
<!--</li>-->
</ul>
<p class="pay-tips">选择支付方式</p>
<ul class="payfor-ul clearfix">
<li class="payfor-click"><img src="images/weichar.png" alt="">微信<i style="display: none">weipay</i></li>
<li><img src="images/alipay.png" alt="">支付宝<i style="display: none">alipay</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 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>
<div class="reg-btn reg-btn-no">确定充值</div>
</div>
<div class="shadow"></div>
<div class="tips-box">
<h2>如何获取果冻ID?</h2>
<!-- <h2>如何获取果冻ID?</h2>
<p>1.打开果冻直播，选择我的</p>
<div><img src="images/tips1.png" alt=""></div>
<p>2.在我的页面复制果冻ID</p>
<div><img src="images/tips2.png" alt=""></div>
<div><img src="images/tips2.png" alt=""></div> -->
</div>
<div class="Safari">
<img src="images/Safari.png" alt="">
......@@ -87,7 +80,7 @@
var cdn="https://zhibocdn.ishuaji.cn/comm";
var ua = window.navigator.userAgent.toLowerCase();
sessionStorage.pay='weipay';
var amount=30
var amount=100
if (ua.match(/MicroMessenger/i) == 'micromessenger'||ua.match(/MicroMessenger/i) == 'QQ') {
$(".Safari").fadeIn(500);
}
......@@ -97,7 +90,7 @@
})
$(".shadow,.tips-box").on("click", function () {
$(".shadow").fadeOut(350);
$(".tips-box").css("bottom","-13.5rem");
$(".tips-box").css("bottom","-13.04rem");
})
$.ajax({
url:$ip+'/pay/normal/recharge.html',
......@@ -108,12 +101,12 @@
var html=[];
for(var i=0;i<data.data.third.length;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+'">';
html+='<p>'+list.diamond+'钻石</p>';
html+='<p><img src="images/diamond.png">'+list.diamond+'</p>';
html+='<p>¥'+list.amount+'</p>';
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>';
}
$(".pay-ul").html(html);
......@@ -173,6 +166,13 @@
sessionStorage.pay=$(this).children("i").text()
$(".payfor-ul li").removeClass("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-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