recruitment-prototype.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>招聘模块原型</title>
  7. <style>
  8. /* CSS变量和基础样式 */
  9. :root {
  10. /* Art Design Pro 颜色变量 */
  11. --art-primary: 0, 58, 255;
  12. --art-success: 0, 167, 58;
  13. --art-warning: 142, 91, 0;
  14. --art-danger: 255, 77, 79;
  15. --art-info: 0, 75, 178;
  16. --art-error: 250, 137, 107;
  17. --art-bg-primary: 236, 242, 255;
  18. --art-bg-secondary: 232, 247, 255;
  19. --art-bg-success: 230, 255, 250;
  20. --art-bg-error: 253, 237, 232;
  21. --art-border-color: #eaebf1;
  22. --art-root-card-border-color: #f1f1f4;
  23. --art-main-bg-color: #ffffff;
  24. --art-bg-color: #fafbfc;
  25. --art-text-gray-600: #333333;
  26. --art-text-gray-700: #000000;
  27. --art-gray-100: #f9f9f9;
  28. --art-gray-200: #f1f1f4;
  29. --border-radius-md: 8px;
  30. --border-radius-lg: 12px;
  31. --art-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
  32. --art-root-card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
  33. --space-sm: 8px;
  34. --space-md: 12px;
  35. --space-lg: 16px;
  36. --space-xl: 20px;
  37. --space-2xl: 24px;
  38. }
  39. * {
  40. margin: 0;
  41. padding: 0;
  42. box-sizing: border-box;
  43. }
  44. body {
  45. font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  46. line-height: 1.6;
  47. color: var(--art-text-gray-700, #000000);
  48. background-color: var(--art-bg-color, #fafbfc);
  49. }
  50. .container {
  51. max-width: 1200px;
  52. margin: 0 auto;
  53. padding: var(--space-lg);
  54. }
  55. .p-2 {
  56. padding: var(--space-md);
  57. }
  58. .page-container {
  59. background-color: var(--art-bg-color);
  60. min-height: 100vh;
  61. }
  62. header {
  63. background-color: rgb(var(--art-primary));
  64. color: white;
  65. padding: var(--space-md) 0;
  66. position: relative;
  67. box-shadow: var(--art-box-shadow-sm);
  68. }
  69. .header-content {
  70. display: flex;
  71. justify-content: space-between;
  72. align-items: center;
  73. max-width: 1200px;
  74. margin: 0 auto;
  75. padding: 0 var(--space-lg);
  76. }
  77. nav ul {
  78. display: flex;
  79. list-style: none;
  80. }
  81. nav li {
  82. margin-left: var(--space-xl);
  83. }
  84. nav a {
  85. color: white;
  86. text-decoration: none;
  87. font-size: 14px;
  88. }
  89. h1 {
  90. margin-bottom: var(--space-lg);
  91. color: var(--art-text-gray-700);
  92. font-size: 18px;
  93. font-weight: 500;
  94. }
  95. h2 {
  96. font-size: 16px;
  97. margin-bottom: var(--space-md);
  98. font-weight: 500;
  99. }
  100. .tab-container {
  101. margin-bottom: var(--space-xl);
  102. }
  103. .tabs {
  104. display: flex;
  105. border-bottom: 1px solid var(--art-border-color);
  106. margin-bottom: var(--space-lg);
  107. }
  108. .tab-btn {
  109. padding: 10px 20px;
  110. background: none;
  111. border: none;
  112. cursor: pointer;
  113. font-size: 14px;
  114. }
  115. .tab-btn.active {
  116. border-bottom: 3px solid rgb(var(--art-primary));
  117. color: rgb(var(--art-primary));
  118. font-weight: bold;
  119. }
  120. .tab-content {
  121. display: none;
  122. }
  123. .tab-content.active {
  124. display: block;
  125. }
  126. .el-card {
  127. background-color: var(--art-main-bg-color);
  128. border-radius: var(--border-radius-lg);
  129. border: 1px solid var(--art-root-card-border-color);
  130. box-shadow: var(--art-root-card-box-shadow);
  131. margin-bottom: var(--space-lg);
  132. }
  133. .el-card.shadow-hover:hover {
  134. box-shadow: var(--art-box-shadow-sm);
  135. }
  136. .el-card.shadow-never {
  137. box-shadow: none;
  138. }
  139. .mb-10px {
  140. margin-bottom: 10px;
  141. }
  142. .el-row {
  143. display: flex;
  144. flex-wrap: wrap;
  145. margin: 0 -10px;
  146. }
  147. .el-col {
  148. padding: 0 10px;
  149. margin-bottom: var(--space-md);
  150. }
  151. .el-col-6 {
  152. width: 25%;
  153. }
  154. .el-col-8 {
  155. width: 33.33%;
  156. }
  157. .el-col-12 {
  158. width: 50%;
  159. }
  160. .el-col-24 {
  161. width: 100%;
  162. }
  163. .el-form-item {
  164. margin-bottom: var(--space-lg);
  165. }
  166. .el-form-item label {
  167. display: block;
  168. margin-bottom: 8px;
  169. font-size: 14px;
  170. font-weight: normal;
  171. }
  172. .search-btn-container {
  173. display: flex;
  174. justify-content: center;
  175. padding-top: var(--space-md);
  176. }
  177. input, select, textarea {
  178. width: 100%;
  179. padding: 8px 12px;
  180. border: 1px solid var(--art-border-color);
  181. border-radius: var(--border-radius-md);
  182. font-size: 14px;
  183. background-color: var(--art-main-bg-color);
  184. color: var(--art-text-gray-600);
  185. }
  186. input:focus, select:focus, textarea:focus {
  187. outline: none;
  188. border-color: rgb(var(--art-primary));
  189. }
  190. textarea {
  191. height: 120px;
  192. }
  193. .button-card {
  194. margin-bottom: var(--space-md);
  195. }
  196. .mb8 {
  197. margin-bottom: 8px;
  198. }
  199. .btn, .el-button {
  200. display: inline-block;
  201. padding: 8px 16px;
  202. background-color: rgb(var(--art-primary));
  203. color: white;
  204. text-decoration: none;
  205. border-radius: var(--border-radius-md);
  206. text-align: center;
  207. cursor: pointer;
  208. border: none;
  209. font-size: 14px;
  210. transition: background-color 0.3s;
  211. }
  212. .btn:hover, .el-button:hover {
  213. opacity: 0.9;
  214. }
  215. .btn-outline, .el-button.plain {
  216. background-color: transparent;
  217. color: rgb(var(--art-primary));
  218. border: 1px solid rgb(var(--art-primary));
  219. }
  220. .btn-success, .el-button.success {
  221. background-color: rgb(var(--art-success));
  222. }
  223. .btn-danger, .el-button.danger {
  224. background-color: rgb(var(--art-danger));
  225. }
  226. .btn-block {
  227. display: block;
  228. width: 100%;
  229. }
  230. .search-bar {
  231. display: flex;
  232. margin-bottom: var(--space-lg);
  233. }
  234. .search-bar input {
  235. flex-grow: 1;
  236. border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
  237. border-right: none;
  238. }
  239. .search-bar button {
  240. padding: 0 var(--space-lg);
  241. background-color: rgb(var(--art-primary));
  242. color: white;
  243. border: none;
  244. border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  245. cursor: pointer;
  246. }
  247. .filter-section {
  248. background-color: var(--art-main-bg-color);
  249. padding: var(--space-lg);
  250. margin-bottom: var(--space-lg);
  251. border-radius: var(--border-radius-lg);
  252. box-shadow: var(--art-root-card-box-shadow);
  253. }
  254. .filter-row {
  255. display: flex;
  256. flex-wrap: wrap;
  257. margin-bottom: 10px;
  258. }
  259. .filter-label {
  260. width: 80px;
  261. line-height: 32px;
  262. font-size: 14px;
  263. }
  264. .filter-options {
  265. display: flex;
  266. flex-wrap: wrap;
  267. flex: 1;
  268. }
  269. .filter-option {
  270. margin-right: 15px;
  271. margin-bottom: 10px;
  272. padding: 6px 0;
  273. cursor: pointer;
  274. font-size: 14px;
  275. }
  276. .filter-option.active {
  277. color: rgb(var(--art-primary));
  278. font-weight: bold;
  279. }
  280. .job-list {
  281. display: grid;
  282. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  283. gap: var(--space-lg);
  284. }
  285. .job-card {
  286. background-color: var(--art-main-bg-color);
  287. border-radius: var(--border-radius-lg);
  288. padding: var(--space-lg);
  289. border: 1px solid var(--art-root-card-border-color);
  290. box-shadow: var(--art-root-card-box-shadow);
  291. transition: transform 0.3s, box-shadow 0.3s;
  292. }
  293. .job-card:hover {
  294. transform: translateY(-5px);
  295. box-shadow: var(--art-box-shadow-sm);
  296. }
  297. .job-title {
  298. font-size: 16px;
  299. font-weight: 500;
  300. color: rgb(var(--art-primary));
  301. margin-bottom: 10px;
  302. }
  303. .job-info {
  304. margin-bottom: 15px;
  305. color: #666;
  306. }
  307. .job-info span {
  308. margin-right: 15px;
  309. display: inline-flex;
  310. align-items: center;
  311. font-size: 13px;
  312. }
  313. .job-desc {
  314. margin-bottom: 15px;
  315. font-size: 14px;
  316. color: var(--art-text-gray-600);
  317. display: -webkit-box;
  318. -webkit-line-clamp: 2;
  319. -webkit-box-orient: vertical;
  320. overflow: hidden;
  321. }
  322. .job-detail {
  323. background-color: var(--art-main-bg-color);
  324. border-radius: var(--border-radius-lg);
  325. padding: var(--space-xl);
  326. border: 1px solid var(--art-root-card-border-color);
  327. box-shadow: var(--art-root-card-box-shadow);
  328. }
  329. .back-link {
  330. display: inline-flex;
  331. align-items: center;
  332. color: rgb(var(--art-primary));
  333. text-decoration: none;
  334. margin-bottom: var(--space-lg);
  335. font-size: 14px;
  336. }
  337. .job-header {
  338. margin-bottom: var(--space-xl);
  339. padding-bottom: var(--space-lg);
  340. border-bottom: 1px solid var(--art-border-color);
  341. }
  342. .job-actions {
  343. margin-top: var(--space-lg);
  344. display: flex;
  345. justify-content: center;
  346. }
  347. .form-container {
  348. max-width: 800px;
  349. margin: 0 auto;
  350. background-color: var(--art-main-bg-color);
  351. border-radius: var(--border-radius-lg);
  352. padding: var(--space-xl);
  353. border: 1px solid var(--art-root-card-border-color);
  354. box-shadow: var(--art-root-card-box-shadow);
  355. }
  356. .step-indicator {
  357. display: flex;
  358. margin-bottom: 30px;
  359. }
  360. .step {
  361. flex: 1;
  362. text-align: center;
  363. padding-bottom: 10px;
  364. position: relative;
  365. color: #999;
  366. font-size: 14px;
  367. }
  368. .step.active {
  369. color: rgb(var(--art-primary));
  370. font-weight: bold;
  371. }
  372. .step:not(:last-child)::after {
  373. content: "";
  374. position: absolute;
  375. height: 2px;
  376. width: 100%;
  377. background-color: var(--art-border-color);
  378. top: 10px;
  379. left: 50%;
  380. z-index: -1;
  381. }
  382. .step-number {
  383. display: inline-block;
  384. width: 24px;
  385. height: 24px;
  386. border-radius: 50%;
  387. background-color: var(--art-gray-200);
  388. color: #999;
  389. line-height: 24px;
  390. margin-bottom: 5px;
  391. font-size: 12px;
  392. }
  393. .step.active .step-number {
  394. background-color: rgb(var(--art-primary));
  395. color: white;
  396. }
  397. .form-group {
  398. margin-bottom: var(--space-lg);
  399. }
  400. label {
  401. display: block;
  402. margin-bottom: 5px;
  403. font-size: 14px;
  404. }
  405. .form-actions {
  406. display: flex;
  407. justify-content: space-between;
  408. margin-top: 30px;
  409. }
  410. table {
  411. width: 100%;
  412. border-collapse: collapse;
  413. font-size: 14px;
  414. }
  415. th, td {
  416. padding: 12px 15px;
  417. text-align: left;
  418. border-bottom: 1px solid var(--art-border-color);
  419. }
  420. th {
  421. background-color: var(--art-gray-100);
  422. color: var(--art-text-gray-700);
  423. font-weight: 500;
  424. }
  425. .badge {
  426. display: inline-block;
  427. padding: 2px 8px;
  428. border-radius: 20px;
  429. font-size: 12px;
  430. font-weight: bold;
  431. }
  432. .badge-active {
  433. background-color: rgba(var(--art-bg-success), 1);
  434. color: rgb(var(--art-success));
  435. }
  436. .badge-inactive {
  437. background-color: var(--art-gray-200);
  438. color: #666;
  439. }
  440. .pagination-container {
  441. display: flex;
  442. justify-content: flex-end;
  443. margin-top: var(--space-lg);
  444. }
  445. @media (max-width: 768px) {
  446. .el-col-6, .el-col-8 {
  447. width: 100%;
  448. }
  449. .job-list {
  450. grid-template-columns: 1fr;
  451. }
  452. .filter-row {
  453. flex-direction: column;
  454. }
  455. .filter-label {
  456. width: 100%;
  457. margin-bottom: 5px;
  458. }
  459. .form-actions {
  460. flex-direction: column;
  461. }
  462. .form-actions .btn {
  463. margin-bottom: 10px;
  464. }
  465. .step-indicator {
  466. flex-direction: column;
  467. }
  468. .step {
  469. margin-bottom: 10px;
  470. }
  471. .step:not(:last-child)::after {
  472. display: none;
  473. }
  474. }
  475. </style>
  476. </head>
  477. <body>
  478. <div class="p-2 page-container">
  479. <header>
  480. <div class="header-content">
  481. <div class="logo">校园招聘系统</div>
  482. <nav>
  483. <ul>
  484. <li><a href="#" onclick="showTab('jobs-list')">招聘公告</a></li>
  485. <li><a href="#" onclick="showTab('job-detail')">职位详情</a></li>
  486. <li><a href="#" onclick="showTab('application-form')">申请职位</a></li>
  487. <li><a href="#" onclick="showTab('hr-admin')">HR管理</a></li>
  488. </ul>
  489. </nav>
  490. </div>
  491. </header>
  492. <div class="container">
  493. <div class="tab-container">
  494. <div id="jobs-list" class="tab-content active">
  495. <h1>招聘公告</h1>
  496. <div class="el-card shadow-hover">
  497. <div style="padding: var(--space-lg);">
  498. <form class="el-form">
  499. <div class="el-row" style="margin: 0 -10px;">
  500. <div class="el-col el-col-6" style="padding: 0 10px;">
  501. <div class="el-form-item">
  502. <label>职位名称</label>
  503. <input type="text" placeholder="请输入职位名称">
  504. </div>
  505. </div>
  506. <div class="el-col el-col-6" style="padding: 0 10px;">
  507. <div class="el-form-item">
  508. <label>部门</label>
  509. <select>
  510. <option value="">全部</option>
  511. <option value="teaching">教学</option>
  512. <option value="admin">行政</option>
  513. <option value="research">科研</option>
  514. </select>
  515. </div>
  516. </div>
  517. <div class="el-col el-col-6" style="padding: 0 10px;">
  518. <div class="el-form-item">
  519. <label>工作地点</label>
  520. <input type="text" placeholder="请输入工作地点">
  521. </div>
  522. </div>
  523. </div>
  524. <div class="search-btn-container">
  525. <button class="btn" style="margin-right: 10px;">搜索</button>
  526. <button class="btn btn-outline">重置</button>
  527. </div>
  528. </form>
  529. </div>
  530. </div>
  531. <div class="job-list">
  532. <div class="job-card">
  533. <div class="job-title">高级Java开发工程师</div>
  534. <div class="job-info">
  535. <span>教学部门</span>
  536. <span>15k-25k</span>
  537. <span>杭州</span>
  538. </div>
  539. <div class="job-desc">
  540. 负责校园教学管理系统的开发和维护,参与核心模块设计与实现,优化系统性能...
  541. </div>
  542. <a href="#" class="btn btn-block" onclick="showTab('job-detail')">查看详情</a>
  543. </div>
  544. <div class="job-card">
  545. <div class="job-title">前端工程师</div>
  546. <div class="job-info">
  547. <span>教学部门</span>
  548. <span>12k-18k</span>
  549. <span>杭州</span>
  550. </div>
  551. <div class="job-desc">
  552. 负责校园教学管理系统前端开发,使用Vue3+TypeScript技术栈,参与UI设计与实现...
  553. </div>
  554. <a href="#" class="btn btn-block" onclick="showTab('job-detail')">查看详情</a>
  555. </div>
  556. <div class="job-card">
  557. <div class="job-title">行政助理</div>
  558. <div class="job-info">
  559. <span>行政部门</span>
  560. <span>5k-8k</span>
  561. <span>杭州</span>
  562. </div>
  563. <div class="job-desc">
  564. 协助部门主管处理日常行政事务,包括文件整理、会议安排、接待来访等工作...
  565. </div>
  566. <a href="#" class="btn btn-block" onclick="showTab('job-detail')">查看详情</a>
  567. </div>
  568. <div class="job-card">
  569. <div class="job-title">科研助理</div>
  570. <div class="job-info">
  571. <span>科研部门</span>
  572. <span>8k-12k</span>
  573. <span>杭州</span>
  574. </div>
  575. <div class="job-desc">
  576. 协助教授进行科研项目的资料收集、数据整理与分析,参与学术论文撰写...
  577. </div>
  578. <a href="#" class="btn btn-block" onclick="showTab('job-detail')">查看详情</a>
  579. </div>
  580. </div>
  581. </div>
  582. <div id="job-detail" class="tab-content">
  583. <a href="#" class="back-link" onclick="showTab('jobs-list')">← 返回职位列表</a>
  584. <div class="job-detail">
  585. <div class="job-header">
  586. <h1>高级Java开发工程师</h1>
  587. <div class="job-info">
  588. <span>教学部门</span>
  589. <span>15k-25k</span>
  590. <span>杭州</span>
  591. <span>发布日期:2025-07-01</span>
  592. </div>
  593. </div>
  594. <h2>职位描述</h2>
  595. <p>负责校园教学管理系统的开发和维护,参与核心模块设计与实现,优化系统性能,解决技术难题。</p>
  596. <p>作为团队核心成员,参与技术方案评审,指导初级开发人员,确保项目按时高质量交付。</p>
  597. <h2>岗位要求</h2>
  598. <ul>
  599. <li>计算机相关专业本科及以上学历,3年以上Java开发经验</li>
  600. <li>精通Java核心技术,熟悉Spring Boot、MyBatis等主流框架</li>
  601. <li>熟练掌握MySQL数据库设计与优化</li>
  602. <li>有教育行业相关系统开发经验者优先</li>
  603. <li>良好的沟通能力和团队协作精神</li>
  604. </ul>
  605. <div class="job-actions">
  606. <a href="#" class="btn" onclick="showTab('application-form')">立即申请</a>
  607. </div>
  608. </div>
  609. </div>
  610. <div id="application-form" class="tab-content">
  611. <h1>申请职位:高级Java开发工程师</h1>
  612. <div class="form-container">
  613. <div class="step-indicator">
  614. <div class="step active">
  615. <div class="step-number">1</div>
  616. <div>个人信息</div>
  617. </div>
  618. <div class="step">
  619. <div class="step-number">2</div>
  620. <div>教育经历</div>
  621. </div>
  622. <div class="step">
  623. <div class="step-number">3</div>
  624. <div>工作经历</div>
  625. </div>
  626. <div class="step">
  627. <div class="step-number">4</div>
  628. <div>提交申请</div>
  629. </div>
  630. </div>
  631. <div class="step-content">
  632. <!-- 步骤1:个人信息 -->
  633. <div>
  634. <div class="form-group">
  635. <label for="name">姓名</label>
  636. <input type="text" id="name" placeholder="请输入姓名">
  637. </div>
  638. <div class="form-group">
  639. <label for="phone">手机号码</label>
  640. <input type="tel" id="phone" placeholder="请输入手机号码">
  641. </div>
  642. <div class="form-group">
  643. <label for="email">电子邮箱</label>
  644. <input type="email" id="email" placeholder="请输入电子邮箱">
  645. </div>
  646. <div class="form-group">
  647. <label for="resume">个人简历</label>
  648. <input type="file" id="resume">
  649. <small style="color: #666; font-size: 12px;">支持PDF、Word格式,大小不超过5MB</small>
  650. </div>
  651. <div class="form-group">
  652. <label for="self-intro">自我介绍</label>
  653. <textarea id="self-intro" placeholder="请简要介绍自己的情况和求职意向"></textarea>
  654. </div>
  655. <div class="form-actions">
  656. <button class="btn btn-outline" onclick="showTab('job-detail')">取消</button>
  657. <button class="btn">下一步</button>
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. </div>
  663. <div id="hr-admin" class="tab-content">
  664. <h1>HR管理后台</h1>
  665. <div class="el-card shadow-never">
  666. <div style="padding: var(--space-md);">
  667. <div style="margin-bottom: var(--space-md); display: flex; justify-content: space-between; align-items: center;">
  668. <div>
  669. <button class="btn btn-success" style="margin-right: 8px;">发布新职位</button>
  670. <button class="btn">导出</button>
  671. </div>
  672. <div class="search-bar" style="width: 300px; margin-bottom: 0;">
  673. <input type="text" placeholder="搜索职位名称...">
  674. <button>搜索</button>
  675. </div>
  676. </div>
  677. <table>
  678. <thead>
  679. <tr>
  680. <th width="50">
  681. <input type="checkbox" style="width: auto;">
  682. </th>
  683. <th>职位名称</th>
  684. <th>部门</th>
  685. <th>工作地点</th>
  686. <th>发布日期</th>
  687. <th>状态</th>
  688. <th>申请人数</th>
  689. <th>操作</th>
  690. </tr>
  691. </thead>
  692. <tbody>
  693. <tr>
  694. <td><input type="checkbox" style="width: auto;"></td>
  695. <td>高级Java开发工程师</td>
  696. <td>教学部门</td>
  697. <td>杭州</td>
  698. <td>2025-07-01</td>
  699. <td><span class="badge badge-active">招聘中</span></td>
  700. <td>8</td>
  701. <td>
  702. <button class="btn btn-outline" style="padding: 4px 8px; margin-right: 4px;">编辑</button>
  703. <button class="btn btn-outline" style="padding: 4px 8px;">下线</button>
  704. </td>
  705. </tr>
  706. <tr>
  707. <td><input type="checkbox" style="width: auto;"></td>
  708. <td>前端工程师</td>
  709. <td>教学部门</td>
  710. <td>12k-18k</td>
  711. <td>杭州</td>
  712. <td>2025-07-01</td>
  713. <td><span class="badge badge-active">招聘中</span></td>
  714. <td>5</td>
  715. <td>
  716. <button class="btn btn-outline" style="padding: 4px 8px; margin-right: 4px;">编辑</button>
  717. <button class="btn btn-outline" style="padding: 4px 8px;">下线</button>
  718. </td>
  719. </tr>
  720. <tr>
  721. <td><input type="checkbox" style="width: auto;"></td>
  722. <td>行政助理</td>
  723. <td>行政部门</td>
  724. <td>5k-8k</td>
  725. <td>杭州</td>
  726. <td>2025-06-25</td>
  727. <td><span class="badge badge-active">招聘中</span></td>
  728. <td>12</td>
  729. <td>
  730. <button class="btn btn-outline" style="padding: 4px 8px; margin-right: 4px;">编辑</button>
  731. <button class="btn btn-outline" style="padding: 4px 8px;">下线</button>
  732. </td>
  733. </tr>
  734. <tr>
  735. <td><input type="checkbox" style="width: auto;"></td>
  736. <td>UI设计师</td>
  737. <td>教学部门</td>
  738. <td>10k-15k</td>
  739. <td>杭州</td>
  740. <td>2025-06-20</td>
  741. <td><span class="badge badge-inactive">已结束</span></td>
  742. <td>7</td>
  743. <td>
  744. <button class="btn btn-outline" style="padding: 4px 8px;">查看</button>
  745. </td>
  746. </tr>
  747. </tbody>
  748. </table>
  749. <div class="pagination-container">
  750. <div>
  751. <button class="btn btn-outline" style="padding: 4px 8px; margin: 0 2px;">上一页</button>
  752. <button class="btn" style="padding: 4px 8px; margin: 0 2px;">1</button>
  753. <button class="btn btn-outline" style="padding: 4px 8px; margin: 0 2px;">2</button>
  754. <button class="btn btn-outline" style="padding: 4px 8px; margin: 0 2px;">3</button>
  755. <button class="btn btn-outline" style="padding: 4px 8px; margin: 0 2px;">下一页</button>
  756. </div>
  757. </div>
  758. </div>
  759. </div>
  760. <!-- HR新增职位表单 -->
  761. <div class="form-container" style="display: none; margin-top: 30px;">
  762. <h2>发布新职位</h2>
  763. <div class="form-group">
  764. <label for="job-title">职位名称</label>
  765. <input type="text" id="job-title" placeholder="请输入职位名称">
  766. </div>
  767. <div class="form-group">
  768. <label for="department">部门</label>
  769. <select id="department">
  770. <option value="">请选择部门</option>
  771. <option value="teaching">教学</option>
  772. <option value="admin">行政</option>
  773. <option value="research">科研</option>
  774. </select>
  775. </div>
  776. <div class="form-group">
  777. <label for="location">工作地点</label>
  778. <input type="text" id="location" placeholder="请输入工作地点">
  779. </div>
  780. <div class="form-group">
  781. <label for="description">职位描述</label>
  782. <textarea id="description" placeholder="请详细描述职位职责与工作内容"></textarea>
  783. </div>
  784. <div class="form-group">
  785. <label for="requirements">任职要求</label>
  786. <textarea id="requirements" placeholder="请详细描述职位所需技能与经验"></textarea>
  787. </div>
  788. <div class="form-actions">
  789. <button class="btn btn-outline">取消</button>
  790. <button class="btn">发布职位</button>
  791. </div>
  792. </div>
  793. </div>
  794. </div>
  795. </div>
  796. </div>
  797. <script>
  798. function showTab(tabId) {
  799. // 隐藏所有tab内容
  800. const tabContents = document.querySelectorAll('.tab-content');
  801. tabContents.forEach(tab => tab.classList.remove('active'));
  802. // 显示选中的tab
  803. document.getElementById(tabId).classList.add('active');
  804. return false;
  805. }
  806. </script>
  807. </body>
  808. </html>