修复ui问题

view/molistar/activity/rechargeNew/css/index.css

@@ -131,8 +131,8 @@ body {
 
 .myRecharge p {
   width: 100%;
-  height: 1.06667rem;
-  line-height: 1.06667rem;
+  height: 1.2rem;
+  line-height: 1.2rem;
   position: absolute;
   text-align: center;
   left: 0;
@@ -144,21 +144,19 @@ body {
   font-size: 1.14667rem;
   font-weight: 600;
   display: inline-block;
-  vertical-align: middle;
 }
 
 .myRecharge p img {
   display: inline-block;
   width: 0.66667rem;
   height: 0.66667rem;
-  vertical-align: middle;
-  margin: 0 0.13333rem;
+  margin: 0.33333rem 0.13333rem 0;
 }
 
 .myRecharge .but {
   width: 5.09333rem;
   height: 1.28rem;
-  line-height: 1.22667rem;
+  line-height: 1.30667rem;
   text-align: center;
   color: #292601;
   font-size: 0.42667rem;
@@ -486,6 +484,7 @@ body {
   line-height: 0.4rem;
   display: flex;
   justify-content: center;
+  margin-top: 0.36rem;
 }
 
 .recharge300 .content .topTitle img {
@@ -663,6 +662,7 @@ body {
   line-height: 0.4rem;
   display: flex;
   justify-content: center;
+  margin-top: 0.36rem;
 }
 
 .recharge500 .content .topTitle img {
@@ -840,6 +840,7 @@ body {
   line-height: 0.4rem;
   display: flex;
   justify-content: center;
+  margin-top: 0.36rem;
 }
 
 .recharge1000 .content .topTitle img {
@@ -1006,12 +1007,21 @@ body {
   z-index: 2;
 }
 
+.recharge3000 .content .rewardImg .why {
+  width: 0.66667rem;
+  height: 0.66667rem;
+  position: absolute;
+  right: 1.18667rem;
+  top: 14.2rem;
+}
+
 .recharge3000 .content .topTitle {
   width: 100%;
   height: 0.4rem;
   line-height: 0.4rem;
   display: flex;
   justify-content: center;
+  margin-top: 0.36rem;
 }
 
 .recharge3000 .content .topTitle img {
@@ -1160,7 +1170,19 @@ body {
 }
 
 .pub .pub_in .myRechargeText p {
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.3rem;
+}
+
+.pub .pub_in .myRechargeTextWhy {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-content: center;
+}
+
+.pub .pub_in .myRechargeTextWhy p {
+  padding-bottom: 2.3rem;
 }
 
 .disclaimer {

view/molistar/activity/rechargeNew/css/index.scss

@@ -134,8 +134,8 @@ body {
 
     p {
         width: 100%;
-        height: px2rem(80);
-        line-height: px2rem(80);
+        height: 1.2rem;
+        line-height: 1.2rem;
         position: absolute;
         text-align: center;
         left: 0;
@@ -146,22 +146,20 @@ body {
             font-size: px2rem(86);
             font-weight: 600;
             display: inline-block;
-            vertical-align: middle;
         }
 
         img {
             display: inline-block;
             width: px2rem(50);
             height: px2rem(50);
-            vertical-align: middle;
-            margin: 0 px2rem(10);
+            margin: px2rem(25) px2rem(10) 0;
         }
     }
 
     .but {
         width: px2rem(382);
         height: px2rem(96);
-        line-height: px2rem(92);
+        line-height: px2rem(98);
         text-align: center;
         color: #292601;
         font-size: px2rem(32);
@@ -488,6 +486,7 @@ body {
             line-height: px2rem(30);
             display: flex;
             justify-content: center;
+            margin-top: px2rem(27);
 
             img {
                 display: inline-block;
@@ -671,6 +670,7 @@ body {
             line-height: px2rem(30);
             display: flex;
             justify-content: center;
+            margin-top: px2rem(27);
 
             img {
                 display: inline-block;
@@ -846,6 +846,7 @@ body {
                     top: 0;
                 }
             }
+
         }
 
         .topTitle {
@@ -854,6 +855,7 @@ body {
             line-height: px2rem(30);
             display: flex;
             justify-content: center;
+            margin-top: px2rem(27);
 
             img {
                 display: inline-block;
@@ -1024,6 +1026,14 @@ body {
                 right: px2rem(150);
                 z-index: 2;
             }
+
+            .why {
+                width: px2rem(50);
+                height: px2rem(50);
+                position: absolute;
+                right: px2rem(89);
+                top: 14.2rem;
+            }
         }
 
         .topTitle {
@@ -1032,6 +1042,7 @@ body {
             line-height: px2rem(30);
             display: flex;
             justify-content: center;
+            margin-top: px2rem(27);
 
             img {
                 display: inline-block;
@@ -1185,7 +1196,19 @@ body {
             align-content: center;
 
             p {
-                padding-bottom: 0.5rem;
+                padding-bottom: 0.3rem;
+            }
+        }
+
+        .myRechargeTextWhy {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-content: center;
+
+            p {
+                padding-bottom: 2.3rem;
             }
         }
     }

view/molistar/activity/rechargeNew/index.html

@@ -196,6 +196,7 @@
             <div class="rewardImg">
                 <div class="ts" id="ts3000"></div>
                 <img src="./images/bo.png" alt="" class="bo">
+                <img src="./images/why.png" alt="" class="why">
             </div>
             <!-- 前三标题 -->
             <div class="topTitle">

view/molistar/activity/rechargeNew/js/index.js

@@ -208,8 +208,8 @@ $('.myRecharge p img').click(function () {
     bodyScroolFun(true);
 })
 // 打开定制礼物弹窗
-$('').click(function () {
-    $('.pub .pub_in .centent').addClass('myRechargeText');
+$('.recharge3000 .content .rewardImg .why').click(function () {
+    $('.pub .pub_in .centent').addClass('myRechargeTextWhy');
     $('.pub .pub_in .title').html(langReplace(localLang.demoModule.text21));
     $('.pub .pub_in .centent').html(langReplace(localLang.demoModule.text22));
     $('.pub ').show();
@@ -218,6 +218,7 @@ $('').click(function () {
 // 关闭弹窗
 $('.pub .pub_in .close').click(function () {
     $('.pub .pub_in .centent').removeClass('myRechargeText');
+    $('.pub .pub_in .centent').removeClass('myRechargeTextWhy');
     $('.pub ').hide();
     bodyScroolFun(false);
 })