12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>智能招聘系统</title>
- <!-- 国内CDN引入 -->
- <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
- <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
- <style>
- :root {
- --primary: #2563eb;
- --secondary: #f59e0b;
- --dark: #1e293b;
- --light: #f8fafc;
- --success: #10b981;
- --danger: #ef4444;
- --warning: #f97316;
- }
-
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
- }
-
- body {
- background-color: #f1f5f9;
- color: var(--dark);
- line-height: 1.6;
- }
-
- /* 登录页面样式 */
- .login-container {
- display: flex;
- min-height: 100vh;
- align-items: center;
- justify-content: center;
- background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
- }
-
- .login-box {
- width: 400px;
- background: white;
- border-radius: 12px;
- padding: 40px;
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
- text-align: center;
- }
-
- .login-logo {
- font-size: 28px;
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 10px;
- }
-
- .login-tabs {
- display: flex;
- margin-bottom: 20px;
- border-bottom: 1px solid #e2e8f0;
- }
-
- .login-tab {
- flex: 1;
- padding: 12px;
- cursor: pointer;
- font-weight: 500;
- transition: all 0.2s;
- }
-
- .login-tab.active {
- color: var(--primary);
- border-bottom: 2px solid var(--primary);
- }
-
- .login-form {
- display: none;
- }
-
- .login-form.active {
- display: block;
- }
-
- .form-group {
- margin-bottom: 20px;
- text-align: left;
- }
-
- .form-group label {
- display: block;
- margin-bottom: 8px;
- font-weight: 500;
- }
-
- .form-control {
- width: 100%;
- padding: 12px 16px;
- border: 1px solid #e2e8f0;
- border-radius: 8px;
- font-size: 16px;
- transition: all 0.2s;
- }
-
- .form-control:focus {
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
- outline: none;
- }
-
- .btn {
- padding: 12px;
- border: none;
- border-radius: 8px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .btn-block {
- width: 100%;
- }
-
- .btn-primary {
- background: var(--primary);
- color: white;
- }
-
- .btn-primary:hover {
- background: #1d4ed8;
- }
-
- .btn-secondary {
- background: var(--secondary);
- color: white;
- }
-
- .btn-secondary:hover {
- background: #d97706;
- }
-
- .btn-success {
- background: var(--success);
- color: white;
- }
-
- .btn-success:hover {
- background: #059669;
- }
-
- .btn-danger {
- background: var(--danger);
- color: white;
- }
-
- .btn-danger:hover {
- background: #dc2626;
- }
-
- .login-links {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- }
-
- .login-link {
- color: var(--primary);
- font-size: 14px;
- cursor: pointer;
- }
-
- /* 主界面样式 */
- .container {
- display: flex;
- min-height: 100vh;
- padding: 20px;
- gap: 20px;
- max-width: 1400px;
- margin: 0 auto;
- display: none;
- }
-
- /* 左侧导航 */
- .sidebar {
- width: 240px;
- background: white;
- border-radius: 12px;
- padding: 20px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
- display: flex;
- flex-direction: column;
- }
-
- .logo {
- font-size: 20px;
- font-weight: bold;
- color: var(--primary);
- margin-bottom: 30px;
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .nav-menu {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- .nav-item {
- padding: 12px 16px;
- border-radius: 8px;
- display: flex;
- align-items: center;
- gap: 12px;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .nav-item:hover {
- background-color: #f1f5f9;
- }
-
- .nav-item.active {
- background-color: #eff6ff;
- color: var(--primary);
- font-weight: 500;
- }
-
- .nav-item i {
- width: 20px;
- text-align: center;
- }
-
- /* 主内容区 */
- .main-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- gap: 20px;
- }
-
- /* 顶部信息栏 */
- .header {
- background: white;
- border-radius: 12px;
- padding: 18px 24px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
- }
-
- .user-info {
- display: flex;
- align-items: center;
- gap: 12px;
- }
-
- .avatar {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- background-color: #e0f2fe;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary);
- font-weight: bold;
- cursor: pointer;
- }
-
- .user-dropdown {
- position: relative;
- }
-
- .dropdown-menu {
- position: absolute;
- top: 50px;
- right: 0;
- width: 200px;
- background: white;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- padding: 10px 0;
- z-index: 100;
- display: none;
- }
-
- .dropdown-item {
- padding: 10px 16px;
- cursor: pointer;
- transition: all 0.2s;
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .dropdown-item:hover {
- background: #f1f5f9;
- }
-
- .dropdown-divider {
- height: 1px;
- background: #e2e8f0;
- margin: 5px 0;
- }
-
- /* 搜索栏 */
- .search-bar {
- display: flex;
- gap: 10px;
- align-items: center;
- flex: 1;
- max-width: 500px;
- }
-
- .search-input {
- flex: 1;
- padding: 10px 16px;
- border: 1px solid #e2e8f0;
- border-radius: 8px;
- font-size: 14px;
- }
-
- .search-btn {
- padding: 10px 16px;
- background: var(--primary);
- color: white;
- border: none;
- border-radius: 8px;
- cursor: pointer;
- }
-
- .search-advanced {
- color: var(--primary);
- font-size: 14px;
- cursor: pointer;
- white-space: nowrap;
- }
-
- .search-filters {
- display: none;
- background: white;
- border-radius: 8px;
- padding: 16px;
- margin-top: 10px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
- }
-
- .search-filters.active {
- display: block;
- }
-
- .filter-row {
- display: flex;
- gap: 16px;
- margin-bottom: 16px;
- }
-
- .filter-group {
- flex: 1;
- }
-
- .filter-group label {
- display: block;
- margin-bottom: 8px;
- font-size: 14px;
- color: #64748b;
- }
-
- .filter-select {
- width: 100%;
- padding: 8px 12px;
- border: 1px solid #e2e8f0;
- border-radius: 6px;
- font-size: 14px;
- }
-
- .filter-actions {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
- }
-
- /* 内容区域样式 */
- .content-area {
- flex: 1;
- background: white;
- border-radius: 12px;
- padding: 24px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
- overflow-y: auto;
- }
-
- .content-title {
- font-size: 20px;
- font-weight: 600;
- margin-bottom: 24px;
- color: var(--primary);
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- /* 工作/简历卡片样式 */
- .card-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
- gap: 20px;
- margin-top: 20px;
- }
-
- .card {
- background: white;
- border-radius: 8px;
- padding: 16px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
- border: 1px solid #e2e8f0;
- transition: all 0.2s;
- cursor: pointer;
- }
-
- .card:hover {
- transform: translateY(-4px);
- box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
- }
-
- .card-header {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-bottom: 12px;
- }
-
- .card-avatar {
- width: 48px;
- height: 48px;
- border-radius: 50%;
- background-color: #e0f2fe;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary);
- font-weight: bold;
- }
-
- .card-title {
- font-weight: 600;
- margin-bottom: 4px;
- }
-
- .card-subtitle {
- font-size: 14px;
- color: #64748b;
- }
-
- .card-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin-top: 12px;
- }
-
- .card-tag {
- background: #f1f5f9;
- padding: 4px 10px;
- border-radius: 12px;
- font-size: 12px;
- color: #64748b;
- }
-
- .card-footer {
- margin-top: 16px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .card-match {
- background: #dcfce7;
- color: #166534;
- padding: 4px 10px;
- border-radius: 12px;
- font-size: 12px;
- }
-
- .card-btn {
- padding: 6px 12px;
- background: var(--primary);
- color: white;
- border: none;
- border-radius: 6px;
- font-size: 12px;
- cursor: pointer;
- }
-
- /* 简历分析表单 */
- .resume-form {
- max-width: 800px;
- margin: 0 auto;
- }
-
- .form-section {
- margin-bottom: 24px;
- padding: 16px;
- background: #f8fafc;
- border-radius: 8px;
- }
-
- .form-section-title {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 16px;
- color: var(--primary);
- display: flex;
- align-items: center;
- gap: 8px;
- }
-
- .form-row {
- display: flex;
- gap: 16px;
- margin-bottom: 16px;
- }
-
- .form-col {
- flex: 1;
- }
-
- textarea.form-control {
- min-height: 100px;
- resize: vertical;
- }
-
- .form-actions {
- display: flex;
- justify-content: flex-end;
- gap: 12px;
- margin-top: 24px;
- }
-
- /* 职业匹配结果 */
- .match-result {
- margin-top: 24px;
- padding: 16px;
- background: #f8fafc;
- border-radius: 8px;
- }
-
- .match-title {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 16px;
- color: var(--primary);
- }
-
- .match-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 12px 0;
- border-bottom: 1px solid #e2e8f0;
- }
-
- .match-item:last-child {
- border-bottom: none;
- }
-
- .match-job {
- font-weight: 500;
- }
-
- .match-score {
- font-weight: 600;
- color: var(--primary);
- }
-
- /* 个人中心样式 */
- .profile-container {
- display: flex;
- gap: 24px;
- }
-
- .profile-sidebar {
- width: 240px;
- background: #f8fafc;
- border-radius: 8px;
- padding: 16px;
- }
-
- .profile-menu {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- .profile-menu-item {
- padding: 12px 16px;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .profile-menu-item:hover {
- background: #e2e8f0;
- }
-
- .profile-menu-item.active {
- background: #e0f2fe;
- color: var(--primary);
- font-weight: 500;
- }
-
- .profile-content {
- flex: 1;
- background: #f8fafc;
- border-radius: 8px;
- padding: 24px;
- }
-
- .profile-section {
- display: none;
- }
-
- .profile-section.active {
- display: block;
- }
-
- .profile-header {
- display: flex;
- align-items: center;
- gap: 20px;
- margin-bottom: 24px;
- }
-
- .profile-avatar {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- background-color: #e0f2fe;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--primary);
- font-size: 32px;
- font-weight: bold;
- }
-
- .profile-info h2 {
- margin-bottom: 8px;
- }
-
- .profile-info p {
- color: #64748b;
- }
-
- .profile-form {
- max-width: 600px;
- }
-
- /* 设置页面样式 */
- .settings-container {
- display: flex;
- gap: 24px;
- }
-
- .settings-sidebar {
- width: 240px;
- background: #f8fafc;
- border-radius: 8px;
- padding: 16px;
- }
-
- .settings-menu {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- .settings-menu-item {
- padding: 12px 16px;
- border-radius: 6px;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .settings-menu-item:hover {
- background: #e2e8f0;
- }
-
- .settings-menu-item.active {
- background: #e0f2fe;
- color: var(--primary);
- font-weight: 500;
- }
-
- .settings-content {
- flex: 1;
- background: #f8fafc;
- border-radius: 8px;
- padding: 24px;
- }
-
- .settings-section {
- display: none;
- }
-
- .settings-section.active {
- display: block;
- }
-
- .settings-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px 0;
- border-bottom: 1px solid #e2e8f0;
- }
-
- .settings-item:last-child {
- border-bottom: none;
- }
-
- .settings-item-info h3 {
- margin-bottom: 4px;
- }
-
- .settings-item-info p {
- color: #64748b;
- font-size: 14px;
- }
-
- .settings-item-action .switch {
- position: relative;
- display: inline-block;
- width: 50px;
- height: 24px;
- }
-
- .settings-item-action .switch input {
- opacity: 0;
- width: 0;
- height: 0;
- }
-
- .settings-item-action .slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- transition: .4s;
- border-radius: 24px;
- }
-
- .settings-item-action .slider:before {
- position: absolute;
- content: "";
- height: 16px;
- width: 16px;
- left: 4px;
- bottom: 4px;
- background-color: white;
- transition: .4s;
- border-radius: 50%;
- }
-
- .settings-item-action input:checked + .slider {
- background-color: var(--primary);
- }
-
- .settings-item-action input:checked + .slider:before {
- transform: translateX(26px);
- }
-
- /* 图表容器 */
- .chart-container {
- width: 100%;
- height: 400px;
- margin-top: 24px;
- }
-
- /* 模态框样式 */
- .modal-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.5);
- display: none;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- }
- .modal-content {
- background: white;
- padding: 24px;
- border-radius: 12px;
- max-width: 600px;
- width: 90%;
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
- max-height: 90vh;
- overflow-y: auto;
- }
- .modal-title {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 16px;
- display: flex;
- align-items: center;
- gap: 10px;
- }
- .modal-buttons {
- display: flex;
- gap: 12px;
- margin-top: 24px;
- }
- .modal-btn {
- flex: 1;
- padding: 10px;
- border-radius: 8px;
- border: none;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.2s;
- }
- .modal-btn-cancel {
- background: #f1f5f9;
- color: var(--dark);
- }
- .modal-btn-confirm {
- background: var(--success);
- color: white;
- }
- .modal-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- }
-
- /* 日历样式 */
- .calendar {
- width: 100%;
- border-collapse: collapse;
- margin-top: 20px;
- }
-
- .calendar th {
- padding: 12px;
- text-align: center;
- background: #f1f5f9;
- font-weight: 500;
- }
-
- .calendar td {
- padding: 12px;
- height: 100px;
- vertical-align: top;
- border: 1px solid #e2e8f0;
- }
-
- .calendar-day {
- font-weight: 500;
- margin-bottom: 6px;
- }
-
- .calendar-event {
- background: #e0f2fe;
- color: var(--primary);
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
- margin-bottom: 4px;
- cursor: pointer;
- }
-
- /* 搜索历史 */
- .search-history {
- margin-top: 20px;
- }
-
- .history-title {
- font-size: 16px;
- font-weight: 500;
- margin-bottom: 12px;
- color: var(--dark);
- }
-
- .history-tags {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- }
-
- .history-tag {
- background: #f1f5f9;
- padding: 6px 12px;
- border-radius: 16px;
- font-size: 14px;
- cursor: pointer;
- transition: all 0.2s;
- }
-
- .history-tag:hover {
- background: #e2e8f0;
- }
-
- /* 热门搜索 */
- .hot-search {
- margin-top: 24px;
- }
-
- .hot-item {
- display: flex;
- align-items: center;
- padding: 10px 0;
- border-bottom: 1px solid #e2e8f0;
- }
-
- .hot-rank {
- width: 24px;
- height: 24px;
- background: #f1f5f9;
- border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 12px;
- font-size: 14px;
- }
-
- .hot-item:nth-child(1) .hot-rank {
- background: #fee2e2;
- color: #b91c1c;
- }
-
- .hot-item:nth-child(2) .hot-rank {
- background: #ffedd5;
- color: #c2410c;
- }
-
- .hot-item:nth-child(3) .hot-rank {
- background: #fef3c7;
- color: #b45309;
- }
-
- .hot-content {
- flex: 1;
- }
-
- .hot-count {
- color: #64748b;
- font-size: 14px;
- }
-
- /* 响应式设计 */
- @media (max-width: 768px) {
- .login-box {
- width: 90%;
- padding: 30px 20px;
- }
-
- .container {
- flex-direction: column;
- padding: 10px;
- }
-
- .sidebar {
- width: 100%;
- flex-direction: row;
- align-items: center;
- }
-
- .logo {
- margin-bottom: 0;
- margin-right: 30px;
- }
-
- .nav-menu {
- flex-direction: row;
- overflow-x: auto;
- padding-bottom: 10px;
- }
-
- .card-grid {
- grid-template-columns: 1fr;
- }
-
- .form-row {
- flex-direction: column;
- gap: 16px;
- }
-
- .profile-container, .settings-container {
- flex-direction: column;
- }
-
- .profile-sidebar, .settings-sidebar {
- width: 100%;
- }
-
- .profile-header {
- flex-direction: column;
- text-align: center;
- }
-
- .filter-row {
- flex-direction: column;
- gap: 16px;
- }
- }
- </style>
- </head>
- <body>
- <!-- 登录页面 -->
- <div class="login-container" id="loginPage">
- <div class="login-box">
- <div class="login-logo">
- <i class="fas fa-briefcase"></i>
- <span>智能招聘系统</span>
- </div>
-
- <div class="login-tabs">
- <div class="login-tab active" data-tab="candidate">应聘者登录</div>
- <div class="login-tab" data-tab="recruiter">招聘者登录</div>
- </div>
-
- <!-- 应聘者登录表单 -->
- <div class="login-form active" id="candidateLogin">
- <div class="form-group">
- <label for="candidateUsername">用户名</label>
- <input type="text" id="candidateUsername" class="form-control" placeholder="请输入用户名">
- </div>
- <div class="form-group">
- <label for="candidatePassword">密码</label>
- <input type="password" id="candidatePassword" class="form-control" placeholder="请输入密码">
- </div>
- <button class="btn btn-primary btn-block" id="candidateLoginBtn">登录</button>
- <div class="login-links">
- <span class="login-link" id="showRegister">注册账号</span>
- <span class="login-link" id="showForgot">忘记密码</span>
- </div>
- </div>
-
- <!-- 招聘者登录表单 -->
- <div class="login-form" id="recruiterLogin">
- <div class="form-group">
- <label for="recruiterUsername">用户名</label>
- <input type="text" id="recruiterUsername" class="form-control" placeholder="请输入用户名">
- </div>
- <div class="form-group">
- <label for="recruiterPassword">密码</label>
- <input type="password" id="recruiterPassword" class="form-control" placeholder="请输入密码">
- </div>
- <button class="btn btn-primary btn-block" id="recruiterLoginBtn">登录</button>
- <div class="login-links">
- <span class="login-link" id="showRegister2">注册账号</span>
- <span class="login-link" id="showForgot2">忘记密码</span>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 注册页面 -->
- <div class="login-container" id="registerPage" style="display: none;">
- <div class="login-box">
- <div class="login-logo">
- <i class="fas fa-user-plus"></i>
- <span>注册账号</span>
- </div>
-
- <div class="login-tabs">
- <div class="login-tab active" data-tab="candidateReg">应聘者注册</div>
- <div class="login-tab" data-tab="recruiterReg">招聘者注册</div>
- </div>
-
- <!-- 应聘者注册表单 -->
- <div class="login-form active" id="candidateRegister">
- <div class="form-group">
- <label for="regCandidateUsername">用户名</label>
- <input type="text" id="regCandidateUsername" class="form-control" placeholder="请输入用户名">
- </div>
- <div class="form-group">
- <label for="regCandidatePassword">密码</label>
- <input type="password" id="regCandidatePassword" class="form-control" placeholder="请输入密码">
- </div>
- <div class="form-group">
- <label for="regCandidateConfirm">确认密码</label>
- <input type="password" id="regCandidateConfirm" class="form-control" placeholder="请再次输入密码">
- </div>
- <div class="form-group">
- <label for="regCandidateEmail">电子邮箱</label>
- <input type="email" id="regCandidateEmail" class="form-control" placeholder="请输入电子邮箱">
- </div>
- <button class="btn btn-primary btn-block" id="candidateRegisterBtn">注册</button>
- <div class="login-links">
- <span class="login-link" id="backToLogin">返回登录</span>
- </div>
- </div>
-
- <!-- 招聘者注册表单 -->
- <div class="login-form" id="recruiterRegister">
- <div class="form-group">
- <label for="regRecruiterUsername">用户名</label>
- <input type="text" id="regRecruiterUsername" class="form-control" placeholder="请输入用户名">
- </div>
- <div class="form-group">
- <label for="regRecruiterPassword">密码</label>
- <input type="password" id="regRecruiterPassword" class="form-control" placeholder="请输入密码">
- </div>
- <div class="form-group">
- <label for="regRecruiterConfirm">确认密码</label>
- <input type="password" id="regRecruiterConfirm" class="form-control" placeholder="请再次输入密码">
- </div>
- <div class="form-group">
- <label for="regRecruiterEmail">电子邮箱</label>
- <input type="email" id="regRecruiterEmail" class="form-control" placeholder="请输入电子邮箱">
- </div>
- <div class="form-group">
- <label for="regCompany">公司名称</label>
- <input type="text" id="regCompany" class="form-control" placeholder="请输入公司名称">
- </div>
- <button class="btn btn-primary btn-block" id="recruiterRegisterBtn">注册</button>
- <div class="login-links">
- <span class="login-link" id="backToLogin2">返回登录</span>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 忘记密码页面 -->
- <div class="login-container" id="forgotPage" style="display: none;">
- <div class="login-box">
- <div class="login-logo">
- <i class="fas fa-key"></i>
- <span>找回密码</span>
- </div>
-
- <div class="form-group">
- <label for="forgotEmail">电子邮箱</label>
- <input type="email" id="forgotEmail" class="form-control" placeholder="请输入注册时使用的电子邮箱">
- </div>
- <button class="btn btn-primary btn-block" id="forgotBtn">发送重置链接</button>
- <div class="login-links">
- <span class="login-link" id="backToLogin3">返回登录</span>
- </div>
- </div>
- </div>
-
- <!-- 主界面 - 应聘者 -->
- <div class="container" id="candidateContainer">
- <!-- 左侧导航 -->
- <div class="sidebar">
- <div class="logo">
- <i class="fas fa-user-tie"></i>
- <span>应聘者中心</span>
- </div>
- <div class="nav-menu">
- <div class="nav-item active" id="navCandidateJobs">
- <i class="fas fa-briefcase"></i>
- <span>工作机会</span>
- </div>
- <div class="nav-item" id="navCandidateResume">
- <i class="fas fa-file-alt"></i>
- <span>简历分析</span>
- </div>
- <div class="nav-item" id="navCandidateInterview">
- <i class="fas fa-video"></i>
- <span>视频面试</span>
- </div>
- <div class="nav-item" id="navCandidateRecords">
- <i class="fas fa-history"></i>
- <span>面试记录</span>
- </div>
- <div class="nav-item" id="navCandidateProfile">
- <i class="fas fa-user"></i>
- <span>个人中心</span>
- </div>
- <div class="nav-item" id="navCandidateSettings">
- <i class="fas fa-cog"></i>
- <span>系统设置</span>
- </div>
- </div>
- </div>
-
- <!-- 主内容区 -->
- <div class="main-content">
- <!-- 顶部信息栏 -->
- <div class="header">
- <div class="search-bar">
- <input type="text" class="search-input" placeholder="搜索工作职位、公司..." id="candidateSearchInput">
- <button class="search-btn" id="candidateSearchBtn">
- <i class="fas fa-search"></i>
- </button>
- <span class="search-advanced" id="candidateAdvancedSearch">高级筛选</span>
- </div>
- <div class="search-filters" id="candidateSearchFilters">
- <div class="filter-row">
- <div class="filter-group">
- <label for="jobTypeFilter">职位类型</label>
- <select id="jobTypeFilter" class="filter-select">
- <option value="">全部</option>
- <option value="fulltime">全职</option>
- <option value="parttime">兼职</option>
- <option value="intern">实习</option>
- </select>
- </div>
- <div class="filter-group">
- <label for="jobLocationFilter">工作地点</label>
- <select id="jobLocationFilter" class="filter-select">
- <option value="">全部</option>
- <option value="beijing">北京</option>
- <option value="shanghai">上海</option>
- <option value="guangzhou">广州</option>
- <option value="shenzhen">深圳</option>
- </select>
- </div>
- </div>
- <div class="filter-row">
- <div class="filter-group">
- <label for="jobSalaryFilter">薪资范围</label>
- <select id="jobSalaryFilter" class="filter-select">
- <option value="">全部</option>
- <option value="10k">10k以下</option>
- <option value="10-20k">10-20k</option>
- <option value="20-30k">20-30k</option>
- <option value="30k+">30k以上</option>
- </select>
- </div>
- <div class="filter-group">
- <label for="jobExperienceFilter">经验要求</label>
- <select id="jobExperienceFilter" class="filter-select">
- <option value="">全部</option>
- <option value="1">1年以下</option>
- <option value="1-3">1-3年</option>
- <option value="3-5">3-5年</option>
- <option value="5+">5年以上</option>
- </select>
- </div>
- </div>
- <div class="filter-actions">
- <button class="btn" id="resetFilters">重置</button>
- <button class="btn btn-primary" id="applyFilters">应用筛选</button>
- </div>
- </div>
- <div class="user-info">
- <div class="user-dropdown">
- <div class="avatar" id="userAvatar">张</div>
- <div class="dropdown-menu" id="userDropdown">
- <div class="dropdown-item" id="dropdownProfile">
- <i class="fas fa-user"></i> 个人中心
- </div>
- <div class="dropdown-item" id="dropdownSettings">
- <i class="fas fa-cog"></i> 系统设置
- </div>
- <div class="dropdown-divider"></div>
- <div class="dropdown-item" id="dropdownLogout">
- <i class="fas fa-sign-out-alt"></i> 退出登录
- </div>
- </div>
- </div>
- <div>
- <div style="font-weight: 500;">张伟</div>
- <div style="font-size: 12px; color: #64748b;">应聘者</div>
- </div>
- </div>
- </div>
-
- <!-- 工作机会页面 -->
- <div class="content-area" id="candidateJobsPage">
- <div class="content-title">
- <i class="fas fa-briefcase"></i>
- <span>推荐工作机会</span>
- </div>
-
- <!-- 搜索历史 -->
- <div class="search-history">
- <div class="history-title">搜索历史</div>
- <div class="history-tags" id="searchHistoryTags">
- <span class="history-tag">前端开发</span>
- <span class="history-tag">北京</span>
- <span class="history-tag">20k以上</span>
- <span class="history-tag">互联网</span>
- </div>
- </div>
-
- <!-- 热门搜索 -->
- <div class="hot-search">
- <div class="history-title">热门搜索</div>
- <div id="hotSearchList">
- <div class="hot-item">
- <div class="hot-rank">1</div>
- <div class="hot-content">Java开发工程师</div>
- <div class="hot-count">1.2万次</div>
- </div>
- <div class="hot-item">
- <div class="hot-rank">2</div>
- <div class="hot-content">产品经理</div>
- <div class="hot-count">9800次</div>
- </div>
- <div class="hot-item">
- <div class="hot-rank">3</div>
- <div class="hot-content">UI设计师</div>
- <div class="hot-count">8500次</div>
- </div>
- <div class="hot-item">
- <div class="hot-rank">4</div>
- <div class="hot-content">数据分析师</div>
- <div class="hot-count">7200次</div>
- </div>
- </div>
- </div>
-
- <div class="card-grid" id="jobGrid">
- <!-- 工作卡片将通过JS动态生成 -->
- </div>
- </div>
-
- <!-- 简历分析页面 -->
- <div class="content-area" id="candidateResumePage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-file-alt"></i>
- <span>我的简历</span>
- </div>
-
- <div class="resume-form">
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-user"></i>
- <span>基本信息</span>
- </div>
- <div class="form-row">
- <div class="form-col">
- <label for="resumeName">姓名</label>
- <input type="text" id="resumeName" class="form-control" placeholder="请输入您的姓名" value="张伟">
- </div>
- <div class="form-col">
- <label for="resumeGender">性别</label>
- <select id="resumeGender" class="form-control">
- <option value="male" selected>男</option>
- <option value="female">女</option>
- <option value="other">其他</option>
- </select>
- </div>
- </div>
- <div class="form-row">
- <div class="form-col">
- <label for="resumeBirth">出生日期</label>
- <input type="date" id="resumeBirth" class="form-control" value="1990-05-15">
- </div>
- <div class="form-col">
- <label for="resumePhone">联系电话</label>
- <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话" value="13800138000">
- </div>
- </div>
- <div class="form-row">
- <div class="form-col">
- <label for="resumeEmail">电子邮箱</label>
- <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱" value="zhangwei@example.com">
- </div>
- <div class="form-col">
- <label for="resumeLocation">居住地</label>
- <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市" value="北京">
- </div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-graduation-cap"></i>
- <span>教育背景</span>
- </div>
- <div class="form-row">
- <div class="form-col">
- <label for="resumeSchool">学校名称</label>
- <input type="text" id="resumeSchool" class="form-control" placeholder="请输入学校名称" value="北京大学">
- </div>
- <div class="form-col">
- <label for="resumeDegree">学历</label>
- <select id="resumeDegree" class="form-control">
- <option value="bachelor" selected>本科</option>
- <option value="master">硕士</option>
- <option value="phd">博士</option>
- <option value="college">大专</option>
- </select>
- </div>
- </div>
- <div class="form-row">
- <div class="form-col">
- <label for="resumeMajor">专业</label>
- <input type="text" id="resumeMajor" class="form-control" placeholder="请输入所学专业" value="计算机科学与技术">
- </div>
- <div class="form-col">
- <label for="resumeGraduation">毕业时间</label>
- <input type="date" id="resumeGraduation" class="form-control" value="2012-06-30">
- </div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-briefcase"></i>
- <span>工作经历</span>
- </div>
- <div id="workExperienceContainer">
- <!-- 工作经历将通过JS动态添加 -->
- </div>
- <button class="btn" id="addWorkExperience" style="margin-top: 10px;">
- <i class="fas fa-plus"></i> 添加工作经历
- </button>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-project-diagram"></i>
- <span>项目经验</span>
- </div>
- <div id="projectExperienceContainer">
- <!-- 项目经验将通过JS动态添加 -->
- </div>
- <button class="btn" id="addProjectExperience" style="margin-top: 10px;">
- <i class="fas fa-plus"></i> 添加项目经验
- </button>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-star"></i>
- <span>技能专长</span>
- </div>
- <div class="form-group">
- <label for="resumeSkills">技能 (用逗号分隔)</label>
- <input type="text" id="resumeSkills" class="form-control" placeholder="例如: JavaScript, Python, 项目管理" value="JavaScript, HTML5, CSS3, Vue.js, React, Node.js, 项目管理">
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-certificate"></i>
- <span>证书资质</span>
- </div>
- <div id="certificateContainer">
- <!-- 证书将通过JS动态添加 -->
- </div>
- <button class="btn" id="addCertificate" style="margin-top: 10px;">
- <i class="fas fa-plus"></i> 添加证书
- </button>
- </div>
-
- <div class="form-actions">
- <button class="btn" id="cancelResume">
- 取消
- </button>
- <button class="btn btn-primary" id="saveResume">
- <i class="fas fa-save"></i> 保存简历
- </button>
- <button class="btn btn-primary" id="analyzeResume">
- <i class="fas fa-chart-bar"></i> 分析匹配度
- </button>
- </div>
- </div>
-
- <!-- 职业匹配结果 -->
- <div class="match-result" id="matchResult" style="display: none;">
- <div class="match-title">
- <i class="fas fa-chart-pie"></i>
- <span>职业匹配分析</span>
- </div>
- <div id="matchList">
- <!-- 匹配结果将通过JS动态生成 -->
- </div>
- <div class="chart-container" id="matchChart"></div>
- </div>
- </div>
-
- <!-- 视频面试页面 -->
- <div class="content-area" id="candidateInterviewPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-video"></i>
- <span>视频面试</span>
- </div>
-
- <div class="calendar-container">
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
- <h3>2023年11月</h3>
- <div>
- <button class="btn" id="prevMonth">
- <i class="fas fa-chevron-left"></i>
- </button>
- <button class="btn" id="nextMonth">
- <i class="fas fa-chevron-right"></i>
- </button>
- </div>
- </div>
-
- <table class="calendar">
- <thead>
- <tr>
- <th>日</th>
- <th>一</th>
- <th>二</th>
- <th>三</th>
- <th>四</th>
- <th>五</th>
- <th>六</th>
- </tr>
- </thead>
- <tbody id="calendarBody">
- <!-- 日历内容将通过JS动态生成 -->
- </tbody>
- </table>
- </div>
-
- <div style="margin-top: 30px;">
- <h3 style="margin-bottom: 16px;">面试安排</h3>
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">X</div>
- <div>
- <div class="card-title">前端开发工程师面试</div>
- <div class="card-subtitle">XX科技公司 · 2023-11-15 14:00</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">视频面试</span>
- <span class="card-tag">技术面试</span>
- </div>
- <div class="card-footer">
- <span>面试官: 李经理</span>
- <button class="card-btn">进入面试</button>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 面试记录页面 -->
- <div class="content-area" id="candidateRecordsPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-history"></i>
- <span>面试记录</span>
- </div>
-
- <div class="card-grid">
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">X</div>
- <div>
- <div class="card-title">前端开发工程师</div>
- <div class="card-subtitle">XX科技公司 · 2023-10-20</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">技术面试</span>
- <span class="card-tag">通过</span>
- </div>
- <div class="card-footer">
- <span>面试官: 王总监</span>
- <button class="card-btn">查看反馈</button>
- </div>
- </div>
-
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">Y</div>
- <div>
- <div class="card-title">高级前端开发</div>
- <div class="card-subtitle">YY互联网公司 · 2023-09-15</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">技术面试</span>
- <span class="card-tag">未通过</span>
- </div>
- <div class="card-footer">
- <span>评分: 4.5/5</span>
- <button class="card-btn">查看反馈</button>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 个人中心页面 -->
- <div class="content-area" id="candidateProfilePage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-user"></i>
- <span>个人中心</span>
- </div>
-
- <div class="profile-container">
- <div class="profile-sidebar">
- <div class="profile-menu">
- <div class="profile-menu-item active" data-section="basicInfo">基本信息</div>
- <div class="profile-menu-item" data-section="education">教育背景</div>
- <div class="profile-menu-item" data-section="experience">工作经历</div>
- <div class="profile-menu-item" data-section="security">账户安全</div>
- </div>
- </div>
-
- <div class="profile-content">
- <!-- 基本信息 -->
- <div class="profile-section active" id="basicInfoSection">
- <div class="profile-header">
- <div class="profile-avatar">张</div>
- <div class="profile-info">
- <h2>张伟</h2>
- <p>前端开发工程师 | 5年经验</p>
- <button class="btn" style="margin-top: 10px;">
- <i class="fas fa-camera"></i> 更换头像
- </button>
- </div>
- </div>
-
- <div class="profile-form">
- <div class="form-group">
- <label for="profileName">姓名</label>
- <input type="text" id="profileName" class="form-control" value="张伟">
- </div>
-
- <div class="form-row">
- <div class="form-col">
- <label for="profileGender">性别</label>
- <select id="profileGender" class="form-control">
- <option value="male" selected>男</option>
- <option value="female">女</option>
- <option value="other">其他</option>
- </select>
- </div>
- <div class="form-col">
- <label for="profileBirth">出生日期</label>
- <input type="date" id="profileBirth" class="form-control" value="1990-05-15">
- </div>
- </div>
-
- <div class="form-group">
- <label for="profilePhone">联系电话</label>
- <input type="tel" id="profilePhone" class="form-control" value="13800138000">
- </div>
-
- <div class="form-group">
- <label for="profileEmail">电子邮箱</label>
- <input type="email" id="profileEmail" class="form-control" value="zhangwei@example.com">
- </div>
-
- <div class="form-group">
- <label for="profileLocation">居住地</label>
- <input type="text" id="profileLocation" class="form-control" value="北京市朝阳区">
- </div>
-
- <div class="form-group">
- <label for="profileBio">个人简介</label>
- <textarea id="profileBio" class="form-control" rows="4">5年前端开发经验,精通Vue.js和React框架,有丰富的项目管理和团队协作经验。</textarea>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存更改</button>
- </div>
- </div>
- </div>
-
- <!-- 教育背景 -->
- <div class="profile-section" id="educationSection">
- <h2 style="margin-bottom: 20px;">教育背景</h2>
-
- <div class="form-section">
- <div class="form-row">
- <div class="form-col">
- <label for="eduSchool">学校名称</label>
- <input type="text" id="eduSchool" class="form-control" value="北京大学">
- </div>
- <div class="form-col">
- <label for="eduDegree">学历</label>
- <select id="eduDegree" class="form-control">
- <option value="bachelor" selected>本科</option>
- <option value="master">硕士</option>
- <option value="phd">博士</option>
- </select>
- </div>
- </div>
-
- <div class="form-row">
- <div class="form-col">
- <label for="eduMajor">专业</label>
- <input type="text" id="eduMajor" class="form-control" value="计算机科学与技术">
- </div>
- <div class="form-col">
- <label for="eduGraduation">毕业时间</label>
- <input type="date" id="eduGraduation" class="form-control" value="2012-06-30">
- </div>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存更改</button>
- </div>
- </div>
- </div>
-
- <!-- 工作经历 -->
- <div class="profile-section" id="experienceSection">
- <h2 style="margin-bottom: 20px;">工作经历</h2>
-
- <div class="form-section">
- <div class="form-row">
- <div class="form-col">
- <label for="expCompany">公司名称</label>
- <input type="text" id="expCompany" class="form-control" value="AA科技有限公司">
- </div>
- <div class="form-col">
- <label for="expPosition">职位</label>
- <input type="text" id="expPosition" class="form-control" value="高级前端开发工程师">
- </div>
- </div>
-
- <div class="form-row">
- <div class="form-col">
- <label for="expStart">开始时间</label>
- <input type="date" id="expStart" class="form-control" value="2018-03-01">
- </div>
- <div class="form-col">
- <label for="expEnd">结束时间</label>
- <input type="date" id="expEnd" class="form-control" value="2023-05-31">
- </div>
- </div>
-
- <div class="form-group">
- <label for="expDescription">工作描述</label>
- <textarea id="expDescription" class="form-control" rows="4">负责公司核心产品的前端架构设计和开发,带领3人前端团队,使用Vue.js和React技术栈。</textarea>
- </div>
-
- <button class="btn" style="margin-top: 10px;">
- <i class="fas fa-plus"></i> 添加工作经历
- </button>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存更改</button>
- </div>
- </div>
- </div>
-
- <!-- 账户安全 -->
- <div class="profile-section" id="securitySection">
- <h2 style="margin-bottom: 20px;">账户安全</h2>
-
- <div class="form-section">
- <div class="form-group">
- <label for="currentPassword">当前密码</label>
- <input type="password" id="currentPassword" class="form-control" placeholder="请输入当前密码">
- </div>
-
- <div class="form-group">
- <label for="newPassword">新密码</label>
- <input type="password" id="newPassword" class="form-control" placeholder="请输入新密码">
- </div>
-
- <div class="form-group">
- <label for="confirmPassword">确认新密码</label>
- <input type="password" id="confirmPassword" class="form-control" placeholder="请再次输入新密码">
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">更改密码</button>
- </div>
- </div>
-
- <div class="form-section" style="margin-top: 30px;">
- <div class="form-section-title">
- <i class="fas fa-shield-alt"></i>
- <span>安全设置</span>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>双重验证</h3>
- <p>为您的账户增加额外的安全层</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox">
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>登录提醒</h3>
- <p>当账户在新设备登录时发送通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 系统设置页面 -->
- <div class="content-area" id="candidateSettingsPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-cog"></i>
- <span>系统设置</span>
- </div>
-
- <div class="settings-container">
- <div class="settings-sidebar">
- <div class="settings-menu">
- <div class="settings-menu-item active" data-section="notificationSettings">通知设置</div>
- <div class="settings-menu-item" data-section="privacySettings">隐私设置</div>
- <div class="settings-menu-item" data-section="appearanceSettings">外观设置</div>
- </div>
- </div>
-
- <div class="settings-content">
- <!-- 通知设置 -->
- <div class="settings-section active" id="notificationSettings">
- <h2 style="margin-bottom: 20px;">通知设置</h2>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>职位推荐</h3>
- <p>接收系统推荐的匹配职位通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>面试邀请</h3>
- <p>接收企业发送的面试邀请通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>系统消息</h3>
- <p>接收系统更新和维护通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>营销信息</h3>
- <p>接收合作伙伴的优惠和活动信息</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox">
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-group" style="margin-top: 30px;">
- <label for="notificationEmail">通知邮箱</label>
- <input type="email" id="notificationEmail" class="form-control" value="zhangwei@example.com">
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
-
- <!-- 隐私设置 -->
- <div class="settings-section" id="privacySettings">
- <h2 style="margin-bottom: 20px;">隐私设置</h2>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>公开简历</h3>
- <p>允许企业搜索和查看您的简历</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>联系方式可见</h3>
- <p>允许企业查看您的联系方式</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox">
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>个性化推荐</h3>
- <p>根据您的浏览记录推荐职位</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-group" style="margin-top: 30px;">
- <label for="privacyLevel">隐私级别</label>
- <select id="privacyLevel" class="form-control">
- <option value="high">高 - 仅对申请的企业可见</option>
- <option value="medium" selected>中 - 对所有认证企业可见</option>
- <option value="low">低 - 对所有用户可见</option>
- </select>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
-
- <!-- 外观设置 -->
- <div class="settings-section" id="appearanceSettings">
- <h2 style="margin-bottom: 20px;">外观设置</h2>
-
- <div class="form-group">
- <label for="themeSelect">主题颜色</label>
- <select id="themeSelect" class="form-control">
- <option value="light" selected>浅色主题</option>
- <option value="dark">深色主题</option>
- <option value="system">跟随系统</option>
- </select>
- </div>
-
- <div class="form-group">
- <label for="fontSize">字体大小</label>
- <select id="fontSize" class="form-control">
- <option value="small">小</option>
- <option value="medium" selected>中</option>
- <option value="large">大</option>
- </select>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>动画效果</h3>
- <p>启用界面过渡动画</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 主界面 - 招聘者 -->
- <div class="container" id="recruiterContainer">
- <!-- 左侧导航 -->
- <div class="sidebar">
- <div class="logo">
- <i class="fas fa-building"></i>
- <span>招聘者中心</span>
- </div>
- <div class="nav-menu">
- <div class="nav-item active" id="navRecruiterCandidates">
- <i class="fas fa-users"></i>
- <span>候选人</span>
- </div>
- <div class="nav-item" id="navRecruiterJobs">
- <i class="fas fa-briefcase"></i>
- <span>职位管理</span>
- </div>
- <div class="nav-item" id="navRecruiterResume">
- <i class="fas fa-file-alt"></i>
- <span>简历分析</span>
- </div>
- <div class="nav-item" id="navRecruiterInterview">
- <i class="fas fa-video"></i>
- <span>视频面试</span>
- </div>
- <div class="nav-item" id="navRecruiterRecords">
- <i class="fas fa-history"></i>
- <span>面试记录</span>
- </div>
- <div class="nav-item" id="navRecruiterAnalysis">
- <i class="fas fa-chart-bar"></i>
- <span>数据分析</span>
- </div>
- <div class="nav-item" id="navRecruiterProfile">
- <i class="fas fa-user"></i>
- <span>个人中心</span>
- </div>
- <div class="nav-item" id="navRecruiterSettings">
- <i class="fas fa-cog"></i>
- <span>系统设置</span>
- </div>
- </div>
- </div>
-
- <!-- 主内容区 -->
- <div class="main-content">
- <!-- 顶部信息栏 -->
- <div class="header">
- <div class="search-bar">
- <input type="text" class="search-input" placeholder="搜索候选人姓名、技能..." id="recruiterSearchInput">
- <button class="search-btn" id="recruiterSearchBtn">
- <i class="fas fa-search"></i>
- </button>
- <span class="search-advanced" id="recruiterAdvancedSearch">高级筛选</span>
- </div>
- <div class="search-filters" id="recruiterSearchFilters">
- <div class="filter-row">
- <div class="filter-group">
- <label for="candidateLocationFilter">期望地点</label>
- <select id="candidateLocationFilter" class="filter-select">
- <option value="">全部</option>
- <option value="beijing">北京</option>
- <option value="shanghai">上海</option>
- <option value="guangzhou">广州</option>
- <option value="shenzhen">深圳</option>
- <option value="remote">远程</option>
- </select>
- </div>
- <div class="filter-group">
- <label for="candidateExperienceFilter">工作经验</label>
- <select id="candidateExperienceFilter" class="filter-select">
- <option value="">全部</option>
- <option value="1">1年以下</option>
- <option value="1-3">1-3年</option>
- <option value="3-5">3-5年</option>
- <option value="5+">5年以上</option>
- </select>
- </div>
- </div>
- <div class="filter-row">
- <div class="filter-group">
- <label for="candidateEducationFilter">学历要求</label>
- <select id="candidateEducationFilter" class="filter-select">
- <option value="">全部</option>
- <option value="college">大专</option>
- <option value="bachelor">本科</option>
- <option value="master">硕士</option>
- <option value="phd">博士</option>
- </select>
- </div>
- <div class="filter-group">
- <label for="candidateSalaryFilter">期望薪资</label>
- <select id="candidateSalaryFilter" class="filter-select">
- <option value="">全部</option>
- <option value="10k">10k以下</option>
- <option value="10-20k">10-20k</option>
- <option value="20-30k">20-30k</option>
- <option value="30k+">30k以上</option>
- </select>
- </div>
- </div>
- <div class="filter-actions">
- <button class="btn" id="resetRecruiterFilters">重置</button>
- <button class="btn btn-primary" id="applyRecruiterFilters">应用筛选</button>
- </div>
- </div>
- <div class="user-info">
- <div class="user-dropdown">
- <div class="avatar" id="recruiterAvatar">李</div>
- <div class="dropdown-menu" id="recruiterDropdown">
- <div class="dropdown-item" id="dropdownRecruiterProfile">
- <i class="fas fa-user"></i> 个人中心
- </div>
- <div class="dropdown-item" id="dropdownRecruiterSettings">
- <i class="fas fa-cog"></i> 系统设置
- </div>
- <div class="dropdown-divider"></div>
- <div class="dropdown-item" id="dropdownRecruiterLogout">
- <i class="fas fa-sign-out-alt"></i> 退出登录
- </div>
- </div>
- </div>
- <div>
- <div style="font-weight: 500;">李明</div>
- <div style="font-size: 12px; color: #64748b;">XX公司招聘经理</div>
- </div>
- </div>
- </div>
-
- <!-- 候选人页面 -->
- <div class="content-area" id="recruiterCandidatesPage">
- <div class="content-title">
- <i class="fas fa-users"></i>
- <span>候选人列表</span>
- </div>
-
- <!-- 搜索历史 -->
- <div class="search-history">
- <div class="history-title">搜索历史</div>
- <div class="history-tags" id="recruiterSearchHistoryTags">
- <span class="history-tag">前端开发</span>
- <span class="history-tag">3-5年经验</span>
- <span class="history-tag">本科</span>
- <span class="history-tag">北京</span>
- </div>
- </div>
-
- <div class="card-grid" id="candidateGrid">
- <!-- 候选人卡片将通过JS动态生成 -->
- </div>
- </div>
-
- <!-- 职位管理页面 -->
- <div class="content-area" id="recruiterJobsPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-briefcase"></i>
- <span>职位管理</span>
- </div>
- <div style="text-align: right; margin-bottom: 20px;">
- <button class="btn btn-primary" id="addJobBtn">
- <i class="fas fa-plus"></i> 发布新职位
- </button>
- </div>
- <div class="card-grid" id="jobManageGrid">
- <!-- 职位管理卡片将通过JS动态生成 -->
- </div>
- </div>
-
- <!-- 简历分析页面 -->
- <div class="content-area" id="recruiterResumePage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-file-alt"></i>
- <span>简历分析</span>
- </div>
-
- <div style="display: flex; gap: 20px;">
- <div style="flex: 1;">
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">张</div>
- <div>
- <div class="card-title">张伟</div>
- <div class="card-subtitle">前端开发工程师 · 5年经验</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">JavaScript</span>
- <span class="card-tag">Vue.js</span>
- <span class="card-tag">React</span>
- <span class="card-tag">+5</span>
- </div>
- <div class="card-footer">
- <span class="card-match">匹配度: 88%</span>
- <button class="card-btn">邀请面试</button>
- </div>
- </div>
-
- <div class="form-section" style="margin-top: 20px;">
- <div class="form-section-title">
- <i class="fas fa-star"></i>
- <span>AI分析评价</span>
- </div>
- <div style="padding: 12px; background: #f8fafc; border-radius: 8px;">
- <p>候选人技术栈与职位要求高度匹配,尤其在Vue.js和React方面有丰富经验。具备5年开发经验,主导过多个大型项目,团队协作能力强。教育背景优秀,毕业于北京大学计算机专业。建议重点关注。</p>
- </div>
- </div>
- </div>
-
- <div style="flex: 2;">
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-user"></i>
- <span>基本信息</span>
- </div>
- <div style="display: flex; gap: 20px; margin-bottom: 16px;">
- <div>
- <div style="font-size: 14px; color: #64748b;">姓名</div>
- <div style="font-weight: 500;">张伟</div>
- </div>
- <div>
- <div style="font-size: 14px; color: #64748b;">性别</div>
- <div style="font-weight: 500;">男</div>
- </div>
- <div>
- <div style="font-size: 14px; color: #64748b;">年龄</div>
- <div style="font-weight: 500;">33</div>
- </div>
- <div>
- <div style="font-size: 14px; color: #64748b;">电话</div>
- <div style="font-weight: 500;">138****8000</div>
- </div>
- <div>
- <div style="font-size: 14px; color: #64748b;">邮箱</div>
- <div style="font-weight: 500;">zhangwei@example.com</div>
- </div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-graduation-cap"></i>
- <span>教育背景</span>
- </div>
- <div style="margin-bottom: 16px;">
- <div style="font-weight: 500; margin-bottom: 4px;">北京大学</div>
- <div style="color: #64748b; margin-bottom: 4px;">计算机科学与技术 · 本科 · 2008-2012</div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-briefcase"></i>
- <span>工作经历</span>
- </div>
- <div style="margin-bottom: 16px;">
- <div style="font-weight: 500; margin-bottom: 4px;">AA科技有限公司 · 高级前端开发工程师</div>
- <div style="color: #64748b; margin-bottom: 4px;">2018-2023 · 5年</div>
- <div style="margin-top: 8px;">
- <p>负责公司核心产品的规划与设计,主导产品从0到1的开发...</p>
- </div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-project-diagram"></i>
- <span>项目经验</span>
- </div>
- <div style="margin-bottom: 16px;">
- <div style="font-weight: 500; margin-bottom: 4px;">XX电商平台重构</div>
- <div style="color: #64748b; margin-bottom: 4px;">2021-2022 · 项目负责人</div>
- <div style="margin-top: 8px;">
- <p>主导公司电商平台前端重构,采用Vue3 + TypeScript技术栈,实现组件化开发,页面加载速度提升35%。</p>
- </div>
- </div>
- </div>
-
- <div class="form-section">
- <div class="form-section-title">
- <i class="fas fa-star"></i>
- <span>技能专长</span>
- </div>
- <div class="card-tags" style="margin-top: 12px;">
- <span class="card-tag">JavaScript</span>
- <span class="card-tag">HTML5</span>
- <span class="card-tag">CSS3</span>
- <span class="card-tag">Vue.js</span>
- <span class="card-tag">React</span>
- <span class="card-tag">Node.js</span>
- <span class="card-tag">Webpack</span>
- <span class="card-tag">Git</span>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 视频面试页面 -->
- <div class="content-area" id="recruiterInterviewPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-video"></i>
- <span>视频面试</span>
- </div>
-
- <div style="display: flex; gap: 20px;">
- <div style="flex: 1;">
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">张</div>
- <div>
- <div class="card-title">张伟</div>
- <div class="card-subtitle">前端开发工程师 · 5年经验</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">JavaScript</span>
- <span class="card-tag">Vue.js</span>
- <span class="card-tag">React</span>
- </div>
- <div class="card-footer">
- <span>匹配度: 88%</span>
- <button class="card-btn">查看简历</button>
- </div>
- </div>
-
- <div style="margin-top: 20px;">
- <h3 style="margin-bottom: 16px;">面试信息</h3>
- <div class="form-group">
- <label for="interviewDate">面试日期</label>
- <input type="date" id="interviewDate" class="form-control" value="2023-11-15">
- </div>
- <div class="form-group">
- <label for="interviewTime">面试时间</label>
- <input type="time" id="interviewTime" class="form-control" value="14:00">
- </div>
- <div class="form-group">
- <label for="interviewDuration">持续时间</label>
- <select id="interviewDuration" class="form-control">
- <option value="30">30分钟</option>
- <option value="60" selected>60分钟</option>
- <option value="90">90分钟</option>
- </select>
- </div>
- <div class="form-group">
- <label for="interviewType">面试类型</label>
- <select id="interviewType" class="form-control">
- <option value="technical" selected>技术面试</option>
- <option value="hr">HR面试</option>
- <option value="manager">经理面试</option>
- </select>
- </div>
- <div class="form-group">
- <label for="interviewer">面试官</label>
- <input type="text" id="interviewer" class="form-control" value="李明">
- </div>
- </div>
- </div>
-
- <div style="flex: 2;">
- <div style="background: #f8fafc; border-radius: 8px; padding: 20px; height: 100%;">
- <div style="text-align: center; margin-bottom: 20px;">
- <h3>视频面试预览</h3>
- <p style="color: #64748b;">面试开始后将显示视频画面</p>
- </div>
-
- <div style="background: #e2e8f0; height: 300px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
- <i class="fas fa-video" style="font-size: 60px; color: #94a3b8;"></i>
- </div>
-
- <div style="display: flex; justify-content: center; gap: 20px;">
- <button class="btn btn-primary" id="startInterviewBtn">
- <i class="fas fa-video"></i> 开始面试
- </button>
- <button class="btn">
- <i class="fas fa-comment"></i> 发送消息
- </button>
- <button class="btn btn-danger">
- <i class="fas fa-phone-slash"></i> 结束面试
- </button>
- </div>
-
- <div style="margin-top: 30px;">
- <h3 style="margin-bottom: 16px;">面试评价</h3>
- <div class="form-group">
- <label for="interviewScore">综合评分</label>
- <select id="interviewScore" class="form-control">
- <option value="">请选择评分</option>
- <option value="5">5分 - 非常优秀</option>
- <option value="4">4分 - 良好</option>
- <option value="3">3分 - 一般</option>
- <option value="2">2分 - 较差</option>
- <option value="1">1分 - 不符合</option>
- </select>
- </div>
- <div class="form-group">
- <label for="interviewNotes">面试记录</label>
- <textarea id="interviewNotes" class="form-control" rows="5" placeholder="记录面试过程中的关键点和评价"></textarea>
- </div>
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存评价</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 面试记录页面 -->
- <div class="content-area" id="recruiterRecordsPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-history"></i>
- <span>面试记录</span>
- </div>
-
- <div style="display: flex; gap: 20px; margin-bottom: 20px;">
- <div style="flex: 1;">
- <div class="form-group">
- <label for="recordCandidate">候选人</label>
- <select id="recordCandidate" class="form-control">
- <option value="">全部候选人</option>
- <option value="1">张伟</option>
- <option value="2">李娜</option>
- <option value="3">王强</option>
- </select>
- </div>
- </div>
- <div style="flex: 1;">
- <div class="form-group">
- <label for="recordJob">职位</label>
- <select id="recordJob" class="form-control">
- <option value="">全部职位</option>
- <option value="1">前端开发工程师</option>
- <option value="2">UI设计师</option>
- <option value="3">产品经理</option>
- </select>
- </div>
- </div>
- <div style="flex: 1;">
- <div class="form-group">
- <label for="recordStatus">状态</label>
- <select id="recordStatus" class="form-control">
- <option value="">全部状态</option>
- <option value="passed">通过</option>
- <option value="failed">未通过</option>
- <option value="pending">待定</option>
- </select>
- </div>
- </div>
- <div style="flex: 1; display: flex; align-items: flex-end;">
- <button class="btn btn-primary" style="width: 100%;">
- <i class="fas fa-filter"></i> 筛选
- </button>
- </div>
- </div>
-
- <div class="card-grid">
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">张</div>
- <div>
- <div class="card-title">张伟</div>
- <div class="card-subtitle">前端开发工程师 · 技术面试</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">2023-10-20</span>
- <span class="card-tag">通过</span>
- </div>
- <div class="card-footer">
- <span>评分: 4.5/5</span>
- <button class="card-btn">查看详情</button>
- </div>
- </div>
-
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">李</div>
- <div>
- <div class="card-title">李娜</div>
- <div class="card-subtitle">UI设计师 · 技术面试</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">2023-10-18</span>
- <span class="card-tag">待定</span>
- </div>
- <div class="card-footer">
- <span>评分: 3.8/5</span>
- <button class="card-btn">查看详情</button>
- </div>
- </div>
-
- <div class="card">
- <div class="card-header">
- <div class="card-avatar">王</div>
- <div>
- <div class="card-title">王强</div>
- <div class="card-subtitle">前端开发工程师 · 技术面试</div>
- </div>
- </div>
- <div class="card-tags">
- <span class="card-tag">2023-10-15</span>
- <span class="card-tag">未通过</span>
- </div>
- <div class="card-footer">
- <span>评分: 2.5/5</span>
- <button class="card-btn">查看详情</button>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 数据分析页面 -->
- <div class="content-area" id="recruiterAnalysisPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-chart-bar"></i>
- <span>数据分析</span>
- </div>
-
- <div style="display: flex; gap: 20px; margin-bottom: 20px;">
- <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
- <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">候选人总数</div>
- <div style="font-size: 24px; font-weight: 600;">128</div>
- <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
- <i class="fas fa-arrow-up"></i> 12% 月增长
- </div>
- </div>
-
- <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
- <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">面试通过率</div>
- <div style="font-size: 24px; font-weight: 600;">38%</div>
- <div style="font-size: 14px; color: #10b981; margin-top: 4px;">
- <i class="fas fa-arrow-up"></i> 5% 月增长
- </div>
- </div>
-
- <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
- <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">平均招聘周期</div>
- <div style="font-size: 24px; font-weight: 600;">23天</div>
- <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
- <i class="fas fa-arrow-down"></i> 2天 月减少
- </div>
- </div>
-
- <div style="flex: 1; background: #f8fafc; border-radius: 8px; padding: 16px;">
- <div style="font-size: 14px; color: #64748b; margin-bottom: 8px;">职位空缺</div>
- <div style="font-size: 24px; font-weight: 600;">15</div>
- <div style="font-size: 14px; color: #ef4444; margin-top: 4px;">
- <i class="fas fa-arrow-up"></i> 3个 月增长
- </div>
- </div>
- </div>
-
- <div style="display: flex; gap: 20px; margin-bottom: 20px;">
- <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
- <div style="font-weight: 500; margin-bottom: 16px;">候选人来源</div>
- <div class="chart-container" id="candidateSourceChart"></div>
- </div>
-
- <div style="flex: 1; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
- <div style="font-weight: 500; margin-bottom: 16px;">职位申请趋势</div>
- <div class="chart-container" id="applicationTrendChart"></div>
- </div>
- </div>
-
- <div style="background: white; border-radius: 8px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
- <div style="font-weight: 500; margin-bottom: 16px;">技能分布</div>
- <div class="chart-container" id="skillDistributionChart"></div>
- </div>
- </div>
-
- <!-- 个人中心页面 -->
- <div class="content-area" id="recruiterProfilePage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-user"></i>
- <span>个人中心</span>
- </div>
-
- <div class="profile-container">
- <div class="profile-sidebar">
- <div class="profile-menu">
- <div class="profile-menu-item active" data-section="recruiterBasicInfo">基本信息</div>
- <div class="profile-menu-item" data-section="recruiterCompany">公司信息</div>
- <div class="profile-menu-item" data-section="recruiterSecurity">账户安全</div>
- </div>
- </div>
-
- <div class="profile-content">
- <!-- 基本信息 -->
- <div class="profile-section active" id="recruiterBasicInfoSection">
- <div class="profile-header">
- <div class="profile-avatar">李</div>
- <div class="profile-info">
- <h2>李明</h2>
- <p>招聘经理 | XX科技公司</p>
- <button class="btn" style="margin-top: 10px;">
- <i class="fas fa-camera"></i> 更换头像
- </button>
- </div>
- </div>
-
- <div class="profile-form">
- <div class="form-group">
- <label for="recruiterName">姓名</label>
- <input type="text" id="recruiterName" class="form-control" value="李明">
- </div>
-
- <div class="form-row">
- <div class="form-col">
- <label for="recruiterGender">性别</label>
- <select id="recruiterGender" class="form-control">
- <option value="male" selected>男</option>
- <option value="female">女</option>
- <option value="other">其他</option>
- </select>
- </div>
- <div class="form-col">
- <label for="recruiterBirth">出生日期</label>
- <input type="date" id="recruiterBirth" class="form-control" value="1985-08-20">
- </div>
- </div>
-
- <div class="form-group">
- <label for="recruiterPhone">联系电话</label>
- <input type="tel" id="recruiterPhone" class="form-control" value="13900139000">
- </div>
-
- <div class="form-group">
- <label for="recruiterEmail">电子邮箱</label>
- <input type="email" id="recruiterEmail" class="form-control" value="liming@xxtech.com">
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存更改</button>
- </div>
- </div>
- </div>
-
- <!-- 公司信息 -->
- <div class="profile-section" id="recruiterCompanySection">
- <h2 style="margin-bottom: 20px;">公司信息</h2>
-
- <div class="form-section">
- <div class="form-group">
- <label for="companyName">公司名称</label>
- <input type="text" id="companyName" class="form-control" value="XX科技有限公司">
- </div>
-
- <div class="form-group">
- <label for="companyIndustry">所属行业</label>
- <select id="companyIndustry" class="form-control">
- <option value="internet" selected>互联网</option>
- <option value="finance">金融</option>
- <option value="education">教育</option>
- <option value="manufacturing">制造业</option>
- </select>
- </div>
-
- <div class="form-group">
- <label for="companySize">公司规模</label>
- <select id="companySize" class="form-control">
- <option value="1-50">1-50人</option>
- <option value="50-200">50-200人</option>
- <option value="200-500" selected>200-500人</option>
- <option value="500+">500人以上</option>
- </select>
- </div>
-
- <div class="form-group">
- <label for="companyLocation">公司地址</label>
- <input type="text" id="companyLocation" class="form-control" value="北京市海淀区中关村软件园">
- </div>
-
- <div class="form-group">
- <label for="companyWebsite">公司官网</label>
- <input type="url" id="companyWebsite" class="form-control" value="https://www.xxtech.com">
- </div>
-
- <div class="form-group">
- <label for="companyDescription">公司简介</label>
- <textarea id="companyDescription" class="form-control" rows="4">XX科技有限公司成立于2010年,是一家专注于企业级软件开发的互联网公司,拥有多项自主知识产权和专利技术。</textarea>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存更改</button>
- </div>
- </div>
- </div>
-
- <!-- 账户安全 -->
- <div class="profile-section" id="recruiterSecuritySection">
- <h2 style="margin-bottom: 20px;">账户安全</h2>
-
- <div class="form-section">
- <div class="form-group">
- <label for="recruiterCurrentPassword">当前密码</label>
- <input type="password" id="recruiterCurrentPassword" class="form-control" placeholder="请输入当前密码">
- </div>
-
- <div class="form-group">
- <label for="recruiterNewPassword">新密码</label>
- <input type="password" id="recruiterNewPassword" class="form-control" placeholder="请输入新密码">
- </div>
-
- <div class="form-group">
- <label for="recruiterConfirmPassword">确认新密码</label>
- <input type="password" id="recruiterConfirmPassword" class="form-control" placeholder="请再次输入新密码">
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">更改密码</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 系统设置页面 -->
- <div class="content-area" id="recruiterSettingsPage" style="display: none;">
- <div class="content-title">
- <i class="fas fa-cog"></i>
- <span>系统设置</span>
- </div>
-
- <div class="settings-container">
- <div class="settings-sidebar">
- <div class="settings-menu">
- <div class="settings-menu-item active" data-section="recruiterNotificationSettings">通知设置</div>
- <div class="settings-menu-item" data-section="recruiterPrivacySettings">隐私设置</div>
- <div class="settings-menu-item" data-section="recruiterAppearanceSettings">外观设置</div>
- </div>
- </div>
-
- <div class="settings-content">
- <!-- 通知设置 -->
- <div class="settings-section active" id="recruiterNotificationSettings">
- <h2 style="margin-bottom: 20px;">通知设置</h2>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>新候选人</h3>
- <p>当有新的候选人申请职位时通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>面试提醒</h3>
- <p>在面试开始前提醒</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>系统消息</h3>
- <p>接收系统更新和维护通知</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-group" style="margin-top: 30px;">
- <label for="recruiterNotificationEmail">通知邮箱</label>
- <input type="email" id="recruiterNotificationEmail" class="form-control" value="liming@xxtech.com">
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
-
- <!-- 隐私设置 -->
- <div class="settings-section" id="recruiterPrivacySettings">
- <h2 style="margin-bottom: 20px;">隐私设置</h2>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>公开联系方式</h3>
- <p>允许候选人查看您的联系方式</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox">
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>数据分析共享</h3>
- <p>允许系统使用您的招聘数据进行分析</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-group" style="margin-top: 30px;">
- <label for="recruiterPrivacyLevel">隐私级别</label>
- <select id="recruiterPrivacyLevel" class="form-control">
- <option value="high">高 - 仅对候选人可见</option>
- <option value="medium" selected>中 - 对所有认证用户可见</option>
- <option value="low">低 - 公开可见</option>
- </select>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
-
- <!-- 外观设置 -->
- <div class="settings-section" id="recruiterAppearanceSettings">
- <h2 style="margin-bottom: 20px;">外观设置</h2>
-
- <div class="form-group">
- <label for="recruiterThemeSelect">主题颜色</label>
- <select id="recruiterThemeSelect" class="form-control">
- <option value="light" selected>浅色主题</option>
- <option value="dark">深色主题</option>
- <option value="system">跟随系统</option>
- </select>
- </div>
-
- <div class="form-group">
- <label for="recruiterFontSize">字体大小</label>
- <select id="recruiterFontSize" class="form-control">
- <option value="small">小</option>
- <option value="medium" selected>中</option>
- <option value="large">大</option>
- </select>
- </div>
-
- <div class="settings-item">
- <div class="settings-item-info">
- <h3>动画效果</h3>
- <p>启用界面过渡动画</p>
- </div>
- <div class="settings-item-action">
- <label class="switch">
- <input type="checkbox" checked>
- <span class="slider"></span>
- </label>
- </div>
- </div>
-
- <div class="form-actions">
- <button class="btn">取消</button>
- <button class="btn btn-primary">保存设置</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 发布职位模态框 -->
- <div class="modal-overlay" id="jobModal">
- <div class="modal-content">
- <div class="modal-title">
- <i class="fas fa-briefcase"></i>
- <span>发布新职位</span>
- </div>
-
- <div class="form-group">
- <label for="jobTitle">职位名称</label>
- <input type="text" id="jobTitle" class="form-control" placeholder="例如: 高级产品经理">
- </div>
-
- <div class="form-group">
- <label for="jobType">职位类型</label>
- <select id="jobType" class="form-control">
- <option value="fulltime">全职</option>
- <option value="parttime">兼职</option>
- <option value="intern">实习</option>
- </select>
- </div>
-
- <div class="form-group">
- <label for="jobDepartment">所属部门</label>
- <input type="text" id="jobDepartment" class="form-control" placeholder="例如: 产品部">
- </div>
-
- <div class="form-group">
- <label for="jobLocation">工作地点</label>
- <input type="text" id="jobLocation" class="form-control" placeholder="例如: 北京">
- </div>
-
- <div class="form-group">
- <label for="jobSalary">薪资范围</label>
- <input type="text" id="jobSalary" class="form-control" placeholder="例如: 15k-30k">
- </div>
-
- <div class="form-group">
- <label for="jobDescription">职位描述</label>
- <textarea id="jobDescription" class="form-control" rows="5" placeholder="请输入职位描述和工作内容"></textarea>
- </div>
-
- <div class="form-group">
- <label for="jobRequirements">任职要求</label>
- <textarea id="jobRequirements" class="form-control" rows="5" placeholder="请输入任职要求和技能要求"></textarea>
- </div>
-
- <div class
|