Sin descripción

enlist.html 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>招募令</title>
  9. <script src="./js/jquery.js"></script>
  10. <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
  11. <style>
  12. *{margin:0;padding:0;color: #333;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
  13. body{font-size:0.75rem;font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif; background:#fff;-webkit-text-size-adjust:100%;}
  14. input{outline:none;-webkit-appearance: none;font-size: 0.14rem;}
  15. body,html{
  16. width: 100%;
  17. height: 100%;
  18. }
  19. .warp{
  20. width: 100%;
  21. overflow: hidden;
  22. }
  23. .enlist_img{
  24. width: 100%;
  25. }
  26. .enlist_img img{
  27. width: 100%;
  28. height: 100%;
  29. }
  30. .enlist_form{
  31. width: 100%;
  32. height: auto;
  33. padding:0 5%;
  34. background-color: #fff;
  35. font-size: 0.42rem;
  36. Letter-spacing:0.01rem;
  37. padding-bottom: 5%;
  38. box-sizing: border-box;
  39. }
  40. .enlist_form_p{
  41. line-height: 0.4rem;
  42. font-size: 0.17rem;
  43. font-weight: normal;
  44. color: #000000;
  45. }
  46. .fbc_required{
  47. margin-left: 0.05rem;
  48. color: #DA2824;
  49. }
  50. .enlist_form_input{
  51. width: 100%;
  52. height: 0.37rem;
  53. background: #fff;
  54. border: 1px solid #D3D3D3;
  55. margin-bottom: 3%;
  56. }
  57. .enlist_form_input_icon{
  58. float: left;
  59. width: 10%;
  60. height: 100%;
  61. padding: 2%;
  62. box-sizing: border-box;
  63. }
  64. .enlist_form_input_icon i{
  65. display: block;
  66. color: #7fbceb;
  67. font-size: 0.2rem;
  68. }
  69. .enlist_form_input_icon img{
  70. width: 100%;
  71. height: 100%;
  72. }
  73. .enlist_form_input_item{
  74. float: left;
  75. width: 90%;
  76. height: 100%;
  77. border: none;
  78. }
  79. .enlist_form_input_item:focus{
  80. border:none;
  81. }
  82. .enlist_form_button{
  83. width: 80%;
  84. height:0.4rem;
  85. line-height:0.4rem;
  86. color: #fff;
  87. font-size: 0.16rem;
  88. text-align: center;
  89. background-color: #3a67a0;
  90. margin: auto;
  91. margin-top: 0.5rem;
  92. border-radius: 0.02rem;
  93. }
  94. .mask{
  95. background: rgba(0,0,0,0.4013);
  96. position: fixed;
  97. top: 0;
  98. left: 0;
  99. width: 100%;
  100. height: 100%;
  101. display: flex;
  102. justify-content: center;
  103. align-items: center;
  104. visibility:hidden;
  105. }
  106. .mask .content{
  107. width: 2.98rem;
  108. background: #f9f9f9;
  109. border-radius: 0.16rem;
  110. }
  111. .mask .content h3{
  112. color: #090909;
  113. font-size: 0.16rem;
  114. line-height: 0.22rem;
  115. padding-top:0.12rem;
  116. padding-bottom: 0.08rem;
  117. text-align: center;
  118. }
  119. .mask .content p{
  120. color: #090909;
  121. line-height: 0.23rem;
  122. font-size: 0.14rem;
  123. margin-bottom: 0.15rem;
  124. text-align: center;
  125. }
  126. .mask .content div{
  127. border-top: 0.01rem solid rgba(191,191,191,0.1998);
  128. color: #2c8ad0;
  129. text-align: center;
  130. font-size: 0.14rem;
  131. line-height: 0.2rem;
  132. padding: 0.09rem 0 0.12rem 0;
  133. }
  134. </style>
  135. </head>
  136. <body>
  137. <div class="warp">
  138. <div class="enlist_img">
  139. <img src="images/KX01.png" style="display: block;">
  140. </div>
  141. <form class="enlist_form">
  142. <p class="enlist_form_p">姓名<span class="fbc_required">*</span></p>
  143. <div class="enlist_form_input">
  144. <div class="enlist_form_input_icon">
  145. <i class="iconfont icon-icon1"></i>
  146. </div>
  147. <input type="text" class="enlist_form_input_item" id="user">
  148. </div>
  149. <p class="enlist_form_p">手机<span class="fbc_required">*</span></p>
  150. <div class="enlist_form_input">
  151. <div class="enlist_form_input_icon">
  152. <i class="iconfont icon-icon"></i>
  153. </div>
  154. <input type="tel" class="enlist_form_input_item" id="tel" >
  155. </div>
  156. <p class="enlist_form_p">邮箱<span class="fbc_required">*</span></p>
  157. <div class="enlist_form_input">
  158. <div class="enlist_form_input_icon">
  159. <i class="iconfont icon-email-outline"></i>
  160. </div>
  161. <input type="email" class="enlist_form_input_item" id="email">
  162. </div>
  163. <p class="enlist_form_p">微信<span class="fbc_required">*</span></p>
  164. <div class="enlist_form_input">
  165. <div class="enlist_form_input_icon">
  166. <i class="iconfont icon-weixin"></i>
  167. </div>
  168. <input type="text" class="enlist_form_input_item" id="vx">
  169. </div>
  170. <p class="enlist_form_p">QQ<span class="fbc_required">*</span></p>
  171. <div class="enlist_form_input">
  172. <div class="enlist_form_input_icon">
  173. <i class="iconfont icon-qq"></i>
  174. </div>
  175. <input type="number" class="enlist_form_input_item" id="qq">
  176. </div>
  177. <div class="enlist_form_button">立即报名</div>
  178. </form>
  179. <div class="mask">
  180. <div class="content">
  181. <h3>提示</h3>
  182. <p>提示内容</p>
  183. <div onclick="iknow()">我知道了</div>
  184. </div>
  185. </div>
  186. </div>
  187. </body>
  188. <script type="text/javascript">
  189. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  190. window.onresize = function(){
  191. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  192. }
  193. //弹层
  194. function iknow() {
  195. $(".mask").css("visibility","hidden");
  196. }
  197. //获取焦点时 改变图片颜色 边框颜色
  198. $("input").focus(function(e){
  199. $(e.currentTarget).parent().css("border-color","#a5a5a5");
  200.         $(e.currentTarget).prev().find('i').css('color', '#2c8ad0');
  201.     });
  202.     $("input").blur(function(e){
  203. $(e.currentTarget).parent().css("border-color","#D3D3D3");
  204.         $(e.currentTarget).prev().find('i').css('color', '#7fbceb');
  205.     });
  206. $('.enlist_form_button').click(function(){
  207. getData();
  208. })
  209. //请求数据
  210. function getData(){
  211. $.ajax({
  212. type: "GET",
  213. url: "https://tbk.726p.com/api/v2/signUp/insertInfo",
  214. data:{
  215. user:$('#user').val(),
  216. tel:$('#tel').val(),
  217. email:$('#email').val(),
  218. vx:$('#vx').val(),
  219. qq:$('#qq').val(),
  220. source:'1000'
  221. },
  222. success:function(msg){
  223. // console.log(msg)
  224. //判断返回值
  225. if(msg.errno==4003){
  226. $('.mask .content p').html(msg.err)
  227. $('.mask').css("visibility","visible");
  228. $('input').val('');
  229. }else if(msg.errno==10009){
  230. $('.mask').css("visibility","visible");
  231. $('.mask .content p').html(msg.rst.msg)
  232. }
  233. },
  234. fail:function (err){
  235. console.log(err)
  236. }
  237. });
  238. }
  239. </script>
  240. </html>