zfb.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <!doctype html>
  2. <html lang="zh-Hans">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <meta name="format-detection" content="telphone=no"/>
  9. <meta name="format-detection" content="email=no"/>
  10. <meta name="screen-orientation" content="portrait"/>
  11. <meta name="theme-color" content="#1677ff"/>
  12. <title>支付宝</title>
  13. <style>
  14. html, body {
  15. background: #1677ff;
  16. background-size: 100%;
  17. padding: 0;
  18. margin: 0;
  19. height: 100%;
  20. }
  21. .btn-zfb {
  22. width: 80%;
  23. margin: auto;
  24. background: #ffffff;
  25. line-height: 52px;
  26. outline: none;
  27. color: #1677ff;
  28. font-size: 18px;
  29. letter-spacing: 3px;
  30. font-weight: 400;
  31. border: 1px solid transparent;
  32. border-radius: 8px;
  33. display: block;
  34. }
  35. .mask {
  36. background: rgba(0, 0, 0, 0.7);
  37. color: #ffffff;
  38. font-size: 14px;
  39. position: fixed;
  40. top: 10px;
  41. right: 0;
  42. padding: 10px 15px 10px 10px;
  43. border-radius: 18px;
  44. display: flex;
  45. align-items: center;
  46. }
  47. .mask img {
  48. width: 48px;
  49. height: 48px;
  50. margin-right: 10px;
  51. }
  52. .mask .desc {
  53. display: inline-block;
  54. line-height: 23px;
  55. }
  56. .mask .desc .highlight {
  57. color: #ff9f19;
  58. }
  59. .mask:after {
  60. content: "";
  61. position: fixed;
  62. right: 15px;
  63. top: 0;
  64. width: 0;
  65. height: 0;
  66. border-left: 10px solid transparent;
  67. border-right: 10px solid transparent;
  68. border-bottom: 10px solid rgba(0, 0, 0, .7);
  69. }
  70. .tip {
  71. color: #ffffff;
  72. font-size: 18px;
  73. text-align: center;
  74. letter-spacing: 3px;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <img src="/static/img/zfb.png" style="width: 100%"/>
  80. <!--<button class="btn-zfb">打开支付宝</button>-->
  81. <div class="tip">请在浏览器中打开</div>
  82. <div class="mask">
  83. <img src="/static/img/browser.png"/>
  84. <div class="desc">请在<span class="highlight">浏览器中打开</span><br>继续完成支付</div>
  85. </div>
  86. </body>
  87. </html>