ft活动上线

388db46c · libai · 82a3b8d4 · 388db46c · 388db46c · 388db46c
Commit 388db46c authored Aug 29, 2024 by libai
Showing with 343 additions and 338 deletions
footseen/phonepay/applepay.html
footseen/phonepay/css/index.css
footseen/phonepay/css/index.less
footseen/phonepay/images/pay/ONLYPAY.png
--- a/footseen/phonepay/applepay.html
+++ b/footseen/phonepay/applepay.html
@@ -13,7 +13,7 @@
 	<link rel="stylesheet" href="css/base.css">
 	<link rel="stylesheet" href="css/layer.css">
 	<link rel="stylesheet" href="css/daily.css">
-	<link rel="stylesheet" href="css/index.css?v=202408051210">
+	<link rel="stylesheet" href="css/index.css?v=2024082901">
 	<style>
 		.layui-layer-shade {
 			opacity: 0.7 !important;

--- a/footseen/phonepay/css/index.css
+++ b/footseen/phonepay/css/index.css
@@ -2,7 +2,6 @@
  width: 10rem;
  margin: 0 auto;
 }
 .login-id-p1 {
  color: #22222B;
  font-size: 0.37rem;
@@ -10,7 +9,6 @@
  margin: 0 auto;
  padding-top: 0.45rem;
 }
 .login-id-p2 {
  width: 8.9rem;
  font-size: 0.3rem;
@@ -18,7 +16,6 @@
  margin: 0 auto;
  padding-top: 0.15rem;
 }
 .login-id-p3 {
  color: #22222B;
  font-size: 0.37rem;
@@ -26,7 +23,6 @@
  margin: 0 auto;
  padding-top: 0.75rem;
 }
 .login-id-p4 {
  font-size: 0.3rem;
  color: #666;
@@ -34,19 +30,16 @@
  margin: 0 auto;
  padding-top: 0.15rem;
 }
 .login-id-p5 {
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.35rem;
  font-size: 0;
 }
 .login-id-p5 img {
  width: 5.16rem;
  margin-left: 0.1rem;
 }
 .login-id-p6 {
  color: #22222B;
  font-size: 0.35rem;
@@ -54,13 +47,11 @@
  margin: 0 auto;
  padding-top: 0.35rem;
 }
 .id-login-input {
  text-align: center;
  font-size: 0;
  padding-top: 0.35rem;
 }
 .id-login-input input {
  width: 8.7rem;
  height: 1rem;
@@ -71,11 +62,9 @@
  font-size: 0.35rem;
  color: #fff;
 }
 .id-login-input ::placeholder {
  color: #B0B0B1;
 }
 .firefly-id-btn {
  width: 8.45rem;
  margin: 0 auto;
@@ -88,7 +77,6 @@
  border-radius: 1rem;
  margin-top: 0.55rem;
 }
 .firefly-login-layer {
  width: 7.04rem;
  height: 7.23rem;
@@ -99,27 +87,23 @@
  position: relative;
  display: none;
 }
 .layer-login-p1 {
  color: #22222B;
  font-size: 0.4rem;
  text-align: center;
  padding-top: 0.7rem;
 }
 .layer-face-box {
  text-align: center;
  font-size: 0;
  padding-top: 0.4rem;
 }
 .layer-face-box img {
  width: 1.44rem;
  height: 1.44rem;
  border-radius: 50%;
  border: 2px solid #fff;
 }
 .layer-login-p2 {
  font-size: 0.3rem;
  width: 6rem;
@@ -127,7 +111,6 @@
  color: #FFFFFF;
  padding-top: 0.3rem;
 }
 .layer-login-p3 {
  color: #FFFFFF;
  font-size: 0.3rem;
@@ -135,7 +118,6 @@
  margin: 0 auto;
  padding-top: 0.1rem;
 }
 .layer-login-p4 {
  color: #F54344;
  font-size: 0.3rem;
@@ -144,7 +126,6 @@
  padding-top: 0.1rem;
  line-height: 0.5rem;
 }
 .layer-login-btn1 {
  width: 2.57rem;
  height: 0.99rem;
@@ -158,7 +139,6 @@
  bottom: 0.65rem;
  left: 0.8rem;
 }
 .layer-login-btn2 {
  width: 2.57rem;
  height: 0.99rem;
@@ -172,34 +152,29 @@
  bottom: 0.65rem;
  right: 0.8rem;
 }
 .my-face-box {
  position: relative;
  height: 1.4rem;
  margin-top: 0.1rem;
 }
 .my-face-box1 {
  width: 50%;
  height: 1.4rem;
  float: left;
  position: relative;
 }
 .my-face-box2 {
  width: 50%;
  float: right;
  height: 1.4rem;
  position: relative;
 }
