index.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. <div class="order panel">
  15. <div class="inner">
  16. <div class="caption">
  17. <h3>求职者</h3>
  18. </div>
  19. <div class="data">
  20. <div class="item">
  21. <h4 class="resume_sex-total">0</h4>
  22. <span>
  23. <i class="icon-dot" style="color: #ed3f35;"></i>
  24. 总人数
  25. </span>
  26. </div>
  27. <div class="item">
  28. <h4 class="resume_sex-male">0</h4>
  29. <span>
  30. <i class="icon-dot" style="color: #eacf19;"></i>
  31. </span>
  32. </div>
  33. <div class="item">
  34. <h4 class="resume_sex-female">0</h4>
  35. <span>
  36. <i class="icon-dot" style="color: #9fe6b8;"></i>
  37. </span>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="sales panel">
  43. <div class="inner">
  44. <div class="caption">
  45. <h3>求职工种</h3>
  46. </div>
  47. <div class="chart">
  48. <div class="line resume_trade"></div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="point panel">
  53. <div class="inner">
  54. <h3>求职分布</h3>
  55. <div class="chart">
  56. <span>年龄分布</span>
  57. <span>学历分布</span>
  58. </div>
  59. <div class="chart">
  60. <div class="pie age resume_age"></div>
  61. <div class="pie age resume_education"></div>
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="column">
  67. <!-- 零工 -->
  68. <div class="order panel">
  69. <div class="inner">
  70. <div class="caption">
  71. <h3>零工</h3>
  72. </div>
  73. <div class="data">
  74. <div class="item">
  75. <h4 class="odd_job_number">0</h4>
  76. <span>
  77. <i class="icon-dot" style="color: #ed3f35;"></i>
  78. 求职者
  79. </span>
  80. </div>
  81. <div class="item">
  82. <h4 class="odd_job_company">0</h4>
  83. <span>
  84. <i class="icon-dot" style="color: #eacf19;"></i>
  85. 企业
  86. </span>
  87. </div>
  88. <div class="item">
  89. <h4 class="odd_job_job">0</h4>
  90. <span>
  91. <i class="icon-dot" style="color: #9fe6b8;"></i>
  92. 发布岗位
  93. </span>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- 地图 -->
  99. <div class="map">
  100. <h3>
  101. <span class="icon-cube"></span>
  102. 晋江人力大数据地图
  103. </h3>
  104. <div class="chart">
  105. <div class="geo"></div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="column">
  110. <!-- 订单 -->
  111. <div class="order panel">
  112. <div class="inner">
  113. <div class="caption">
  114. <h3>招考</h3>
  115. </div>
  116. <div class="data">
  117. <div class="item">
  118. <h4 class="recruit_count">0</h4>
  119. <span>
  120. <i class="icon-dot" style="color: #ed3f35;"></i>
  121. 招考场次
  122. </span>
  123. </div>
  124. <div class="item">
  125. <h4 class="recruit_post">0</h4>
  126. <span>
  127. <i class="icon-dot" style="color: #eacf19;"></i>
  128. 招考岗位
  129. </span>
  130. </div>
  131. <div class="item">
  132. <h4 class="recruit_apply">0</h4>
  133. <span>
  134. <i class="icon-dot" style="color: #9fe6b8;"></i>
  135. 报名总人数
  136. </span>
  137. </div>
  138. </div>
  139. </div>
  140. </div>
  141. <!--点位-->
  142. <div class="point panel">
  143. <div class="inner">
  144. <h3>考生年龄分布</h3>
  145. <div class="chart">
  146. <div class="pie age recruit_age"></div>
  147. <div class="data">
  148. <div class="item">
  149. <h4 class="age-gt35"></h4>
  150. <span>
  151. <i class="icon-dot" style="color: #ed3f35"></i>
  152. 35岁及以下
  153. </span>
  154. </div>
  155. <div class="item">
  156. <h4 class="age-lt35"></h4>
  157. <span>
  158. <i class="icon-dot" style="color: #eacf19"></i>
  159. 35岁以上
  160. </span>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165. </div>
  166. <!--点位-->
  167. <div class="point panel">
  168. <div class="inner">
  169. <h3>考生学历分布</h3>
  170. <div class="chart">
  171. <div class="pie edu recruit_education"></div>
  172. <div class="data">
  173. <div class="item">
  174. <h4 class="edu-unknown"></h4>
  175. <span>
  176. <i class="icon-dot" style="color: #ed3f35"></i>
  177. 未知学历
  178. </span>
  179. </div>
  180. <div class="item">
  181. <h4 class="edu-total"></h4>
  182. <span>
  183. <i class="icon-dot" style="color: #eacf19"></i>
  184. 学历统计
  185. </span>
  186. </div>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </body>
  194. <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  195. <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  196. <script src="./js/index.js"></script>
  197. </html>