success.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>订单提交成功</title>
  7. </head>
  8. <style>
  9. .card {
  10. overflow: hidden;
  11. position: relative;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. text-align: center;
  16. border-radius: 0.5rem;
  17. box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  18. background-color: #fff;
  19. }
  20. .dismiss {
  21. position: absolute;
  22. right: 10px;
  23. top: 10px;
  24. display: flex;
  25. align-items: center;
  26. justify-content: center;
  27. padding: 0.5rem 1rem;
  28. background-color: #fff;
  29. color: black;
  30. border: 2px solid #D1D5DB;
  31. font-size: 1rem;
  32. font-weight: 300;
  33. width: 30px;
  34. height: 30px;
  35. border-radius: 7px;
  36. transition: .3s ease;
  37. }
  38. .dismiss:hover {
  39. background-color: #ee0d0d;
  40. border: 2px solid #ee0d0d;
  41. color: #fff;
  42. }
  43. .header {
  44. padding: 2rem 1rem 1rem 1rem;
  45. max-width: 290px;
  46. height: 100vh;
  47. }
  48. .image {
  49. display: flex;
  50. margin-left: auto;
  51. margin-right: auto;
  52. background-color: #e2feee;
  53. flex-shrink: 0;
  54. justify-content: center;
  55. align-items: center;
  56. width: 3rem;
  57. height: 3rem;
  58. border-radius: 9999px;
  59. animation: animate .6s linear alternate-reverse infinite;
  60. transition: .6s ease;
  61. }
  62. .image svg {
  63. color: #0afa2a;
  64. width: 2rem;
  65. height: 2rem;
  66. }
  67. .content {
  68. margin-top: 0.75rem;
  69. text-align: center;
  70. }
  71. .title {
  72. color: #066e29;
  73. font-size: 1rem;
  74. font-weight: 600;
  75. line-height: 1.5rem;
  76. }
  77. .message {
  78. margin-top: 0.5rem;
  79. color: #595b5f;
  80. font-size: 0.875rem;
  81. line-height: 1.25rem;
  82. }
  83. .message2 {
  84. margin-top: 1rem;
  85. color: #595b5f;
  86. font-size: 0.875rem;
  87. line-height: 1rem;
  88. }
  89. .actions {
  90. margin: 0.75rem 1rem;
  91. }
  92. .history {
  93. display: inline-flex;
  94. padding: 0.5rem 1rem;
  95. background-color: #1aa06d;
  96. color: #ffffff;
  97. font-size: 1rem;
  98. line-height: 1.5rem;
  99. font-weight: 500;
  100. justify-content: center;
  101. width: 100%;
  102. border-radius: 0.375rem;
  103. border: none;
  104. box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  105. margin: 0.5rem 0rem;
  106. }
  107. .track {
  108. display: inline-flex;
  109. margin-top: 0.75rem;
  110. padding: 0.5rem 1rem;
  111. color: #242525;
  112. font-size: 1rem;
  113. line-height: 1.5rem;
  114. font-weight: 500;
  115. justify-content: center;
  116. width: 100%;
  117. border-radius: 0.375rem;
  118. border: 1px solid #D1D5DB;
  119. background-color: #fff;
  120. box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  121. }
  122. @keyframes animate {
  123. from {
  124. transform: scale(1);
  125. }
  126. to {
  127. transform: scale(1.09);
  128. }
  129. }
  130. </style>
  131. <body style="background: rgb(245, 245, 245);">
  132. <div class="card">
  133. <div class="header">
  134. <div class="image">
  135. <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  136. <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
  137. <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
  138. <g id="SVGRepo_iconCarrier">
  139. <path d="M20 7L9.00004 18L3.99994 13" stroke="#000000" stroke-width="1.5" stroke-linecap="round"
  140. stroke-linejoin="round"></path>
  141. </g>
  142. </svg>
  143. </div>
  144. <div class="content">
  145. <span class="title">订单提交成功</span>
  146. <p class="message">订单审核通过后,我们将尽快安排邮寄</p>
  147. </div>
  148. <div class="actions">
  149. <p class="message2">查询订单状态及物流信息请点击:</p>
  150. <button class="history" id="chaxun" type="button" onclick="">查询订单</button>
  151. </div>
  152. <button class="track" type="button"> <img src="img/suzyss.png" width="100%" alt=""></button>
  153. </div>
  154. </div>
  155. </body>
  156. <script>
  157. var urlParams = new URLSearchParams(window.location.search);
  158. var value = urlParams.get('url');
  159. window.addEventListener('load', function () {
  160. var button = document.getElementById('chaxun');
  161. button.onclick = function () {
  162. eval(value);
  163. };
  164. });
  165. </script>
  166. </html>