AlipayHtml.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7. <title>支付</title>
  8. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  9. <style>
  10. html {
  11. width: 100%;
  12. height: 100%;
  13. padding: 0;
  14. margin: 0;
  15. font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  16. font-size: 14px;
  17. font-weight: 400;
  18. line-height: 1.6;
  19. }
  20. body {
  21. width: 100%;
  22. height: 100%;
  23. padding: 0;
  24. margin: 0;
  25. background: #1677ff url(/static/img/zfb.png) no-repeat top;
  26. background-size: 100%;
  27. }
  28. .overlay .overlay-img {
  29. width: 186px;
  30. height: 210px;
  31. margin-right: 15px;
  32. }
  33. .overlay .overlay-text1 {
  34. width: 272px;
  35. font-size: 16px;
  36. font-weight: bold;
  37. color: rgba(255, 255, 255, 1);
  38. line-height: 22px;
  39. margin: 15px auto 0;
  40. }
  41. .overlay .overlay-text2 {
  42. width: 272px;
  43. font-size: 13px;
  44. color: rgba(255, 255, 255, 1);
  45. line-height: 18px;
  46. margin: 15px auto 0;
  47. }
  48. .overlay {
  49. position: fixed;
  50. top: 0;
  51. right: 0;
  52. bottom: 0;
  53. left: 0;
  54. background: rgba(0, 0, 0, 0.7);
  55. display: none;
  56. }
  57. #btn-zfb {
  58. width: 80%;
  59. margin: auto;
  60. background: #ffffff;
  61. line-height: 52px;
  62. height: 52px;
  63. outline: none;
  64. color: #1677ff;
  65. font-size: 18px;
  66. letter-spacing: 3px;
  67. font-weight: 400;
  68. border: 1px solid transparent;
  69. border-radius: 8px;
  70. position: absolute;
  71. top: 0;
  72. bottom: 0;
  73. left: 0;
  74. right: 0;
  75. display: none;
  76. }
  77. </style>
  78. </head>
  79. <body>
  80. <div class="overlay" id="overlay">
  81. <div style="text-align: right"><img class="overlay-img" src="/static/img/zhifu_img_liulanqi_ios.png" alt=""/>
  82. </div>
  83. <div class="overlay-text1">请点击右上角,选择在默认浏览器中打开然后继续完成支付</div>
  84. <div class="overlay-text2">注:由于微信限制,需要在浏览器中打开才可以完成支付宝支付</div>
  85. </div>
  86. <a id="link">
  87. <button id="btn-zfb">打开支付宝</button>
  88. </a>
  89. <script>
  90. function GetQueryString(name) {
  91. var after = window.location.href.split("?")[1];
  92. if (after) {
  93. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  94. var r = after.match(reg);
  95. if (r != null) {
  96. return decodeURIComponent(r[2]);
  97. } else {
  98. return null;
  99. }
  100. }
  101. }
  102. window.onload = function () {
  103. console.log('onload');
  104. if (/micromessenger/i.test(navigator.userAgent)) {
  105. $('#overlay').fadeIn();
  106. } else {
  107. $('#btn-zfb').fadeIn();
  108. }
  109. }
  110. </script>
  111. </body>
  112. </html>