+.my-face-box2 > img {
-.my-face-box2>img {
  top: 0.5rem;
  right: 0.75rem;
  position: absolute;
  width: 0.4rem;
 }
 .mey-face-p1 {
  color: #282828;
  font-size: 0.35rem;
@@ -207,13 +182,11 @@
  text-indent: 1.8rem;
  padding-top: 0.2rem;
 }
 .mey-face-p2 {
  font-size: 0.3rem;
  color: #282828;
  text-indent: 1.8rem;
 }
 .my-face {
  width: 0.75rem;
  height: 0.75rem;
@@ -222,12 +195,10 @@
  top: 0.325rem;
  left: 0.8rem;
 }
 .area-content-box {
  height: 1rem;
  position: relative;
 }
 .area-box {
  color: #ADADAD;
  font-size: 0.3rem;
@@ -237,7 +208,6 @@
  right: 0.7rem;
  top: 0.25rem;
 }
 .area-box .area-content {
  display: inline-block;
  margin-left: 0.1rem;
@@ -252,14 +222,12 @@
  background: #EAEAEB;
  border-radius: 1rem;
 }
 .area-box .area-content img {
  vertical-align: middle;
  width: 0.3rem;
  margin-top: -0.01rem;
  margin-right: 0.1rem;
 }
 .box2-content {
  width: 8.6rem;
  margin: 0 auto;
@@ -267,7 +235,6 @@
  position: relative;
  margin-top: 0rem;
 }
 .box2-pay-box {
  position: relative;
  height: 2rem;
@@ -281,60 +248,48 @@
  transition: 0.35s all;
  overflow: hidden;
 }
+.box2-pay-box > div {
-.box2-pay-box>div {
  height: 2rem;
 }
 .pay-img {
  height: 0.8rem;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-top: 0.1rem;
 }
 .icon-CODAPAY_PAYWALLET {
  height: 0.45rem;
 }
 .icon-TAOBAO_PAY {
  height: 0.9rem;
  margin-top: 0.15rem;
  margin-left: 0.4rem;
 }
 .icon-PAYMENTWALL {
  height: 0.5rem;
  margin-top: 0.2rem;
 }
 .icon-PAYERMAX_PAY {
  height: 0.5rem;
  margin-top: 0.2rem;
 }
 .icon-GASHP99PAY {
  height: 0.4rem;
 }
 .icon-WECHATPAY {
  height: 0.65rem;
 }
 .icon-ALIPAY {
  height: 0.75rem;
  margin-top: 0.2rem;
 }
 .icon-LINE_PAY {
  height: 0.65rem;
  margin-top: 0.15rem;
 }
 .icon-TW_PAY {
  height: 0.65rem;
 }
 .pay-tips-box {
  width: 3.86rem;
  height: 0.8rem;
@@ -349,13 +304,11 @@
  top: -0.15rem;
  left: -0.77rem;
 }
 .pay-tips-box img {
  vertical-align: middle;
  width: 0.6rem;
  margin-top: -0.08rem;
 }
 .pay-span {
  /* color: #666666; */
  /* font-size: 0.5rem; 
@@ -371,7 +324,6 @@
  width: 0.16rem;
  height: 0.28rem;
 }
 .box2-pay-ul-box {
  width: 7.8rem;
  margin: 0 auto;
@@ -379,7 +331,6 @@
  border-top: 1px solid #ddd;
  padding-bottom: 0.5rem;
 }
 .box2-pay-ul-box li {
  width: 2.4rem;
  height: 1.4rem;
@@ -389,7 +340,6 @@
  margin-top: 0.2rem;
  margin-right: 0.2rem;
 }
 .box2-pay-ul-box .box2-pay-p1 {
  font-size: 0.38rem;
  color: #01d9e0;
@@ -397,24 +347,20 @@
  line-height: 0.5rem;
  padding-top: 0.23rem;
 }
 .box2-pay-ul-box .box2-pay-p1 img {
  width: 0.5rem;
  vertical-align: middle;
  margin-top: -0.1rem;
 }
 .box2-pay-ul-box .box2-pay-p2 {
  text-align: center;
  font-size: 0.3rem;
  color: #282828;
  line-height: 0.5rem;
 }
 .box2-pay-ul-box li:nth-child(3n) {
  margin-right: 0;
 }
 .layer-shadow {
  width: 100vw;
  height: 100vh;
@@ -424,7 +370,6 @@
  left: 0;
  display: none;
 }
 .layer-area-box {
  width: 10rem;
  height: 12.4rem;
@@ -436,14 +381,12 @@
  border-radius: 0.5rem 0.5rem 0 0;
  z-index: 800;
 }
 .layer-area-title {
  text-align: center;
  font-size: 0.37rem;
  color: #22222B;
  padding-top: 0.6rem;
 }
 .area-search-box {
  width: 10rem;
  text-align: center;
@@ -453,7 +396,6 @@
  padding-top: 0.3rem;
  position: relative;
 }
 .area-search-box input {
  width: 9rem;
  height: 0.76rem;
@@ -464,14 +406,12 @@
  font-size: 0.3rem;
  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.33);
 }
 .area-search-box .more-icon {
  width: 0.4rem;
  position: absolute;
  top: 0.5rem;
  left: 0.65rem;
 }
 .search-no-li {
  color: #22222B;
  font-size: 0.35rem;
@@ -481,7 +421,6 @@
  top: 3rem;
  display: none;
 }
 .area-ul {
  width: 10rem;
  height: 9.7rem;
@@ -489,7 +428,6 @@
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
 }
 .area-ul li {
  height: 1rem;
  width: 10rem;
@@ -499,31 +437,26 @@
  text-indent: 0.8rem;
  font-size: 0.35rem;
 }
+.area-ul li > img {
-.area-ul li>img {
  width: 0.37rem;
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  display: none;
 }
 .area-ul .area-li-click {
  background: #f6f6f6;
 }
+.area-ul .area-li-click > img {
-.area-ul .area-li-click>img {
  display: block;
 }
 .gash-pay-ul-box {
  width: 7.8rem;
  margin: 0 auto;
  position: relative;
  height: 9rem;
 }
+.gash-pay-ul-box > div {
-.gash-pay-ul-box>div {
  border-top: 1px solid #303840;
  min-height: 1rem;
  color: #22222B;
@@ -532,8 +465,7 @@
  position: relative;
  text-indent: 0.2rem;
 }
+.gash-pay-ul-box > div > span {
-.gash-pay-ul-box>div>span {
  color: #E5E6E7;
  font-size: 0.4rem;
  position: absolute;
@@ -543,7 +475,6 @@
  left: 7.1rem;
  transition: 0.2s all;
 }
 .login-in-box {
  width: 8.54rem;
  height: 3.3rem;
@@ -553,37 +484,34 @@
  margin: 0 auto;
  position: relative;
 }
 .login-in-box .record-icon {
  width: 0.36rem;
  position: absolute;
  right: 0.2rem;
  top: 0.3rem;
 }
 .login-in-diamond {
  text-align: center;
  padding-top: 0.7rem;
 }
 .login-in-diamond img {
  width: 1rem;
 }
 .login-in-num {
  font-size: 0.5rem;
  color: #01d9e0;
  text-align: center;
  font-weight: 700;
 }
 .countryCode {
  font-style: normal;
  position: absolute;
  right: 1rem;
  color: #666;
 }
 .layui-layer {
  background: transparent !important;
 }
\ No newline at end of file
+.icon-ONLYPAY {
+  height: 0.65rem;
+}
--- a/footseen/phonepay/css/index.less
+++ b/footseen/phonepay/css/index.less
-.bg{
+.bg {
-  // background: #11121A;
  width: 10rem;
  margin: 0 auto;
 }
-.login-id-p1{
-  color: #fff;
+.login-id-p1 {
+  color: #22222B;
  font-size: 0.37rem;
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.45rem;
 }
-.login-id-p2{
+.login-id-p2 {
  width: 8.9rem;
  font-size: 0.3rem;
-  color: #AAAAAC;
+  color: #666;
  margin: 0 auto;
  padding-top: 0.15rem;
 }
-.login-id-p3{
-  color: #fff;
+.login-id-p3 {
+  color: #22222B;
  font-size: 0.37rem;
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.75rem;
 }
-.login-id-p4{
+.login-id-p4 {
  font-size: 0.3rem;
-  color: #AAAAAC;
+  color: #666;
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.15rem;
 }
-.login-id-p5{
+.login-id-p5 {
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.35rem;
  font-size: 0;
-  img{
-    width: 5.16rem;
-    margin-left: 0.1rem;
-  }
 }
-.login-id-p6{
-  color: #fff;
+.login-id-p5 img {
+  width: 5.16rem;
+  margin-left: 0.1rem;
+}
+.login-id-p6 {
+  color: #22222B;
  font-size: 0.35rem;
  width: 8.9rem;
  margin: 0 auto;
  padding-top: 0.35rem;
 }
-.id-login-input{
+.id-login-input {
  text-align: center;
  font-size: 0;
  padding-top: 0.35rem;
-  input{
+}
-    width: 8.7rem;
-    height: 1rem;
+.id-login-input input {
-    background: #292A31;
+  width: 8.7rem;
-    border-radius: 0.15rem;
+  height: 1rem;
-    border: 1px solid #5B5C61;
+  background: #292A31;
-    text-indent: 0.3rem;
+  border-radius: 0.15rem;
-    font-size: 0.35rem;
+  border: 1px solid #5B5C61;
-    color: #fff;
+  text-indent: 0.3rem;
-  }
+  font-size: 0.35rem;
-  ::placeholder{
+  color: #fff;
-    color: #B0B0B1;
+}
-  }
-}
+.id-login-input ::placeholder {
-.firefly-id-btn{
+  color: #B0B0B1;
+}
+.firefly-id-btn {
  width: 8.45rem;
  margin: 0 auto;
  height: 1.05rem;
-  line-height: 1.05rem;
  background: #00F7FF;
-  text-align: center;
  line-height: 1.05rem;
  color: #251019;
  font-size: 0.35rem;
@@ -80,49 +88,55 @@
  border-radius: 1rem;
  margin-top: 0.55rem;
 }
-.firefly-login-layer{
+.firefly-login-layer {
  width: 7.04rem;
  height: 7.23rem;
-  background: rgba(26,26,36,0.9);
+  background: rgba(26, 26, 36, 0.9);
  border-radius: 0.53rem;
  box-shadow: inset 0 0 0.7rem rgba(0, 247, 255, 0.8);
  overflow: hidden;
  position: relative;
  display: none;
 }
-.layer-login-p1{
-  color: #fff;
+.layer-login-p1 {
+  color: #22222B;
  font-size: 0.4rem;
  text-align: center;
  padding-top: 0.7rem;
 }
-.layer-face-box{
+.layer-face-box {
  text-align: center;
  font-size: 0;
  padding-top: 0.4rem;
-  img{
+}
-    width: 1.44rem;
-    height: 1.44rem;
+.layer-face-box img {
-    border-radius: 50%;
+  width: 1.44rem;
-    border: 2px solid #fff;
+  height: 1.44rem;
-  }
+  border-radius: 50%;
-}
+  border: 2px solid #fff;
-.layer-login-p2{
+}
+.layer-login-p2 {
  font-size: 0.3rem;
  width: 6rem;
  margin: 0 auto;
  color: #FFFFFF;
  padding-top: 0.3rem;
 }
-.layer-login-p3{
+.layer-login-p3 {
  color: #FFFFFF;
  font-size: 0.3rem;
  width: 6rem;
  margin: 0 auto;
  padding-top: 0.1rem;
 }
-.layer-login-p4{
+.layer-login-p4 {
  color: #F54344;
  font-size: 0.3rem;
  width: 6rem;
@@ -130,7 +144,8 @@
  padding-top: 0.1rem;
  line-height: 0.5rem;
 }
-.layer-login-btn1{
+.layer-login-btn1 {
  width: 2.57rem;
  height: 0.99rem;
  background: #46464D;
@@ -138,12 +153,13 @@
  text-align: center;
  line-height: 0.99rem;
  font-size: 0.35rem;
-  color: #fff;
+  color: #22222B;
  position: absolute;
  bottom: 0.65rem;
  left: 0.8rem;
 }
-.layer-login-btn2{
+.layer-login-btn2 {
  width: 2.57rem;
  height: 0.99rem;
  background: #00F7FF;
@@ -156,43 +172,49 @@
  bottom: 0.65rem;
  right: 0.8rem;
 }
-.my-face-box{
+.my-face-box {
  position: relative;
  height: 1.4rem;
-  background: #11121A;
  margin-top: 0.1rem;
 }
-.my-face-box1{
+.my-face-box1 {
  width: 50%;
  height: 1.4rem;
  float: left;
  position: relative;
 }
-.my-face-box2{
+.my-face-box2 {
  width: 50%;
  float: right;
  height: 1.4rem;
  position: relative;
-  >img{
+}
-    top: 0.5rem;
-    right: 0.75rem;
+.my-face-box2>img {
-    position: absolute;
+  top: 0.5rem;
-    width: 0.4rem;
+  right: 0.75rem;
-  }
+  position: absolute;
-}
+  width: 0.4rem;
-.mey-face-p1{
+}
-  color: #FFFFFF;
+.mey-face-p1 {
+  color: #282828;
  font-size: 0.35rem;
  font-weight: 700;
  text-indent: 1.8rem;
  padding-top: 0.2rem;
 }
-.mey-face-p2{
+.mey-face-p2 {
  font-size: 0.3rem;
-  color: #fff;
+  color: #282828;
  text-indent: 1.8rem;
 }
-.my-face{
+.my-face {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
@@ -200,11 +222,13 @@
  top: 0.325rem;
  left: 0.8rem;
 }
-.area-content-box{
+.area-content-box {
  height: 1rem;
  position: relative;
 }
-.area-box{
+.area-box {
  color: #ADADAD;
  font-size: 0.3rem;
  height: 0.5rem;
@@ -212,174 +236,199 @@
  position: absolute;
  right: 0.7rem;
  top: 0.25rem;
-  .area-content{
+}
-    display: inline-block;
-    margin-left: 0.1rem;
+.area-box .area-content {
-    min-width: 1.2rem;
+  display: inline-block;
-    text-align: center;
+  margin-left: 0.1rem;
-    height: 0.5rem;
+  min-width: 1.2rem;
-    line-height: 0.5rem;
+  text-align: center;
-    color: #fff;
+  height: 0.5rem;
-    font-size: 0.3rem;
+  line-height: 0.5rem;
-    padding-left: 0.15rem;
+  color: #22222b;
-    padding-right: 0.15rem;
+  font-size: 0.3rem;
-    background: #303037;
+  padding-left: 0.15rem;
-    border-radius: 1rem;
+  padding-right: 0.15rem;
-    img{
+  background: #EAEAEB;
-      vertical-align: middle;
+  border-radius: 1rem;
-      width: 0.3rem;
+}
-      margin-top: -0.01rem;
-      margin-right: 0.1rem;
+.area-box .area-content img {
+  vertical-align: middle;
-    }
+  width: 0.3rem;
-  }
+  margin-top: -0.01rem;
-}
+  margin-right: 0.1rem;
-.box2-content{
+}
+.box2-content {
  width: 8.6rem;
  margin: 0 auto;
  min-height: 5rem;
-  // background: pink;
  position: relative;
  margin-top: 0rem;
 }
-.box2-pay-box{
+.box2-pay-box {
  position: relative;
  height: 2rem;
  width: 8.6rem;
-  background: #171F28;
+  background: #fff;
  border-radius: 0.27rem;
  margin-bottom: 0.25rem;
-  box-shadow: inset 0 0 0.4rem rgba(0, 247, 255, 0.2);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
  font-size: 0;
  line-height: 2rem;
  transition: 0.35s all;
  overflow: hidden;
-  >div{
-    height: 2rem;
-  }
 }
-.pay-img{
-  // width: 2.5rem;
+.box2-pay-box>div {
+  height: 2rem;
+}
+.pay-img {
  height: 0.8rem;
  vertical-align: middle;
  margin-left: 0.5rem;
  margin-top: 0.1rem;
 }
-.icon-CODAPAY_PAYWALLET{
-  height: 0.45rem;  
+.icon-CODAPAY_PAYWALLET {
+  height: 0.45rem;
 }
-.icon-TAOBAO_PAY{
+.icon-TAOBAO_PAY {
  height: 0.9rem;
  margin-top: 0.15rem;
-  margin-left: 0.4rem;  
+  margin-left: 0.4rem;
 }
-.icon-PAYMENTWALL{
+.icon-PAYMENTWALL {
  height: 0.5rem;
  margin-top: 0.2rem;
 }
-.icon-PAYERMAX_PAY{
+.icon-PAYERMAX_PAY {
  height: 0.5rem;
  margin-top: 0.2rem;
 }
-.icon-GASHP99PAY{
+.icon-GASHP99PAY {
  height: 0.4rem;
 }
-.icon-WECHATPAY{
+.icon-WECHATPAY {
  height: 0.65rem;
 }
-.icon-ALIPAY{
+.icon-ALIPAY {
  height: 0.75rem;
  margin-top: 0.2rem;
 }
-.icon-LINE_PAY{
+.icon-LINE_PAY {
  height: 0.65rem;
  margin-top: 0.15rem;
 }
-.icon-TW_PAY{
+.icon-TW_PAY {
  height: 0.65rem;
 }
-.pay-tips-box{
+.pay-tips-box {
  width: 3.86rem;
  height: 0.8rem;
-  background: #17515A;
+  background: #00F7FF;
  line-height: 0.82rem;
  text-align: center;
  border-radius: 0.27rem 0 0.27rem 0;
-  color: #fff;
+  color: #22222B;
  font-size: 0.4rem;
  transform: scale(0.6);
  position: absolute;
  top: -0.15rem;
  left: -0.77rem;
-  img{
-    vertical-align: middle;
-    width: 0.6rem;
-    margin-top: -0.08rem;
-  }
 }
-.pay-span{
-  color: #E5E6E7;
+.pay-tips-box img {
-  font-size: 0.5rem;
+  vertical-align: middle;
+  width: 0.6rem;
+  margin-top: -0.08rem;
+}
+.pay-span {
+  /* color: #666666; */
+  /* font-size: 0.5rem; 
+  line-height: 0.5rem;*/
+  font-size: 0;
  position: absolute;
-  transform: scaleY(1.5) rotate(0deg);
+  transform: rotate(0deg);
-  line-height: 0.5rem;
  top: 0.68rem;
  left: 7.8rem;
  transition: 0.2s all;
+  background: url(../images/go_l.png) no-repeat;
+  background-size: contain;
+  width: 0.16rem;
+  height: 0.28rem;
 }
-.box2-pay-ul-box{
-  // height: 5.5rem;
+.box2-pay-ul-box {
  width: 7.8rem;
  margin: 0 auto;
-  margin-top: -0.3rem;  
+  margin-top: -0.3rem;
-  border-top: 1px solid #303840;
+  border-top: 1px solid #ddd;
  padding-bottom: 0.5rem;
-  li{
+}
-    width: 2.4rem;
-    height: 1.4rem;
+.box2-pay-ul-box li {
-    background: #2F373F;
+  width: 2.4rem;
-    border: 1px solid #A9ACAF;
+  height: 1.4rem;
-    float: left;
+  background: #f6f6f6;
-    border-radius: 0.2rem;
+  float: left;
-    margin-top: 0.2rem;
+  border-radius: 0.2rem;
-    margin-right: 0.2rem;
+  margin-top: 0.2rem;
-  }
+  margin-right: 0.2rem;
-  .box2-pay-p1{
+}
-    font-size: 0.38rem ;
-    color: #00F7FF;
+.box2-pay-ul-box .box2-pay-p1 {
-    text-align: center;
+  font-size: 0.38rem;
-    line-height: 0.5rem;
+  color: #01d9e0;
-    padding-top: 0.23rem;
+  text-align: center;
+  line-height: 0.5rem;
-    img{
+  padding-top: 0.23rem;
-      width: 0.5rem;
+}
-      vertical-align: middle;
-      margin-top: -0.1rem;
+.box2-pay-ul-box .box2-pay-p1 img {
-    }
+  width: 0.5rem;
-  }
+  vertical-align: middle;
-  .box2-pay-p2{
+  margin-top: -0.1rem;
-    text-align: center;
+}
-    font-size: 0.3rem;
-    color: #fff;
+.box2-pay-ul-box .box2-pay-p2 {
-    line-height: 0.5rem;
+  text-align: center;
-  }
+  font-size: 0.3rem;
-  li:nth-child(3n){
+  color: #282828;
-    margin-right: 0;
+  line-height: 0.5rem;
-  }
+}
-}
-.layer-shadow{
+.box2-pay-ul-box li:nth-child(3n) {
+  margin-right: 0;
+}
+.layer-shadow {
  width: 100vw;
  height: 100vh;
-  background: rgba(0,0,0,0.7);
+  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
 }
-.layer-area-box{
+.layer-area-box {
  width: 10rem;
  height: 12.4rem;
-  background: #181920;
+  background: #fff;
  position: fixed;
  transition: 0.2s all;
  bottom: -12.4rem;
@@ -387,13 +436,15 @@
  border-radius: 0.5rem 0.5rem 0 0;
  z-index: 800;
 }
-.layer-area-title{
+.layer-area-title {
  text-align: center;
  font-size: 0.37rem;
-  color: #fff;
+  color: #22222B;
  padding-top: 0.6rem;
 }
-.area-search-box{
+.area-search-box {
  width: 10rem;
  text-align: center;
  font-size: 0;
@@ -401,24 +452,28 @@
  line-height: 0.76rem;
  padding-top: 0.3rem;
  position: relative;
-  input{
+}
-    width: 9rem;
-    height: 0.76rem;
+.area-search-box input {
-    background:#303037;
+  width: 9rem;
-    border-radius: 0.2rem;
+  height: 0.76rem;
-    text-indent: 0.7rem;
+  background: #fff;
-    color: #fff;
+  border-radius: 0.2rem;
-    font-size: 0.3rem;
+  text-indent: 0.7rem;
-  }
+  color: #282828;
-  .more-icon{
+  font-size: 0.3rem;
-    width: 0.4rem;
+  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.33);
-    position: absolute;
+}
-    top: 0.5rem;
-    left: 0.65rem;
+.area-search-box .more-icon {
-  }
+  width: 0.4rem;
-}
+  position: absolute;
-.search-no-li{
+  top: 0.5rem;
-  color: #fff;
+  left: 0.65rem;
+}
+.search-no-li {
+  color: #22222B;
  font-size: 0.35rem;
  width: 10rem;
  text-align: center;
@@ -426,90 +481,112 @@
  top: 3rem;
  display: none;
 }
-.area-ul{
+.area-ul {
  width: 10rem;
  height: 9.7rem;
  margin-top: 0.5rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
-  li{
+}
-    height: 1rem;
-    width: 10rem;
+.area-ul li {
-    line-height: 1rem;
+  height: 1rem;
-    color: #fff;
+  width: 10rem;
-    position: relative;
+  line-height: 1rem;
-    text-indent: 0.8rem;
+  color: #282828;
-    font-size: 0.35rem;
+  position: relative;
-    >img{
+  text-indent: 0.8rem;
-      width: 0.37rem;
+  font-size: 0.35rem;
-      position: absolute;
+}
-      left: 0.3rem;
-      top: 0.3rem;
+.area-ul li>img {
-      display: none;
+  width: 0.37rem;
-    }
+  position: absolute;
-  }
+  left: 0.3rem;
-  .area-li-click{
+  top: 0.3rem;
-    background: #24252B;
+  display: none;
-    >img{
+}
-      display: block;
-    }
+.area-ul .area-li-click {
-  }
+  background: #f6f6f6;
 }
-.gash-pay-ul-box{
+.area-ul .area-li-click>img {
+  display: block;
+}
+.gash-pay-ul-box {
  width: 7.8rem;
  margin: 0 auto;
  position: relative;
  height: 9rem;
-  >div{
+}
-    border-top: 1px solid #303840;
-    min-height: 1rem;
+.gash-pay-ul-box>div {
-    color: #fff;
+  border-top: 1px solid #303840;
-    line-height: 1rem;
+  min-height: 1rem;
-    font-size: 0.3rem;
+  color: #22222B;
-    position: relative;
+  line-height: 1rem;
-    text-indent: 0.2rem;
+  font-size: 0.3rem;
-    >span{
+  position: relative;
-      color: #E5E6E7;
+  text-indent: 0.2rem;
-      font-size: 0.4rem;
+}
-      position: absolute;
-      transform: scaleY(1.5) rotate(0deg);
+.gash-pay-ul-box>div>span {
-      line-height: 0.5rem;
+  color: #E5E6E7;
-      top: 0.2rem;
+  font-size: 0.4rem;
-      left: 7.1rem;
+  position: absolute;
-      transition: 0.2s all;
+  transform: scaleY(1.5) rotate(0deg);
-    }
+  line-height: 0.5rem;
-  }
+  top: 0.2rem;
-}
+  left: 7.1rem;
-.login-in-box{
+  transition: 0.2s all;
+}
+.login-in-box {
  width: 8.54rem;
  height: 3.3rem;
-  background: url(../images/login-in-bg.png)no-repeat;
+  background: #fff;
-  background-size: 100% 100%;
+  border-radius: 0.267rem;
+  box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.33);
  margin: 0 auto;
  position: relative;
-  .record-icon{
+}
-    width: 0.36rem;
-    position: absolute;
+.login-in-box .record-icon {
-    right: 0.2rem;
+  width: 0.36rem;
-    top: 0.3rem;
+  position: absolute;
-  }
+  right: 0.2rem;
-}
+  top: 0.3rem;
-.login-in-diamond{
+}
+.login-in-diamond {
  text-align: center;
  padding-top: 0.7rem;
-  img{
-    width: 1rem;
-  }
 }
-.login-in-num{
+.login-in-diamond img {
+  width: 1rem;
+}
+.login-in-num {
  font-size: 0.5rem;
-  color: #00F7FF;
+  color: #01d9e0;
  text-align: center;
  font-weight: 700;
 }
-.countryCode{
-  font-style:normal;
+.countryCode {
+  font-style: normal;
  position: absolute;
  right: 1rem;
-  color:rgba(255,255,255,0.8);
+  color: #666;
+}
+.layui-layer {
+  background: transparent !important;
+}
+.icon-ONLYPAY{
+  height: 0.65rem;
 }
\ No newline at end of file
--- a/footseen/phonepay/images/pay/ONLYPAY.png
+++ b/footseen/phonepay/images/pay/ONLYPAY.png