新增充值pc页面， 官网

view/peko/home/css/index.css

@@ -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 {
+@media screen and (min-width: 769px) {
-  position: absolute;
+  .m-bg {
-  bottom: 2%;
+    display: none;
-  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%;
   }
-  .text-wrapper .text {
+  .m-bg img {
-    font-size: 12px;
-  }
-  .text-wrapper .text .txt1 {
-    font-size: 12px;
-  }
-}
-
-@media screen and (max-width: 375px) {
-  .text-wrapper {
-    bottom: 0px;
-  }
-  .button-wrapper, .button-wrapper {
     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: 768px) {
-@media screen and (max-width: 729px) {
   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;
+    width: 7.4666666667rem;
-    height: 1.22667rem;
+    height: 1.2266666667rem;
   }
   .button-wrapper a {
     display: inline-block;
@@ -228,8 +139,8 @@ html {
   .button2-wrapper {
     display: block;
     position: absolute;
-    left: 3.09333rem;
+    left: 3.0933333333rem;
-    bottom: 1.70667rem;
+    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;
+    color: rgb(255, 255, 255);
-    padding: 0.26667rem 0;
+    padding: 0.2rem 0;
   }
   .eori .recordfoot {
     color: #fff;
@@ -270,9 +180,9 @@ html {
   }
   .eori .recordfoot .record {
     display: inline-block;
-    padding-right: 0.05333rem;
+    padding-right: 0.0533333333rem;
-    height: 0.37333rem;
+    height: 0.3733333333rem;
-    width: 0.42667rem;
+    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;
+  right: 0.2666666667rem;
-  width: 6.13333rem;
+  width: 6.1333333333rem;
+  z-index: 9;
 }
+
+/*# sourceMappingURL=index.css.map */

view/peko/home/css/index.scss

@@ -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 {
+// .eori {
-  position: absolute;
+//   // height: 8.7%;
-  bottom: 2%;
+//   width: 100%;
-  width: 40%;
+//   background: #000;
-  left: 50%;
+//   // color: #D1D1D1;
-  margin-left: -20%;
+//   position: absolute;
-  padding-left: 140px;
+//   left: 0;
-  box-sizing: border-box;
+//   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 {
+//   //   a {
-    position: absolute;
+//   //     color: #666;
-    width: 120px;
+//   //   }
-    height: 120px;
+//   // }
-    background: #000;
-    left: 0;
-    top: 0;
-  }
 
-  .text {
+//   .weixin-name {
-    .txt1 {
+//     padding-top: px2rem(20);
-      line-height: 18px;
+//   }
-      margin-bottom: 20px;
+
-      font-size: 14px;
+//   .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;
+    height: 10rem;
-    text-align: left;
+    background: url(../images/homePC.png) no-repeat;
-    display: flex;
+    background-size: 100% 100%;
-    justify-content: center;
+    position: relative;
-    align-items: center;
+
-    font-size: 13px;
+    .charge {
-    margin-bottom: px2rem(6, );
+      width: 1.11rem;
-    .record {
+      height: 0.5rem;
-      display: inline-block;
+      background: rgb(255, 255, 255, 0.2);
-      padding-right: px2rem(4);
+      border-radius: .13rem;
-      width: px2rem(14, );
+      font-size: 0.24rem;
-      height: px2rem(16, );
-      background: url(../images/icon_police.png) no-repeat;
-      // background: #948aff;
-    }
-    a{
       color: #fff;
+      text-align: center;
+      line-height: 0.5rem;
+      position: absolute;
+      top: 1.2rem;
+      right: 2.77rem;
     }
   }
 
-  .gongsi{
+  .eori {
-    display: flex;
+    // height: 1.2rem;
-    justify-content: center;
+    width: 100%;
-    font-size: 13px;
+    background: #30312C;
-    color: #fff;
+    color: rgb(255, 255, 255);
-    p{
+    padding: 0.2rem 0;
-      &:nth-child(2){
+    vertical-align: top;
-        margin: 0 14px;
+
+    // .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;
+@media screen and (max-width:768px) {
-  text-align: center;
+  body {
-  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{
     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;
 }

view/peko/home/index.html

@@ -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="pc-bg">
-    <div class="m-bg"><img src="./images/homeM.png" alt=""></div>
+      <!-- <img src="./images/homePc.png" alt=""> -->
-    <div class="button-wrapper download">
+      <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>Hong Kong Li Zhi Technology Co., Limited</p>
-        <p>香港栗子科技有限公司</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>

view/peko/home/js/common.js

@@ -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() {
+function EnvCheck () {
-  if(window.location.href){
+  if (window.location.href) {
-    var _url = window.location.href;
+      var _url = window.location.href;
-    var res = _url.match(/beta/);
+      var res = _url.match(/uat/);
-    if(res){
+      var res1 = _url.match(/120.79.211.243/);
-      return 'test';
+      var res2 = _url.match(/192.168./)
-    }else{
+      var res3 = _url.match(/127.0/)
-      return 'live';
+      var res4 = _url.match(/beta/)
-    }
+      if (res || res1 || res2 || res3 || res4) {
+          return 'test';
+      } else {
+          return 'live';
+      }
   }
 }
 // 根据域名判断是本地打开还是服务器打开

view/peko/home/js/index.js

@@ -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';
+  })
+})

view/peko/modules/payPc/css/index.css

@@ -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 */

view/peko/modules/payPc/css/index.scss

@@ -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;
+}

view/peko/modules/payPc/index.html

@@ -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>

view/peko/modules/payPc/js/index.js

@@ -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;
+        }         
+    });
+}

view/peko/modules/payPc/local/ar.js

@@ -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',
+    }
+}

view/peko/modules/payPc/local/en.js

@@ -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',
+    }
+}

view/peko/modules/payPc/local/in.js

@@ -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',
+    }
+}

view/peko/modules/payPc/local/zh-CN.js

@@ -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',
+    }
+}

view/peko/modules/payPc/local/zh-TW.js

@@ -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',
+    }
+}