form.html 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>表单</title>
  6. <link rel="stylesheet" href="css/base.css">
  7. <link rel="stylesheet" href="css/registe.css">
  8. <style type="text/css">
  9. .table_p{line-height: 28px;margin:0 4.5% 10px 20px;border-bottom: 1px #d0e6ec solid;position: relative}
  10. .table_p span{border-bottom: 3px #42cdec solid;display: inline-block;position: absolute;bottom: -1px;font-weight: bold;font-size: 14px}
  11. .but_p button{width: 80px}
  12. </style>
  13. </head>
  14. <body style="background-color: #e6ecf5;min-width: 1100px">
  15. <main class="main">
  16. <!--头部-->
  17. <header class="heared">
  18. <span class="head-logo">前后台通用模板</span>
  19. <ul class="head-ul"><li><a href="home.html" class="active-a">首页</a> </li>
  20. <li><a href="videlctr.html">视频监控</a> </li>
  21. <li><a href="map.html">地图管理</a> </li>
  22. <li><a href="static.html">统计分析</a> </li>
  23. <li><a href="form.html">表单信息</a> </li>
  24. <li><a href="user.html">用户管理</a></li>
  25. <li><a href="part.html">部门管理</a></li>
  26. <li><a href="date.html">日程管理</a></li>
  27. </ul>
  28. <div class="head-right"><span id="time"></span><span>Admin</span></div>
  29. </header>
  30. <!--身体-->
  31. <section class="section" >
  32. <div class="book_con01">
  33. <h1 class="book_h01">工单登记</h1>
  34. <form>
  35. <div class="top">
  36. <div>
  37. <div class="top_out">
  38. <table class="table">
  39. <tbody>
  40. <p class="table_p"><span>来电信息</span></p>
  41. <tr>
  42. <td>来电号码<span></span></td>
  43. <td>
  44. <input type="text">
  45. </td>
  46. <td>坐席工号<span></span></td>
  47. <td>
  48. <input type="text">
  49. </td>
  50. <td>坐席电话<span></span></td>
  51. <td>
  52. <input type="text">
  53. </td>
  54. </tr>
  55. <tr>
  56. <td>来电姓名<span></span></td>
  57. <td>
  58. <input type="text">
  59. </td>
  60. <td>客户性别<span></span></td>
  61. <td>
  62. <select >
  63. <option>男</option>
  64. <option>女</option>
  65. </select>
  66. </td>
  67. <td>客户年龄<span></span></td>
  68. <td>
  69. <input type="text">
  70. </td>
  71. </tr>
  72. </tbody>
  73. </table>
  74. <table class="table">
  75. <tbody>
  76. <p class="table_p"><span>案件信息</span></p>
  77. <tr>
  78. <td>案卷编号<span></span></td>
  79. <td>
  80. <input type="text">
  81. </td>
  82. <td>案件来源<span></span></td>
  83. <td>
  84. <select>
  85. <option>--请选择--</option>
  86. </select>
  87. </td>
  88. <td>来电类型<span></span></td>
  89. <td>
  90. <select>
  91. <option>--请选择--</option>
  92. </select>
  93. </td>
  94. </tr>
  95. <tr>
  96. <td>问题大类<span></span></td>
  97. <td>
  98. <select>
  99. <option>--请选择--</option>
  100. </select>
  101. </td>
  102. <td>问题小类<span></span></td>
  103. <td>
  104. <select>
  105. <option>--请选择--</option>
  106. </select>
  107. </td>
  108. <td>处理时限<span></span></td>
  109. <td>
  110. <select>
  111. <option>--请选择--</option>
  112. </select>
  113. </td>
  114. </tr>
  115. <tr>
  116. <td>所属区域<span></span></td>
  117. <td>
  118. <select>
  119. <option>--请选择--</option>
  120. </select>
  121. </td>
  122. <td>所属街道<span></span></td>
  123. <td>
  124. <select>
  125. <option>--请选择--</option>
  126. </select>
  127. </td>
  128. <td>所属社区<span></span></td>
  129. <td>
  130. <select>
  131. <option>--请选择--</option>
  132. </select>
  133. </td>
  134. </tr>
  135. <tr>
  136. <td>案件描述<span></span></td>
  137. <td colspan = "8" style="text-align: left">
  138. <textarea class="form_area" style="height: 80px"></textarea>
  139. </td>
  140. </tr>
  141. <tr>
  142. <td>短信回复<span></span></td>
  143. <td colspan = "8" style="text-align: left">
  144. <textarea class="form_area" style="height: 80px"></textarea>
  145. </td>
  146. </tr>
  147. </tbody>
  148. </table>
  149. </div>
  150. </div>
  151. </div>
  152. <div class=" but_p"><button class="but_save">保存案件</button><button class="but_close">发送短信</button><button class="but_close">打开知识库</button></div>
  153. <div style="clear: both;padding-bottom: 40px"></div>
  154. </form>
  155. </div>
  156. </section>
  157. </main>
  158. <script src="js/jquery.js"></script>
  159. <script>
  160. $(function(){
  161. $(".head-ul li a").click(function(){
  162. $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
  163. $(this).parents('li').find("ul").show();
  164. $(this).parents("li").sibling().find("ul").hide();
  165. })
  166. getTime();
  167. })
  168. // 格式化时间
  169. function getTime(){
  170. var day=new Date();
  171. var year=day.getFullYear();
  172. var moutth=day.getMonth()+1;
  173. var date=day.getDate();
  174. var hour=day.getHours();
  175. var min=day.getMinutes();
  176. var sec=day.getSeconds();
  177. var str=year+'-'+moutth+'-'+date+' '+hour+":"+min+':'+sec;
  178. $("#time").text(str);
  179. }
  180. </script>
  181. </body>
  182. </html>