verify.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. <html>
  2. <head>
  3. <title>验证码</title>
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
  5. <meta name="renderer" content="webkit">
  6. <meta name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  8. <script src="/js/jquery.js"></script>
  9. <meta content="telephone=no" name="format-detection"/>
  10. <meta charset="utf-8">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
  12. <meta name="renderer" content="webkit">
  13. <meta name="baidu-site-verification" content="cSFG2PMaYX"/>
  14. <meta name="applicable-device" content="pc,mobile"/>
  15. <link href="/css/bootstrap.min.css" rel="stylesheet">
  16. <link href="/css/bootswatch.min.css" rel="stylesheet">
  17. <link href="/css/font.css" rel="stylesheet">
  18. <link href="/css/jy.css" rel="stylesheet">
  19. <link href="/css/common.css" rel="stylesheet">
  20. <link rel="stylesheet" href="/css/unicorn.main.css"/>
  21. <link rel="stylesheet" href="/css/unicorn.grey.css"/>
  22. <script src="/js/jquery.js"></script>
  23. <script src="/js/n_rem.js"></script>
  24. <link href="/css/pc.css" rel="stylesheet">
  25. <style>
  26. body {
  27. min-width: auto;
  28. }
  29. @media only screen and (min-width: 1200px) {
  30. body {
  31. min-width: 1200px;
  32. }
  33. .verify_logo {
  34. width: 350px;
  35. display: block;
  36. }
  37. .verify-body {
  38. width: 350px;
  39. margin: 0 auto;
  40. text-align: center;
  41. padding: 134px 0;
  42. }
  43. .verify-content {
  44. border: #F5F5F5 solid 1px;
  45. margin: auto;
  46. width: 260pt;
  47. background-color: #FFFFFF;
  48. box-shadow: 1px 1px 1px 1px grey;
  49. padding: 10pt;
  50. display: flex;
  51. flex-direction: column;
  52. }
  53. .public-nav {
  54. display: "" !important;
  55. }
  56. .j-bottom {
  57. display: "" !important;
  58. }
  59. }
  60. @media only screen and (max-width: 1200px) {
  61. .verify_logo {
  62. width: 7rem;
  63. display: block;
  64. }
  65. .verify-body {
  66. width: 7rem;
  67. margin: 0 auto;
  68. text-align: center;
  69. padding: 2.38rem 0 0 0;
  70. }
  71. #antiimg {
  72. width: 100%;
  73. }
  74. .verify-content {
  75. border: #F5F5F5 solid 1px;
  76. margin: auto;
  77. width: 7rem;
  78. background-color: #FFFFFF;
  79. box-shadow: 1px 1px 1px 1px grey;
  80. padding: 10pt;
  81. display: flex;
  82. flex-direction: column;
  83. }
  84. .public-nav {
  85. display: none !important;
  86. }
  87. .j-bottom {
  88. display: none !important;
  89. }
  90. }
  91. .public-nav {
  92. border-bottom: 1px solid #e0e0e0 !important;
  93. }
  94. .fr {
  95. float: right;
  96. }
  97. .logo img {
  98. width: 74px;
  99. }
  100. .verify-content .word {
  101. text-align: left;
  102. }
  103. .footBtn {
  104. margin-top: 5pt;
  105. display: flex;
  106. flex-direction: row;
  107. justify-content: space-between;
  108. }
  109. /*j-wx-code Start*/
  110. .j-wx-code {
  111. width: 335px;
  112. height: 355px;
  113. background-color: #fff;
  114. -webkit-border-radius: 6px;
  115. -moz-border-radius: 6px;
  116. border-radius: 6px;
  117. position: relative;
  118. /*margin: 100px auto;*/
  119. }
  120. .j-wx-code > .code-close {
  121. width: 40px;
  122. height: 40px;
  123. position: absolute;
  124. right: -20px;
  125. top: -20px;
  126. cursor: pointer;
  127. -webkit-transition: all 1s;
  128. -o-transition: all 1s;
  129. -moz-transition: all 1s;
  130. transition: all 1s;
  131. }
  132. .j-wx-code > .code-close:hover {
  133. -webkit-transform: scale(1.2);
  134. -moz-transform: scale(1.2);
  135. -ms-transform: scale(1.2);
  136. -o-transform: scale(1.2);
  137. transform: scale(1.2);
  138. }
  139. .j-wx-code > .code-title {
  140. height: 82px;
  141. background: url(/images/j-wx-code-title.png) center center no-repeat;
  142. -webkit-animation: moveYun 15s infinite linear both;
  143. -moz-animation: moveYun 15s infinite linear both;
  144. -o-animation: moveYun 15s infinite linear both;
  145. animation: moveYun 15s infinite linear both;
  146. }
  147. .j-wx-code > .code-wxm {
  148. text-align: center;
  149. margin-bottom: -6px;
  150. margin-top: -16px;
  151. }
  152. .j-wx-code > .code-wxm > img {
  153. width: 200px;
  154. height: 200px;
  155. margin-top: -5px;
  156. }
  157. .j-wx-code > .code-text {
  158. text-align: center;
  159. }
  160. .j-wx-code > .code-bottom {
  161. width: 470px;
  162. height: 211px;
  163. position: absolute;
  164. bottom: -113px;
  165. left: -73px;
  166. background: url(/images/j-wx-code-bottom.png) 0 0 no-repeat;
  167. }
  168. .j-wx-code > .code-bottom > img {
  169. position: absolute;
  170. left: 280px;
  171. top: 88px;
  172. -webkit-animation: codeWxMove 10s linear both;
  173. -moz-animation: codeWxMove 10s linear both;
  174. -o-animation: codeWxMove 10s linear both;
  175. animation: codeWxMove 10s linear both;
  176. -webkit-animation-fill-mode: forwards;
  177. -moz-animation-fill-mode: forwards;
  178. -o-animation-fill-mode: forwards;
  179. animation-fill-mode: forwards
  180. }
  181. #antiVerify > div:first-child {
  182. display: none;
  183. }
  184. #antiVerify > div:nth-child(2) {
  185. max-width: 360px !important;
  186. margin: 0 auto !important;
  187. position: unset !important;
  188. top: unset !important;
  189. left: unset !important;
  190. z-index: unset !important;
  191. transform:unset !important;
  192. }
  193. #antiVerify > div:nth-child(2) > div:nth-child(1),
  194. #antiVerify > div:nth-child(2) > div:nth-child(2),
  195. #antiVerify > div:nth-child(2) > div:nth-child(1) > img {
  196. max-width: 360px !important;
  197. }
  198. </style>
  199. </head>
  200. <body>
  201. <!-- content -->
  202. <div class="verify-body">
  203. <div id="antiVerify">
  204. <div></div>
  205. <div style="margin: 0 auto;max-width: 360px;">
  206. <div style="width: 90vw;max-width: 360px;">
  207. <img style="width: 90vw;max-width: 360px;" src="/antiRes/images/verify_logo.png">
  208. </div>
  209. <div style="width: 90vw;max-width: 360px;border: #F5F5F5 solid 1px;margin: auto;background-color: #FFFFFF;box-shadow: 1px 1px 1px 1px grey;padding: 10pt;display: flex;flex-direction: column;">
  210. <div style="margin-bottom:8pt">
  211. <div>请在下图依次点击:<span>{{.textVerify}}</span></div>
  212. </div>
  213. <div style="position:relative;width:100%">
  214. <img id="antiimg" onclick="antiAdd(event,this);"
  215. src="data:image/png;base64,{{.imgData}}"
  216. style="width:100%"><input type="hidden" id="antivalue"
  217. value=""></div>
  218. <div style="margin-top: 1vh;display: flex;flex-direction: row;justify-content: space-between;">
  219. <img style="argin-left: 8pt;width: 25pt;height: 25pt;float: left;cursor: hand;"
  220. onclick="antiReload()" src="/antiRes/images/flush.png">
  221. <div>
  222. <button style="background-color: #24C0D7;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 8px 12px;font-size: 14px;line-height: 1.42857143;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;color: #FFFFFF;position: relative;outline-width: 0px;box-shadow: none !important;"
  223. onclick="antiReload(1);">确定
  224. </button>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. <img src="/images/pc_6.png" class="backTop" id="backTop">
  233. <script>
  234. //验证码方法
  235. function antiAdd(event, obj) {
  236. if (obj.parentNode.querySelectorAll(".imgs").length < 3) {
  237. var offsetX = event.pageX - (obj.getBoundingClientRect().left + document.body.scrollLeft);
  238. var offsetY = event.pageY - (obj.getBoundingClientRect().top + document.body.scrollTop);
  239. var offx = parseInt(offsetX);
  240. var offy = parseInt(offsetY);
  241. var icon = "<img onclick='antiRemove(this)' class='imgs' src='/antiRes/images/hoverclick.png' "
  242. + "style='position:absolute;top:" + (offsetY - 8) + "px;left:" + (offsetX - 8) + "px;' offx=" + offx + " offy=" + offy + " />";
  243. obj.parentNode.innerHTML += icon
  244. document.querySelector("#antivalue").value += (";" + offx + "," + offy)
  245. }
  246. }
  247. //删除验证
  248. function antiRemove(obj) {
  249. var offx = obj.getAttribute("offx");
  250. var offy = obj.getAttribute("offy");
  251. document.querySelector("#antivalue").value = document.querySelector("#antivalue").value.replace((";" + offx + "," + offy), "");
  252. obj.parentNode.removeChild(obj);
  253. }
  254. //验证码提交
  255. function antiReload(flag) {
  256. if (flag === 1) {
  257. var param = {};
  258. param["antiVerifyCheck"] = document.querySelector("#antivalue").value.substr(1);
  259. param["imgw"] = $("#antiimg").width();
  260. $.ajax({
  261. type: "POST",
  262. url: window.location.href,
  263. dataType: "json",
  264. data: param,
  265. headers: {
  266. 'app': '{{.appName}}',
  267. },
  268. success: function (res) {
  269. window.location.reload()
  270. }
  271. });
  272. } else {
  273. window.location.reload();
  274. }
  275. }
  276. </script>
  277. </body>
  278. </html>