homemovement.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  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. <link rel="icon" href="image/favicon.png">
  7. <title>工时管家</title>
  8. <link rel="stylesheet" href="./css/homemovement/normalize.css" />
  9. <!-- 先引入css文件 放到自己css文件的上面 -->
  10. <link rel="stylesheet" href="./css/homemovement/swiper.min.css" />
  11. <link rel="stylesheet" href="./css/homemovement/homemovement.css" />
  12. <script src="js/jquery1.42.min.js"></script>
  13. </head>
  14. <body>
  15. <section class="warp">
  16. <!-- 头部 -->
  17. <div class="header">
  18. <div class="header_logo"><img src="./image/logo.jpg" alt=""></div>
  19. <div class="header_qiyeweix"><a href="https://open.work.weixin.qq.com" target="_blank"><img src="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=isp&c=white&s=medium" srcset="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=isp&c=white&s=medium@2x 2x" referrerpolicy="unsafe-url" alt="企业微信"></a></div>
  20. <div class="header_qw"><a href="javascript:;" id="zhuce"><img src="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=register&c=white&s=large" srcset="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=register&c=white&s=large@2x 2x" referrerpolicy="unsafe-url" alt="企业微信"></a></div>
  21. <div class="header_qx"><a href="javascript:;" id="anqiye"><img src="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=install&c=white&s=large" srcset="https://open.work.weixin.qq.com/service/img?id=wwf11426cf618e1703&t=install&c=white&s=large@2x 2x" referrerpolicy="unsafe-url" alt="企业微信"></a></div>
  22. </div>
  23. <div class="homepage">
  24. <div class="homepage_img">
  25. <img src="./image/bannar9.gif" alt="">
  26. </div>
  27. <div class="homepage_gsLogo">
  28. <img src="./image/gsgj.png" alt="">
  29. </div>
  30. <div class="homepage_title">工时管家</div>
  31. </div>
  32. <div class="reduction">
  33. <div class="reduction_img">
  34. <img src="./image/huajian.png" alt="">
  35. </div>
  36. </div>
  37. <div class="examination">
  38. <div class="examination_title">填报、审批、统计分分钟搞定</div>
  39. <div class="examination_img"><img src="./image/fill.jpg" alt=""></div>
  40. <div class="get_job_focus">
  41. <!-- Swiper -->
  42. <div class="swiper-container get_job_fo">
  43. <div class="swiper-wrapper">
  44. <div class="swiper-slide">
  45. <img src="./image/yidong/xmcj.png" alt="" />
  46. </div>
  47. <div class="swiper-slide">
  48. <img src="./image/yidong/ygtb.png" alt="" />
  49. </div>
  50. <div class="swiper-slide">
  51. <img src="./image/yidong/xmjlsh.png" alt="" />
  52. </div>
  53. <div class="swiper-slide">
  54. <img src="./image/yidong/hzsj.png" alt="" />
  55. </div>
  56. <div class="swiper-slide">
  57. <img src="./image/yidong/sctjb.png" alt="" />
  58. </div>
  59. </div>
  60. </div>
  61. <!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
  62. <div class="swiper-button-next"></div>
  63. <div class="swiper-button-prev"></div>
  64. </div>
  65. </div>
  66. <div class="management">
  67. <div class="management_title">强大的功能,轻松的管理</div>
  68. <div class="management_tex">提供便捷且全面的工时填报、审核和统计功能,围绕企业成本管理提供一站式解决方案</div>
  69. <div class="swiper-container study_fo">
  70. <div class="swiper-wrapper">
  71. <div class="swiper-slide">
  72. <img src="./image/gs1.jpg" alt="" />
  73. <p>工时填报</p>
  74. </div>
  75. <div class="swiper-slide">
  76. <img src="./image/gs2.jpg" alt="" />
  77. <p>报告查看</p>
  78. </div>
  79. <div class="swiper-slide">
  80. <img src="./image/gs3.jpg" alt="" />
  81. <p>工时审批</p>
  82. </div>
  83. <div class="swiper-slide">
  84. <img src="./image/gs4.jpg" alt="" />
  85. <p>项目管理</p>
  86. </div>
  87. <div class="swiper-slide">
  88. <img src="./image/gs5.jpg" alt="" />
  89. <p>成本统计</p>
  90. </div>
  91. <div class="swiper-slide">
  92. <img src="./image/gs6.jpg" alt="" />
  93. <p>财务核算</p>
  94. </div>
  95. <div class="swiper-slide">
  96. <img src="./image/gs7.jpg" alt="" />
  97. <p>客户管理</p>
  98. </div>
  99. <div class="swiper-slide">
  100. <img src="./image/gs8.jpg" alt="" />
  101. <p>费用报销</p>
  102. </div>
  103. <div class="swiper-slide">
  104. <img src="./image/gs9.jpg" alt="" />
  105. <p>工程管理</p>
  106. </div>
  107. <div class="swiper-slide">
  108. <img src="./image/gs10.jpg" alt="" />
  109. <p>审批流</p>
  110. </div>
  111. </div>
  112. <!-- Add Pagination -->
  113. <div class="swiper-pagination"></div>
  114. </div>
  115. </div>
  116. <div class="customer">
  117. <div class="customer_title">来自客户的认可</div>
  118. <div class="swiper-container customer_fo">
  119. <div class="swiper-wrapper">
  120. <div class="swiper-slide">
  121. <img src="./image/yidong/ggg0.png" alt="" />
  122. </div>
  123. <div class="swiper-slide">
  124. <img src="./image/yidong/ggg1.png" alt="" />
  125. </div>
  126. <div class="swiper-slide">
  127. <img src="./image/yidong/ggg2.png" alt="" />
  128. </div>
  129. <div class="swiper-slide">
  130. <img src="./image/yidong/ggg3.png" alt="" />
  131. </div>
  132. <div class="swiper-slide">
  133. <img src="./image/yidong/ggg4.png" alt="" />
  134. </div>
  135. <div class="swiper-slide">
  136. <img src="./image/yidong/ggg5.png" alt="" />
  137. </div>
  138. <div class="swiper-slide">
  139. <img src="./image/yidong/ggg6.png" alt="" />
  140. </div>
  141. <div class="swiper-slide">
  142. <img src="./image/yidong/ggg7.png" alt="" />
  143. </div>
  144. <div class="swiper-slide">
  145. <img src="./image/yidong/ggg8.png" alt="" />
  146. </div>
  147. </div>
  148. <!-- Add Pagination -->
  149. <div class="swiper-pagination"></div>
  150. </div>
  151. </div>
  152. <div class="foots">
  153. <div class="erweima">
  154. <img src="./image/gzh.jpg" alt="">
  155. </div>
  156. <div class="erweima_text">工时管家官方客服</div>
  157. <div class="erweima_haoma">Copyright©2016 南京火石闪信网络有限公司 苏ICP备18064522号-1</div>
  158. </div>
  159. </section>
  160. </body>
  161. <script src="./js/homemovement/flexible.js"></script>
  162. <!-- 比如引入js文件 -->
  163. <script src="./js/homemovement/swiper.min.js"></script>
  164. <script>
  165. // 第一个函数里面是 就业指导轮播图
  166. (function () {
  167. var swiper = new Swiper(".get_job_fo", {
  168. // 能够显示的 slider的个数
  169. slidesPerView: 2,
  170. // 每一个slide之间的距离
  171. spaceBetween: 30,
  172. centeredSlides: true,
  173. loop: true,
  174. // 添加左右箭头
  175. navigation: {
  176. nextEl: ".swiper-button-next",
  177. prevEl: ".swiper-button-prev",
  178. },
  179. });
  180. })();
  181. // 第二个函数的轮播图
  182. (function () {
  183. // 如果有多个轮播图最好修改下 swiper-container
  184. var swiper = new Swiper(".study_fo", {
  185. // 我们可以可以看看到的是 2个半
  186. slidesPerView: 1,
  187. spaceBetween: 20,
  188. });
  189. })();
  190. // 第三个函数的轮播图
  191. (function () {
  192. // 如果有多个轮播图最好修改下 swiper-container
  193. var swiper = new Swiper(".customer_fo", {
  194. // 我们可以可以看看到的是 2个半
  195. slidesPerView: 2.2,
  196. spaceBetween: 20,
  197. });
  198. })();
  199. </script>
  200. <script>
  201. $('#anqiye').click(function() {
  202. console.log('我被点击率')
  203. // $.ajax({
  204. // type : "GET",
  205. // // url : "http://192.168.2.97:10010/wxcorp/getPreAuthCode",
  206. // url : "http://worktime.ttkuaiban.com/api/wxcorp/getPreAuthCode",
  207. // dataType : "jsonp",
  208. // jsonp: "jsoncallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
  209. // jsonpCallback:"jsoncallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名
  210. // success : function(data){
  211. // console.log(data);
  212. // },
  213. // error:function(){
  214. // alert('请求失败');
  215. // }
  216. // });
  217. // function jsoncallback(data) {
  218. // console.log(data)
  219. // }
  220. $.ajax({
  221. type : "GET",
  222. url : "https://worktime.ttkuaiban.com/api/wxcorp/getPreAuthCode",
  223. success : function(data){
  224. let suiteId = 'ww4e237fd6abb635af'
  225. let huidiao = 'https://worktime.ttkuaiban.com/api/wxcorp/installFromWebsite'
  226. let url = `https://open.work.weixin.qq.com/3rdapp/install?suite_id=${suiteId}&pre_auth_code=${data.data.code}&redirect_uri=${huidiao}&state=4`
  227. window.location.href = url
  228. },
  229. error:function(){
  230. alert('请求失败');
  231. }
  232. });
  233. })
  234. $('#zhuce').click(function() {
  235. $.ajax({
  236. type : "GET",
  237. url : "https://worktime.ttkuaiban.com/api/wxcorp/getRegisterCode",
  238. success : function(data){
  239. if(data.code == 'ok') {
  240. let url = `https://open.work.weixin.qq.com/3rdservice/wework/register?register_code=${data.data.code}`
  241. if(data.data.code != undefined && data.data.code != 'undefined') {
  242. window.location.href = url
  243. }
  244. } else {
  245. console.log(data)
  246. alert(data.msg)
  247. }
  248. },
  249. error:function(){
  250. alert('请求失败');
  251. }
  252. });
  253. })
  254. </script>
  255. </html>