From 13701a232c1946ec3c10b3c08011fc88652945aa Mon Sep 17 00:00:00 2001
From: libai <libai@yazhai.co>
Date: Fri, 21 May 2021 17:22:21 +0800
Subject: [PATCH] 测试
---
css/index.css | 4 ++--
css/index.less | 4 ++--
css/phonepay.css | 125 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------
css/phonepay.less | 134 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------
images/alipay.png | Bin 1559 -> 0 bytes
images/alipay1.png | Bin 0 -> 1025 bytes
images/click-bg.png | Bin 0 -> 1835 bytes
images/click-no-bg.png | Bin 0 -> 1067 bytes
images/content2.jpg | Bin 233342 -> 0 bytes
images/content2.png | Bin 0 -> 509725 bytes
images/diamond.png | Bin 0 -> 2310 bytes
images/hot.png | Bin 6139 -> 0 bytes
images/pay-click.png | Bin 0 -> 1012 bytes
images/pay-gift.png | Bin 1436 -> 0 bytes
images/tip-bg.png | Bin 0 -> 36620 bytes
images/weipay.png | Bin 0 -> 1035 bytes
images/weipay1.png | Bin 0 -> 1007 bytes
index.html | 2 +-
login.html | 34 +++++++++++++++++-----------------
19 files changed, 195 insertions(+), 108 deletions(-)
create mode 100644 images/alipay1.png
create mode 100644 images/click-bg.png
create mode 100644 images/click-no-bg.png
delete mode 100644 images/content2.jpg
create mode 100644 images/content2.png
create mode 100644 images/diamond.png
delete mode 100644 images/hot.png
create mode 100644 images/pay-click.png
create mode 100644 images/tip-bg.png
create mode 100644 images/weipay.png
create mode 100644 images/weipay1.png
diff --git a/css/index.css b/css/index.css
index a9540d4..a8666e2 100644
--- a/css/index.css
+++ b/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 {
diff --git a/css/index.less b/css/index.less
index 3611753..ab4d7b5 100644
--- a/css/index.less
+++ b/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{
diff --git a/css/phonepay.css b/css/phonepay.css
index 49d5304..1fda9c0 100644
--- a/css/phonepay.css
+++ b/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;
+}
diff --git a/css/phonepay.less b/css/phonepay.less
index 4be6bee..24ec984 100644
--- a/css/phonepay.less
+++ b/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
diff --git a/images/alipay.png b/images/alipay.png
index c2ee89f..fd08b79 100644
Binary files a/images/alipay.png and b/images/alipay.png differ
diff --git a/images/alipay1.png b/images/alipay1.png
new file mode 100644
index 0000000..4f4be2b
Binary files /dev/null and b/images/alipay1.png differ
diff --git a/images/click-bg.png b/images/click-bg.png
new file mode 100644
index 0000000..96f3546
Binary files /dev/null and b/images/click-bg.png differ
diff --git a/images/click-no-bg.png b/images/click-no-bg.png
new file mode 100644
index 0000000..6fab6f4
Binary files /dev/null and b/images/click-no-bg.png differ
diff --git a/images/content2.jpg b/images/content2.jpg
deleted file mode 100644
index cf90c85..0000000
Binary files a/images/content2.jpg and /dev/null differ
diff --git a/images/content2.png b/images/content2.png
new file mode 100644
index 0000000..2676d23
Binary files /dev/null and b/images/content2.png differ
diff --git a/images/diamond.png b/images/diamond.png
new file mode 100644
index 0000000..a36b5b3
Binary files /dev/null and b/images/diamond.png differ
diff --git a/images/hot.png b/images/hot.png
deleted file mode 100644
index 41e7429..0000000
Binary files a/images/hot.png and /dev/null differ
diff --git a/images/pay-click.png b/images/pay-click.png
new file mode 100644
index 0000000..cd2dac6
Binary files /dev/null and b/images/pay-click.png differ
diff --git a/images/pay-gift.png b/images/pay-gift.png
index c00222a..9d8dcac 100644
Binary files a/images/pay-gift.png and b/images/pay-gift.png differ
diff --git a/images/tip-bg.png b/images/tip-bg.png
new file mode 100644
index 0000000..8dcebd3
Binary files /dev/null and b/images/tip-bg.png differ
diff --git a/images/weipay.png b/images/weipay.png
new file mode 100644
index 0000000..ea15156
Binary files /dev/null and b/images/weipay.png differ
diff --git a/images/weipay1.png b/images/weipay1.png
new file mode 100644
index 0000000..87cf661
Binary files /dev/null and b/images/weipay1.png differ
diff --git a/index.html b/index.html
index 11f5ab2..3ed9ae8 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
<!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">
diff --git a/login.html b/login.html
index ba38627..22ac664 100644
--- a/login.html
+++ b/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");
--
libgit2 0.25.0