index.html 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>晋江人力大数据智能看板</title>
  8. <link rel="stylesheet" href="./css/index.css">
  9. <link rel="stylesheet" href="./fonts/icomoon.css">
  10. </head>
  11. <body>
  12. <div class="viewport">
  13. <div class="column">
  14. <!-- 企业数 -->
  15. <div class="order panel">
  16. <div class="inner">
  17. <div class="caption">
  18. <h3>平台统计</h3>
  19. </div>
  20. <!-- 数据 -->
  21. <div class="data total_count">
  22. <!--<div class="item">-->
  23. <!--<h4 class="train total_count">0</h4>-->
  24. <!--<span>-->
  25. <!--<i class="icon-dot" style="color: #ed3f35;"></i>-->
  26. <!--企业数-->
  27. <!--</span>-->
  28. <!--</div>-->
  29. <!--<div class="item">-->
  30. <!--<h4 class="train_join">0</h4>-->
  31. <!--<span>-->
  32. <!--<i class="icon-dot" style="color: #eacf19;"></i>-->
  33. <!--岗位数-->
  34. <!--</span>-->
  35. <!--</div>-->
  36. <div class="item">
  37. <h4 class="train_join">0</h4>
  38. <span>
  39. <i class="icon-dot" style="color: #9fe6b8;"></i>
  40. 硕士人才数
  41. </span>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <!-- 人才层次 -->
  47. <div class="users panel">
  48. <div class="inner">
  49. <h3>人才层次</h3>
  50. <div class="chart">
  51. <div class="bar cate talent_level"></div>
  52. <div class="data">
  53. <div class="item">
  54. <h4 class="talent_level-total">0</h4>
  55. <span>
  56. <i class="icon-dot" style="color: #ed3f35"></i>
  57. 人才总数
  58. </span>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <!-- 人才分布 -->
  65. <div class="top panel">
  66. <div class="inner">
  67. <div class="province">
  68. <h3>人才分布</h3>
  69. <div class="data">
  70. <ul class="sup">
  71. <li data-type="talent_industry">
  72. <span>行业分布</span>
  73. </li>
  74. <li data-type="talent_age">
  75. <span>年龄分布</span>
  76. </li>
  77. <li data-type="talent_education">
  78. <span>学历分布</span>
  79. </li>
  80. </ul>
  81. <ul class="sub">
  82. </ul>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="column">
  89. <!-- 零工 -->
  90. <div class="order panel">
  91. <div class="inner">
  92. <div class="caption">
  93. <h3>零工</h3>
  94. </div>
  95. <div class="data">
  96. <div class="item">
  97. <h4 class="odd_job_number">0</h4>
  98. <span>
  99. <i class="icon-dot" style="color: #ed3f35;"></i>
  100. 求职者
  101. </span>
  102. </div>
  103. <div class="item">
  104. <h4 class="odd_job_company">0</h4>
  105. <span>
  106. <i class="icon-dot" style="color: #eacf19;"></i>
  107. 企业
  108. </span>
  109. </div>
  110. <div class="item">
  111. <h4 class="odd_job_job">0</h4>
  112. <span>
  113. <i class="icon-dot" style="color: #9fe6b8;"></i>
  114. 发布岗位
  115. </span>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <!-- 地图 -->
  121. <div class="map">
  122. <h3>
  123. <span class="icon-cube"></span>
  124. 晋江人力大数据地图
  125. </h3>
  126. <div class="chart">
  127. <div class="geo"></div>
  128. </div>
  129. </div>
  130. </div>
  131. <div class="column">
  132. <!-- 订单 -->
  133. <div class="order panel">
  134. <div class="inner">
  135. <div class="caption">
  136. <h3>招考</h3>
  137. </div>
  138. <div class="data">
  139. <div class="item">
  140. <h4 class="recruit_count">0</h4>
  141. <span>
  142. <i class="icon-dot" style="color: #ed3f35;"></i>
  143. 招考场次
  144. </span>
  145. </div>
  146. <div class="item">
  147. <h4 class="recruit_post">0</h4>
  148. <span>
  149. <i class="icon-dot" style="color: #eacf19;"></i>
  150. 招考岗位
  151. </span>
  152. </div>
  153. <div class="item">
  154. <h4 class="recruit_apply">0</h4>
  155. <span>
  156. <i class="icon-dot" style="color: #9fe6b8;"></i>
  157. 报名总人数
  158. </span>
  159. </div>
  160. </div>
  161. </div>
  162. </div>
  163. <!--点位-->
  164. <div class="point panel">
  165. <div class="inner">
  166. <h3>考生年龄分布</h3>
  167. <div class="chart">
  168. <div class="pie age recruit_age"></div>
  169. <div class="data">
  170. <div class="item">
  171. <h4 class="age-gt35"></h4>
  172. <span>
  173. <i class="icon-dot" style="color: #ed3f35"></i>
  174. 35岁及以下
  175. </span>
  176. </div>
  177. <div class="item">
  178. <h4 class="age-lt35"></h4>
  179. <span>
  180. <i class="icon-dot" style="color: #eacf19"></i>
  181. 35岁以上
  182. </span>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!--点位-->
  189. <div class="point panel">
  190. <div class="inner">
  191. <h3>考生学历分布</h3>
  192. <div class="chart">
  193. <div class="pie edu recruit_education"></div>
  194. <div class="data">
  195. <div class="item">
  196. <h4 class="edu-unknown"></h4>
  197. <span>
  198. <i class="icon-dot" style="color: #ed3f35"></i>
  199. 未知学历
  200. </span>
  201. </div>
  202. <div class="item">
  203. <h4 class="edu-total"></h4>
  204. <span>
  205. <i class="icon-dot" style="color: #eacf19"></i>
  206. 学历统计
  207. </span>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </body>
  216. <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  217. <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  218. <script src="./js/index.js"></script>
  219. </html>