新增充值pc页面， 官网
This commit is contained in:
qf
@@ -5,204 +5,57 @@ html {
|
||||
font-family: "Heiti SC", "Microsoft Sans Serif";
|
||||
}
|
||||
|
||||
.m-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.m-bg img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.m-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
left: 50%;
|
||||
margin-left: -35%;
|
||||
}
|
||||
|
||||
.m-button.m-button1 {
|
||||
top: 17.5%;
|
||||
}
|
||||
|
||||
.m-button.m-button2 {
|
||||
bottom: 7.5%;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
width: 40%;
|
||||
left: 50%;
|
||||
margin-left: -20%;
|
||||
padding-left: 140px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.text-wrapper .qrcode {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.text-wrapper .text .txt1 {
|
||||
line-height: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-wrapper .text .txt2 {
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.text-wrapper .text .txt2 span {
|
||||
color: #948aff;
|
||||
}
|
||||
|
||||
.eori {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: 0.13333rem 0;
|
||||
}
|
||||
|
||||
.eori .weixin-name {
|
||||
padding-top: 0.26667rem;
|
||||
}
|
||||
|
||||
.eori .recordfoot {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: 0.08rem;
|
||||
}
|
||||
|
||||
.eori .recordfoot .record {
|
||||
display: inline-block;
|
||||
padding-right: 0.05333rem;
|
||||
width: 0.18667rem;
|
||||
height: 0.21333rem;
|
||||
background: url(../images/icon_police.png) no-repeat;
|
||||
}
|
||||
|
||||
.eori .recordfoot a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.eori .gongsi {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.eori .gongsi p:nth-child(2) {
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
.eori .tit {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.footer span {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.culture-icon a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.culture-icon img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 68.55%;
|
||||
top: 68%;
|
||||
width: 19.4%;
|
||||
height: 6.6%;
|
||||
background: rgba(253, 247, 247, 0);
|
||||
}
|
||||
|
||||
.button-wrapper a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button2-wrapper {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 45.55%;
|
||||
top: 67%;
|
||||
width: 19.4%;
|
||||
height: 7.6%;
|
||||
}
|
||||
|
||||
.button2-wrapper a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.button-wrapper, .button2-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1300px) {
|
||||
.text-wrapper {
|
||||
bottom: 1%;
|
||||
@media screen and (min-width: 769px) {
|
||||
.m-bg {
|
||||
display: none;
|
||||
}
|
||||
.text-wrapper .text {
|
||||
font-size: 12px;
|
||||
}
|
||||
.text-wrapper .text .txt1 {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 375px) {
|
||||
.text-wrapper {
|
||||
bottom: 0px;
|
||||
}
|
||||
.button-wrapper, .button-wrapper {
|
||||
.m-bg img {
|
||||
display: block;
|
||||
}
|
||||
.homePc {
|
||||
width: 100%;
|
||||
height: 10rem;
|
||||
background: url(../images/homePC.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.homePc .charge {
|
||||
width: 1.11rem;
|
||||
height: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.13rem;
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 2.77rem;
|
||||
}
|
||||
.eori {
|
||||
width: 100%;
|
||||
background: #30312C;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 0.2rem 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.eori .gongsi {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.eori .gongsi p {
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.eori .gongsi p:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 729px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
body {
|
||||
background-color: #0C0122;
|
||||
}
|
||||
@@ -212,13 +65,71 @@ html {
|
||||
.m-bg {
|
||||
display: block;
|
||||
}
|
||||
.homeM {
|
||||
width: 100%;
|
||||
height: 14.89rem;
|
||||
background: url(../images/homeM.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.homeM .charge {
|
||||
width: 1.11rem;
|
||||
height: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0.13rem;
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.homeM .swiper {
|
||||
width: 100%;
|
||||
height: 8.6rem;
|
||||
position: absolute;
|
||||
top: 4.8rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.homeM .swiper .swiper-wrapper {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
}
|
||||
.homeM .swiper .swiper-wrapper .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.homeM .swiper .swiper-wrapper .swiper-slide-prev {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
.homeM .swiper .swiper-wrapper .swiper-slide-next {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
.homeM .logo {
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.homeM .logo img {
|
||||
width: 2.2rem;
|
||||
height: 0.7rem;
|
||||
}
|
||||
.button-wrapper {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 1.28rem;
|
||||
top: 17.52rem;
|
||||
width: 7.46667rem;
|
||||
height: 1.22667rem;
|
||||
width: 7.4666666667rem;
|
||||
height: 1.2266666667rem;
|
||||
}
|
||||
.button-wrapper a {
|
||||
display: inline-block;
|
||||
@@ -228,8 +139,8 @@ html {
|
||||
.button2-wrapper {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 3.09333rem;
|
||||
bottom: 1.70667rem;
|
||||
left: 3.0933333333rem;
|
||||
bottom: 1.7066666667rem;
|
||||
width: 4rem;
|
||||
height: 0.8rem;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
@@ -256,11 +167,10 @@ html {
|
||||
text-align: center;
|
||||
}
|
||||
.eori {
|
||||
height: 1.81333rem;
|
||||
width: 100%;
|
||||
background: #30312C;
|
||||
color: white;
|
||||
padding: 0.26667rem 0;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 0.2rem 0;
|
||||
}
|
||||
.eori .recordfoot {
|
||||
color: #fff;
|
||||
@@ -270,9 +180,9 @@ html {
|
||||
}
|
||||
.eori .recordfoot .record {
|
||||
display: inline-block;
|
||||
padding-right: 0.05333rem;
|
||||
height: 0.37333rem;
|
||||
width: 0.42667rem;
|
||||
padding-right: 0.0533333333rem;
|
||||
height: 0.3733333333rem;
|
||||
width: 0.4266666667rem;
|
||||
background: url(../images/icon_police.png) no-repeat;
|
||||
}
|
||||
.eori .gongsi {
|
||||
@@ -281,6 +191,7 @@ html {
|
||||
}
|
||||
.eori .gongsi p {
|
||||
line-height: 1.3;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.eori .gongsi p:nth-child(2) {
|
||||
margin: 0;
|
||||
@@ -292,7 +203,6 @@ html {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.toast {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 10px;
|
||||
@@ -307,12 +217,16 @@ html {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0.26667rem;
|
||||
width: 6.13333rem;
|
||||
right: 0.2666666667rem;
|
||||
width: 6.1333333333rem;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@function px2rem($px, $rem:75) {
|
||||
@function px2rem($px, $rem: 75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
@@ -10,269 +10,225 @@ html {
|
||||
//overflow: hidden;
|
||||
}
|
||||
|
||||
.m-bg {
|
||||
display: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.m-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
left: 50%;
|
||||
margin-left: -35%;
|
||||
|
||||
&.m-button1 {
|
||||
top: 17.5%;
|
||||
}
|
||||
|
||||
&.m-button2 {
|
||||
bottom: 7.5%;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
width: 40%;
|
||||
left: 50%;
|
||||
margin-left: -20%;
|
||||
padding-left: 140px;
|
||||
box-sizing: border-box;
|
||||
// .eori {
|
||||
// // height: 8.7%;
|
||||
// width: 100%;
|
||||
// background: #000;
|
||||
// // color: #D1D1D1;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// padding: px2rem(10, ) 0;
|
||||
// // p {
|
||||
// // height: 40px;
|
||||
// // width: 50%;
|
||||
// // float: left;
|
||||
// // text-align: center;
|
||||
// // line-height: 40px;
|
||||
// // font-size: 10px;
|
||||
// // text-align: right;
|
||||
// // padding-right: 20px;
|
||||
// // box-sizing: border-box;
|
||||
|
||||
.qrcode {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
// // a {
|
||||
// // color: #666;
|
||||
// // }
|
||||
// // }
|
||||
|
||||
.text {
|
||||
.txt1 {
|
||||
line-height: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
// .weixin-name {
|
||||
// padding-top: px2rem(20);
|
||||
// }
|
||||
|
||||
// .recordfoot {
|
||||
// width: 100%;
|
||||
// color: #000;
|
||||
// text-align: left;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// font-size: 13px;
|
||||
// margin-bottom: px2rem(6, );
|
||||
|
||||
// .record {
|
||||
// display: inline-block;
|
||||
// padding-right: px2rem(4);
|
||||
// width: px2rem(14, );
|
||||
// height: px2rem(16, );
|
||||
// background: url(../images/icon_police.png) no-repeat;
|
||||
// // background: #948aff;
|
||||
// }
|
||||
|
||||
// a {
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .gongsi {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// font-size: 13px;
|
||||
// color: #fff;
|
||||
|
||||
// p {
|
||||
// &:nth-child(2) {
|
||||
// margin: 0 14px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // div {
|
||||
// // // height: 30px;
|
||||
// // width: 100%;
|
||||
// // text-align: center;
|
||||
// // // line-height: 30px;
|
||||
// // font-size: 16px;
|
||||
// // }
|
||||
|
||||
// .tit {
|
||||
// height: 60px;
|
||||
// line-height: 60px;
|
||||
// text-align: center;
|
||||
// font-size: 20px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .footer {
|
||||
// line-height: 70px;
|
||||
// text-align: center;
|
||||
// font-size: 14px;
|
||||
// color: #fff;
|
||||
// background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
// span {
|
||||
// margin: 0 6px;
|
||||
// }
|
||||
|
||||
// a {
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .button-wrapper {
|
||||
// cursor: pointer;
|
||||
// position: absolute;
|
||||
// left: 68.55%;
|
||||
// // top: 62.27%;
|
||||
// top: 68%;
|
||||
// width: 19.4%;
|
||||
// height: 6.6%;
|
||||
// background: rgba(253, 247, 247, 0);
|
||||
|
||||
// a {
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .button2-wrapper {
|
||||
// cursor: pointer;
|
||||
// position: absolute;
|
||||
// left: 45.55%;
|
||||
// // top: 61.09%;
|
||||
// top: 67%;
|
||||
// width: 19.4%;
|
||||
// height: 7.6%;
|
||||
// // background: rgba(253, 247, 247, 0);
|
||||
|
||||
// a {
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .button-wrapper,
|
||||
// .button2-wrapper {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
// pc端
|
||||
@media screen and (min-width:769px) {
|
||||
.m-bg {
|
||||
display: none;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.txt2 {
|
||||
line-height: 16px;
|
||||
|
||||
span {
|
||||
color: #948aff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.eori {
|
||||
// height: 8.7%;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
// color: #D1D1D1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
padding: px2rem(10, ) 0;
|
||||
// p {
|
||||
// height: 40px;
|
||||
// width: 50%;
|
||||
// float: left;
|
||||
// text-align: center;
|
||||
// line-height: 40px;
|
||||
// font-size: 10px;
|
||||
// text-align: right;
|
||||
// padding-right: 20px;
|
||||
// box-sizing: border-box;
|
||||
|
||||
// a {
|
||||
// color: #666;
|
||||
// }
|
||||
// }
|
||||
|
||||
.weixin-name {
|
||||
padding-top: px2rem(20);
|
||||
}
|
||||
|
||||
.recordfoot {
|
||||
.homePc {
|
||||
width: 100%;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
margin-bottom: px2rem(6, );
|
||||
.record {
|
||||
display: inline-block;
|
||||
padding-right: px2rem(4);
|
||||
width: px2rem(14, );
|
||||
height: px2rem(16, );
|
||||
background: url(../images/icon_police.png) no-repeat;
|
||||
// background: #948aff;
|
||||
}
|
||||
a{
|
||||
height: 10rem;
|
||||
background: url(../images/homePC.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.charge {
|
||||
width: 1.11rem;
|
||||
height: 0.5rem;
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
border-radius: .13rem;
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
right: 2.77rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gongsi{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
p{
|
||||
&:nth-child(2){
|
||||
margin: 0 14px;
|
||||
.eori {
|
||||
// height: 1.2rem;
|
||||
width: 100%;
|
||||
background: #30312C;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: 0.2rem 0;
|
||||
vertical-align: top;
|
||||
|
||||
// .recordfoot {
|
||||
// color: #fff;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
// .record {
|
||||
// display: inline-block;
|
||||
// padding-right: px2rem(4);
|
||||
// height: px2rem(28, );
|
||||
// width: px2rem(32, );
|
||||
// background: url(../images/icon_police.png) no-repeat;
|
||||
// }
|
||||
// }
|
||||
|
||||
.gongsi {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
font-size: 0.2rem;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// div {
|
||||
// // height: 30px;
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
// // line-height: 30px;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
.tit {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
span {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.culture-icon {
|
||||
a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 68.55%;
|
||||
// top: 62.27%;
|
||||
top: 68%;
|
||||
width: 19.4%;
|
||||
height: 6.6%;
|
||||
background: rgba(253, 247, 247, 0);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button2-wrapper {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 45.55%;
|
||||
// top: 61.09%;
|
||||
top: 67%;
|
||||
width: 19.4%;
|
||||
height: 7.6%;
|
||||
// background: rgba(253, 247, 247, 0);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.button-wrapper, .button2-wrapper{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width:1300px) {
|
||||
.text-wrapper {
|
||||
bottom: 1%;
|
||||
|
||||
.text {
|
||||
.txt1 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
font-size:12px;
|
||||
}
|
||||
}
|
||||
// .button-wrapper {
|
||||
// cursor: pointer;
|
||||
// left: 68.55%;
|
||||
// // top: 62.27%;
|
||||
// top: 68%;
|
||||
// }
|
||||
|
||||
// .button2-wrapper {
|
||||
// left: 57.55%;
|
||||
// // top: 61.09%;
|
||||
// top: 67%;
|
||||
// }
|
||||
|
||||
// .button2-wrapper {
|
||||
// cursor: pointer;
|
||||
// left: 45.55%;
|
||||
// width: 19.4%;
|
||||
// // background: #000;
|
||||
// // background: rgba(253, 247, 247, 0);
|
||||
|
||||
// a {
|
||||
// display: inline-block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:375px) {
|
||||
.text-wrapper {
|
||||
bottom: 0px;
|
||||
}
|
||||
.button-wrapper, .button-wrapper{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width:729px) {
|
||||
body{
|
||||
// 移动端
|
||||
@media screen and (max-width:768px) {
|
||||
body {
|
||||
background-color: #0C0122;
|
||||
}
|
||||
|
||||
.pc-bg {
|
||||
display: none;
|
||||
}
|
||||
@@ -281,6 +237,78 @@ html {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.homeM {
|
||||
width: 100%;
|
||||
// width: px2rem(750, );
|
||||
// height: px2rem(1489, );
|
||||
// height: 19.88rem;
|
||||
height: 14.89rem;
|
||||
background: url(../images/homeM.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.charge {
|
||||
width: 1.11rem;
|
||||
height: 0.5rem;
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
border-radius: .13rem;
|
||||
font-size: 0.24rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 0.5rem;
|
||||
position: absolute;
|
||||
top: 1.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 8.6rem;
|
||||
position: absolute;
|
||||
top: 4.8rem;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-wrapper {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
|
||||
.swiper-slide {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-slide-prev {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
|
||||
.swiper-slide-next {
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
margin-top: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
bottom: 0.6rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
img {
|
||||
width: 2.2rem;
|
||||
height: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@@ -288,6 +316,7 @@ html {
|
||||
top: px2rem(1314);
|
||||
width: px2rem(560);
|
||||
height: px2rem(92);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@@ -321,6 +350,7 @@ html {
|
||||
width: 90%;
|
||||
margin-left: -45%;
|
||||
padding-top: 108px;
|
||||
|
||||
.text {
|
||||
.txt1 {
|
||||
margin-bottom: 10px;
|
||||
@@ -335,11 +365,12 @@ html {
|
||||
}
|
||||
|
||||
.eori {
|
||||
height: px2rem(136);
|
||||
// height: 1.2rem;
|
||||
width: 100%;
|
||||
background: #30312C;
|
||||
color: rgb(255, 255, 255);
|
||||
padding: px2rem(20, ) 0;
|
||||
padding: 0.2rem 0;
|
||||
|
||||
.recordfoot {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
@@ -355,12 +386,15 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.gongsi{
|
||||
.gongsi {
|
||||
display: block;
|
||||
text-align: center;
|
||||
p{
|
||||
|
||||
p {
|
||||
line-height: 1.3;
|
||||
&:nth-child(2){
|
||||
font-size: 0.2rem;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -381,12 +415,20 @@ html {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// @media screen and (max-width:375px) {
|
||||
// .text-wrapper {
|
||||
// bottom: 0px;
|
||||
// }
|
||||
|
||||
// .button-wrapper,
|
||||
// .button-wrapper {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
.toast {
|
||||
@@ -403,6 +445,7 @@ html {
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.tips {
|
||||
@@ -411,4 +454,5 @@ html {
|
||||
top: 0;
|
||||
right: px2rem(20);
|
||||
width: px2rem(460);
|
||||
z-index: 9;
|
||||
}
|
||||
BIN
view/peko/home/images/apk.png
Normal file
BIN
view/peko/home/images/apk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
view/peko/home/images/appleStore.png
Normal file
BIN
view/peko/home/images/appleStore.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
view/peko/home/images/googlePlay.png
Normal file
BIN
view/peko/home/images/googlePlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 685 KiB After Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
BIN
view/peko/home/images/pic1.png
Normal file
BIN
view/peko/home/images/pic1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
view/peko/home/images/pic2.png
Normal file
BIN
view/peko/home/images/pic2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
BIN
view/peko/home/images/pic3.png
Normal file
BIN
view/peko/home/images/pic3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
@@ -31,28 +31,59 @@
|
||||
<link rel="stylesheet" href="./css/reset.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<!-- <link rel="stylesheet" href="./home/css/index.css"> -->
|
||||
<script src="./js/flexible.js"></script>
|
||||
<link rel="stylesheet" href="./css/swiper.min.css">
|
||||
<!-- <script src="./js/flexible.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="pc-bg"><img src="./images/homePc.png" alt=""></div>
|
||||
<div class="m-bg"><img src="./images/homeM.png" alt=""></div>
|
||||
<div class="button-wrapper download">
|
||||
<div class="pc-bg">
|
||||
<!-- <img src="./images/homePc.png" alt=""> -->
|
||||
<div class="homePc">
|
||||
<div class="charge">儲值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="m-bg">
|
||||
<!-- <img src="./images/homeM.png" alt=""> -->
|
||||
<div class="homeM">
|
||||
<div class="charge">儲值</div>
|
||||
<!-- 轮播 -->
|
||||
<div class="swiper-container swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/pic1.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/pic2.png" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./images/pic3.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="swiper-pagination swp"></div> -->
|
||||
</div>
|
||||
<div class="logo">
|
||||
<img src="./images/googlePlay.png" alt="">
|
||||
<img src="./images/appleStore.png" alt="">
|
||||
<img src="./images/apk.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="button-wrapper download">
|
||||
</div>
|
||||
<div class="button2-wrapper download">
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="eori">
|
||||
<!-- <div class="recordfoot">
|
||||
<i class="record"></i>
|
||||
<a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2020098441号</a>
|
||||
</div> -->
|
||||
<div class="gongsi">
|
||||
<p>Hong Kong Li Zi Technology Co., Limited</p>
|
||||
<p>香港栗子科技有限公司</p>
|
||||
<p>Hong Kong Li Zhi Technology Co., Limited</p>
|
||||
<p>香港荔枝科技有限公司</p>
|
||||
<p>CR No:3040005</p>
|
||||
<p>地址：ROOM1803,18/F,TOWERONE,CHINAHONGKONGCIT</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast">敬请期待</div>
|
||||
@@ -64,8 +95,8 @@
|
||||
<script src="./js/jquery.qrcode.js"></script>
|
||||
<script src="http://static.lkme.cc/linkedme.min.js"></script>
|
||||
<script src="./js/utf.js"></script>
|
||||
<script src="./js/swiper.min.js"></script>
|
||||
<script src="./js/index.js?v=2.2"></script>
|
||||
<script></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,8 +1,18 @@
|
||||
const productUrl = 'https://api.pekolive.com'; // 正式环境
|
||||
const testUrl = 'https://beta.api.pekolive.com'; // 测试环境
|
||||
|
||||
function render (templateId, templateData, target) {
|
||||
var html = template(templateId, templateData);
|
||||
target.innerHTML += html;
|
||||
}
|
||||
|
||||
// 根据域名判断 正式环境(含www)/测试环境(含beta), 并返回所需url前缀
|
||||
// written by zxfxiong
|
||||
function getUrlPrefix () {
|
||||
if (!EnvCheck()) return undefined;
|
||||
return EnvCheck() === 'live' ? productUrl : testUrl;
|
||||
}
|
||||
|
||||
function dateFormat (date, fmt) {
|
||||
date = new Date(date);
|
||||
var o = {
|
||||
@@ -60,15 +70,19 @@ function convert (_url) {
|
||||
// }
|
||||
|
||||
// 根据域名适配环境
|
||||
function EnvCheck() {
|
||||
if(window.location.href){
|
||||
var _url = window.location.href;
|
||||
var res = _url.match(/beta/);
|
||||
if(res){
|
||||
return 'test';
|
||||
}else{
|
||||
return 'live';
|
||||
}
|
||||
function EnvCheck () {
|
||||
if (window.location.href) {
|
||||
var _url = window.location.href;
|
||||
var res = _url.match(/uat/);
|
||||
var res1 = _url.match(/120.79.211.243/);
|
||||
var res2 = _url.match(/192.168./)
|
||||
var res3 = _url.match(/127.0/)
|
||||
var res4 = _url.match(/beta/)
|
||||
if (res || res1 || res2 || res3 || res4) {
|
||||
return 'test';
|
||||
} else {
|
||||
return 'live';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 根据域名判断是本地打开还是服务器打开
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
/* eslint-disable semi */
|
||||
/* eslint-disable no-undef */
|
||||
let urlData = getQueryString()
|
||||
const urlPrefix = getUrlPrefix()
|
||||
//获取url参数
|
||||
let channelData = urlData.channel
|
||||
//定义官方渠道包
|
||||
@@ -18,7 +19,7 @@ const channelDict = {
|
||||
'peko10': 'https://image.lecheng163.com/peko_peko10.apk',
|
||||
'gongzhonghao': 'https://image.lecheng163.com/peko_gongzhonghao.apk',
|
||||
'zhaohui': 'https://image.lecheng163.com/zhaohui.apk'
|
||||
|
||||
|
||||
// 'baomihua01': 'https://image.lecheng163.com/accompany_release_v_213_1_baomihua01_sign.apk'
|
||||
}
|
||||
$(function () {
|
||||
@@ -27,8 +28,8 @@ $(function () {
|
||||
let androidUrl = null;
|
||||
channelDict.hasOwnProperty(channelData) ? androidUrl = channelDict[channelData] : androidUrl = 'https://play.google.com/store/apps/details?id=com.vele.peko';
|
||||
let iosUrl = 'http://doudouyue.com/8axv' //ios企业包
|
||||
// let iosUrl = 'https://apps.apple.com/cn/app/id1571083482' //ios商店包
|
||||
|
||||
// let iosUrl = 'https://apps.apple.com/cn/app/id1571083482' //ios商店包
|
||||
|
||||
if (version.ios) {
|
||||
$('.button-wrapper').on('click', function () {
|
||||
if (version.weixin) {
|
||||
@@ -54,5 +55,52 @@ $(function () {
|
||||
window.location.href = iosUrl;
|
||||
})
|
||||
}
|
||||
|
||||
$('.m-bg .homeM .charge').click(function () {
|
||||
window.location.href = 'https://api.pekolive.com/peko/modules/pay/index.html?channelType=4'
|
||||
})
|
||||
})
|
||||
|
||||
function swiperFun() {
|
||||
var swiper = new Swiper('.swiper', {
|
||||
direction: 'horizontal',
|
||||
loop: true,
|
||||
autoplay: 5000,
|
||||
slidesPerView: "auto",
|
||||
centeredSlides: true,
|
||||
spaceBetween: 0,
|
||||
initialSlide: 1,//默认第二个居中
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$(document).ready(function () {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
if (deviceWidth > 768) {
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
} else {
|
||||
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
|
||||
}
|
||||
});
|
||||
window.onresize = function () {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
// console.log('deviceWidth', deviceWidth);
|
||||
if (deviceWidth > 768) {
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
} else {
|
||||
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
swiperFun();
|
||||
|
||||
//跳转pc端充值
|
||||
$('.homePc .charge').click(function(){
|
||||
window.location.href = urlPrefix + '/peko/modules/payPc/index.html?channelType=4';
|
||||
})
|
||||
// 跳转移动端h5充值
|
||||
$('.homeM .charge').click(function(){
|
||||
window.location.href = urlPrefix + '/peko/modules/pay/index.html?channelType=4';
|
||||
})
|
||||
})
|
||||
398
view/peko/modules/payPc/css/index.css
Normal file
398
view/peko/modules/payPc/css/index.css
Normal file
@@ -0,0 +1,398 @@
|
||||
@charset "UTF-8";
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
body .logingActive,
|
||||
html .logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 50%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: 0.48rem;
|
||||
text-align: center;
|
||||
border-radius: 0.1333333333rem;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
padding: 0 0.2rem;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip,
|
||||
html .wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
}
|
||||
body .wx_skip img,
|
||||
html .wx_skip img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
body .header,
|
||||
html .header {
|
||||
width: 19.2rem;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
background: url(../images/payBg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
body .header .header_top,
|
||||
html .header .header_top {
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding-top: 1.38rem;
|
||||
padding-left: 2.4rem;
|
||||
}
|
||||
body .header .header_top img,
|
||||
html .header .header_top img {
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
body .header .header_top b,
|
||||
html .header .header_top b {
|
||||
color: #ffffff;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
body .header .main,
|
||||
html .header .main {
|
||||
width: 14.4rem;
|
||||
height: 7.26rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.18rem 0.18rem 0.18rem 0.18rem;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
}
|
||||
body .header .main .user,
|
||||
html .header .main .user {
|
||||
width: 4rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.4rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.12rem;
|
||||
display: inline-block;
|
||||
margin: 0.43rem 0 0 0.5rem;
|
||||
}
|
||||
body .header .main input::-webkit-input-placeholder,
|
||||
html .header .main input::-webkit-input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
body .header .main .area,
|
||||
html .header .main .area {
|
||||
position: absolute;
|
||||
right: 0.8rem;
|
||||
top: 0.6rem;
|
||||
display: flex;
|
||||
}
|
||||
body .header .main .area img,
|
||||
html .header .main .area img {
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
body .header .main .area b,
|
||||
html .header .main .area b {
|
||||
height: 0.22rem;
|
||||
font-size: 0.16rem;
|
||||
color: #1F1A4E;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
body .header .main .pay_method,
|
||||
html .header .main .pay_method {
|
||||
width: 12.8rem;
|
||||
margin: 0.5rem auto;
|
||||
/*禁止复制*/
|
||||
}
|
||||
body .header .main .pay_method p,
|
||||
html .header .main .pay_method p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_method .no_copy,
|
||||
html .header .main .pay_method .no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
body .header .main .pay_method .methodBox,
|
||||
html .header .main .pay_method .methodBox {
|
||||
width: 100%;
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
body .header .main .pay_method .methodBox::-webkit-scrollbar,
|
||||
html .header .main .pay_method .methodBox::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods,
|
||||
html .header .main .pay_method .methodBox .methods {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span,
|
||||
html .header .main .pay_method .methodBox .methods span {
|
||||
width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span img,
|
||||
html .header .main .pay_method .methodBox .methods span img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.78rem;
|
||||
height: 0.78rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods span p,
|
||||
html .header .main .pay_method .methodBox .methods span p {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.1rem;
|
||||
width: 100%;
|
||||
height: 0.2rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods .active,
|
||||
html .header .main .pay_method .methodBox .methods .active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .header .main .pay_method .methodBox .methods .active p,
|
||||
html .header .main .pay_method .methodBox .methods .active p {
|
||||
color: #9168FA;
|
||||
}
|
||||
body .header .main .pay_number,
|
||||
html .header .main .pay_number {
|
||||
width: 12.8rem;
|
||||
margin: 0 auto;
|
||||
/*禁止复制*/
|
||||
}
|
||||
body .header .main .pay_number p,
|
||||
html .header .main .pay_number p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_number .no_copy,
|
||||
html .header .main .pay_number .no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
body .header .main .pay_number .number,
|
||||
html .header .main .pay_number .number {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
body .header .main .pay_number .number::-webkit-scrollbar,
|
||||
html .header .main .pay_number .number::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
body .header .main .pay_number .number span,
|
||||
html .header .main .pay_number .number span {
|
||||
display: block;
|
||||
min-width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
body .header .main .pay_number .number span b,
|
||||
html .header .main .pay_number .number span b {
|
||||
position: absolute;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body .header .main .pay_number .number span i,
|
||||
html .header .main .pay_number .number span i {
|
||||
position: absolute;
|
||||
color: #6D6B89;
|
||||
font-size: 0.13rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.25rem;
|
||||
font-style: normal;
|
||||
}
|
||||
body .header .main .pay_number .number .active,
|
||||
html .header .main .pay_number .number .active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
body .header .main .but1,
|
||||
html .header .main .but1 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #B3B3C3;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
body .header .main .but2,
|
||||
html .header .main .but2 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
display: none;
|
||||
}
|
||||
body .footer,
|
||||
html .footer {
|
||||
width: 19.2rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
background-color: #313229;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
color: #fff;
|
||||
}
|
||||
body .footer p:nth-child(2),
|
||||
html .footer p:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
body .pop_up,
|
||||
html .pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
}
|
||||
body .pop_up .pop_up_in,
|
||||
html .pop_up .pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rem;
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: 0.32rem;
|
||||
text-align: center;
|
||||
font-size: 0.4266666667rem;
|
||||
color: #333;
|
||||
}
|
||||
body .pop_up .pop_up_in b,
|
||||
html .pop_up .pop_up_in b {
|
||||
width: 100%;
|
||||
height: 1.5466666667rem;
|
||||
line-height: 1.5466666667rem;
|
||||
}
|
||||
body .pop_up .pop_up_in p,
|
||||
html .pop_up .pop_up_in p {
|
||||
width: 100%;
|
||||
height: 1.0666666667rem;
|
||||
line-height: 1.0666666667rem;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
body .stance,
|
||||
html .stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
body .stance .picture,
|
||||
html .stance .picture {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
}
|
||||
body .stance .picture span,
|
||||
html .stance .picture span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: 0.32rem;
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
442
view/peko/modules/payPc/css/index.scss
Normal file
442
view/peko/modules/payPc/css/index.scss
Normal file
@@ -0,0 +1,442 @@
|
||||
@import '../../../common/css/flex.scss';
|
||||
|
||||
@function px2rem($px, $rem: 75) {
|
||||
@return $px / $rem+rem;
|
||||
}
|
||||
|
||||
// // 隐藏横向滚动条
|
||||
// * {
|
||||
// scrollbar-width: none; /* Firefox */
|
||||
// -ms-overflow-style: none; /* IE 10+ */
|
||||
// &::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// } /* Chrome Safari */
|
||||
|
||||
// }
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
background: #F3F5FA;
|
||||
overflow-x: hidden;
|
||||
|
||||
.logingActive {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
// min-width: 2rem;
|
||||
width: 50%;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
font-size: px2rem(36, );
|
||||
text-align: center;
|
||||
border-radius: px2rem(10, );
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 999;
|
||||
padding: 0 px2rem(15, );
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wx_skip {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
z-index: 9999999999;
|
||||
display: none;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
height: 5.373333rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 5%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 19.2rem;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
background: url(../images/payBg.png) no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
.header_top {
|
||||
// width: 20%;
|
||||
height: 0.8rem;
|
||||
line-height: 0.8rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
padding-top: 1.38rem;
|
||||
padding-left: 2.4rem;
|
||||
|
||||
img {
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
// margin-right: 10px;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
b {
|
||||
color: #ffffff;
|
||||
// font-size: 28px;
|
||||
font-size: 0.28rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 14.4rem;
|
||||
height: 7.26rem;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0.18rem 0.18rem 0.18rem 0.18rem;
|
||||
margin: 1rem auto 0;
|
||||
position: relative;
|
||||
|
||||
.user {
|
||||
width: 4rem;
|
||||
// height: 0.38rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.4rem;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
padding: 0.2rem 0.4rem;
|
||||
// text-align: center;
|
||||
font-size: 0.12rem;
|
||||
display: inline-block;
|
||||
margin: 0.43rem 0 0 0.5rem;
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
|
||||
.area {
|
||||
position: absolute;
|
||||
right: 0.8rem;
|
||||
top: 0.6rem;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 0.22rem;
|
||||
height: 0.22rem;
|
||||
}
|
||||
|
||||
b {
|
||||
// width: 0.32rem;
|
||||
height: 0.22rem;
|
||||
font-size: 0.16rem;
|
||||
color: #1F1A4E;
|
||||
line-height: 0.22rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pay_method {
|
||||
// width: 13.04rem;
|
||||
width: 12.8rem;
|
||||
// height: 1.34rem;
|
||||
margin: 0.5rem auto;
|
||||
|
||||
p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
/*禁止复制*/
|
||||
.no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.methodBox {
|
||||
width: 100%;
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.methods {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
span {
|
||||
width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.06rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
// box-sizing: border-box;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 0.78rem;
|
||||
height: 0.78rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #B3B3C3;
|
||||
font-size: 0.1rem;
|
||||
width: 100%;
|
||||
height: 0.2rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
// border: 2px solid #BB43FF;
|
||||
// box-sizing: border-box;
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
p {
|
||||
color: #9168FA;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pay_number {
|
||||
width: 12.8rem;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
font-size: 0.2rem;
|
||||
color: #1F1A4E;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
height: 0.4rem;
|
||||
}
|
||||
|
||||
/*禁止复制*/
|
||||
.no_copy {
|
||||
-moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.number {
|
||||
width: 100%;
|
||||
height: 0.96rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* Chrome Safari */
|
||||
width: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
min-width: 1.84rem;
|
||||
height: 0.96rem;
|
||||
background: #F0F5F6;
|
||||
border-radius: 0.08rem;
|
||||
position: relative;
|
||||
margin-right: 0.4rem;
|
||||
// margin-bottom: px2rem(40, );
|
||||
|
||||
b {
|
||||
position: absolute;
|
||||
color: #1F1A4E;
|
||||
font-size: 0.2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0.25rem;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
color: #6D6B89;
|
||||
font-size: 0.13rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0.25rem;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url(../images/active.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.but1 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #B3B3C3;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
// background: url('../images/noBut.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: #E6E6F0;
|
||||
}
|
||||
|
||||
.but2 {
|
||||
width: 4.74rem;
|
||||
height: 0.77rem;
|
||||
color: #FFFFFF;
|
||||
font-size: 0.24rem;
|
||||
border-radius: 0.1rem;
|
||||
line-height: 0.77rem;
|
||||
margin: 0.7rem 0 0 0.7rem;
|
||||
text-align: center;
|
||||
// background: url('../images/but.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
background: linear-gradient(255deg, #CC66FF 1%, #9CB3FF 52%, #13E2F5 100%);
|
||||
;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 19.2rem;
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
background-color: #313229;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 0.2rem;
|
||||
color: #fff;
|
||||
|
||||
p {
|
||||
&:nth-child(2) {
|
||||
margin: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pop_up {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
z-index: 99;
|
||||
display: none;
|
||||
|
||||
.pop_up_in {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: px2rem(600, );
|
||||
min-height: 2.933333rem;
|
||||
background: #fff;
|
||||
border-radius: px2rem(24, );
|
||||
text-align: center;
|
||||
font-size: px2rem(32, );
|
||||
color: #333;
|
||||
|
||||
b {
|
||||
width: 100%;
|
||||
height: px2rem(116, );
|
||||
line-height: px2rem(116, );
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
height: px2rem(80, );
|
||||
line-height: px2rem(80, );
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stance {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
.picture {
|
||||
width: px2rem(600, );
|
||||
height: px2rem(600, );
|
||||
background: url(../images/null.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: relative;
|
||||
|
||||
span {
|
||||
font-size: 0.64rem;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -1.5rem;
|
||||
transform: translateX(-56%);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input::-webkit-input-placeholder {
|
||||
/* placeholder颜色 */
|
||||
color: #929198;
|
||||
/* placeholder字体大小 */
|
||||
font-size: px2rem(24, );
|
||||
/* placeholder位置 */
|
||||
text-align: center;
|
||||
}
|
||||
BIN
view/peko/modules/payPc/images/active.png
Normal file
BIN
view/peko/modules/payPc/images/active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
view/peko/modules/payPc/images/but.png
Normal file
BIN
view/peko/modules/payPc/images/but.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
view/peko/modules/payPc/images/header.png
Normal file
BIN
view/peko/modules/payPc/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
view/peko/modules/payPc/images/jvxing.png
Normal file
BIN
view/peko/modules/payPc/images/jvxing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
view/peko/modules/payPc/images/logo.png
Normal file
BIN
view/peko/modules/payPc/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
view/peko/modules/payPc/images/more.png
Normal file
BIN
view/peko/modules/payPc/images/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
view/peko/modules/payPc/images/noActive.png
Normal file
BIN
view/peko/modules/payPc/images/noActive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
view/peko/modules/payPc/images/noBut.png
Normal file
BIN
view/peko/modules/payPc/images/noBut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
view/peko/modules/payPc/images/null.png
Normal file
BIN
view/peko/modules/payPc/images/null.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
view/peko/modules/payPc/images/payBg.png
Normal file
BIN
view/peko/modules/payPc/images/payBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 806 KiB |
BIN
view/peko/modules/payPc/images/wx_skip.png
Normal file
BIN
view/peko/modules/payPc/images/wx_skip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
view/peko/modules/payPc/images/wx_skip_ar.png
Normal file
BIN
view/peko/modules/payPc/images/wx_skip_ar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
view/peko/modules/payPc/images/wx_skip_en.png
Normal file
BIN
view/peko/modules/payPc/images/wx_skip_en.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
view/peko/modules/payPc/images/wx_skip_in.png
Normal file
BIN
view/peko/modules/payPc/images/wx_skip_in.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
111
view/peko/modules/payPc/index.html
Normal file
111
view/peko/modules/payPc/index.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title id="pay_title">充值</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta http-equiv="pragma" content="no-cache">
|
||||
<meta http-equiv="cache-control" content="no-cache">
|
||||
<meta http-equiv="expires" content="">
|
||||
<!-- <script src="../../common/js/flexible.js"></script> -->
|
||||
<link rel="stylesheet" href="../../common/css/reset.css">
|
||||
<link rel="stylesheet" href="css/index.css?v=1.1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 充值提示 -->
|
||||
<div class="logingActive" style="font-size: 0.35rem;"></div>
|
||||
|
||||
<div class="header">
|
||||
<!-- logo -->
|
||||
<div class="header_top">
|
||||
<img src="./images/logo.png" alt="">
|
||||
<b id="pay_header_t_l">peko儲值中心</b>
|
||||
</div>
|
||||
<!-- 充值区域 -->
|
||||
<div class="main">
|
||||
<!-- 输入框 -->
|
||||
<input class="user" type="text" id="pay_user_id" placeholder="請輸入peko賬號ID">
|
||||
<!-- 地区 -->
|
||||
<div class="area">
|
||||
<img src="./images/more.png" alt=""><b></b>
|
||||
</div>
|
||||
<!-- 选择支付方式 -->
|
||||
<div class="pay_method">
|
||||
<p id="pay_method_p">请选择儲值方式:</p>
|
||||
<div class="methodBox no_copy">
|
||||
<!-- <div class="methods methods0">
|
||||
<span>
|
||||
<img src="./images/header.png" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div>
|
||||
<div class="methods methods1">
|
||||
<span>
|
||||
<img src="" alt="">
|
||||
<p>迪迦奥特曼</p>
|
||||
</span>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择充值金额 -->
|
||||
<div class="pay_number">
|
||||
<p id="pay_number_sd">請選擇您的儲值金額:</p>
|
||||
<div class="number no_copy">
|
||||
<!-- <span class="active">
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span>
|
||||
<span>
|
||||
<b>100,000 金幣</b>
|
||||
<i>NT$ 1,000</i>
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付按钮 -->
|
||||
<div class="but1 pay_but">立即支付</div>
|
||||
<div class="but2 pay_but">立即支付</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
<p>Hong Kong Li Zhi Technology Co., Limited</p>
|
||||
<p>香港荔枝科技有限公司</p>
|
||||
<p>CR No:3040005</p>
|
||||
<p>地址：ROOM1803,18/F,TOWERONE,CHINAHONGKONGCIT</p>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div class="pop_up">
|
||||
<div class="pop_up_in">
|
||||
<b id="pop_up_in_b">請選擇儲值地區</b>
|
||||
<!-- <p countryCode="TW" id="pop_up_in_p1">臺灣</p>
|
||||
<p countryCode="CN" id="pop_up_in_p2">大陸</p> -->
|
||||
<!-- <p>香港</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="stance">
|
||||
<div class="picture">
|
||||
<span id="pay_stance_picture">儲值服務即將開放，請耐心等待</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wx_skip">
|
||||
<img id="wx_skip_img" src="./images/wx_skip.png" alt="">
|
||||
</div>
|
||||
<script src="../../common/js/jquery-3.2.1.min.js"></script>
|
||||
<!-- <script src="../../common/js/flexible.js"></script> -->
|
||||
<script src="../../common/js/vconsole.min.js"></script>
|
||||
<script src="../../common/js/pingpp.js"></script>
|
||||
<script src="../../common/js/common2.js?v=8.0"></script>
|
||||
<script src="../../common/js/layer.js"></script>
|
||||
<script src="./js/index.js?v=1.2"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
330
view/peko/modules/payPc/js/index.js
Normal file
330
view/peko/modules/payPc/js/index.js
Normal file
@@ -0,0 +1,330 @@
|
||||
var browser = checkVersion();
|
||||
const urlPrefix = getUrlPrefix();
|
||||
const urlTest = "https://api.pekolive.com";
|
||||
const urlProduct = "https://beta.api.pekolive.com";
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
let countryCode = "";//选择区号
|
||||
var channelType;//参数值4：鉆石充值 || 参数值5：贵族vip充值 || 6：首充充值
|
||||
let erbanNo;//账号
|
||||
let chargeProdId;//金额:tw_payermax_1003_1000
|
||||
let openId;
|
||||
let payChannel;//付款方式
|
||||
let paymentType;//付款码
|
||||
var host = window.location.host;
|
||||
// let successUrl = `${window.location.protocol}//${host}/peko/modules/pay/index.html`;//支付成功回调路径
|
||||
let successUrl = window.location.href;//支付成功回调路径
|
||||
let uid;
|
||||
let modeOfPayment = false;//判断是否有选择支付方式
|
||||
let paymentAmount = false;//判断是否有选择付款金额
|
||||
var deviceId;//型号ID
|
||||
|
||||
|
||||
$(function () {
|
||||
|
||||
if (EnvCheck() == 'test') {//degBug
|
||||
new VConsole();
|
||||
}
|
||||
getInfoFromClient();//请求依赖
|
||||
setTimeout(function () {
|
||||
listChargeAreaInfo();
|
||||
if (browser.app) {
|
||||
erbanNo == null;
|
||||
$('body .pay_method, html .pay_method').css('margin','-4.5rem auto 0');
|
||||
$('body .header .user, html .header .user').hide();
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
}
|
||||
}, 100)
|
||||
function get_param (param) {
|
||||
var query = location.search.substring(1).split('&');
|
||||
for (var i = 0; i < query.length; i++) {
|
||||
var kv = query[i].split('=');
|
||||
if (kv[0] == param) {
|
||||
return kv[1];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// if (get_param('countryCodeURL') == "TW") {
|
||||
// countryCode = "TW";
|
||||
// $('.area b').text(langReplace(localLang.demoModule.pop_up_in_p1));//'臺灣'
|
||||
// } else if (get_param('countryCodeURL') == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// countryCode = "CN";
|
||||
// $('.area b').text(langReplace(localLang.demoModule.pop_up_in_p2));//'大陸'
|
||||
// }
|
||||
$('.logingActive').hide();
|
||||
if (browser.weixin) {
|
||||
$('.wx_skip').show();
|
||||
} else {
|
||||
$('.wx_skip').hide();
|
||||
}
|
||||
function getChargePageInfoForH5 (countryCode) {
|
||||
deviceId = get_param('deviceId')
|
||||
channelType = get_param('channelType');
|
||||
let is_CN = countryCode == "CN" ? true : false;
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/getChargePageInfoForH5',
|
||||
data: { countryCode, channelType, },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
$('.methods').remove();
|
||||
$('.methods span').remove();
|
||||
console.log(res)
|
||||
let strT = '';
|
||||
let strB = '';
|
||||
// $('.methods0 p').text(res.data.chargeGroups[0].groupName ? res.data.chargeGroups[0].groupName : '');
|
||||
// $('.methods1 p').text(res.data.chargeGroups[1] ? res.data.chargeGroups[1].groupName : '');
|
||||
res.data.chargeGroups.forEach((res1, index1) => {
|
||||
arr = res.data.chargeGroups;
|
||||
// strB +=
|
||||
$('.pay_method .methodBox').append(`
|
||||
<div class="methods methods${index1}">
|
||||
<p style="width: 100%;color: #000;height: 0.8rem;display: none;">${res1.groupName}</p>
|
||||
</div>
|
||||
`);
|
||||
res.data.chargeGroups[index1].chargeWays.forEach((res, index) => {
|
||||
// arr[index] = res.chargeProds;
|
||||
// strT +=
|
||||
$(`.methods${index1}`).append(`
|
||||
<span index=${index} type='${index1}' desc="${res.desc}" paymentType="${res.paymentType}" payChannel="${res.payChannel}">
|
||||
<img src="${res.logo}" alt="">
|
||||
<p>${res.desc}</p>
|
||||
</span>
|
||||
`);
|
||||
});
|
||||
|
||||
});
|
||||
coloursFun(0, 0);
|
||||
// 选择支付方式按钮
|
||||
$('.methods span').click(function () {
|
||||
modeOfPayment = true;
|
||||
console.log($(this))
|
||||
paymentType = $(this).attr('paymentType');
|
||||
payChannel = $(this).attr('payChannel');
|
||||
// $(this).parent().addClass('active').siblings().removeClass('active');
|
||||
$('.methods span').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
coloursFun($(this).attr('index'), $(this).attr('type'));
|
||||
})
|
||||
console.log(countryCode)
|
||||
$('.but2').off();
|
||||
$('.but2').on('click', function () {
|
||||
console.log(countryCode)
|
||||
if (modeOfPayment == false) {
|
||||
logingFun("請選擇儲值方式")//''
|
||||
} else if (paymentAmount == false) {
|
||||
logingFun("請選擇您的儲值金額")//''
|
||||
} else {
|
||||
console.log(countryCode)
|
||||
networkRequest({
|
||||
type: 'POST',
|
||||
url: urlPrefix + '/charge/apply2New',
|
||||
data: { erbanNo, chargeProdId, countryCode, openId, payChannel, paymentType, successUrl, uid, deviceId: deviceId },
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
console.log(res)
|
||||
$('.logingActive').text("請稍等");//""
|
||||
$('.logingActive').show();
|
||||
window.location.replace(res.data.payInfo.mweb_url);
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
} else if (res.code == 1900) {
|
||||
countryCode = "TW";
|
||||
getChargePageInfoForH5(countryCode);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function listChargeAreaInfo () {
|
||||
networkRequest({
|
||||
type: 'GET',
|
||||
url: urlPrefix + '/charge/listChargeAreaInfo',
|
||||
success: function (res) {
|
||||
if (res.code == 200) {
|
||||
var str = ``;
|
||||
res.data.forEach(res => {
|
||||
str += `
|
||||
<p countryCode="${res.areaCode}" id="pop_up_in_p2">${res.areaName}</p>
|
||||
`
|
||||
})
|
||||
$('.area b').text(res.data[0].areaName);
|
||||
$('.pop_up_in').append(str)
|
||||
getChargePageInfoForH5(res.data[0].areaCode);
|
||||
$('.pop_up_in p').click(function () {
|
||||
$('.area b').text($(this).text());
|
||||
countryCode = $(this).attr("countryCode");
|
||||
$('.pop_up').hide();
|
||||
// if (countryCode == "CN") {
|
||||
// if (EnvCheck() == 'test') {
|
||||
// if (host != "anan.uat.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// } else {
|
||||
// if (host != "anan.lecheng163.com") {
|
||||
// window.location.href = ifCNFun() + '/peko/modules/pay/index.html?countryCodeURL=CN'
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// window.location.href = urlPrefix + '/peko/modules/pay/index.html?countryCodeURL=' + countryCode;
|
||||
// }
|
||||
getChargePageInfoForH5(countryCode);
|
||||
})
|
||||
} else {
|
||||
logingFun(res.message)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.area').click(function () {
|
||||
$('.pop_up').show();
|
||||
});
|
||||
|
||||
function coloursFun (index, type) {
|
||||
$('.pay_number .number span').remove();
|
||||
var str = '';
|
||||
console.log(arr[type]);
|
||||
arr[type].chargeWays[index].chargeProds.forEach(res => {//金幣
|
||||
// <b>${res.chargeGoldNum.toLocaleString()} ${"金幣"}</b>
|
||||
str += `
|
||||
<span channel="${res.channel}" chargeProdId="${res.chargeProdId}" seqNo="${res.seqNo}">
|
||||
<b>${res.prodName}</b>
|
||||
<i>${res.currencySign} ${res.money.toLocaleString()}</i>
|
||||
</span>
|
||||
`
|
||||
})
|
||||
$('.pay_number .number').append(str);
|
||||
// 选择支付金额按钮
|
||||
$('.pay_number .number span').click(function () {
|
||||
paymentAmount = true;
|
||||
console.log($(this));
|
||||
chargeProdId = $(this).attr('chargeProdId');
|
||||
$(this).addClass('active').siblings().removeClass('active');
|
||||
})
|
||||
}
|
||||
$('.user').on('input', function () {
|
||||
var val = $(this).val();
|
||||
// console.log(val)
|
||||
if (isNumber(val)) {
|
||||
console.log('不是数字')
|
||||
$(this).val("");
|
||||
al = $(this).val();
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
} else {
|
||||
if (val != '') {
|
||||
$('.but1').hide();
|
||||
$('.but2').show();
|
||||
erbanNo = val;
|
||||
} else {
|
||||
$('.but1').show();
|
||||
$('.but2').hide();
|
||||
}
|
||||
}
|
||||
})
|
||||
function isNumber (string) {
|
||||
var r = string.match(/^[0-9]*$/);
|
||||
if (r == null) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
function logingFun (res) {
|
||||
$('.logingActive').text(res.message == undefined ? res : res.message);
|
||||
$('.logingActive').show();
|
||||
setTimeout(function () {
|
||||
$('.logingActive').hide();
|
||||
}, 1500)
|
||||
}
|
||||
function ifCNFun () {
|
||||
var envChecks;
|
||||
const url = window.location.href;
|
||||
console.log(url)
|
||||
if (!url) return undefined;
|
||||
if (url.match(/uat/) || url.match(/127.0.0.1:/) || (url.match(/beta.api/))) { envChecks = "test" } else { envChecks = "live" };
|
||||
if (!envChecks) return undefined;
|
||||
return envChecks === 'live' ? urlProduct : urlTest;
|
||||
}
|
||||
})
|
||||
|
||||
$(function(){
|
||||
$(document).ready(function () {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
});
|
||||
window.onresize = function() {
|
||||
var deviceWidth = document.documentElement.clientWidth;
|
||||
// var deviceWidth = document.body.clientWidth;
|
||||
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
|
||||
// alert(document.documentElement.style.fontSize)
|
||||
}
|
||||
dragMoveX('.methodBox');
|
||||
dragMoveX('.number');
|
||||
})
|
||||
|
||||
/**
|
||||
* 拖动内容横向滚动
|
||||
* @param {string} container 需要拖动的面板
|
||||
*/
|
||||
function dragMoveX(container) {
|
||||
var flag;
|
||||
var downX;
|
||||
var scrollLeft;
|
||||
//鼠标按下
|
||||
$(document.body).on("mousedown", container, function (event) {
|
||||
// console.log('mousedown')
|
||||
flag = true;
|
||||
downX = event.clientX;
|
||||
scrollLeft = $(this).scrollLeft();
|
||||
});
|
||||
//鼠标移动
|
||||
$(container).on("mousemove", function (event) {
|
||||
// console.log('mousemove',flag)
|
||||
if (flag) {
|
||||
var moveX = event.clientX;
|
||||
var scrollX = moveX - downX;
|
||||
// console.log("moveX" + moveX);
|
||||
// console.log("scrollX" + scrollX);
|
||||
if (scrollX < 0 && scrollLeft > 0) {
|
||||
$(this).scrollLeft(scrollLeft - scrollX)
|
||||
}
|
||||
else {
|
||||
$(this).scrollLeft(scrollLeft - scrollX)
|
||||
}
|
||||
}
|
||||
});
|
||||
//鼠标释放
|
||||
$(container).on("mouseup", function () {
|
||||
// console.log('mouseup')
|
||||
flag = false;
|
||||
});
|
||||
/**
|
||||
* 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
|
||||
* 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
|
||||
* */
|
||||
//鼠标移出元素
|
||||
$(container).on("mouseleave", function (event) {
|
||||
// console.log('mouseleave',event.pageX,document.body.offsetWidth)
|
||||
flag = false;
|
||||
if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
|
||||
console.log('在元素上移出')
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
21
view/peko/modules/payPc/local/ar.js
Normal file
21
view/peko/modules/payPc/local/ar.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 阿拉伯
|
||||
langAr = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/payPc/local/en.js
Normal file
21
view/peko/modules/payPc/local/en.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 英文
|
||||
langEn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/payPc/local/in.js
Normal file
21
view/peko/modules/payPc/local/in.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 印尼语
|
||||
langIn = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/payPc/local/zh-CN.js
Normal file
21
view/peko/modules/payPc/local/zh-CN.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 简体中文
|
||||
langZhCN = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
21
view/peko/modules/payPc/local/zh-TW.js
Normal file
21
view/peko/modules/payPc/local/zh-TW.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// 繁体中文
|
||||
langZhTW = {
|
||||
// 模块
|
||||
demoModule: {
|
||||
wx_skip_img: './images/wx_skip_en.png',
|
||||
// 国际化内容对应的数据项：
|
||||
pay_title: `recharge`,
|
||||
pay_header_t_l: `HABU Recharge Center`,
|
||||
pay_header_t_r: `Taiwan`,
|
||||
pay_method_p: `Please select a recharge method:`,
|
||||
pay_number_sd: `Please select your recharge amount:`,
|
||||
pay_but: `Pay now`,
|
||||
pop_up_in_b: `Please select a recharge area`,
|
||||
pop_up_in_p1: `Taiwan`,
|
||||
pop_up_in_p2: `China`,
|
||||
pay_stance_picture: `The recharge service is about to open, please be patient`,
|
||||
wait_a_minute: 'Please wait',
|
||||
gold_id: 'gold coins',
|
||||
pay_user_id: 'Please enter your HABU account ID',
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user