修改

src/main/resources/static/css/personal/index.css

@@ -266,7 +266,7 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
     background: rgba(0,0,0,0.1);
 }
 .phoneBox {
-    width: 100%;
+    width: 450px;
 }
 .phoneSmBox, .phoneSmBox2 {
     width: 100%;
@@ -282,7 +282,6 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
 }
 .phoneSmBox .layui-input {
     width: 75%;
-    border-radius: 4px;
 }
 .phoneSmBox2 .layui-input {
     width: 212px;
@@ -317,7 +316,6 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
 .top_up_div{
     display: none;
     width: 770px;
-    height: 700px;
     background: #FFFFFF;
     border-radius: 20px;
     padding: 30px 50px;
@@ -325,9 +323,11 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
 }
 .balance_of_show{
     height: 133px;
-    background-image: url("/images/personal/beijing.png");
+    background-image: url(/images/personal/beijing.png);
+    background-size: 100% 100%;
     padding-left: 37px;
     margin-bottom: 25px;
+    border-radius: 10px;
 }
 .custom_amount{
     float: left;
@@ -365,15 +365,14 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
 .select_amount_val{
     float: left;
     text-align: center;
-    height: 80px;
+    height: 60px;
     width: 125px;
-    line-height: 80px;
+    line-height: 60px;
     margin-right: 28px;
     margin-bottom: 25px;
-    border: 2px solid #DDDDDD;
+    border: 1px solid #DDDDDD;
     border-radius: 10px;
-    font-weight: bold;
-    font-size: 26px;
+    font-size: 24px;
     cursor: pointer;
 }
 .select_amount_val:last-child{
@@ -413,8 +412,8 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
     font-size: 20px;
 }
 .wx_pay div{
-    width: 23px;
-    height: 23px;
+    width: 20px;
+    height: 20px;
     float: left;
     margin-top: 1px;
     margin-left: 19px;
@@ -426,10 +425,13 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
     float: left;
     text-align: center;
     width: 100%;
+    margin-top: 50px;
+    margin-bottom: 50px;
 }
 .qr-code-div{
     float: left;
     text-align: center;
+    display: none;
     width: 100%;
 }
 .top-up-button{
@@ -472,7 +474,6 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
 .quotation_number{
     display: none;
     width: 770px;
-    height: 700px;
     background: #FFFFFF;
     border-radius: 20px;
     padding: 30px 50px;
@@ -557,4 +558,38 @@ body::-webkit-scrollbar-track {/*滚动条里面轨道*/
     font-size: 18px;
     font-weight: 100;
     line-height: 30px;
+}
+.qrcode_ok_div{
+    display: none;
+}
+.quotation_number .select_amount_val{
+    float: left;
+    text-align: center;
+    height: 80px;
+    margin-right: 28px;
+    margin-bottom: 25px;
+    border: 1px solid #DDDDDD;
+    border-radius: 10px;
+    font-size: 26px;
+    cursor: pointer;
+    padding: 0 12px;
+    width: calc(148px - 42px);
+    line-height: 50px;
+    box-sizing: border-box;
+}
+.layui-layer-btn0{
+    border-radius: 20px!important;
+}
+.layui-layer-btn1{
+    border-radius: 20px!important;
+}
+.layui-layer-dialog .layui-layer-content{
+    padding: 40px!important;
+}
+.layui-layer-btn{
+    padding: 0 30px 30px!important;
+}
+.layui-layer-btn a{
+    margin: 5px 14px 0!important;
+    padding: 0 24px!important;
 }

src/main/resources/static/js/personal/function.js

@@ -48,8 +48,8 @@ function topUp(){
         title: false,
         shadeClose: true,
         anim: 1,
-        closeBtn: 0,
-        area: ['auto', '700px'],
+        closeBtn: 1,
+        area: ['auto', '680px'],
         content: $(".top_up_div"),
         end: () => {
             clearInterval(runInterval);
@@ -73,8 +73,8 @@ function buyPermissions(){
         title: false,
         shadeClose: true,
         anim: 1,
-        closeBtn: 0,
-        area: ['auto', '700px'],
+        closeBtn: 1,
+        area: ['auto', '680px'],
         content: $(".quotation_number"),
         end: () => {
             clearInterval(offerNumPayRunInterval);
@@ -82,7 +82,8 @@ function buyPermissions(){
             getByNumber();
             gysTopUpNum();
         },
-        cancel: () => {
+        cancel: function() {
+            console.log($(this))
             clearInterval(offerNumPayRunInterval);
             offerNumPayRunInterval = null;
             getByNumber();
@@ -206,6 +207,8 @@ function onblurEle(){
         headers: {"token": localStorage.getItem("token")},
         dataType: "json",
         success: (data) => {
+            $(".qr-code-div").show();
+            $(".top_up_div .button_top_up").css("margin-top", "0");
             var qrcode = new QRCode(document.getElementById("qrcode"), {    // 显示二维码的元素或该元素的 ID
                 text: data.code_url,   // 内容可以是文字，链接，邮箱
                 width: 120,          //设置宽度
@@ -292,6 +295,8 @@ function payType(obj){
     }
     $(".quotation_number .pay_div_mode").removeClass("select_pay_click");
     $(".quotation_number .pay_div_mode").find("div").html(" ");
+    $(".qrcode_ok_div").hide();
+    $(".quotation_number .button_top_up").css("margin-top", "50px");
     $(obj).addClass("select_pay_click");
     $(".select_pay_click").find("div").html("<i class=\"layui-icon\">&#xe605;</i>");
     var name = $(obj).find("span").text();
@@ -382,6 +387,8 @@ function offerNumPay(){
         headers: {"token": localStorage.getItem("token")},
         dataType: "json",
         success: (data) => {
+            $(".qrcode_ok_div").show();
+            $(".quotation_number .button_top_up").css("margin-top", "0");
             var qrcode = new QRCode(document.getElementById("qrcode_ok"), {    // 显示二维码的元素或该元素的 ID
                 text: data.code_url,   // 内容可以是文字，链接，邮箱
                 width: 120,          //设置宽度

src/main/resources/templates/personal/index.html

@@ -231,7 +231,7 @@
             </div>
         </div>
         <!-- 微信支付二维码 -->
-        <div style="float: left; width: 100%;">
+        <div class="qrcode_ok_div" style="float: left; width: 100%;">
             <div id="qrcode_ok"></div>
         </div>
         <div class="button_top_up">