v3
/
FE-lab-xcx


			
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>实验室安全教育考试系统</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --blue: #1857d4;
  --blue-deep: #0f3ea8;
  --blue-mid: #2e6fe0;
  --blue-light: #eef3fd;
  --blue-xlight: #f5f8ff;
  --green: #10a37f;
  --green-dark: #0d8f6f;
  --green-light: #edfaf6;
  --orange: #e67e22;
  --orange-light: #fef6ec;
  --red: #e53e3e;
  --red-light: #fff5f5;
  --gray: #8896a7;
  --gray-light: #f4f6fa;
  --gray-border: #dde3ed;
  --text-primary: #1a2233;
  --text-secondary: #4a5568;
  --text-hint: #8896a7;
  --bg: #f0f4fb;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(24,87,212,.08);
  --shadow-md: 0 4px 20px rgba(24,87,212,.12);
  --header-bg: linear-gradient(135deg, #1857d4 0%, #2e6fe0 100%);
}
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text-primary); font-size: 14px; overflow-x: hidden; }
/* ===== SCREEN SYSTEM ===== */
.screen { display: none; flex-direction: column; height: 100vh; position: relative; overflow: hidden; background: var(--bg); }
.screen.active { display: flex; }
/* ===== TOP NAV ===== */
.topbar { background: var(--white); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gray-border); flex-shrink: 0; z-index: 100; box-shadow: 0 1px 6px rgba(24,87,212,.07); }
.topbar-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: .3px; }
.topbar-back { display: flex; align-items: center; gap: 4px; color: var(--blue); font-size: 13px; cursor: pointer; padding: 5px 10px; border: 1px solid rgba(24,87,212,.25); border-radius: 8px; background: var(--blue-xlight); font-weight: 500; }
/* ===== BOTTOM TAB ===== */
.bottom-tab { background: var(--white); display: flex; border-top: 1px solid var(--gray-border); flex-shrink: 0; z-index: 100; box-shadow: 0 -1px 8px rgba(24,87,212,.06); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; cursor: pointer; color: var(--text-hint); font-size: 10px; gap: 2px; transition: color .2s; }
.tab-item.active { color: var(--blue); }
.tab-icon { font-size: 20px; }
/* ===== SCROLL CONTENT ===== */
.scroll-content { flex: 1; overflow-y: auto; padding-bottom: 16px; }
.scroll-content::-webkit-scrollbar { width: 3px; }
.scroll-content::-webkit-scrollbar-thumb { background: rgba(24,87,212,.2); border-radius: 2px; }
/* ===== CARDS ===== */
.card { background: var(--white); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 16px; margin: 0 12px 12px; box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.card-title::before { content: ''; width: 3px; height: 15px; background: linear-gradient(180deg, var(--blue-mid), var(--blue-deep)); border-radius: 2px; display: inline-block; }
.more-link { color: var(--blue); font-size: 12px; cursor: pointer; font-weight: 500; }
/* ===== TAGS ===== */
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.tag-blue { background: var(--blue-light); color: var(--blue); }
.tag-green { background: var(--green-light); color: var(--green-dark); }
.tag-orange { background: var(--orange-light); color: var(--orange); }
.tag-red { background: var(--red-light); color: var(--red); }
.tag-gray { background: var(--gray-light); color: var(--gray); }
.tag-risk-1 { background: var(--blue-light); color: var(--blue); border: 1px solid rgba(24,87,212,.2); }
.tag-risk-2 { background: var(--orange-light); color: var(--orange); border: 1px solid rgba(230,126,34,.2); }
.tag-risk-3 { background: var(--red-light); color: var(--red); border: 1px solid rgba(229,62,62,.2); }
/* ===== BTNs ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; outline: none; transition: all .18s; padding: 0 16px; height: 36px; }
.btn:active { opacity: .85; transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, var(--blue-mid) 0%, var(--blue-deep) 100%); color: #fff; box-shadow: 0 3px 12px rgba(24,87,212,.3); }
.btn-green { background: linear-gradient(135deg, #12b48a 0%, var(--green-dark) 100%); color: #fff; box-shadow: 0 3px 12px rgba(16,163,127,.25); }
.btn-orange { background: linear-gradient(135deg, #f39c12 0%, var(--orange) 100%); color: #fff; box-shadow: 0 3px 12px rgba(230,126,34,.25); }
.btn-outline { background: var(--blue-xlight); color: var(--blue); border: 1px solid rgba(24,87,212,.3); }
.btn-sm { height: 28px; font-size: 12px; padding: 0 10px; border-radius: 6px; }
.btn-block { width: 100%; height: 44px; font-size: 15px; border-radius: 10px; }
/* ===== PROGRESS BAR ===== */
.progress-wrap { background: #e8edf6; border-radius: 4px; height: 7px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue-mid), var(--blue)); transition: width .4s; }
/* ===== DIVIDER ===== */
.divider { height: 8px; background: var(--bg); margin: 0; }
/* ===== STATUS DOT ===== */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--green); }
.dot-orange { background: var(--orange); }
.dot-red { background: var(--red); }
.dot-gray { background: #b0bec5; }
/* ===== BADGE ===== */
.badge { background: var(--red); color: white; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
/* ===== MODAL OVERLAY ===== */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 500; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal-box { background: var(--white); border-radius: 16px; padding: 24px 20px; width: 100%; max-width: 340px; animation: modalIn .25s ease; box-shadow: 0 8px 40px rgba(24,87,212,.15); }
@keyframes modalIn { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes scanAnim { 0%{top:0} 100%{top:calc(100% - 2px)} }
@keyframes marquee { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }
.modal-title { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; text-align: center; }
.modal-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; text-align: center; line-height: 1.7; }
.modal-btns { display: flex; gap: 10px; }
.modal-btns .btn { flex: 1; }
/* ===== FORM ===== */
.form-item { margin-bottom: 14px; }
.form-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.form-input { width: 100%; border: 1px solid var(--gray-border); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--text-primary); background: var(--gray-light); outline: none; transition: border-color .2s; }
.form-input:focus { border-color: var(--blue); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238c8c8c' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
/* ===== ROW ===== */
.row { display: flex; align-items: center; gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
/* ===== QUESTION CARD ===== */
.q-header { background: var(--blue-xlight); border-left: 3px solid var(--blue); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.q-type-badge { background: var(--blue); color: white; font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-right: 8px; }
.diff-easy { font-size:11px;padding:2px 7px;border-radius:4px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f; }
.diff-normal { font-size:11px;padding:2px 7px;border-radius:4px;background:#e6f4ff;color:#1677ff;border:1px solid #91caff; }
.diff-hard { font-size:11px;padding:2px 7px;border-radius:4px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591; }
.diff-extreme { font-size:11px;padding:2px 7px;border-radius:4px;background:#fff1f0;color:#f5222d;border:1px solid #ffa39e; }
.q-content { font-size: 14px; line-height: 1.7; color: var(--text-primary); margin-top: 8px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-option { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--gray-border); border-radius: 8px; padding: 12px; cursor: pointer; transition: all .18s; background: var(--white); }
.q-option.selected { border-color: var(--blue); background: var(--blue-light); }
.q-option.correct { border-color: var(--green); background: var(--green-light); }
.q-option.wrong { border-color: var(--red); background: var(--red-light); }
.q-opt-key { color: var(--blue); font-weight: 600; font-size: 14px; flex-shrink: 0; }
.q-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray-border); flex-shrink: 0; margin-top: 1px; transition: all .2s; }
.q-option.selected .q-radio { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 3px white; }
/* ===== ANSWER BOX ===== */
.answer-box { background: var(--gray-light); border-radius: 8px; padding: 12px; margin-top: 12px; }
.answer-label { display: inline-flex; align-items: center; padding: 2px 10px; background: var(--green); color: white; border-radius: 6px; font-size: 12px; margin-bottom: 8px; }
.answer-analysis { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-top: 8px; }
/* ===== QUESTION NAV ===== */
.q-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.q-num { width: 36px; height: 36px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; cursor: pointer; border: 1.5px solid var(--gray-border); color: var(--text-secondary); background: var(--white); position: relative; }
.q-num.current { background: var(--blue); color: white; border-color: var(--blue); }
.q-num.answered { background: var(--blue-light); color: var(--blue); border-color: var(--blue); }
.q-num.wrong-q { background: var(--orange-light); color: var(--orange); border-color: var(--orange); }
.q-num .q-badge { position: absolute; top: -5px; right: -5px; background: var(--orange); color: white; font-size: 9px; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
/* ===== EXAM BOTTOM BAR ===== */
.exam-bottom { background: var(--white); border-top: 1px solid var(--gray-border); padding: 12px 16px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; z-index: 50; box-shadow: 0 -2px 8px rgba(24,87,212,.06); }
.time-display { flex: 1; background: var(--gray-light); border-radius: 8px; padding: 8px 12px; text-align: center; font-size: 13px; color: var(--text-secondary); }
.time-display span { color: var(--red); font-weight: 600; font-size: 15px; }
/* ===== STAT ROW ===== */
.stat-row { display: flex; background: var(--blue-xlight); border-radius: 8px; padding: 10px; gap: 4px; margin-bottom: 14px; font-size: 13px; border: 1px solid rgba(24,87,212,.1); }
.stat-item { flex: 1; text-align: center; }
.stat-item + .stat-item { border-left: 1px solid var(--gray-border); }
.stat-val { font-weight: 600; font-size: 15px; }
.stat-val.correct-c { color: var(--green); }
.stat-val.wrong-c { color: var(--red); }
/* ===== LIST ITEMS ===== */
.list-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gray-border); cursor: pointer; }
.list-item:last-child { border-bottom: none; }
.list-left { flex: 1; }
.list-right { flex-shrink: 0; color: var(--text-hint); font-size: 12px; }
/* ===== CERT CARD ===== */
.cert-card { background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%); border-radius: 12px; padding: 20px; color: white; margin-bottom: 12px; position: relative; overflow: hidden; }
.cert-card::after { content: ''; position: absolute; right: -20px; top: -20px; width: 100px; height: 100px; background: rgba(255,255,255,.08); border-radius: 50%; }
.cert-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.cert-no { font-size: 12px; opacity: .8; margin-bottom: 12px; }
.cert-meta { font-size: 11px; opacity: .75; display: flex; gap: 12px; flex-wrap: wrap; }
/* ===== TRAINING CARD ===== */
.training-card { background: linear-gradient(135deg, #fff8f0 0%, #fffbf0 100%); border: 1px solid rgba(230,126,34,.25); border-radius: 12px; padding: 14px; }
.qr-placeholder { width: 64px; height: 64px; background: var(--white); border: 2px solid var(--gray-border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
/* ===== KNOWLEDGE ITEM ===== */
.know-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gray-border); gap: 10px; cursor: pointer; }
.know-item:last-child { border-bottom: none; }
.know-icon { width: 38px; height: 38px; background: var(--blue-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; border: 1px solid rgba(24,87,212,.12); }
/* ===== VIDEO GRID ===== */
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.video-card { border-radius: 10px; overflow: hidden; background: var(--white); border: 1px solid var(--gray-border); cursor: pointer; box-shadow: 0 2px 8px rgba(24,87,212,.06); }
.video-thumb { width: 100%; aspect-ratio: 16/9; background: #d0d0d0; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; position: relative; }
.video-thumb-bg { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.3)); }
.video-play { font-size: 28px; z-index: 1; }
.video-info { padding: 8px; }
.video-title { font-size: 12px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; line-height: 1.4; }
.video-meta { font-size: 10px; color: var(--text-hint); }
/* ===== PRACTICE CARD ===== */
.practice-card { border: 1px solid var(--gray-border); border-radius: 10px; padding: 14px; cursor: pointer; }
.practice-ring { width: 56px; height: 56px; flex-shrink: 0; }
/* ===== EXAM TASK CARD ===== */
.exam-task-card { border: 1px solid var(--gray-border); border-radius: 10px; padding: 14px; cursor: pointer; margin-bottom: 10px; }
.exam-task-card.active-exam { border-color: var(--blue); background: var(--blue-xlight); }
.task-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.task-label { font-size: 12px; color: var(--text-hint); }
.task-val { font-size: 13px; font-weight: 500; }
/* ===== STUDY DETAIL ===== */
.material-viewer { background: #d4d4d4; border-radius: 10px; margin-bottom: 14px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--text-hint); font-size: 16px; }
/* ===== COURSE LIST ITEM ===== */
.course-item { border: 1.5px solid var(--gray-border); border-radius: 10px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.course-item.current-course { border-color: var(--blue); background: var(--blue-xlight); }
/* ===== MY SCORES ===== */
.score-card { border: 1px solid var(--gray-border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.score-result-pass { color: var(--green); font-weight: 600; }
.score-result-fail { color: var(--red); font-weight: 600; }
.score-result-sup { color: var(--blue); font-weight: 600; }
/* ===== APPROVAL LIST ===== */
.approval-card { border: 1px solid var(--gray-border); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.approval-status-pending { color: var(--orange); font-weight: 600; }
.approval-status-pass { color: var(--green); font-weight: 600; }
.approval-status-reject { color: var(--red); font-weight: 600; }
/* ===== TAG SCROLL ===== */
.tag-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; }
.tag-scroll::-webkit-scrollbar { display: none; }
.tag-scroll .tag { flex-shrink: 0; cursor: pointer; padding: 5px 12px; }
.tag-scroll .tag.active { background: var(--blue); color: white; box-shadow: 0 2px 8px rgba(24,87,212,.3); }
/* ===== FLOATING MY BTN ===== */
.float-btn { position: fixed; right: 16px; bottom: 80px; width: 52px; height: 52px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(22,119,255,.45); cursor: pointer; z-index: 200; flex-direction: column; gap: 1px; }
.float-btn span { color: white; font-size: 10px; }
.float-btn .float-icon { font-size: 20px; }
/* ===== EMPTY STATE ===== */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-hint); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }
/* ===== SECTION TOP PADDING ===== */
.section-top { padding-top: 0; }
/* ===== YEAR DATA CARD ===== */
.year-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--gray-border); }
.year-row:last-child { border-bottom: none; }
.year-label { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.year-status-going { color: var(--blue); font-size: 13px; }
.year-status-pass { color: var(--green); font-size: 13px; font-weight: 600; }
/* ===== HELP TEXT ===== */
.help-text { font-size: 12px; color: var(--text-hint); line-height: 1.6; }
/* ===== CHIP ROW ===== */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
/* ===== INLINE ICON ===== */
.icon-sm { font-size: 13px; vertical-align: middle; }
/* ===== LAB SEARCH ===== */
.lab-result-item:hover { background: var(--blue-light); }
.lab-result-item:last-child { border-bottom: none !important; }
/* ===== FILTER ROW ===== */
.filter-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--white); border-bottom: 1px solid var(--gray-border); overflow-x: auto; box-shadow: 0 1px 4px rgba(24,87,212,.05); }
.filter-row::-webkit-scrollbar { display: none; }
/* ===== INFO TABLE ===== */
.info-table { width: 100%; font-size: 13px; }
.info-table tr td:first-child { color: var(--text-hint); width: 90px; padding: 5px 0; }
.info-table tr td:last-child { color: var(--text-primary); font-weight: 500; }
/* ===== STAR DIFFICULTY ===== */
.star-row { display: flex; gap: 2px; }
.star { font-size: 14px; }
.star.filled { color: #faad14; }
.star.empty { color: #d9d9d9; }
/* ===== ANSWER REVEAL ===== */
.see-answer-btn { color: var(--blue); font-size: 13px; cursor: pointer; float: right; margin-top: -2px; }
/* ===== MISC ===== */
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb4 { margin-bottom: 4px; }
.mb8 { margin-bottom: 8px; }
.mb12 { margin-bottom: 12px; }
.text-sm { font-size: 12px; }
.text-xs { font-size: 11px; }
.text-blue { color: var(--blue); }
.text-green { color: var(--green); }
.text-orange { color: var(--orange); }
.text-red { color: var(--red); }
.text-gray { color: var(--gray); }
.text-bold { font-weight: 600; }
.fw500 { font-weight: 500; }
.inline-block { display: inline-block; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.side-panel { background: var(--gray-light); border-right: 1px solid var(--gray-border); width: 110px; flex-shrink: 0; padding: 14px 10px; overflow-y: auto; }
.split-layout { display: flex; flex: 1; overflow: hidden; }
.main-panel { flex: 1; overflow-y: auto; padding: 14px; }
.exam-screen.active { height: 100vh; flex-direction: column; }
</style>
</head>
<body>


<!-- ==================== SCREEN: 工作台主页 ==================== -->
<div class="screen active" id="screen-home">
  <div class="topbar" style="background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);border-bottom:none;padding:14px 16px;">
    <div style="visibility:hidden;width:40px;"></div>
    <div class="topbar-title" style="color:#fff;font-size:17px;letter-spacing:.5px;">安全教育考试</div>
    <div style="display:flex;align-items:center;gap:6px;">
      <div style="display:flex;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.4);">
        <button id="mob-role-student" onclick="switchMobRole('student')" style="font-size:11px;padding:3px 10px;border:none;background:rgba(255,255,255,.95);color:#1857d4;font-weight:600;cursor:pointer;">学员</button>
        <button id="mob-role-admin" onclick="switchMobRole('admin')" style="font-size:11px;padding:3px 10px;border:none;background:transparent;color:rgba(255,255,255,.85);cursor:pointer;">管理</button>
      </div>
      <div onclick="window.open('requirements.html','_blank')" style="cursor:pointer;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:8px;padding:4px 10px;font-size:12px;color:#fff;white-space:nowrap;">需求说明</div>
    </div>
  </div>

  <div class="scroll-content">
    <div class="section-top">
    <!-- ===== 用户信息卡 ===== -->
    <div style="background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);margin:0 0 0 0;padding:16px 16px 32px;">
      <div style="display:flex;align-items:center;gap:12px;">
        <div style="width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:24px;border:2px solid rgba(255,255,255,.35);">👤</div>
        <div style="flex:1;">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:4px;">
            <span id="mob-user-name" style="color:#fff;font-size:17px;font-weight:700;">李泽泽</span>
            <span style="background:rgba(255,215,0,.2);color:#ffe066;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid rgba(255,215,0,.35);">奖励分 128</span>
            <span style="background:rgba(0,210,140,.18);color:#7fffd4;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid rgba(0,210,140,.4);">信用分 95</span>
          </div>
          <div id="mob-user-info" style="color:rgba(255,255,255,.8);font-size:12px;">硕士研究生 · 20231001 · 生命科学学院</div>
        </div>
        <span style="background:rgba(0,210,140,.18);color:#7fffd4;font-size:11px;padding:3px 10px;border-radius:20px;border:1px solid rgba(0,210,140,.4);">● 正常</span>
      </div>
    </div>
    <div class="card" style="margin-top:-18px;border-top-left-radius:16px;border-top-right-radius:16px;">
      <div class="mob-student-only" data-display="block" style="background:var(--blue-light);border-radius:8px;padding:10px;margin-bottom:14px;">
        <div class="text-xs text-gray mb4">绑定实验室</div>
        <div style="display:flex;align-items:center;gap:6px;">
          <span class="dot" style="background:#52c41a;"></span>
          <span class="fw500 text-blue">分子生物学实验室（B206）</span>
          <span class="tag tag-green text-xs" style="padding:1px 6px;">已通过</span>
        </div>
      </div>
      <!-- 学年进度 -->
      <div style="background:var(--gray-light);border-radius:10px;padding:14px;margin-bottom:12px;">
        <div class="row-between mb8">
          <div style="display:flex;align-items:center;gap:6px;">
            <span class="tag tag-blue">2025-2026 学年</span>
            <span class="mob-student-only tag tag-risk-2" data-display="inline-flex">Ⅱ级实验室</span>
            <span class="mob-student-only tag tag-gray" data-display="inline-flex">生物类</span>
          </div>
        </div>
        <div class="row-between mb4">
          <span class="text-sm text-gray">当前学年学时完成进度</span>
          <span class="text-blue text-bold">6 / 8 学时</span>
        </div>
        <div class="progress-wrap mb8">
          <div class="progress-bar" style="width:75%"></div>
        </div>
        <div class="row-between text-sm">
          <div><span class="text-gray">学时完成度</span> <span class="text-bold text-blue">75%</span></div>
          <div><span class="text-gray">目标考试</span> <span onclick="goto('screen-exam-detail')" style="color:var(--blue);font-weight:600;background:var(--blue-light);padding:2px 8px;border-radius:6px;border:1px solid rgba(24,87,212,.25);cursor:pointer;display:inline-flex;align-items:center;gap:3px;">应知应会考试 ›</span></div>
        </div>
      </div>
      <!-- 任务状态 -->
      <div>
        <div class="text-sm text-gray mb8 text-bold">当前学年任务状态</div>
        <div id="task-status-grid" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
          <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;text-align:center;">
            <div class="text-xs text-gray mb4">考试状态</div>
            <span class="tag tag-gray">暂无</span>
          </div>
          <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;text-align:center;">
            <div class="text-xs text-gray mb4">证书状态</div>
            <span class="tag tag-gray">暂无</span>
          </div>
          <div class="mob-student-only" data-display="block" style="border:1px solid var(--green);border-radius:8px;padding:10px;text-align:center;background:#f6ffed;">
            <div class="text-xs text-gray mb4">审批状态</div>
            <span class="tag tag-green">已通过</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知滚动条 -->
    <div onclick="goto('screen-notice-list')" style="background:#fffbe6;border:1px solid #ffe58f;border-radius:8px;padding:8px 12px;margin-bottom:10px;display:flex;align-items:center;gap:8px;overflow:hidden;cursor:pointer;">
      <span style="font-size:13px;flex-shrink:0;">📢</span>
      <div style="flex:1;overflow:hidden;">
        <div id="noticeScroll" style="white-space:nowrap;font-size:12px;color:#d48806;animation:marquee 22s linear infinite;">
          <span class="mob-student-only" data-display="inline">【应知应会考试】您尚未完成2025-2026学年应知应会考试，考试截止日期为2026-09-30，请尽快完成 &nbsp;&nbsp;&nbsp; </span>【在线考试】应知应会考试将于2026-08-05截止，请尽快完成 &nbsp;&nbsp;&nbsp; 【学习培训】2026年春季实验室安全知识讲座已开始报名，请及时参加
        </div>
      </div>
      <span style="font-size:11px;color:#d48806;flex-shrink:0;border-left:1px solid #ffe58f;padding-left:8px;">全部 ›</span>
    </div>

    <!-- ===== 实验室审批入口卡片 ===== -->
    <div class="card mob-admin-only" data-display="block" style="display:none;margin-bottom:12px;border-radius:12px;padding:0;overflow:hidden;" onclick="goto('screen-approval')">
      <div style="display:flex;align-items:center;padding:14px 16px;gap:12px;cursor:pointer;">
        <div style="width:40px;height:40px;border-radius:10px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">🏛️</div>
        <div style="flex:1;">
          <div style="font-size:14px;font-weight:600;color:var(--text-primary);">实验室绑定申请</div>
          <div style="font-size:12px;color:var(--text-hint);margin-top:2px;">待审批申请需及时处理</div>
        </div>
        <div style="display:flex;align-items:center;gap:6px;">
          <span style="background:#ff4d4f;color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;min-width:20px;text-align:center;">3</span>
          <span style="font-size:16px;color:var(--text-hint);">›</span>
        </div>
      </div>
    </div>

    <!-- 学年数据统计 -->
    <div class="card" style="padding:0;overflow:hidden;">
        <div style="background:var(--gray-light);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;">
          <span class="text-sm text-bold">📊 学年数据统计</span>
          <button class="btn btn-outline btn-sm" onclick="showReportModal()">成绩报告</button>
        </div>
        <div style="padding:8px 14px;">
          <div class="year-row">
            <span class="year-label">2025-2026</span>
            <span class="year-status-going">进行中</span>
          </div>
          <div class="year-row">
            <span class="year-label">2024-2025</span>
            <span class="year-status-pass">通过 · 90 分</span>
          </div>
          <div class="year-row">
            <span class="year-label">2023-2024</span>
            <span class="year-status-pass">通过 · 85 分</span>
          </div>
        </div>
      </div>


    <!-- 考试任务 -->
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="padding:12px 14px 8px;display:flex;justify-content:space-between;align-items:center;">
        <div>
          <div class="fw500" style="font-size:14px;margin-bottom:2px;">考试任务</div>
          <div class="text-xs text-gray">待完成的学习考试任务</div>
        </div>
        <span onclick="goto('screen-exam-list');switchExTab(0);" style="font-size:12px;color:var(--blue);cursor:pointer;">更多 ›</span>
      </div>
      <div style="padding:0 14px 12px;display:flex;flex-direction:column;gap:8px;">
        <div onclick="goto('screen-exam-detail')" style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--gray-light);border-radius:8px;cursor:pointer;">
          <div>
            <div class="fw500" style="font-size:13px;margin-bottom:2px;">2025级新生实验室安全入学考试</div>
            <div class="text-xs text-gray">待完成</div>
          </div>
          <span style="font-size:16px;color:var(--text-hint);">›</span>
        </div>
        <div onclick="goto('screen-exam-detail')" style="display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--gray-light);border-radius:8px;cursor:pointer;">
          <div>
            <div class="fw500" style="font-size:13px;margin-bottom:2px;">线下培训考试123</div>
            <div class="text-xs text-gray">待完成</div>
          </div>
          <span style="font-size:16px;color:var(--text-hint);">›</span>
        </div>
      </div>
    </div>

    <!-- 应知应会 -->
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="padding:12px 14px 10px;">
        <div class="fw500" style="font-size:14px;margin-bottom:2px;">应知应会考试</div>
        <div class="text-xs text-gray">满足前置条件后可参加考试</div>
      </div>
      <div style="padding:0 14px 12px;display:flex;flex-direction:column;gap:0;">
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--gray-border);">
          <div>
            <div class="text-sm fw500">学时要求</div>
            <div class="text-xs text-gray" style="margin-top:2px;">0 / 6 学时</div>
          </div>
          <span onclick="goto('screen-knowledge-list');switchLxTab(1);" style="font-size:12px;color:var(--blue);cursor:pointer;">开始学习 ›</span>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;">
          <span class="text-sm fw500">模拟考试</span>
          <span style="font-size:12px;color:var(--text-hint);">待完成学习任务后解锁</span>
        </div>
      </div>
    </div>

    <!-- 模拟练习 -->
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between;">
        <div>
          <div class="fw500" style="font-size:14px;margin-bottom:2px;">📝 模拟练习</div>
          <div class="text-xs text-gray">刷题提高正确率</div>
        </div>
        <button onclick="goto('screen-practice-list')" style="padding:6px 16px;border-radius:20px;border:1px solid var(--blue);background:var(--blue-xlight);color:var(--blue);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;">去练习 ›</button>
      </div>
      <div style="padding:0 14px 14px;display:flex;gap:0;">
        <!-- 左：已完成题数 -->
        <div style="flex:1;text-align:center;padding:10px 6px;background:#f6f8ff;border-radius:10px;margin-right:8px;">
          <div style="font-size:22px;font-weight:700;color:#1677ff;line-height:1.1;">20<span style="font-size:13px;color:#999;font-weight:400;"> / 100</span></div>
          <div class="text-xs text-gray" style="margin-top:4px;">已完成 / 总题数</div>
          <div style="margin-top:8px;height:5px;border-radius:3px;background:#e8eaf6;overflow:hidden;">
            <div style="width:20%;height:100%;border-radius:3px;background:linear-gradient(90deg,#1677ff,#69b1ff);"></div>
          </div>
        </div>
        <!-- 右：正确率 -->
        <div style="flex:1;text-align:center;padding:10px 6px;background:#f6ffed;border-radius:10px;">
          <div style="font-size:22px;font-weight:700;color:#52c41a;line-height:1.1;">70%</div>
          <div class="text-xs text-gray" style="margin-top:4px;">模拟正确率</div>
          <div style="margin-top:8px;height:5px;border-radius:3px;background:#d9f7be;overflow:hidden;">
            <div style="width:70%;height:100%;border-radius:3px;background:linear-gradient(90deg,#52c41a,#95de64);"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 培训任务 -->
    <div class="card" style="padding:0;overflow:hidden;background:linear-gradient(135deg,#fff0f6,#fff7e6);border:1px solid #ffadd2;">
      <div style="padding:10px 14px;border-bottom:1px solid #ffcce8;display:flex;justify-content:space-between;align-items:center;">
        <div><span class="text-sm text-bold" style="color:#c41d7f;">🎯 培训任务 <span class="badge" style="background:#eb2f96;">1</span></span></div>
        <span onclick="goto('screen-training-task');switchTtTab(0);" style="font-size:12px;color:#c41d7f;cursor:pointer;">更多 ›</span>
      </div>
      <div style="padding:12px 14px;">
        <div class="training-card" onclick="openTrainingDetail('active')" style="cursor:pointer;">
          <div class="row-between" style="align-items:flex-start;gap:8px;">
            <div style="flex:1;">
              <div style="margin-bottom:6px;"><span style="font-size:11px;font-weight:600;padding:2px 7px;border-radius:4px;background:rgba(255,77,79,0.1);color:#cf1322;border:1px solid rgba(255,77,79,0.25)">应急演练</span></div>
              <div class="fw500 mb4" style="font-size:14px;">2026年9月应急演练</div>
              <div class="text-xs text-gray">2026-09-01 &nbsp; 10:00 – 11:00</div>
              <div class="text-xs text-gray mt4">📍 学术报告厅 A201</div>
              <div class="text-xs text-gray mt4">🏢 组织单位：生命科学学院</div>
            </div>
            <!-- 扫码签到按钮（学员端直接扫码，管理端点击打开二维码展示） -->
            <div style="flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;" onclick="event.stopPropagation()">
              <button class="mob-student-only" data-display="flex" onclick="openScanModal()" style="width:66px;height:66px;border-radius:10px;border:1.5px solid #eb2f96;background:#fff0f6;color:#c41d7f;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;">
                <span style="font-size:24px;line-height:1;">📷</span>
                <span style="font-size:10px;font-weight:500;">扫码签到</span>
              </button>
              <button class="mob-admin-only" data-display="flex" onclick="openQrModal()" style="display:none;width:66px;height:66px;border-radius:10px;border:1.5px solid #eb2f96;background:#fff0f6;color:#c41d7f;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;">
                <span style="font-size:24px;line-height:1;">📷</span>
                <span style="font-size:10px;font-weight:500;">扫码签到</span>
              </button>
              <div class="text-xs fw500" id="trainingSignStatus" style="color:#fa8c16;text-align:center;">● 未签到</div>
            </div>
          </div>
          <!-- 管理端：讲师查看按钮（底部单独一行） -->
          <div class="mob-admin-only" data-display="flex" style="display:none;margin-top:10px;justify-content:flex-end;" onclick="event.stopPropagation()">
            <button onclick="openTrainingDetailAsTeacher('active')" style="padding:5px 18px;border-radius:6px;border:1.5px solid #eb2f96;background:#fff;color:#c41d7f;font-size:12px;font-weight:600;cursor:pointer;">讲师查看</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全素养资源 -->
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="padding:12px 14px 8px;">
        <div class="fw500" style="font-size:14px;margin-bottom:8px;">实验室安全素养资源</div>
        <div style="display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--gray-border);padding-bottom:0;margin-bottom:10px;" id="res-tabs">
          <div onclick="switchResTab(0)" class="res-tab res-tab-active" style="flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600;color:var(--blue);border-bottom:2px solid var(--blue);cursor:pointer;">化学类</div>
          <div onclick="switchResTab(1)" class="res-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">生物类</div>
          <div onclick="switchResTab(2)" class="res-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">辐射类</div>
          <div onclick="switchResTab(3)" class="res-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">机电类</div>
          <div onclick="switchResTab(4)" class="res-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">基础类</div>
        </div>
        <div style="display:flex;flex-direction:column;gap:12px;">
          <!-- 学习资料 -->
          <div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
              <span class="fw500" style="font-size:12px;">学习资料</span>
              <span onclick="goto('screen-knowledge-list');switchLxTab(1);" style="font-size:11px;color:var(--blue);cursor:pointer;">查看更多</span>
            </div>
            <div style="display:flex;flex-direction:column;gap:6px;">
              <div style="display:flex;align-items:center;gap:8px;padding:7px 8px;background:var(--gray-light);border-radius:6px;">
                <span style="font-size:16px;flex-shrink:0;">📄</span>
                <div style="flex:1;min-width:0;">
                  <div style="font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">微生物操作安全指南</div>
                  <div class="text-xs text-gray">PDF · 25页</div>
                </div>
                <span class="text-xs text-gray" style="flex-shrink:0;">25分钟</span>
              </div>
              <div style="display:flex;align-items:center;gap:8px;padding:7px 8px;background:var(--gray-light);border-radius:6px;">
                <span style="font-size:16px;flex-shrink:0;">📊</span>
                <div style="flex:1;min-width:0;">
                  <div style="font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">生物样本储存规范</div>
                  <div class="text-xs text-gray">PPT · 42页</div>
                </div>
                <span class="text-xs text-gray" style="flex-shrink:0;">40分钟</span>
              </div>
              <div style="display:flex;align-items:center;gap:8px;padding:7px 8px;background:var(--gray-light);border-radius:6px;">
                <span style="font-size:16px;flex-shrink:0;">📄</span>
                <div style="flex:1;min-width:0;">
                  <div style="font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">高压灭菌器操作规程</div>
                  <div class="text-xs text-gray">PDF · 15页</div>
                </div>
                <span class="text-xs text-gray" style="flex-shrink:0;">15分钟</span>
              </div>
            </div>
          </div>
          <!-- 题库 -->
          <div>
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
              <span class="fw500" style="font-size:12px;">题库</span>
              <span onclick="goto('screen-practice-list')" style="font-size:11px;color:var(--blue);cursor:pointer;">查看更多</span>
            </div>
            <div style="display:flex;gap:8px;">
              <div onclick="goto('screen-practice-list')" style="flex:1;display:flex;align-items:center;gap:8px;padding:10px;background:var(--gray-light);border-radius:6px;cursor:pointer;">
                <span style="font-size:20px;flex-shrink:0;">📖</span>
                <div>
                  <div style="font-size:12px;font-weight:500;">应急处理</div>
                  <div class="text-xs text-gray">80 题</div>
                </div>
              </div>
              <div onclick="goto('screen-practice-list')" style="flex:1;display:flex;align-items:center;gap:8px;padding:10px;background:var(--gray-light);border-radius:6px;cursor:pointer;">
                <span style="font-size:20px;flex-shrink:0;">📖</span>
                <div>
                  <div style="font-size:12px;font-weight:500;">安全操作</div>
                  <div class="text-xs text-gray">120 题</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频学习资源 -->
    <div class="card" style="padding:0;overflow:hidden;">
      <div style="padding:12px 14px 8px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
          <div class="fw500" style="font-size:14px;">视频学习资源</div>
          <span onclick="goto('screen-knowledge-list');switchLxTab(3);" style="font-size:12px;color:var(--blue);cursor:pointer;">更多 ›</span>
        </div>
        <div style="display:flex;gap:0;border-bottom:1px solid var(--gray-border);margin-bottom:10px;" id="vid-tabs">
          <div onclick="switchVidTab(0)" class="vid-tab vid-tab-active" style="flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600;color:var(--blue);border-bottom:2px solid var(--blue);cursor:pointer;">化学类</div>
          <div onclick="switchVidTab(1)" class="vid-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">生物类</div>
          <div onclick="switchVidTab(2)" class="vid-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">辐射类</div>
          <div onclick="switchVidTab(3)" class="vid-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">机电类</div>
          <div onclick="switchVidTab(4)" class="vid-tab" style="flex-shrink:0;padding:6px 12px;font-size:12px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">其他类</div>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;">
          <div style="cursor:pointer;">
            <div style="position:relative;border-radius:8px;overflow:hidden;margin-bottom:6px;">
              <div style="width:100%;height:160px;background:linear-gradient(135deg,#1e3a5f,#2d6a9f);display:flex;align-items:center;justify-content:center;">
                <div style="width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;">
                  <span style="font-size:18px;margin-left:3px;">▶</span>
                </div>
              </div>
              <div style="position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;">15:30</div>
            </div>
            <div class="fw500" style="font-size:13px;margin-bottom:2px;">化学实验室安全操作规范</div>
            <div class="text-xs text-gray">1250 次观看</div>
          </div>
          <div style="cursor:pointer;">
            <div style="position:relative;border-radius:8px;overflow:hidden;margin-bottom:6px;">
              <div style="width:100%;height:160px;background:linear-gradient(135deg,#3a1e5f,#6a2d9f);display:flex;align-items:center;justify-content:center;">
                <div style="width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;">
                  <span style="font-size:18px;margin-left:3px;">▶</span>
                </div>
              </div>
              <div style="position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;">08:20</div>
            </div>
            <div class="fw500" style="font-size:13px;margin-bottom:2px;">危化品储存与使用安全</div>
            <div class="text-xs text-gray">876 次观看</div>
          </div>
        </div>
      </div>
    </div>

    </div><!-- end section-top -->
  </div><!-- end scroll-content -->

  <!-- 线下培训历史记录弹窗 -->
  <div id="modal-training-history" style="display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.5);flex-direction:column;justify-content:flex-end;" onclick="if(event.target===this)hideTrainingHistory()">
    <div style="background:var(--white);border-radius:16px 16px 0 0;max-height:75vh;display:flex;flex-direction:column;animation:slideUp .25s ease;">
      <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--gray-border);flex-shrink:0;">
        <span style="font-size:16px;font-weight:700;">历史培训记录</span>
        <span onclick="hideTrainingHistory()" style="font-size:22px;color:var(--text-hint);cursor:pointer;line-height:1;">×</span>
      </div>
      <div style="overflow-y:auto;padding:12px;">
        <!-- 历史记录：已完成 -->
        <div class="card" onclick="openTrainingDetail('done')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:80px;background:linear-gradient(135deg,#95de64,#52c41a);display:flex;align-items:center;justify-content:center;font-size:32px;">🧯</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
              <span class="fw500">2025年秋季消防安全知识培训</span>
              <span style="font-size:11px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;border-radius:10px;padding:2px 8px;flex-shrink:0;">已完成</span>
            </div>
            <div class="text-xs text-gray mb4">2025-10-20 &nbsp; 09:00 – 10:30</div>
            <div class="text-xs text-gray mb4">📍 综合楼报告厅</div>
            <div style="display:flex;align-items:center;justify-content:space-between;">
              <div class="text-xs text-gray">🏢 生命科学学院</div>
              <span style="font-size:12px;color:#52c41a;font-weight:500;">✅ 已签到</span>
            </div>
          </div>
        </div>
        <!-- 历史记录：已结束未签到 -->
        <div class="card" style="margin:0;padding:0;overflow:hidden;opacity:.75;">
          <div style="width:100%;height:80px;background:linear-gradient(135deg,#d9d9d9,#bfbfbf);display:flex;align-items:center;justify-content:center;font-size:32px;">🔬</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
              <span class="fw500" style="color:#595959;">2025年春季实验室安全知识讲座</span>
              <span style="font-size:11px;background:#f5f5f5;color:#999;border:1px solid #d9d9d9;border-radius:10px;padding:2px 8px;flex-shrink:0;">已结束</span>
            </div>
            <div class="text-xs text-gray mb4">2025-03-10 &nbsp; 10:00 – 11:00</div>
            <div class="text-xs text-gray mb4">📍 学术报告厅 A201</div>
            <div style="display:flex;align-items:center;justify-content:space-between;">
              <div class="text-xs text-gray">🏢 生命科学学院</div>
              <span style="font-size:12px;color:#ff4d4f;font-weight:500;">❌ 未签到</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 毕业报告弹窗 -->
  <div id="reportModal" style="display:none;position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.7);flex-direction:column;">
    <!-- 顶部工具栏 -->
    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(10,18,40,.95);flex-shrink:0;">
      <span style="color:#fff;font-size:15px;font-weight:600;">📄 成绩报告</span>
      <div style="display:flex;gap:10px;align-items:center;">
        <button onclick="downloadReport()" style="display:flex;align-items:center;gap:5px;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;">
          ⬇ 保存下载
        </button>
        <button onclick="closeReportModal()" style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
      </div>
    </div>
    <!-- 图片区域 -->
    <div style="flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:16px;">
      <img id="reportImg" src="img/毕业报告.png" alt="成绩报告"
        style="max-width:100%;border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.5);"
        onerror="this.style.display='none';document.getElementById('reportImgFallback').style.display='flex';">
      <div id="reportImgFallback" style="display:none;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:rgba(255,255,255,.5);text-align:center;gap:12px;">
        <div style="font-size:56px;">📋</div>
        <div style="font-size:14px;">成绩报告.png</div>
        <div style="font-size:12px;opacity:.6;">图片文件未找到</div>
      </div>
    </div>
  </div>

  <!-- 扫一扫签到弹窗 -->
  <div id="scanModal" style="display:none;position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.9);flex-direction:column;align-items:center;justify-content:center;">
    <div style="position:absolute;top:0;left:0;right:0;padding:16px 16px 0;display:flex;align-items:center;justify-content:space-between;">
      <span style="color:#fff;font-size:16px;font-weight:600;">扫一扫</span>
      <button onclick="closeScanModal()" style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
    </div>
    <div style="position:relative;width:240px;height:240px;margin-bottom:24px;">
      <div style="position:absolute;top:0;left:0;width:28px;height:28px;border-top:3px solid #eb2f96;border-left:3px solid #eb2f96;border-radius:4px 0 0 0;"></div>
      <div style="position:absolute;top:0;right:0;width:28px;height:28px;border-top:3px solid #eb2f96;border-right:3px solid #eb2f96;border-radius:0 4px 0 0;"></div>
      <div style="position:absolute;bottom:0;left:0;width:28px;height:28px;border-bottom:3px solid #eb2f96;border-left:3px solid #eb2f96;border-radius:0 0 0 4px;"></div>
      <div style="position:absolute;bottom:0;right:0;width:28px;height:28px;border-bottom:3px solid #eb2f96;border-right:3px solid #eb2f96;border-radius:0 0 4px 0;"></div>
      <div id="scanLine" style="position:absolute;left:4px;right:4px;height:2px;background:linear-gradient(90deg,transparent,#eb2f96,transparent);top:0;animation:scanAnim 1.8s linear infinite;"></div>
      <div onclick="completeScan()" style="position:absolute;inset:0;cursor:pointer;display:flex;align-items:center;justify-content:center;">
        <span style="color:rgba(255,255,255,.25);font-size:11px;">点击模拟扫码</span>
      </div>
    </div>
    <div style="color:rgba(255,255,255,.6);font-size:14px;text-align:center;">对准签到二维码进行扫描</div>
  </div>

  <!-- 绑定实验室弹窗 -->
  <div id="bindLabModal" style="display:flex;position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:16px;">
    <div style="background:#fff;border-radius:12px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.18);">
      <!-- 标题栏 -->
      <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;">
        <span style="font-size:17px;font-weight:700;color:#1a1a1a;">绑定实验室</span>
        <span onclick="closeBindLabModal()" style="font-size:20px;color:#999;cursor:pointer;line-height:1;">×</span>
      </div>
      <div style="padding:0 20px 16px;">
        <!-- 搜索框 -->
        <div style="position:relative;margin-bottom:8px;">
          <input id="bindLabSearch" type="text" placeholder="输入实验室名称、房号或楼栋关键词搜索…"
            oninput="onBindLabSearch(this.value)"
            style="width:100%;box-sizing:border-box;padding:10px 36px 10px 12px;border:1px solid #d9d9d9;border-radius:8px;font-size:13px;color:#333;outline:none;background:#fafafa;" />
          <span style="position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#bbb;font-size:15px;pointer-events:none;">⌄</span>
        </div>
        <!-- 搜索提示 -->
        <div style="font-size:11px;color:#1677ff;margin-bottom:12px;line-height:1.5;">
          此处请选择需要后续进入的科研实验室的名称，输入实验室名称、房号或楼栋关键词，再从检索结果中选择目标实验室。
        </div>
        <!-- 搜索结果下拉 -->
        <div id="bindLabDropdown" style="display:none;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);">
          <div class="bind-lab-option" onclick="selectLab(0)" style="padding:10px 14px;font-size:13px;color:#333;cursor:pointer;border-bottom:1px solid #f0f0f0;">化学与化工学院-有机化学实验室（A301）-理学楼A栋3层</div>
          <div class="bind-lab-option" onclick="selectLab(1)" style="padding:10px 14px;font-size:13px;color:#333;cursor:pointer;border-bottom:1px solid #f0f0f0;">生命科学学院-细胞生物学实验室（B202）-生命楼B栋2层</div>
          <div class="bind-lab-option" onclick="selectLab(2)" style="padding:10px 14px;font-size:13px;color:#333;cursor:pointer;">机电工程学院-机械加工实验室（C105）-工程楼C栋1层</div>
        </div>
        <!-- 实验室信息表格 -->
        <div id="bindLabInfo" style="display:none;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;margin-bottom:14px;">
          <table style="width:100%;border-collapse:collapse;font-size:12px;">
            <tr style="border-bottom:1px solid #f0f0f0;">
              <td style="padding:9px 12px;color:#888;background:#fafafa;width:28%;white-space:nowrap;">实验室名称</td>
              <td id="blab-name" style="padding:9px 12px;color:#333;font-weight:500;"></td>
              <td style="padding:9px 12px;color:#888;background:#fafafa;width:24%;white-space:nowrap;">所在位置</td>
              <td id="blab-loc" style="padding:9px 12px;color:#333;font-weight:700;"></td>
            </tr>
            <tr style="border-bottom:1px solid #f0f0f0;">
              <td style="padding:9px 12px;color:#888;background:#fafafa;">负责人</td>
              <td id="blab-head" style="padding:9px 12px;color:#333;"></td>
              <td style="padding:9px 12px;color:#888;background:#fafafa;">所属单位</td>
              <td id="blab-dept" style="padding:9px 12px;color:#333;"></td>
            </tr>
            <tr style="border-bottom:1px solid #f0f0f0;">
              <td style="padding:9px 12px;color:#888;background:#fafafa;">安全分级</td>
              <td id="blab-level" style="padding:9px 12px;"></td>
              <td style="padding:9px 12px;color:#888;background:#fafafa;">安全分类</td>
              <td id="blab-cat" style="padding:9px 12px;color:#333;"></td>
            </tr>
            <tr>
              <td style="padding:9px 12px;color:#888;background:#fafafa;">实验室类型</td>
              <td id="blab-type" style="padding:9px 12px;color:#333;" colspan="3"></td>
            </tr>
          </table>
        </div>
        <!-- 无需进入实验室 -->
        <div style="background:#f6f8ff;border-radius:8px;padding:12px 14px;margin-bottom:14px;">
          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer;">
            <input type="checkbox" id="bindNoLabCheck" style="margin-top:2px;accent-color:#1677ff;flex-shrink:0;" />
            <span style="font-size:13px;font-weight:600;color:#1a1a1a;">无需进入实验室</span>
          </label>
          <div style="font-size:11px;color:#888;margin-top:5px;line-height:1.6;padding-left:20px;">
            人文、体育等相关学院，无需进入实验室的新研究生可选择此项，选择后学时要求为4小时，需通过应知应会考试。
          </div>
        </div>
        <!-- 阅读协议 -->
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:18px;">
          <input type="checkbox" id="bindAgreeCheck" style="accent-color:#1677ff;flex-shrink:0;" />
          <span style="font-size:12px;color:#555;">我已阅读并同意<span style="color:#1677ff;font-weight:500;">《新生绑定实验室须知及责任说明》</span></span>
        </label>
        <!-- 底部按钮 -->
        <div style="display:flex;gap:10px;justify-content:flex-end;">
          <button onclick="closeBindLabModal()" style="padding:8px 22px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;color:#555;font-size:13px;cursor:pointer;">取消</button>
          <button onclick="confirmBindLab()" style="padding:8px 22px;border-radius:6px;border:none;background:#1677ff;color:#fff;font-size:13px;font-weight:600;cursor:pointer;">确认绑定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- QR放大弹窗（老师端）-->
  <div id="qrModal" style="display:none;position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.88);flex-direction:column;align-items:center;justify-content:center;">
    <div style="position:absolute;top:16px;left:0;right:0;padding:0 16px;display:flex;align-items:center;justify-content:space-between;">
      <span style="color:#fff;font-size:15px;font-weight:600;">📱 签到二维码</span>
      <button onclick="closeQrModal()" style="width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
    </div>
    <div style="background:#fff;border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;">
      <svg viewBox="0 0 21 21" width="220" height="220" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
        <rect width="21" height="21" fill="#fff"/>
        <rect x="0" y="0" width="7" height="1" fill="#222"/><rect x="0" y="6" width="7" height="1" fill="#222"/>
        <rect x="0" y="1" width="1" height="5" fill="#222"/><rect x="6" y="1" width="1" height="5" fill="#222"/>
        <rect x="2" y="2" width="3" height="3" fill="#222"/>
        <rect x="14" y="0" width="7" height="1" fill="#222"/><rect x="14" y="6" width="7" height="1" fill="#222"/>
        <rect x="14" y="1" width="1" height="5" fill="#222"/><rect x="20" y="1" width="1" height="5" fill="#222"/>
        <rect x="16" y="2" width="3" height="3" fill="#222"/>
        <rect x="0" y="14" width="7" height="1" fill="#222"/><rect x="0" y="20" width="7" height="1" fill="#222"/>
        <rect x="0" y="15" width="1" height="5" fill="#222"/><rect x="6" y="15" width="1" height="5" fill="#222"/>
        <rect x="2" y="16" width="3" height="3" fill="#222"/>
        <rect x="8" y="6" width="1" height="1" fill="#222"/><rect x="10" y="6" width="1" height="1" fill="#222"/><rect x="12" y="6" width="1" height="1" fill="#222"/>
        <rect x="6" y="8" width="1" height="1" fill="#222"/><rect x="6" y="10" width="1" height="1" fill="#222"/><rect x="6" y="12" width="1" height="1" fill="#222"/>
        <rect x="8" y="0" width="1" height="1" fill="#222"/><rect x="10" y="0" width="1" height="1" fill="#222"/><rect x="12" y="0" width="1" height="1" fill="#222"/>
        <rect x="8" y="2" width="2" height="1" fill="#222"/><rect x="11" y="1" width="1" height="1" fill="#222"/><rect x="12" y="3" width="1" height="1" fill="#222"/>
        <rect x="8" y="8" width="2" height="2" fill="#222"/><rect x="11" y="8" width="1" height="1" fill="#222"/><rect x="13" y="9" width="2" height="1" fill="#222"/>
        <rect x="8" y="11" width="1" height="2" fill="#222"/><rect x="10" y="10" width="2" height="1" fill="#222"/><rect x="12" y="11" width="1" height="1" fill="#222"/>
        <rect x="9" y="13" width="2" height="1" fill="#222"/><rect x="8" y="14" width="1" height="1" fill="#222"/>
        <rect x="10" y="15" width="2" height="1" fill="#222"/><rect x="9" y="16" width="1" height="1" fill="#222"/>
        <rect x="11" y="17" width="2" height="1" fill="#222"/><rect x="8" y="18" width="1" height="2" fill="#222"/>
        <rect x="15" y="8" width="1" height="1" fill="#222"/><rect x="17" y="9" width="1" height="1" fill="#222"/>
        <rect x="19" y="8" width="1" height="2" fill="#222"/><rect x="15" y="11" width="2" height="1" fill="#222"/>
        <rect x="16" y="16" width="5" height="1" fill="#222"/><rect x="16" y="20" width="5" height="1" fill="#222"/>
        <rect x="16" y="17" width="1" height="3" fill="#222"/><rect x="20" y="17" width="1" height="3" fill="#222"/>
        <rect x="18" y="18" width="1" height="1" fill="#222"/>
      </svg>
      <div style="font-size:14px;color:#333;font-weight:600;">请学员扫码签到</div>
      <div style="font-size:12px;color:#999;">2026年春季实验室安全知识讲座</div>
    </div>
  </div>

</div>

<!-- SCREEN: 知识学习详情 -->
<div class='screen' id='screen-knowledge-detail'>
  <div class='topbar'>
    <div class='topbar-back' onclick='goBack()'>&#8249; 返回</div>
    <div class='topbar-title'>知识学习</div>
    <div></div>
  </div>
  <div class='scroll-content'>
    <div class='card' style='margin-top:12px;'>
      <div class='chip-row mb8'>
        <span class='tag tag-blue text-xs'>文档课件</span>
        <span class='tag tag-orange text-xs'>学习中</span>
      </div>
      <div style='font-size:17px;font-weight:700;margin-bottom:8px;'>实验室生物安全防护规范</div>
      <div class='text-xs text-gray mb12'>知识点：生物类安全 | 要求时长：20分钟 | 可获：1学时 + 3积分</div>
      <div class='row-between mb4'><span class='text-sm text-gray'>学习进度</span><span class='text-blue fw500'>55%</span></div>
      <div class='progress-wrap mb12'><div class='progress-bar' style='width:55%'></div></div>
      <div class='material-viewer'><div style='text-align:center;'><div style='font-size:48px;margin-bottom:8px;'>&#x1F4C4;</div><div style='font-size:14px;color:var(--text-hint);'>生物安全防护规范.PDF</div><div class='text-xs text-gray mt4'>第2页 / 共18页</div></div></div>
      <div style='display:flex;gap:8px;'>
        <button class='btn btn-primary' style='flex:1;'>继续学习</button>
        <button class='btn btn-outline btn-sm' onclick='goto("screen-posttest")'>课后考核</button>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 培训任务 -->
<div class="screen" id="screen-training-task">
  <div style="background:var(--white);border-bottom:1px solid var(--gray-border);flex-shrink:0;">
    <div class="topbar" style="border-bottom:none;">
      <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
      <div class="topbar-title">培训任务</div>
      <div></div>
    </div>
    <div style="display:flex;padding:0 4px;">
      <div id="tt-tab-0" onclick="switchTtTab(0)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:2px solid #1677ff;cursor:pointer;">线下培训</div>
      <div id="tt-tab-1" onclick="switchTtTab(1)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">线上培训</div>
    </div>
  </div>
  <div class="scroll-content">
    <!-- 线下培训 -->
    <div id="tt-panel-0" style="padding:12px;">
      <!-- 发布状态筛选（老师身份时显示） -->
      <div id="tt-publish-filter" style="display:none;margin-bottom:10px;">
        <div style="display:flex;gap:0;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;background:#fafafa;">
          <button onclick="filterTtPublish('all',this)" id="tt-filter-all" style="flex:1;padding:7px 0;font-size:12px;font-weight:600;border:none;background:#1677ff;color:#fff;cursor:pointer;">全部</button>
          <button onclick="filterTtPublish('published',this)" id="tt-filter-pub" style="flex:1;padding:7px 0;font-size:12px;border:none;background:transparent;color:#888;cursor:pointer;border-left:1px solid #e8e8e8;">已发布</button>
          <button onclick="filterTtPublish('unpublished',this)" id="tt-filter-unpub" style="flex:1;padding:7px 0;font-size:12px;border:none;background:transparent;color:#888;cursor:pointer;border-left:1px solid #e8e8e8;">未发布</button>
        </div>
      </div>
      <!-- 卡片1：进行中（已发布） -->
      <div class="card tt-training-card" data-publish="1" onclick="openTrainingDetail('active')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;position:relative;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#ff7875,#ffa940);display:flex;align-items:center;justify-content:center;font-size:36px;">🏫</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
            <span class="fw500">2026年春季实验室安全知识讲座</span>
            <span style="font-size:11px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;border-radius:10px;padding:2px 8px;flex-shrink:0;">进行中</span>
          </div>
          <div class="text-xs text-gray mb4">2026-03-01 &nbsp; 10:00 – 11:00</div>
          <div class="text-xs text-gray mb4">📍 学术报告厅 A201</div>
          <div style="display:flex;align-items:center;justify-content:space-between;">
            <div class="text-xs text-gray">🏢 生命科学学院</div>
            <button class="mob-student-only" data-display="inline-block" onclick="event.stopPropagation();openScanModal()" style="padding:4px 12px;border-radius:6px;border:1px solid #eb2f96;background:#fff0f6;color:#c41d7f;font-size:12px;cursor:pointer;">📷 扫码签到</button>
          </div>
        </div>
        <div class="mob-admin-only" data-display="flex" style="display:none;padding:8px 12px 10px;border-top:1px solid #f0f0f0;justify-content:space-between;align-items:center;" onclick="event.stopPropagation()">
          <button onclick="openQrModal()" style="padding:5px 14px;border-radius:6px;border:1px solid #eb2f96;background:#fff0f6;color:#c41d7f;font-size:12px;cursor:pointer;">📷 扫码签到</button>
          <button onclick="openTrainingDetailAsTeacher('active')" style="padding:5px 18px;border-radius:6px;border:1.5px solid #eb2f96;background:#fff;color:#c41d7f;font-size:12px;font-weight:600;cursor:pointer;">讲师查看</button>
        </div>
      </div>
      <!-- 卡片2：未开始（已发布） -->
      <div class="card tt-training-card" data-publish="1" onclick="openTrainingDetail('active')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;position:relative;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#69b1ff,#4096ff);display:flex;align-items:center;justify-content:center;font-size:36px;">⚗️</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
            <span class="fw500">2026年危化品安全应急演练</span>
            <span style="font-size:11px;background:#f5f5f5;color:#999;border:1px solid #d9d9d9;border-radius:10px;padding:2px 8px;flex-shrink:0;">未开始</span>
          </div>
          <div class="text-xs text-gray mb4">2026-04-15 &nbsp; 14:00 – 16:00</div>
          <div class="text-xs text-gray mb4">📍 化学楼一楼广场</div>
          <div class="text-xs text-gray">🏢 化学与化工学院</div>
        </div>
        <div class="mob-admin-only" data-display="flex" style="display:none;padding:8px 12px 10px;border-top:1px solid #f0f0f0;justify-content:flex-end;" onclick="event.stopPropagation()">
          <button onclick="openTrainingDetailAsTeacher('active')" style="padding:5px 18px;border-radius:6px;border:1.5px solid #eb2f96;background:#fff;color:#c41d7f;font-size:12px;font-weight:600;cursor:pointer;">讲师查看</button>
        </div>
      </div>
      <!-- 卡片3：已完成 -->
      <div class="card tt-training-card" data-publish="1" onclick="openTrainingDetail('done')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;position:relative;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#95de64,#52c41a);display:flex;align-items:center;justify-content:center;font-size:36px;">🧯</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
            <span class="fw500">2025年秋季消防安全知识培训</span>
            <span style="font-size:11px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;border-radius:10px;padding:2px 8px;flex-shrink:0;">已完成</span>
          </div>
          <div class="text-xs text-gray mb4">2025-10-20 &nbsp; 09:00 – 10:30</div>
          <div class="text-xs text-gray mb4">📍 综合楼报告厅</div>
          <div style="display:flex;align-items:center;justify-content:space-between;">
            <div class="text-xs text-gray">🏢 生命科学学院</div>
            <span style="font-size:12px;color:#52c41a;font-weight:500;">✅ 已签到</span>
          </div>
        </div>
        <div class="mob-admin-only" data-display="flex" style="display:none;padding:8px 12px 10px;border-top:1px solid #f0f0f0;justify-content:flex-end;" onclick="event.stopPropagation()">
          <button onclick="openTrainingDetailAsTeacher('done')" style="padding:5px 18px;border-radius:6px;border:1.5px solid #eb2f96;background:#fff;color:#c41d7f;font-size:12px;font-weight:600;cursor:pointer;">讲师查看</button>
        </div>
      </div>
    </div>
    <!-- 线上培训 -->
    <div id="tt-panel-1" style="display:none;padding:12px;">
      <div class="card" onclick="goto('screen-study-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;position:relative;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#69b1ff,#1677ff);display:flex;align-items:center;justify-content:center;font-size:36px;">💻</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
            <span class="fw500">2026年实验室安全线上通识培训</span>
            <span style="font-size:11px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;border-radius:10px;padding:2px 8px;flex-shrink:0;">进行中</span>
          </div>
          <div class="text-xs text-gray mb4">2026-03-01 – 2026-04-30</div>
          <div class="text-xs text-gray mb4">📚 课程：实验室安全基础知识</div>
          <div style="display:flex;align-items:center;justify-content:space-between;">
            <div class="text-xs text-gray">🏢 全校</div>
            <span style="font-size:12px;color:#1677ff;font-weight:500;">去学习 ›</span>
          </div>
        </div>
      </div>
      <div class="card" onclick="goto('screen-study-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;position:relative;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#b37feb,#722ed1);display:flex;align-items:center;justify-content:center;font-size:36px;">🧪</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
            <span class="fw500">危化品安全知识线上培训</span>
            <span style="font-size:11px;background:#f5f5f5;color:#999;border:1px solid #d9d9d9;border-radius:10px;padding:2px 8px;flex-shrink:0;">未开始</span>
          </div>
          <div class="text-xs text-gray mb4">2026-05-01 – 2026-06-30</div>
          <div class="text-xs text-gray mb4">📚 课程：危险化学品安全管理</div>
          <div class="text-xs text-gray">🏢 化学与化工学院</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 在线考试（底部Tab根页面） -->
<div class="screen" id="screen-exam-list">
  <div style="background:var(--white);border-bottom:1px solid var(--gray-border);flex-shrink:0;">
    <div class="topbar" style="border-bottom:none;">
      <div class="topbar-back" onclick="goto('screen-home')">&#8249; 返回</div>
      <div class="topbar-title">在线考试</div>
      <div></div>
    </div>
    <!-- 3个子Tab -->
    <div style="display:flex;padding:0 4px;">
      <div id="extab-0" onclick="switchExTab(0)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:2px solid #1677ff;cursor:pointer;">考试任务</div>
      <div id="extab-1" onclick="switchExTab(1)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">模拟考试</div>
      <div id="extab-2" onclick="switchExTab(2)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">我的成绩</div>
    </div>
  </div>
  <div class="scroll-content">
    <!-- 考试任务 -->
    <div id="expanel-0" style="padding:12px;">
      <!-- 新生入学考试 -->
      <div class="card" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-exam-detail')">
        <div class="row-between mb8">
          <div class="row">
            <span class="tag tag-blue text-xs">新生入学考试</span>
            <span class="dot dot-orange" style="margin-left:6px;"></span>
            <span class="text-xs text-orange" style="margin-left:2px;">进行中</span>
          </div>
          <span style="font-size:16px;color:var(--blue)">›</span>
        </div>
        <div class="text-sm fw500 mb8">2025级新生实验室安全入学考试</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;">
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">学时要求</div>
            <div class="text-xs fw500">6/8 <span class="text-orange">未达标</span></div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">学习任务</div>
            <div class="text-xs fw500 text-orange">待完成</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">模拟考试</div>
            <div class="text-xs fw500 text-orange">待完成</div>
          </div>
        </div>
      </div>
      <!-- 应知应会考试 -->
      <div class="card" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-exam-detail')">
        <div class="row-between mb8">
          <div class="row">
            <span class="tag tag-orange text-xs">应知应会考试</span>
            <span class="dot dot-orange" style="margin-left:6px;"></span>
            <span class="text-xs text-orange" style="margin-left:2px;">进行中</span>
          </div>
          <span style="font-size:16px;color:var(--text-hint)">›</span>
        </div>
        <div class="text-sm fw500 mb8">常规考试小月考</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">满分/及格</div>
            <div class="text-xs fw500">100 / 70 分</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">可考次数</div>
            <div class="text-xs fw500 text-gray">3 次</div>
          </div>
        </div>
      </div>
      <!-- 常规考试 -->
      <div class="card" style="margin:0;cursor:pointer;" onclick="goto('screen-regular-exam-detail')">
        <div class="row-between mb8">
          <div class="row">
            <span class="tag tag-blue text-xs" style="background:#e6f4ff;color:#0958d9;border-color:#91caff;">常规考试</span>
            <span class="dot dot-gray" style="margin-left:6px;"></span>
            <span class="text-xs text-gray" style="margin-left:2px;">未开始</span>
          </div>
          <span style="font-size:16px;color:var(--text-hint)">›</span>
        </div>
        <div class="text-sm fw500 mb8">2025-2026学年实验室安全常规考试</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">满分/及格</div>
            <div class="text-xs fw500">100 / 60 分</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">可考次数</div>
            <div class="text-xs fw500 text-gray">2 次</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 模拟考试 -->
    <div id="expanel-1" style="display:none;padding:12px;">
      <div class="card" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-mock-detail')">
        <div class="row-between mb8">
          <div class="row">
            <span class="tag tag-blue text-xs">新生入学考试</span>
            <span class="tag tag-orange text-xs" style="margin-left:4px;">模拟卷</span>
          </div>
          <span style="font-size:16px;color:var(--text-hint)">›</span>
        </div>
        <div class="text-sm fw500 mb4">新生入学安全知识模拟卷 A</div>
        <div class="row-between text-xs text-gray">
          <span>最高成绩: <span class="text-orange fw500">60 分</span></span>
          <span>及格线: 70 分</span>
        </div>
      </div>
      <div class="card" style="margin:0;cursor:pointer;" onclick="goto('screen-mock-detail')">
        <div class="row-between mb8">
          <div class="row">
              <span class="tag tag-blue text-xs">新生入学考试</span>
              <span class="tag tag-orange text-xs" style="margin-left:4px;">模拟卷</span>
            </div>
            <span style="font-size:16px;color:var(--text-hint)">›</span>
          </div>
          <div class="text-sm fw500 mb4">新生入学安全知识模拟卷 B</div>
          <div class="row-between text-xs text-gray">
            <span>最高成绩: <span class="text-green fw500">75 分</span></span>
            <span>及格线: 70 分</span>
          </div>
        </div>
    </div>
    <!-- 我的成绩 -->
    <div id="expanel-2" style="display:none;">
      <div class="filter-row">
        <select class="form-input form-select" style="width:auto;padding:6px 28px 6px 10px;font-size:13px;">
          <option>全部</option><option>通过</option><option>未通过</option>
        </select>
        <input type="date" class="form-input" style="width:120px;padding:6px 8px;font-size:12px;" value="2025-09-01">
        <span class="text-xs text-gray">至</span>
        <input type="date" class="form-input" style="width:120px;padding:6px 8px;font-size:12px;" value="2026-07-01">
      </div>
      <div class="tag-scroll" style="padding-top:10px;">
        <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">新生入学</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">应知应会</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">分级分类</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">负面清单</span>
      </div>
      <div style="padding:8px 12px;">
        <div class="score-card" style="cursor:pointer;" onclick="goto('screen-score-detail')">
          <div class="row-between mb8">
            <span class="tag tag-blue text-xs">新生入学考试</span>
            <span class="score-result-pass">通过</span>
          </div>
          <div style="font-size:15px;font-weight:700;margin-bottom:8px;">2025级新生实验室安全入学考试</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;font-size:13px;">
            <div><span class="text-gray">考试时间：</span>2026-01-10</div>
            <div><span class="text-gray">时长：</span>90 分钟</div>
            <div><span class="text-gray">满分/及格：</span>100 / 70</div>
            <div><span class="text-gray">考次：</span>2 / 3</div>
            <div><span class="text-gray">用时：</span>37分22秒</div>
            <div><span class="text-gray">最高成绩：</span><span class="text-blue fw500">78 分</span></div>
            <div><span class="text-gray">获得积分：</span><span class="text-orange fw500">+15分</span></div>
            <div><span class="text-gray">考试结果：</span><span class="text-green fw500">通过</span></div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;">
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">完成学时</div>
              <div class="text-xs fw500 text-green">24 学时</div>
            </div>
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">完成学习</div>
              <div class="text-xs fw500 text-green">已完成</div>
            </div>
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">模拟得分</div>
              <div class="text-xs fw500 text-blue">92 分</div>
            </div>
          </div>
          <div style="display:flex;gap:8px;">
            <button class="btn btn-sm" style="background:#fff7e6;color:#d46b08;border:1px solid #ffd591;border-radius:6px;font-size:12px;padding:5px 10px;cursor:pointer;" onclick="goto('screen-certs')">查看证书</button>
          </div>
        </div>
        <div class="score-card" style="cursor:pointer;" onclick="goto('screen-score-detail')">
          <div class="row-between mb8">
            <span class="tag tag-orange text-xs">应知应会考试</span>
            <span class="score-result-fail">未通过</span>
          </div>
          <div style="font-size:15px;font-weight:700;margin-bottom:8px;">2024-2025学年应知应会安全考试</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;font-size:13px;">
            <div><span class="text-gray">考试时间：</span>2025-06-05</div>
            <div><span class="text-gray">时长：</span>60 分钟</div>
            <div><span class="text-gray">满分/及格：</span>100 / 70</div>
            <div><span class="text-gray">考次：</span>3 / 3</div>
            <div><span class="text-gray">用时：</span>52分08秒</div>
            <div><span class="text-gray">最高成绩：</span><span class="text-red fw500">65 分</span></div>
            <div><span class="text-gray">获得积分：</span><span class="text-gray">无</span></div>
            <div><span class="text-gray">考试结果：</span><span class="text-red fw500">未通过</span></div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;">
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">完成学时</div>
              <div class="text-xs fw500 text-orange">12/16 学时</div>
            </div>
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">完成学习</div>
              <div class="text-xs fw500 text-green">已完成</div>
            </div>
            <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
              <div class="text-xs text-gray mb4">模拟得分</div>
              <div class="text-xs fw500 text-orange">58 分</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 我的 -->
<div class="screen" id="screen-my">
  <div class="topbar">
    <div class="topbar-title" style="display:flex;align-items:center;gap:6px;"><span>👤</span> 我的</div>
    <div></div>
  </div>
  <div class="scroll-content">
    <div style="background:linear-gradient(135deg,#1677ff 0%,#0958d9 100%);padding:24px 20px 20px;">
      <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
        <div style="position:relative;">
          <div style="width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.25);display:flex;align-items:center;justify-content:center;font-size:28px;">&#x1F464;</div>
          <!-- 用户状态图标 -->
          <div style="position:absolute;bottom:0;right:0;width:18px;height:18px;border-radius:50%;background:#52c41a;border:2px solid #1677ff;display:flex;align-items:center;justify-content:center;">
            <span style="font-size:9px;color:#fff;font-weight:700;line-height:1;">✓</span>
          </div>
        </div>
        <div>
          <div style="display:flex;align-items:center;gap:6px;">
            <span style="color:white;font-size:18px;font-weight:700;">张明远</span>
            <span style="font-size:10px;background:rgba(82,196,26,0.25);color:#b7eb8f;border:1px solid rgba(82,196,26,0.4);border-radius:10px;padding:1px 7px;">已认证</span>
          </div>
          <div style="color:rgba(255,255,255,0.8);font-size:13px;">硕士研究生 &middot; 20231001</div>
          <div style="color:rgba(255,255,255,0.7);font-size:12px;margin-top:2px;">生命科学学院</div>
        </div>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;">
        <div style="background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;text-align:center;">
          <div style="color:white;font-size:20px;font-weight:700;">6</div>
          <div style="color:rgba(255,255,255,0.75);font-size:11px;">学时</div>
        </div>
        <div style="background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;text-align:center;">
          <div style="color:white;font-size:20px;font-weight:700;">2</div>
          <div style="color:rgba(255,255,255,0.75);font-size:11px;">证书</div>
        </div>
        <div style="background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;text-align:center;">
          <div style="color:#ffd666;font-size:20px;font-weight:700;">128</div>
          <div style="color:rgba(255,255,255,0.75);font-size:11px;">奖励分</div>
        </div>
        <div style="background:rgba(255,255,255,0.15);border-radius:8px;padding:10px;text-align:center;">
          <div style="color:#95de64;font-size:20px;font-weight:700;">100</div>
          <div style="color:rgba(255,255,255,0.75);font-size:11px;">信用分</div>
        </div>
      </div>
    </div>
    <!-- 实验室审批 独立卡片 -->
    <div class="card" style="margin-top:12px;">
      <div class="list-item" onclick="goto('screen-approval')">
        <span style="font-size:20px;margin-right:10px;">&#x1F6E1;&#xFE0F;</span>
        <div class="list-left"><div class="fw500">实验室审批</div><div class="text-xs text-gray mt4">审批实验室绑定申请</div></div>
        <span class="badge" style="margin-right:6px;">3</span>
        <span style="font-size:16px;color:var(--text-hint)">&#8250;</span>
      </div>
    </div>
    <!-- 我的成绩 & 证书 -->
    <div class="card">
      <div class="list-item" onclick="goto('screen-scores')">
        <span style="font-size:20px;margin-right:10px;">&#x1F4CA;</span>
        <div class="list-left"><div class="fw500">我的成绩</div><div class="text-xs text-gray mt4">查看所有考试记录与成绩</div></div>
        <span style="font-size:16px;color:var(--text-hint)">&#8250;</span>
      </div>
      <div class="list-item" onclick="goto('screen-certs')">
        <span style="font-size:20px;margin-right:10px;">&#x1F3C6;</span>
        <div class="list-left"><div class="fw500">我的证书</div><div class="text-xs text-gray mt4">查看已获得的所有证书</div></div>
        <span style="font-size:16px;color:var(--text-hint)">&#8250;</span>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 我的成绩 -->
<div class="screen" id="screen-scores">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">我的成绩</div>
    <div></div>
  </div>
  <div class="filter-row">
    <select class="form-input form-select" style="width:auto;padding:6px 28px 6px 10px;font-size:13px;">
      <option>全部</option><option>通过</option><option>未通过</option>
    </select>
    <input type="date" class="form-input" style="width:120px;padding:6px 8px;font-size:12px;" value="2025-09-01">
    <span class="text-xs text-gray">至</span>
    <input type="date" class="form-input" style="width:120px;padding:6px 8px;font-size:12px;" value="2026-07-01">
  </div>
  <div class="tag-scroll" style="padding-top:10px;">
    <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">新生入学</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">应知应会</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">分级分类</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">负面清单</span>
  </div>
  <div class="scroll-content" style="padding:8px 0;">
    <div style="padding:0 12px;">
      <div class="score-card" style="cursor:pointer;" onclick="goto('screen-score-detail')">
        <div class="row-between mb8">
          <span class="tag tag-blue text-xs">新生入学考试</span>
          <span class="score-result-pass">通过</span>
        </div>
        <div style="font-size:15px;font-weight:700;margin-bottom:8px;">2025级新生实验室安全入学考试</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;font-size:13px;">
          <div><span class="text-gray">考试时间：</span>2026-01-10</div>
          <div><span class="text-gray">时长：</span>90 分钟</div>
          <div><span class="text-gray">满分/及格：</span>100 / 70</div>
          <div><span class="text-gray">考次：</span>2 / 3</div>
          <div><span class="text-gray">用时：</span>37分22秒</div>
          <div><span class="text-gray">最高成绩：</span><span class="text-blue fw500">78 分</span></div>
          <div><span class="text-gray">获得积分：</span><span class="text-orange fw500">+15分</span></div>
          <div><span class="text-gray">考试结果：</span><span class="text-green fw500">通过</span></div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;">
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">完成学时</div>
            <div class="text-xs fw500 text-green">24 学时</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">完成学习</div>
            <div class="text-xs fw500 text-green">已完成</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">模拟得分</div>
            <div class="text-xs fw500 text-blue">92 分</div>
          </div>
        </div>
        <div style="display:flex;gap:8px;">
          <button class="btn btn-sm" style="background:#fff7e6;color:#d46b08;border:1px solid #ffd591;border-radius:6px;font-size:12px;padding:5px 10px;cursor:pointer;" onclick="goto('screen-certs')">查看证书</button>
        </div>
      </div>
      <div class="score-card" style="cursor:pointer;" onclick="goto('screen-score-detail')">
        <div class="row-between mb8">
          <span class="tag tag-orange text-xs">应知应会考试</span>
          <span class="score-result-fail">未通过</span>
        </div>
        <div style="font-size:15px;font-weight:700;margin-bottom:8px;">2024-2025学年应知应会安全考试</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;font-size:13px;">
          <div><span class="text-gray">考试时间：</span>2025-06-05</div>
          <div><span class="text-gray">时长：</span>60 分钟</div>
          <div><span class="text-gray">满分/及格：</span>100 / 70</div>
          <div><span class="text-gray">考次：</span>3 / 3</div>
          <div><span class="text-gray">用时：</span>52分08秒</div>
          <div><span class="text-gray">最高成绩：</span><span class="text-red fw500">65 分</span></div>
          <div><span class="text-gray">获得积分：</span><span class="text-gray">无</span></div>
          <div><span class="text-gray">考试结果：</span><span class="text-red fw500">未通过</span></div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;">
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">完成学时</div>
            <div class="text-xs fw500 text-orange">12/16 学时</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">完成学习</div>
            <div class="text-xs fw500 text-green">已完成</div>
          </div>
          <div style="background:var(--gray-light);border-radius:6px;padding:6px 8px;">
            <div class="text-xs text-gray mb4">模拟得分</div>
            <div class="text-xs fw500 text-orange">58 分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 我的证书 -->
<div class="screen" id="screen-certs">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">我的证书</div>
    <div></div>
  </div>
  <div class="scroll-content" style="background:#f0f2f5;">
    <div style="padding:16px 12px;">
      <!-- 证书完整预览图 -->
      <div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1);">
        <!-- 证书顶部装饰带 -->
        <div style="background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);padding:4px 0;"></div>
        <!-- 证书主体 -->
        <div style="padding:28px 24px 24px;text-align:center;background:linear-gradient(180deg,#f8faff 0%,#fff 60%);">
          <!-- 学校徽标占位 -->
          <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#1857d4,#2e6fe0);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:28px;box-shadow:0 4px 12px rgba(24,87,212,.25);">🎓</div>
          <div style="font-size:11px;color:#888;letter-spacing:2px;margin-bottom:6px;">XX大学</div>
          <div style="font-size:20px;font-weight:800;color:#1857d4;letter-spacing:1px;margin-bottom:4px;">实验室安全教育证书</div>
          <div style="font-size:12px;color:#aaa;margin-bottom:24px;">Laboratory Safety Education Certificate</div>

          <!-- 分隔线 -->
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;">
            <div style="flex:1;height:1px;background:linear-gradient(90deg,transparent,#d4b96a);"></div>
            <span style="color:#d4b96a;font-size:14px;">✦</span>
            <div style="flex:1;height:1px;background:linear-gradient(90deg,#d4b96a,transparent);"></div>
          </div>

          <!-- 获证人信息 -->
          <div style="font-size:13px;color:#666;margin-bottom:6px;">兹证明</div>
          <div style="font-size:22px;font-weight:700;color:#1a1a1a;margin-bottom:6px;">张明远</div>
          <div style="font-size:12px;color:#888;margin-bottom:18px;">硕士研究生 · 生命科学学院 · 20231001</div>
          <div style="font-size:13px;color:#444;line-height:1.8;margin-bottom:20px;">
            已完成实验室安全通识教育培训<br>考核成绩合格，特颁发此证书
          </div>

          <!-- 证书信息 -->
          <div style="background:#f8faff;border-radius:8px;padding:12px 16px;text-align:left;margin-bottom:20px;border:1px solid #e8edf6;">
            <div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px;">
              <span>证书编号</span><span style="color:#333;font-weight:500;">CERT-2026-001-20231001</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin-bottom:6px;">
              <span>颁发日期</span><span style="color:#333;font-weight:500;">2026年01月10日</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:12px;color:#666;">
              <span>有效期限</span><span style="color:#333;font-weight:500;">长期有效</span>
            </div>
          </div>

          <!-- 印章区 -->
          <div style="display:flex;justify-content:flex-end;align-items:flex-end;gap:16px;margin-bottom:8px;">
            <div style="text-align:center;">
              <div style="width:60px;height:60px;border-radius:50%;border:2px solid #c41d7f;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;opacity:.7;">
                <span style="font-size:10px;color:#c41d7f;font-weight:600;text-align:center;line-height:1.3;">安全<br>管理处</span>
              </div>
              <div style="font-size:10px;color:#aaa;">（公章）</div>
            </div>
          </div>
        </div>
        <!-- 证书底部装饰带 -->
        <div style="background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);padding:4px 0;"></div>
      </div>

      <!-- 操作按钮 -->
      <div style="margin-top:16px;">
        <button class="btn btn-primary" style="width:100%;">下载保存</button>
      </div>
    </div>
  </div>
</div>
<!-- SCREEN: 实验室审批 -->
<div class="screen" id="screen-approval">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">实验室审批</div>
    <div class="text-sm text-blue">待审批 <span class="badge">3</span></div>
  </div>
  <div class="tag-scroll" style="padding-top:10px;">
    <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">待审批</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">已通过</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">已驳回</span>
  </div>
  <div class="scroll-content" style="padding:8px 0;">
    <div style="padding:0 12px;">
      <div class="approval-card">
        <div class="row-between mb8">
          <div class="fw500" style="font-size:15px;">李小明</div>
          <span class="approval-status-pending">待审批</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:13px;margin-bottom:10px;">
          <div><span class="text-gray">学工号：</span>20240023</div>
          <div><span class="text-gray">类别：</span>本科生</div>
          <div><span class="text-gray">所属单位：</span>生命科学学院</div>
          <div><span class="text-gray">提交时间：</span>2026-09-02</div>
        </div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;font-size:13px;">
          <div class="mb4"><span class="text-gray">申请实验室：</span><span class="fw500">分子生物学实验室（B206）</span></div>
          <div class="mb4"><span class="text-gray">风险等级：</span><span class="tag tag-risk-2 text-xs">II级</span> <span class="text-gray" style="margin-left:6px;">安全类别：</span><span class="fw500">生物类</span></div>
          <div><span class="text-gray">进入原因：</span>参与导师科研项目，需使用生物安全柜进行细胞培养实验</div>
        </div>
        <div style="display:flex;gap:8px;">
          <button class="btn btn-green btn-sm" style="flex:1;" onclick="approveItem(this,'pass')">通过</button>
          <button class="btn btn-sm" style="flex:1;background:var(--red-light);color:var(--red);border:1px solid var(--red);" onclick="approveItem(this,'reject')">驳回</button>
        </div>
      </div>
      <div class="approval-card">
        <div class="row-between mb8">
          <div class="fw500" style="font-size:15px;">王芳</div>
          <span class="approval-status-pending">待审批</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:13px;margin-bottom:10px;">
          <div><span class="text-gray">学工号：</span>20240187</div>
          <div><span class="text-gray">类别：</span>硕士研究生</div>
          <div><span class="text-gray">所属单位：</span>化学学院</div>
          <div><span class="text-gray">提交时间：</span>2026-09-01</div>
        </div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;font-size:13px;">
          <div class="mb4"><span class="text-gray">申请实验室：</span><span class="fw500">有机合成实验室（C302）</span></div>
          <div class="mb4"><span class="text-gray">风险等级：</span><span class="tag tag-risk-3 text-xs">III级</span> <span class="text-gray" style="margin-left:6px;">安全类别：</span><span class="fw500">化学类</span></div>
          <div><span class="text-gray">进入原因：</span>硕士论文研究方向为有机功能材料合成</div>
        </div>
        <div style="display:flex;gap:8px;">
          <button class="btn btn-green btn-sm" style="flex:1;" onclick="approveItem(this,'pass')">通过</button>
          <button class="btn btn-sm" style="flex:1;background:var(--red-light);color:var(--red);border:1px solid var(--red);" onclick="approveItem(this,'reject')">驳回</button>
        </div>
      </div>
      <div class="approval-card" style="opacity:0.85;">
        <div class="row-between mb8">
          <div class="fw500" style="font-size:15px;">陈晓宇</div>
          <span class="approval-status-pass">已通过</span>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:4px;font-size:13px;margin-bottom:10px;">
          <div><span class="text-gray">学工号：</span>20230056</div>
          <div><span class="text-gray">类别：</span>博士研究生</div>
          <div><span class="text-gray">所属单位：</span>生命科学学院</div>
          <div><span class="text-gray">通过时间：</span>2026-08-30</div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;">
          <div class="mb4"><span class="text-gray">申请实验室：</span><span class="fw500">分子生物学实验室（B206）</span></div>
          <div><span class="text-gray">进入原因：</span>博士课题组成员，长期使用该实验室</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- SCREEN: 考试记录 -->
<div class="screen" id="screen-exam-records">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">考试记录</div>
    <div></div>
  </div>
  <div class="scroll-content">
    <div class="card" style="margin-top:12px;">
      <div style="font-size:15px;font-weight:700;margin-bottom:4px;">2025级新生实验室安全入学考试</div>
      <div class="text-xs text-gray mb12">2026-01-10 | 用时 37分22秒 | 最终成绩: <span class="text-blue fw500">78分（通过）</span></div>
      <div style="background:var(--gray-light);border-radius:8px;padding:12px;margin-bottom:14px;">
        <div class="text-sm fw500 mb8">答题统计</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;text-align:center;">
          <div><div style="font-size:18px;font-weight:700;color:var(--blue);">100</div><div class="text-xs text-gray">总题数</div></div>
          <div><div style="font-size:18px;font-weight:700;color:var(--green);">78</div><div class="text-xs text-gray">正确</div></div>
          <div><div style="font-size:18px;font-weight:700;color:var(--red);">22</div><div class="text-xs text-gray">错误</div></div>
          <div><div style="font-size:18px;font-weight:700;color:var(--blue);">78%</div><div class="text-xs text-gray">正确率</div></div>
        </div>
      </div>
      <div class="text-sm fw500 mb8">章节得分</div>
      <div style="font-size:13px;">
        <div class="row-between" style="padding:8px 0;border-bottom:1px solid var(--gray-border);"><span>实验室安全概论</span><span class="text-green fw500">20/20</span></div>
        <div class="row-between" style="padding:8px 0;border-bottom:1px solid var(--gray-border);"><span>危险化学品管理</span><span class="text-orange fw500">16/20</span></div>
        <div class="row-between" style="padding:8px 0;border-bottom:1px solid var(--gray-border);"><span>生物安全操作规范</span><span class="text-green fw500">18/20</span></div>
        <div class="row-between" style="padding:8px 0;border-bottom:1px solid var(--gray-border);"><span>消防与应急处置</span><span class="text-orange fw500">15/20</span></div>
        <div class="row-between" style="padding:8px 0;"><span>个人防护与职业健康</span><span class="text-red fw500">9/20</span></div>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 历史错题 -->
<div class="screen" id="screen-wrong-questions">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">历史错题</div>
    <div></div>
  </div>
  <div class="tag-scroll" style="padding-top:10px;">
    <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">新生入学</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">应知应会</span>
  </div>
  <div class="scroll-content" style="padding:8px 0;">
    <div style="padding:0 12px;">
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">单选题</span><span class="text-xs text-gray" style="margin-left:6px;">2025级新生入学考试</span></div>
          <span class="tag tag-orange text-xs">答错2次</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">以下哪种废液可以直接倒入普通下水道排放？</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A. 含汞废液（错误）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">D. 少量洗涤蒸馏水</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">
          解析：含汞废液属于危险废物，必须进行无害化处理，不能直接排放。少量洗涤蒸馏水危害极小，可直接排放。
        </div>
      </div>
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">判断题</span><span class="text-xs text-gray" style="margin-left:6px;">2025级新生入学考试</span></div>
          <span class="tag tag-red text-xs">答错3次</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">实验室发生化学品泄漏时，第一步应立即拨打119报警。（ ）</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A. 正确（错误）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">B. 错误</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">
          解析：发生化学品泄漏时，第一步应先疏散人员并撤离危险区域，再根据泄漏情况判断是否需要拨打119。
        </div>
      </div>
      <div style="background:var(--white);border-radius:10px;padding:14px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">多选题</span><span class="text-xs text-gray" style="margin-left:6px;">应知应会考试</span></div>
          <span class="tag tag-orange text-xs">答错1次</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">下列属于个人防护装备（PPE）的是？（多选）</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A C（部分正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">A B C D</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">
          解析：防护眼镜(A)、实验手套(B)、防护口罩(C)、实验室防护服(D)均属于个人防护装备。
        </div>
      </div>
    </div>
  </div>
</div>
<!-- SCREEN: 考试答题中 -->
<div class="screen exam-screen" id="screen-exam-doing">
  <div class="topbar">
    <div class="topbar-back" onclick="submitExam()">&#8249; 交卷</div>
    <div class="topbar-title">应知应会考试中</div>
    <div class="text-sm text-blue" onclick="toggleQNav()">题号</div>
  </div>
  <!-- 醒目剩余时间 -->
  <div id="examTimerBar" style="background:linear-gradient(90deg,#1677ff,#0958d9);padding:6px 16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;">
    <span style="color:rgba(255,255,255,.8);font-size:12px;">剩余时间</span>
    <span id="examTimer" style="color:#fff;font-size:22px;font-weight:700;letter-spacing:2px;font-variant-numeric:tabular-nums;">52:14</span>
    <span style="color:rgba(255,255,255,.6);font-size:11px;">请合理安排答题时间</span>
  </div>
  <div style="flex:1;overflow-y:auto;padding:12px;">
    <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:12px;">
      <div class="stat-row" style="margin-bottom:0;">
        <div class="stat-item"><div class="text-xs text-gray">已答</div><div class="stat-val text-blue">7</div></div>
        <div class="stat-item"><div class="text-xs text-gray">未答</div><div class="stat-val">43</div></div>
        <div class="stat-item"><div class="text-xs text-gray">总题</div><div class="stat-val">50</div></div>
      </div>
    </div>
    <div id="qNavPanel" style="display:none;background:var(--white);border-radius:10px;padding:12px;margin-bottom:12px;">
      <div class="text-sm fw500 mb8">题目列表</div>
      <div class="q-nav">
        <div class="q-num answered" onclick="jumpToQ(1)">1</div><div class="q-num answered" onclick="jumpToQ(2)">2</div><div class="q-num answered" onclick="jumpToQ(3)">3</div>
        <div class="q-num answered" onclick="jumpToQ(4)">4</div><div class="q-num answered" onclick="jumpToQ(5)">5</div><div class="q-num answered" onclick="jumpToQ(6)">6</div>
        <div class="q-num answered" onclick="jumpToQ(7)">7</div><div class="q-num current" id="qnum-8" onclick="jumpToQ(8)">8</div><div class="q-num" onclick="jumpToQ(9)">9</div>
        <div class="q-num" onclick="jumpToQ(10)">10</div><div class="q-num" onclick="jumpToQ(11)">11</div><div class="q-num" onclick="jumpToQ(12)">12</div>
      </div>
    </div>
    <div style="background:var(--white);border-radius:10px;padding:14px;">
      <div class="q-header">
        <span class="q-type-badge">单选题</span>
        <span class="text-sm fw500" id="qLabel">第 8 题 (2分)</span>
        <span class="diff-hard" style="margin-left:6px;">很难</span>
        <div class="q-content" id="qContent">以下哪种操作违反了实验室生物安全操作规范？</div>
      </div>
      <div class="q-options" id="qOptions">
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">A.</span><span>使用生物安全柜处理高危病原体样本</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">B.</span><span>在实验台上脱除手套后用手触摸脸部</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">C.</span><span>实验完成后对工作区域进行消毒处理</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">D.</span><span>感染性废弃物放入专用生物安全袋中</span></div>
      </div>
      <div style="display:flex;justify-content:space-between;margin-top:16px;">
        <button class="btn btn-outline btn-sm" onclick="jumpToQ(currentQ-1)">上一题</button>
        <button class="btn btn-primary btn-sm" onclick="jumpToQ(currentQ+1)">下一题</button>
      </div>
    </div>
  </div>
  <div class="exam-bottom">
    <button class="btn btn-primary" onclick="goto('screen-exam-result')">提交试卷</button>
  </div>
</div>
<!-- SCREEN: 考试结果 -->
<div class="screen" id="screen-exam-result">
  <div class="topbar">
    <div class="topbar-back" onclick="goto('screen-home')">&#8249; 返回</div>
    <div class="topbar-title">考试结果</div>
    <div></div>
  </div>
  <div class="scroll-content">
    <div class="card" style="margin-top:12px;text-align:center;">
      <div style="font-size:56px;font-weight:900;color:var(--blue);margin-bottom:4px;">78</div>
      <div class="text-gray text-sm mb8">本次考试成绩</div>
      <div style="display:inline-flex;align-items:center;gap:6px;background:#f6ffed;border-radius:20px;padding:6px 20px;margin-bottom:16px;">
        <span style="color:var(--green);font-weight:700;font-size:16px;">考试通过</span>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;">
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">满分</div><div class="fw500">100</div></div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">及格分</div><div class="fw500 text-orange">70</div></div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">用时</div><div class="fw500">37'22"</div></div>
      </div>
      <div style="background:var(--gray-light);border-radius:8px;padding:12px;margin-bottom:16px;">
        <div class="row-between text-sm mb6"><span>正确题数</span><span class="text-green fw500">78 题</span></div>
        <div class="row-between text-sm mb6"><span>错误题数</span><span class="text-red fw500">22 题</span></div>
        <div class="row-between text-sm"><span>正确率</span><span class="text-blue fw500">78%</span></div>
      </div>
      <div style="display:flex;gap:8px;">
        <button class="btn btn-outline" style="flex:1;" onclick="goto('screen-wrong-questions')">查看错题</button>
        <button class="btn btn-primary" style="flex:1;" onclick="goto('screen-home')">返回工作台</button>
      </div>
    </div>
    <div class="card">
      <div style="display:flex;align-items:center;gap:10px;">
        <span style="font-size:32px;">&#x1F3C6;</span>
        <div>
          <div class="fw500 mb4">您已获得证书！</div>
          <div class="text-sm text-gray">实验室安全通识培训合格证书</div>
          <button class="btn btn-primary btn-sm mt8" onclick="goto('screen-certs')">查看证书</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- SCREEN: 知识学习详情 -->
<div class="screen" id="screen-knowledge-detail">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">知识学习</div>
    <div></div>
  </div>
  <div class="scroll-content">
    <div class="card" style="margin-top:12px;">
      <div class="chip-row mb8">
        <span class="tag tag-blue text-xs">文档课件</span>
        <span class="tag tag-orange text-xs">学习中</span>
      </div>
      <div style="font-size:17px;font-weight:700;margin-bottom:8px;">实验室生物安全防护规范</div>
      <div class="text-xs text-gray mb12">知识点：生物类安全 | 要求时长：20分钟 | 可获：1学时 + 3积分</div>
      <div class="row-between mb4"><span class="text-sm text-gray">学习进度</span><span class="text-blue fw500">55%</span></div>
      <div class="progress-wrap mb12"><div class="progress-bar" style="width:55%"></div></div>
      <div class="material-viewer">
        <div style="text-align:center;">
          <div style="font-size:48px;margin-bottom:8px;">&#x1F4C4;</div>
          <div style="font-size:14px;color:var(--text-hint);">生物安全防护规范.PDF</div>
          <div class="text-xs text-gray mt4">第2页 / 共18页</div>
        </div>
      </div>
      <div style="display:flex;gap:8px;">
        <button class="btn btn-primary" style="flex:1;">继续学习</button>
        <button class="btn btn-outline btn-sm" onclick="goto('screen-posttest')">课后考核</button>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 课后考核 -->
<div class="screen" id="screen-posttest">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">课后考核</div>
    <div class="text-sm text-gray">1 / 5</div>
  </div>
  <div class="scroll-content">
    <div class="card" style="margin-top:12px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
        <div>
          <div class="fw500 mb4">第1章 实验室安全概论 - 课后考核</div>
          <div class="text-xs text-gray">共 5 题 | 满分 100 分 | 及格 60 分</div>
        </div>
        <span class="tag tag-orange">待完成</span>
      </div>
      <div class="progress-wrap"><div class="progress-bar" style="width:20%;background:var(--orange)"></div></div>
    </div>
    <div class="card">
      <div class="q-header">
        <span class="q-type-badge">单选题</span><span class="text-sm fw500">第 1 题 (20分)</span><span class="diff-normal" style="margin-left:6px;">一般</span>
        <div class="q-content">下列哪种化学品属于易燃液体，储存时需远离火源？</div>
      </div>
      <div class="q-options">
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">A.</span><span>蒸馏水</span></div>
        <div class="q-option selected" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">B.</span><span>乙醇（酒精）</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">C.</span><span>氯化钠</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">D.</span><span>碳酸钠溶液</span></div>
      </div>
    </div>
    <div style="padding:0 12px 16px;">
      <button class="btn btn-primary btn-block" onclick="goBack()">提交本题</button>
    </div>
  </div>
</div>
<!-- SCREEN: 学习任务（底部Tab根页面） -->
<div class="screen" id="screen-knowledge-list">
  <div style="background:var(--white);border-bottom:1px solid var(--gray-border);flex-shrink:0;">
    <div class="topbar" style="border-bottom:none;">
      <div class="topbar-back" onclick="goto('screen-home')">&#8249; 返回</div>
      <div class="topbar-title">学习任务</div>
      <div></div>
    </div>
    <!-- 3个子Tab -->
    <div style="display:flex;padding:0 4px;">
      <div id="lxtab-1" onclick="switchLxTab(1)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:2px solid #1677ff;cursor:pointer;">学时任务</div>
      <div id="lxtab-2" onclick="switchLxTab(2)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">考前课程</div>
      <div id="lxtab-3" onclick="switchLxTab(3)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">知识学习</div>
    </div>
  </div>
  <!-- Tab内容容器 -->
  <div class="scroll-content">
    <!-- 学时任务 -->
    <div id="lxpanel-1" style="display:block;">
      <div class="tag-scroll" style="padding-top:10px;">
        <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">通识安全</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">生物类</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">辐射类</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">化学</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">应急</span>
      </div>
      <div style="padding:10px 12px;">
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#ffd666,#fa8c16);display:flex;align-items:center;justify-content:center;font-size:32px;">🔬</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">实验室安全基础知识</span>
              <span class="tag tag-orange text-xs">未达标</span>
            </div>
            <div class="text-xs text-gray">30分钟 | 8学时 | 5积分</div>
          </div>
        </div>
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#b37feb,#722ed1);display:flex;align-items:center;justify-content:center;font-size:32px;">🧬</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">生物安全专项学习</span>
              <span class="tag tag-gray text-xs">未开始</span>
            </div>
            <div class="text-xs text-gray">20分钟 | 4学时 | 3积分</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学习任务 -->
    <div id="lxpanel-2" style="display:none;padding:12px;">
      <div class="card" onclick="goto('screen-study-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
        <div style="width:100%;height:90px;background:linear-gradient(135deg,#ff9c6e,#f5222d);display:flex;align-items:center;justify-content:center;font-size:32px;">📋</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500">实验室安全基础知识</span>
            <span class="tag tag-orange text-xs">待完成</span>
          </div>
          <div class="text-xs text-gray">生命科学学院下发</div>
        </div>
      </div>
      <div class="card" onclick="goto('screen-study-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
        <div style="width:100%;height:90px;background:linear-gradient(135deg,#5cdbd3,#13c2c2);display:flex;align-items:center;justify-content:center;font-size:32px;">🧫</div>
        <div style="padding:10px 12px;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500">生物安全操作规范</span>
            <span class="tag tag-orange text-xs">待完成</span>
          </div>
          <div class="text-xs text-gray">生命科学学院下发</div>
        </div>
      </div>
    </div>
    <!-- 知识学习 -->
    <div id="lxpanel-3" style="display:none;">
      <!-- 知识点分类筛选 -->
      <div class="tag-scroll" style="padding-top:10px;border-bottom:1px solid var(--gray-border);">
        <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">通识安全</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">生物类</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">辐射类</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">化学</span>
        <span class="tag tag-gray" onclick="setKnowTag(this)">应急</span>
      </div>
      <!-- 子 Tab：视频资源 / 文章资料 -->
      <div style="display:flex;padding:0 12px;border-bottom:1px solid var(--gray-border);background:var(--white);">
        <div id="kxtab-0" onclick="switchKxTab(0)" style="flex:1;text-align:center;padding:10px 4px 9px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:2px solid #1677ff;cursor:pointer;">视频资源</div>
        <div id="kxtab-1" onclick="switchKxTab(1)" style="flex:1;text-align:center;padding:10px 4px 9px;font-size:13px;color:#888;border-bottom:2px solid transparent;cursor:pointer;">文章资料</div>
      </div>

      <!-- 视频资源面板 -->
      <div id="kxpanel-0" style="padding:12px;">
        <div class="video-grid">
          <div class="video-card" onclick="goto('screen-knowledge-detail')">
            <div class="video-thumb" style="background:linear-gradient(135deg,#1857d4,#5b8af0);">
              <div class="video-thumb-bg"></div>
              <div class="video-play">▶️</div>
            </div>
            <div class="video-info">
              <div class="video-title">生物安全柜操作演示</div>
              <div class="video-meta">20分钟 | 1学时 | 3积分</div>
              <div class="mt4"><span class="tag tag-blue text-xs">未学习</span></div>
            </div>
          </div>
          <div class="video-card" onclick="goto('screen-knowledge-detail')">
            <div class="video-thumb" style="background:linear-gradient(135deg,#10a37f,#34d399);">
              <div class="video-thumb-bg"></div>
              <div class="video-play">▶️</div>
            </div>
            <div class="video-info">
              <div class="video-title">化学品应急处置流程</div>
              <div class="video-meta">20分钟 | 1学时 | 3积分</div>
              <div class="mt4"><span class="tag tag-orange text-xs">学习中</span></div>
            </div>
          </div>
          <div class="video-card" onclick="goto('screen-knowledge-detail')">
            <div class="video-thumb" style="background:linear-gradient(135deg,#6c63ff,#a78bfa);">
              <div class="video-thumb-bg"></div>
              <div class="video-play">▶️</div>
            </div>
            <div class="video-info">
              <div class="video-title">个人防护装备穿戴</div>
              <div class="video-meta">20分钟 | 1学时 | 3积分</div>
              <div class="mt4"><span class="tag tag-gray text-xs">未学习</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 文章资料面板 -->
      <div id="kxpanel-1" style="display:none;">
      <div style="padding:10px 12px 0;">
      <div style="padding:10px 12px;">
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#b37feb,#722ed1);display:flex;align-items:center;justify-content:center;font-size:32px;">🧬</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">实验室生物安全防护规范</span>
              <span class="tag tag-orange text-xs">学习中</span>
            </div>
            <div class="text-xs text-gray">20分钟 | 1学时 | 3积分</div>
          </div>
        </div>
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#ff9c6e,#cf1322);display:flex;align-items:center;justify-content:center;font-size:32px;">⚗️</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">化学品安全使用手册</span>
              <span class="tag tag-blue text-xs">未学习</span>
            </div>
            <div class="text-xs text-gray">20分钟 | 1学时 | 3积分</div>
          </div>
        </div>
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0 0 10px;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#ff7875,#fa541c);display:flex;align-items:center;justify-content:center;font-size:32px;">🧯</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">消防安全知识手册</span>
              <span class="tag tag-gray text-xs">未学习</span>
            </div>
            <div class="text-xs text-gray">20分钟 | 1学时 | 3积分</div>
          </div>
        </div>
        <div class="card" onclick="goto('screen-knowledge-detail')" style="margin:0;cursor:pointer;padding:0;overflow:hidden;">
          <div style="width:100%;height:90px;background:linear-gradient(135deg,#95de64,#237804);display:flex;align-items:center;justify-content:center;font-size:32px;">🦺</div>
          <div style="padding:10px 12px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
              <span class="fw500">个人防护装备使用指南</span>
              <span class="tag tag-gray text-xs">未学习</span>
            </div>
            <div class="text-xs text-gray">15分钟 | 1学时 | 2积分</div>
          </div>
        </div>
      </div>
      </div>
    </div>
  </div>
  </div>
</div>

<!-- SCREEN: 通知列表 -->
<div class="screen" id="screen-notice-list">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">消息通知</div>
    <div></div>
  </div>
  <div class="tag-scroll" style="background:var(--white);border-bottom:1px solid var(--gray-border);padding:8px 12px;flex-shrink:0;">
    <span class="tag tag-gray active" onclick="setKnowTag(this)">全部</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">实验室审批</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">在线考试</span>
    <span class="tag tag-gray" onclick="setKnowTag(this)">学习培训</span>
  </div>
  <div class="scroll-content" style="padding:12px;">
    <!-- 实验室审批 -->
    <div class="card" style="margin:0 0 10px;padding:14px;">
      <div style="display:flex;align-items:flex-start;gap:10px;">
        <div style="width:36px;height:36px;border-radius:8px;background:#e6f4ff;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🏛️</div>
        <div style="flex:1;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500" style="font-size:13px;">实验室绑定审批</span>
            <span class="text-xs text-gray">刚刚</span>
          </div>
          <div class="text-xs text-gray" style="line-height:1.6;">您申请绑定"生命科学学院-A301实验室"正在审批中，请耐心等待负责人处理。</div>
          <div style="margin-top:6px;"><span class="tag tag-orange text-xs">待审批</span></div>
        </div>
      </div>
    </div>
    <!-- 在线考试 -->
    <div class="card" style="margin:0 0 10px;padding:14px;">
      <div style="display:flex;align-items:flex-start;gap:10px;">
        <div style="width:36px;height:36px;border-radius:8px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🎓</div>
        <div style="flex:1;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500" style="font-size:13px;">在线考试提醒</span>
            <span class="text-xs text-gray">10分钟前</span>
          </div>
          <div class="text-xs text-gray" style="line-height:1.6;">应知应会考试将于2026-08-05截止，请尽快完成考试，避免影响学年成绩。</div>
          <div style="margin-top:6px;"><span class="tag tag-blue text-xs" onclick="goto('screen-exam-detail')" style="cursor:pointer;">去考试 ›</span></div>
        </div>
      </div>
    </div>
    <!-- 学习培训 -->
    <div class="card" style="margin:0 0 10px;padding:14px;">
      <div style="display:flex;align-items:flex-start;gap:10px;">
        <div style="width:36px;height:36px;border-radius:8px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">📚</div>
        <div style="flex:1;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500" style="font-size:13px;">学习培训通知</span>
            <span class="text-xs text-gray">1小时前</span>
          </div>
          <div class="text-xs text-gray" style="line-height:1.6;">2026年春季实验室安全知识讲座已开始报名，活动时间：2026-03-01 10:00，地点：学术报告厅A201，请及时参加。</div>
          <div style="margin-top:6px;"><span class="tag tag-green text-xs" onclick="goto('screen-training-detail')" style="cursor:pointer;">查看详情 ›</span></div>
        </div>
      </div>
    </div>
    <!-- 学习培训2 -->
    <div class="card" style="margin:0 0 10px;padding:14px;">
      <div style="display:flex;align-items:flex-start;gap:10px;">
        <div style="width:36px;height:36px;border-radius:8px;background:#f6ffed;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">📚</div>
        <div style="flex:1;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500" style="font-size:13px;">学习任务提醒</span>
            <span class="text-xs text-gray">昨天</span>
          </div>
          <div class="text-xs text-gray" style="line-height:1.6;">您有2项学习任务待完成：实验室安全基础知识、生物安全操作规范，请及时完成。</div>
          <div style="margin-top:6px;"><span class="tag tag-blue text-xs" onclick="goto('screen-knowledge-list')" style="cursor:pointer;">去学习 ›</span></div>
        </div>
      </div>
    </div>
    <!-- 在线考试2 -->
    <div class="card" style="margin:0;padding:14px;">
      <div style="display:flex;align-items:flex-start;gap:10px;">
        <div style="width:36px;height:36px;border-radius:8px;background:#fff7e6;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;">🎓</div>
        <div style="flex:1;">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
            <span class="fw500" style="font-size:13px;">模拟考试开放通知</span>
            <span class="text-xs text-gray">2天前</span>
          </div>
          <div class="text-xs text-gray" style="line-height:1.6;">应知应会模拟考试已开放，建议在正式考试前完成模拟练习，熟悉题型。</div>
          <div style="margin-top:6px;"><span class="tag tag-blue text-xs" onclick="goto('screen-exam-list')" style="cursor:pointer;">去练习 ›</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 线下培训详情 -->
<div class="screen" id="screen-training-detail">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">培训详情</div>
    <!-- 老师端：顶栏发布开关 -->
    <div id="td-teacher-topbar" style="display:none;align-items:center;gap:6px;padding-right:4px;">
      <span id="td-publish-label" style="font-size:11px;color:#52c41a;font-weight:500;white-space:nowrap;">已发布</span>
      <div id="td-publish-toggle" onclick="toggleDetailPublish()" style="width:40px;height:22px;border-radius:11px;background:#52c41a;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0;">
        <div id="td-publish-knob" style="position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:#fff;transition:right .2s,left .2s;"></div>
      </div>
    </div>
  </div>
  <div class="scroll-content" style="padding:12px;">
    <!-- 状态标签（动态） -->
    <div id="td-status-bar" style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
      <span id="td-status-tag" style="font-size:11px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;border-radius:10px;padding:3px 10px;font-weight:500;">● 进行中</span>
      <span class="tag tag-blue text-xs" id="td-type-tag">知识讲座</span>
    </div>
    <!-- 标题 -->
    <div id="td-title" style="font-size:17px;font-weight:700;color:#1a1a1a;margin-bottom:16px;">2026年春季实验室安全知识讲座</div>
    <!-- 信息卡片 -->
    <div style="border:1px solid #f0f0f0;border-radius:10px;overflow:hidden;margin-bottom:14px;">
      <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;width:30%;white-space:nowrap;">培训时间</td>
          <td id="td-time" style="padding:10px 14px;color:#333;font-weight:500;">2026-03-01 &nbsp; 10:00 – 11:00</td>
        </tr>
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;">培训地点</td>
          <td id="td-location" style="padding:10px 14px;color:#333;">📍 学术报告厅 A201</td>
        </tr>
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;">组织单位</td>
          <td id="td-org" style="padding:10px 14px;color:#333;">🏢 生命科学学院</td>
        </tr>
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;">主讲人</td>
          <td id="td-lecturer" style="padding:10px 14px;color:#333;">李明教授</td>
        </tr>
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;">培训时长</td>
          <td id="td-duration" style="padding:10px 14px;color:#333;">60 分钟</td>
        </tr>
        <tr style="border-bottom:1px solid #f5f5f5;">
          <td style="padding:10px 14px;color:#888;background:#fafafa;">可得学时</td>
          <td style="padding:10px 14px;color:#1677ff;font-weight:600;">+ 1 学时</td>
        </tr>
        <tr>
          <td style="padding:10px 14px;color:#888;background:#fafafa;">可得积分</td>
          <td style="padding:10px 14px;color:#fa8c16;font-weight:600;">+ 10 奖励分</td>
        </tr>
      </table>
    </div>

    <!-- 签到二维码（讲师查看时显示） -->
    <div id="td-qr-section" style="display:none;border:1.5px solid #ffadd2;border-radius:12px;padding:16px 14px;background:linear-gradient(135deg,#fff0f6,#fff7e6);margin-bottom:14px;text-align:center;">
      <div style="font-size:13px;font-weight:600;color:#c41d7f;margin-bottom:12px;">签到二维码</div>
      <div style="display:inline-block;background:#fff;border-radius:12px;padding:10px;border:1.5px solid #ffadd2;cursor:pointer;" onclick="openQrModal()">
        <svg viewBox="0 0 21 21" width="120" height="120" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" style="display:block;">
          <rect width="21" height="21" fill="#fff"/>
          <rect x="0" y="0" width="7" height="1" fill="#222"/><rect x="0" y="6" width="7" height="1" fill="#222"/>
          <rect x="0" y="1" width="1" height="5" fill="#222"/><rect x="6" y="1" width="1" height="5" fill="#222"/>
          <rect x="2" y="2" width="3" height="3" fill="#222"/>
          <rect x="14" y="0" width="7" height="1" fill="#222"/><rect x="14" y="6" width="7" height="1" fill="#222"/>
          <rect x="14" y="1" width="1" height="5" fill="#222"/><rect x="20" y="1" width="1" height="5" fill="#222"/>
          <rect x="16" y="2" width="3" height="3" fill="#222"/>
          <rect x="0" y="14" width="7" height="1" fill="#222"/><rect x="0" y="20" width="7" height="1" fill="#222"/>
          <rect x="0" y="15" width="1" height="5" fill="#222"/><rect x="6" y="15" width="1" height="5" fill="#222"/>
          <rect x="2" y="16" width="3" height="3" fill="#222"/>
          <rect x="8" y="6" width="1" height="1" fill="#222"/><rect x="10" y="6" width="1" height="1" fill="#222"/><rect x="12" y="6" width="1" height="1" fill="#222"/>
          <rect x="6" y="8" width="1" height="1" fill="#222"/><rect x="6" y="10" width="1" height="1" fill="#222"/><rect x="6" y="12" width="1" height="1" fill="#222"/>
          <rect x="8" y="0" width="1" height="1" fill="#222"/><rect x="10" y="0" width="1" height="1" fill="#222"/><rect x="12" y="0" width="1" height="1" fill="#222"/>
          <rect x="8" y="2" width="2" height="1" fill="#222"/><rect x="11" y="1" width="1" height="1" fill="#222"/><rect x="12" y="3" width="1" height="1" fill="#222"/>
          <rect x="8" y="8" width="2" height="2" fill="#222"/><rect x="11" y="8" width="1" height="1" fill="#222"/><rect x="13" y="9" width="2" height="1" fill="#222"/>
          <rect x="8" y="11" width="1" height="2" fill="#222"/><rect x="10" y="10" width="2" height="1" fill="#222"/><rect x="12" y="11" width="1" height="1" fill="#222"/>
          <rect x="9" y="13" width="2" height="1" fill="#222"/><rect x="8" y="14" width="1" height="1" fill="#222"/>
          <rect x="10" y="15" width="2" height="1" fill="#222"/><rect x="9" y="16" width="1" height="1" fill="#222"/>
          <rect x="11" y="17" width="2" height="1" fill="#222"/><rect x="8" y="18" width="1" height="2" fill="#222"/>
          <rect x="15" y="8" width="1" height="1" fill="#222"/><rect x="17" y="9" width="1" height="1" fill="#222"/>
          <rect x="19" y="8" width="1" height="2" fill="#222"/><rect x="15" y="11" width="2" height="1" fill="#222"/>
          <rect x="16" y="16" width="5" height="1" fill="#222"/><rect x="16" y="20" width="5" height="1" fill="#222"/>
          <rect x="16" y="17" width="1" height="3" fill="#222"/><rect x="20" y="17" width="1" height="3" fill="#222"/>
          <rect x="18" y="18" width="1" height="1" fill="#222"/>
        </svg>
      </div>
      <div style="font-size:12px;color:#ad6494;margin-top:8px;">学员扫码签到 · 点击可放大</div>
    </div>

    <!-- 未发布提示横幅（老师端草稿状态） -->
    <div id="td-unpublished-banner" style="display:none;border:1px dashed #faad14;border-radius:10px;padding:10px 14px;background:#fffbe6;margin-bottom:14px;">
      <div style="display:flex;align-items:center;gap:8px;">
        <span style="font-size:16px;">⚠️</span>
        <div>
          <div style="font-size:13px;font-weight:600;color:#d48806;">草稿 · 未发布</div>
          <div style="font-size:12px;color:#ad8b00;margin-top:2px;">此培训尚未对学员可见，请发布后学员才能参与报名。</div>
        </div>
      </div>
    </div>

    <!-- 签到人数统计（管理端显示） -->
    <div id="td-signin-stats" style="display:none;margin-bottom:14px;">
      <div style="font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">签到统计</div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;">
        <div style="background:linear-gradient(135deg,#e6f4ff,#bae0ff);border-radius:12px;padding:14px 10px;text-align:center;border:1px solid #91caff;">
          <div style="font-size:28px;font-weight:800;color:#0958d9;line-height:1.1;">32</div>
          <div style="font-size:11px;color:#4096ff;margin-top:4px;font-weight:500;">总人数</div>
        </div>
        <div style="background:linear-gradient(135deg,#f6ffed,#d9f7be);border-radius:12px;padding:14px 10px;text-align:center;border:1px solid #b7eb8f;">
          <div style="font-size:28px;font-weight:800;color:#389e0d;line-height:1.1;">18</div>
          <div style="font-size:11px;color:#52c41a;margin-top:4px;font-weight:500;">已签到</div>
        </div>
        <div style="background:linear-gradient(135deg,#fff7e6,#ffe7ba);border-radius:12px;padding:14px 10px;text-align:center;border:1px solid #ffd591;">
          <div style="font-size:28px;font-weight:800;color:#d46b08;line-height:1.1;">14</div>
          <div style="font-size:11px;color:#fa8c16;margin-top:4px;font-weight:500;">未签到</div>
        </div>
      </div>
      <!-- 进度条 -->
      <div style="margin-top:10px;background:#f0f0f0;border-radius:20px;height:8px;overflow:hidden;">
        <div style="width:56.25%;height:100%;background:linear-gradient(90deg,#52c41a,#73d13d);border-radius:20px;transition:width .4s;"></div>
      </div>
      <div style="font-size:11px;color:#888;margin-top:4px;text-align:right;">签到率 56.25%</div>
    </div>

    <!-- 签到区域（进行中时显示） -->
    <div id="td-signin-section" style="border:1px solid #ffadd2;border-radius:10px;padding:14px;background:linear-gradient(135deg,#fff0f6,#fff7e6);text-align:center;margin-bottom:14px;">
      <div style="font-size:13px;font-weight:600;color:#c41d7f;margin-bottom:10px;">现场签到</div>
      <button onclick="openScanModal()" style="width:72px;height:72px;border-radius:12px;border:1.5px solid #eb2f96;background:#fff;color:#c41d7f;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-bottom:6px;">
        <span style="font-size:28px;line-height:1;">📷</span>
        <span style="font-size:10px;font-weight:500;">扫码签到</span>
      </button>
      <div class="text-xs fw500" id="td-sign-status" style="color:#fa8c16;">● 未签到</div>
    </div>

    <!-- 培训证明上传区域（进行中时显示） -->
    <div id="td-upload-section" style="border:1px solid #91caff;border-radius:10px;padding:14px;background:linear-gradient(135deg,#e6f4ff,#f0f9ff);margin-bottom:14px;">
      <div style="display:flex;align-items:center;gap:6px;margin-bottom:10px;">
        <span style="font-size:15px;">🖼️</span>
        <span style="font-size:13px;font-weight:600;color:#1677ff;">上传培训证明</span>
        <span style="font-size:11px;color:#999;margin-left:2px;">（如签到截图、现场照片等）</span>
      </div>
      <!-- 已选图片预览区 -->
      <div id="td-upload-preview" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;"></div>
      <!-- 上传按钮区 -->
      <div style="display:flex;align-items:center;gap:10px;">
        <label id="td-upload-btn" style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:1.5px dashed #4096ff;background:#fff;color:#1677ff;font-size:13px;font-weight:500;cursor:pointer;">
          <span style="font-size:16px;">＋</span> 选择图片
          <input type="file" id="td-file-input" accept="image/*" multiple style="display:none;" onchange="onTrainingProofSelect(this)" />
        </label>
        <button id="td-submit-proof-btn" onclick="submitTrainingProof()" style="display:none;padding:8px 20px;border-radius:8px;border:none;background:#1677ff;color:#fff;font-size:13px;font-weight:500;cursor:pointer;">提交证明</button>
      </div>
      <div style="font-size:11px;color:#aaa;margin-top:8px;">支持 JPG、PNG 格式，单张不超过 10MB，最多上传 5 张</div>
    </div>

    <!-- 已上传图片展示区域（已完成时显示） -->
    <div id="td-done-section" style="display:none;">
      <!-- 完成状态提示 -->
      <div style="border:1px solid #b7eb8f;border-radius:10px;padding:12px 14px;background:#f6ffed;display:flex;align-items:center;gap:10px;margin-bottom:14px;">
        <span style="font-size:22px;">✅</span>
        <div>
          <div style="font-size:13px;font-weight:600;color:#389e0d;">培训已完成</div>
          <div style="font-size:12px;color:#73d13d;margin-top:2px;">已签到并获得 1 学时 · +10 奖励分</div>
        </div>
      </div>
      <!-- 已上传培训证明图片 -->
      <div style="border:1px solid #f0f0f0;border-radius:10px;padding:14px;background:#fff;">
        <div style="display:flex;align-items:center;gap:6px;margin-bottom:12px;">
          <span style="font-size:15px;">🖼️</span>
          <span style="font-size:13px;font-weight:600;color:#1a1a1a;">培训证明图片</span>
        </div>
        <div id="td-done-images" style="display:flex;flex-wrap:wrap;gap:8px;">
          <!-- 示例：已上传图片（静态示意） -->
          <div style="position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #f0f0f0;background:linear-gradient(135deg,#e6f4ff,#bae0ff);display:flex;align-items:center;justify-content:center;cursor:pointer;" onclick="openProofImageViewer(0)">
            <span style="font-size:28px;">📄</span>
            <div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.4);color:#fff;font-size:9px;text-align:center;padding:2px;">证明1.jpg</div>
          </div>
          <div style="position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #f0f0f0;background:linear-gradient(135deg,#fff7e6,#ffd591);display:flex;align-items:center;justify-content:center;cursor:pointer;" onclick="openProofImageViewer(1)">
            <span style="font-size:28px;">🏅</span>
            <div style="position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.4);color:#fff;font-size:9px;text-align:center;padding:2px;">证明2.jpg</div>
          </div>
        </div>
        <div style="font-size:11px;color:#bbb;margin-top:10px;">共 2 张 · 上传于 2025-10-20</div>
      </div>
    </div>

    <!-- 签到名单（管理端显示） -->
    <div id="td-roster-section" style="display:none;margin-top:14px;">
      <!-- Tab 切换 -->
      <div style="display:flex;border-bottom:2px solid var(--gray-border);margin-bottom:12px;">
        <div id="roster-tab-0" onclick="switchRosterTab(0)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:2px solid #1677ff;margin-bottom:-2px;cursor:pointer;">已签到 <span style="background:#52c41a;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600;">18</span></div>
        <div id="roster-tab-1" onclick="switchRosterTab(1)" style="flex:1;text-align:center;padding:9px 4px 8px;font-size:13px;color:#888;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;">未签到 <span style="background:#fa8c16;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;font-weight:600;">14</span></div>
      </div>
      <!-- 已签到名单 -->
      <div id="roster-panel-0">
        <div style="display:flex;flex-direction:column;gap:8px;">
          <div style="display:flex;align-items:center;gap:10px;background:#f6ffed;border:1px solid #d9f7be;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#52c41a,#73d13d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">张</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">张伟</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2021030045 · 化学与化工学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#52c41a;font-weight:500;">✓ 已签到</div><div style="font-size:10px;color:#aaa;margin-top:2px;">10:03</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#f6ffed;border:1px solid #d9f7be;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1677ff,#4096ff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">李</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">李娜</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2022150112 · 生命科学学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#52c41a;font-weight:500;">✓ 已签到</div><div style="font-size:10px;color:#aaa;margin-top:2px;">10:07</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#f6ffed;border:1px solid #d9f7be;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#eb2f96,#ff85c2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">王</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">王芳</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2023080067 · 物理学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#52c41a;font-weight:500;">✓ 已签到</div><div style="font-size:10px;color:#aaa;margin-top:2px;">10:12</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#f6ffed;border:1px solid #d9f7be;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#722ed1,#9254de);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">刘</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">刘洋</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2020040089 · 材料学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#52c41a;font-weight:500;">✓ 已签到</div><div style="font-size:10px;color:#aaa;margin-top:2px;">10:15</div></div>
          </div>
          <div style="text-align:center;padding:8px 0;color:var(--text-hint);font-size:12px;">…… 共18人已签到 ……</div>
        </div>
      </div>
      <!-- 未签到名单 -->
      <div id="roster-panel-1" style="display:none;">
        <div style="display:flex;flex-direction:column;gap:8px;">
          <div style="display:flex;align-items:center;gap:10px;background:#fff7e6;border:1px solid #ffe7ba;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#fa8c16,#ffa940);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">赵</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">赵磊</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2022060033 · 计算机学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#fa8c16;font-weight:500;">● 未签到</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#fff7e6;border:1px solid #ffe7ba;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#13c2c2,#36cfc9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">陈</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">陈静</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2023110024 · 环境学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#fa8c16;font-weight:500;">● 未签到</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#fff7e6;border:1px solid #ffe7ba;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f5222d,#ff4d4f);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">孙</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">孙浩</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2021070056 · 机械学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#fa8c16;font-weight:500;">● 未签到</div></div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;background:#fff7e6;border:1px solid #ffe7ba;border-radius:10px;padding:10px 12px;">
            <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#08979c,#13c2c2);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;flex-shrink:0;">周</div>
            <div style="flex:1;">
              <div style="font-size:13px;font-weight:600;">周梅</div>
              <div style="font-size:11px;color:#888;margin-top:2px;">2022030078 · 化学与化工学院</div>
            </div>
            <div style="text-align:right;"><div style="font-size:11px;color:#fa8c16;font-weight:500;">● 未签到</div></div>
          </div>
          <div style="text-align:center;padding:8px 0;color:var(--text-hint);font-size:12px;">…… 共14人未签到 ……</div>
        </div>
      </div>
    </div>

  </div>
</div>
<div class="screen" id="screen-practice-list">
  <div style="background:var(--white);border-bottom:1px solid var(--gray-border);flex-shrink:0;">
    <div class="topbar" style="border-bottom:none;">
      <div class="topbar-back" onclick="goto('screen-home')">&#8249; 返回</div>
      <div class="topbar-title">刷题练习</div>
      <div></div>
    </div>
    <div class="tag-scroll" style="padding:8px 12px 10px;">
      <span class="tag tag-gray active" onclick="setPracticeTag(this,'all')">全部</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'通识安全')">通识安全</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'生物类')">生物类</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'辐射类')">辐射类</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'化学')">化学</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'应急')">应急</span>
      <span class="tag tag-gray" onclick="setPracticeTag(this,'机电类')">机电类</span>
    </div>
  </div>
  <div class="scroll-content" style="padding:12px;">
    <div class="card practice-item" data-cat="通识安全" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-blue text-xs">通识安全</span></div>
        <span style="font-size:12px;color:var(--blue);">500 题</span>
      </div>
      <div class="fw500 mb4">通识安全知识点</div>
      <div class="text-xs text-gray mb8">已答 150 题 · 正确率 82%</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:30%"></div></div>
        <span style="font-size:12px;font-weight:700;color:var(--blue);width:32px;text-align:right;">30%</span>
      </div>
    </div>
    <div class="card practice-item" data-cat="生物类" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-green text-xs">生物类</span></div>
        <span style="font-size:12px;color:var(--green);">369 题</span>
      </div>
      <div class="fw500 mb4">生物安全知识点</div>
      <div class="text-xs text-gray mb8">已答 33 题 · 正确率 96%</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:9%;background:var(--green)"></div></div>
        <span style="font-size:12px;font-weight:700;color:var(--green);width:32px;text-align:right;">9%</span>
      </div>
    </div>
    <div class="card practice-item" data-cat="化学" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-orange text-xs">化学</span></div>
        <span style="font-size:12px;color:var(--text-hint);">280 题</span>
      </div>
      <div class="fw500 mb4">化学品安全知识点</div>
      <div class="text-xs text-gray mb8">未开始</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:0%"></div></div>
        <span style="font-size:12px;font-weight:700;color:var(--text-hint);width:32px;text-align:right;">0%</span>
      </div>
    </div>
    <div class="card practice-item" data-cat="辐射类" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-blue text-xs">辐射类</span></div>
        <span style="font-size:12px;color:var(--text-hint);">180 题</span>
      </div>
      <div class="fw500 mb4">辐射安全知识点</div>
      <div class="text-xs text-gray mb8">未开始</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:0%"></div></div>
        <span style="font-size:12px;font-weight:700;color:var(--text-hint);width:32px;text-align:right;">0%</span>
      </div>
    </div>
    <div class="card practice-item" data-cat="应急" style="margin:0 0 10px;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-orange text-xs">应急</span></div>
        <span style="font-size:12px;color:var(--text-hint);">220 题</span>
      </div>
      <div class="fw500 mb4">应急处置知识点</div>
      <div class="text-xs text-gray mb8">已答 12 题 · 正确率 75%</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:5%;background:#fa8c16"></div></div>
        <span style="font-size:12px;font-weight:700;color:#fa8c16;width:32px;text-align:right;">5%</span>
      </div>
    </div>
    <div class="card practice-item" data-cat="机电类" style="margin:0;cursor:pointer;" onclick="goto('screen-practice-detail')">
      <div class="row-between mb8">
        <div><span class="tag tag-gray text-xs">机电类</span></div>
        <span style="font-size:12px;color:var(--text-hint);">150 题</span>
      </div>
      <div class="fw500 mb4">机电安全知识点</div>
      <div class="text-xs text-gray mb8">未开始</div>
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="progress-wrap" style="flex:1;"><div class="progress-bar" style="width:0%"></div></div>
        <span style="font-size:12px;font-weight:700;color:var(--text-hint);width:32px;text-align:right;">0%</span>
      </div>
    </div>
  </div>
</div>

<!-- SCREEN: 开始答题 -->
<div class="screen exam-screen" id="screen-practice-detail">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 退出</div>
    <div class="topbar-title">生物安全知识点</div>
    <div class="text-sm text-blue" onclick="togglePracticeNav()">题号</div>
  </div>
  <!-- 醒目剩余时间（练习模式显示已用时） -->
  <div style="background:linear-gradient(90deg,#52c41a,#389e0d);padding:6px 16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;">
    <span style="color:rgba(255,255,255,.8);font-size:12px;">练习用时</span>
    <span id="practiceTimer" style="color:#fff;font-size:22px;font-weight:700;letter-spacing:2px;font-variant-numeric:tabular-nums;">08:45</span>
    <span style="color:rgba(255,255,255,.6);font-size:11px;">刷题练习模式</span>
  </div>
  <div style="flex:1;overflow-y:auto;padding:12px;">
    <div class="stat-row">
      <div class="stat-item"><div class="text-xs text-gray">已答</div><div class="stat-val text-blue">33</div></div>
      <div class="stat-item"><div class="text-xs text-gray">正确</div><div class="stat-val correct-c">30</div></div>
      <div class="stat-item"><div class="text-xs text-gray">错误</div><div class="stat-val wrong-c">3</div></div>
      <div class="stat-item"><div class="text-xs text-gray">正确率</div><div class="stat-val text-blue">91%</div></div>
    </div>
    <div id="practiceQNav" style="display:none;background:var(--white);border-radius:10px;padding:12px;margin-bottom:12px;">
      <div class="text-sm fw500 mb8">答题记录</div>
      <div class="q-nav">
        <div class="q-num answered" onclick="jumpToPQ(1)">1</div><div class="q-num answered" onclick="jumpToPQ(2)">2</div><div class="q-num answered" onclick="jumpToPQ(3)">3</div>
        <div class="q-num wrong-q" onclick="jumpToPQ(4)">4</div><div class="q-num answered" onclick="jumpToPQ(5)">5</div><div class="q-num answered" onclick="jumpToPQ(6)">6</div>
        <div class="q-num answered" onclick="jumpToPQ(7)">7</div><div class="q-num wrong-q" onclick="jumpToPQ(8)">8</div><div class="q-num answered" onclick="jumpToPQ(9)">9</div>
        <div class="q-num answered" onclick="jumpToPQ(10)">10</div><div class="q-num current" id="pqnum-34" onclick="jumpToPQ(34)">34</div>
      </div>
      <div style="display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;">
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;"><div class="q-num answered" style="width:20px;height:20px;font-size:10px;"></div>已答</div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;"><div class="q-num wrong-q" style="width:20px;height:20px;font-size:10px;"></div>答错</div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;"><div class="q-num current" style="width:20px;height:20px;font-size:10px;"></div>当前</div>
      </div>
    </div>
    <div style="background:var(--white);border-radius:10px;padding:14px;">
      <div class="q-header">
        <span class="q-type-badge">判断题</span>
        <span class="text-sm fw500" id="pqLabel">第 34 题</span>
        <span class="diff-easy" style="margin-left:6px;">简单</span>
        <span id="toggleAnswerBtn2" class="see-answer-btn" onclick="toggleAnswer()">查看答案</span>
        <div class="q-content" id="pqContent">实验室废液可以直接倒入普通下水道排放，不需要进行无害化处理。</div>
      </div>
      <div class="q-options" style="margin-top:14px;" id="pqOptions">
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">A.</span><span>正确</span></div>
        <div class="q-option" onclick="selectOption(this)"><div class="q-radio"></div><span class="q-opt-key">B.</span><span>错误</span></div>
      </div>
      <div class="answer-box" id="answerBox" style="display:none;">
        <span class="answer-label">正确答案：B（错误）</span>
        <div class="answer-analysis">实验室废液必须经过无害化处理后才能排放，直接排入下水道会造成环境污染，违反危险废物污染防治相关规定。</div>
      </div>
      <div style="display:flex;justify-content:space-between;margin-top:16px;">
        <button class="btn btn-outline btn-sm" onclick="jumpToPQ(currentPQ-1)">上一题</button>
        <button class="btn btn-primary btn-sm" onclick="jumpToPQ(currentPQ+1)">下一题</button>
      </div>
    </div>
  </div>
</div>
<script>
// ===== NAVIGATION =====
var history_stack = [];

// ===== HOME PAGE RESOURCE / VIDEO TAB SWITCH =====
function switchMobRole(role) {
  var isAdmin = role === 'admin';
  var btnStudent = document.getElementById('mob-role-student');
  var btnAdmin = document.getElementById('mob-role-admin');
  if (btnStudent) {
    btnStudent.style.background = isAdmin ? 'transparent' : 'rgba(255,255,255,.95)';
    btnStudent.style.color = isAdmin ? 'rgba(255,255,255,.85)' : '#1857d4';
    btnStudent.style.fontWeight = isAdmin ? '400' : '600';
  }
  if (btnAdmin) {
    btnAdmin.style.background = isAdmin ? 'rgba(255,255,255,.95)' : 'transparent';
    btnAdmin.style.color = isAdmin ? '#1857d4' : 'rgba(255,255,255,.85)';
    btnAdmin.style.fontWeight = isAdmin ? '600' : '400';
  }
  // Show/hide admin-only elements
  document.querySelectorAll('.mob-admin-only').forEach(function(el) {
    if (!isAdmin) {
      el.style.display = 'none';
    } else {
      var saved = el.getAttribute('data-display') || 'block';
      el.style.display = saved;
    }
  });
  // Show/hide student-only elements
  document.querySelectorAll('.mob-student-only').forEach(function(el) {
    if (isAdmin) {
      el.style.display = 'none';
    } else {
      var saved = el.getAttribute('data-display') || 'block';
      el.style.display = saved;
    }
  });
  // Adjust task-status grid columns
  var grid = document.getElementById('task-status-grid');
  if (grid) grid.style.gridTemplateColumns = isAdmin ? '1fr 1fr' : '1fr 1fr 1fr';
  // Update user name and info
  var nameEl = document.getElementById('mob-user-name');
  var infoEl = document.getElementById('mob-user-info');
  if (nameEl) nameEl.textContent = isAdmin ? '李星星' : '李泽泽';
  if (infoEl) infoEl.textContent = isAdmin ? '教师 · 20231001 · 生命科学学院' : '硕士研究生 · 20231001 · 生命科学学院';
  // Reset training sub-role to student view when switching away from admin
  if (!isAdmin) {
    setTrainingRole('student');
  }
}
function switchResTab(idx) {
  document.querySelectorAll('.res-tab').forEach(function(t, i) {
    t.style.color = i === idx ? 'var(--blue)' : '#888';
    t.style.fontWeight = i === idx ? '600' : '400';
    t.style.borderBottom = i === idx ? '2px solid var(--blue)' : '2px solid transparent';
  });
}
function switchVidTab(idx) {
  document.querySelectorAll('.vid-tab').forEach(function(t, i) {
    t.style.color = i === idx ? 'var(--blue)' : '#888';
    t.style.fontWeight = i === idx ? '600' : '400';
    t.style.borderBottom = i === idx ? '2px solid var(--blue)' : '2px solid transparent';
  });
}
function goto(screenId) {
  var current = document.querySelector('.screen.active');
  if (current) {
    if (current.id !== screenId) history_stack.push(current.id);
    current.classList.remove('active');
  }
  var next = document.getElementById(screenId);
  if (!next) return;
  next.classList.add('active');
  window.scrollTo(0, 0);
  var sc = next.querySelector('.scroll-content');
  if (sc) sc.scrollTop = 0;
  syncBottomTab(screenId);
}
function goBack() {
  if (history_stack.length > 0) {
    var prev = history_stack.pop();
    var current = document.querySelector('.screen.active');
    if (current) current.classList.remove('active');
    var prevEl = document.getElementById(prev);
    if (prevEl) {
      prevEl.classList.add('active');
      syncBottomTab(prevEl.id);
    }
  } else {
    goto('screen-home');
  }
}

// ===== BOTTOM TAB SYNC =====
var tabScreenMap = {
  'screen-home': 0,
  'screen-my': 1
};
function syncBottomTab(screenId) {
  var idx = tabScreenMap[screenId];
  // Update the tab bar inside the now-active screen
  var activeScreen = document.getElementById(screenId);
  if (!activeScreen) return;
  var tabs = activeScreen.querySelectorAll('.bottom-tab .tab-item');
  if (!tabs.length) return;
  if (idx === undefined) return; // sub-page, no bottom tab to sync
  tabs.forEach(function(t, i) {
    t.classList.toggle('active', i === idx);
  });
}

// ===== TOAST =====
function showToast(msg, duration) {
  var existing = document.getElementById('__toast');
  if (existing) existing.remove();
  var t = document.createElement('div');
  t.id = '__toast';
  t.textContent = msg;
  t.style.cssText = 'position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.72);color:#fff;padding:9px 22px;border-radius:20px;font-size:14px;z-index:9999;pointer-events:none;opacity:1;transition:opacity 0.4s;';
  document.body.appendChild(t);
  setTimeout(function() {
    t.style.opacity = '0';
    setTimeout(function() { t.remove(); }, 400);
  }, duration || 2000);
}

// ===== KNOWLEDGE TAG =====
function setKnowTag(el) {
  var parent = el.parentElement;
  parent.querySelectorAll('.tag').forEach(function(t) {
    t.classList.remove('active');
    t.style.background = '';
    t.style.color = '';
  });
  el.classList.add('active');
  el.style.background = 'var(--blue)';
  el.style.color = 'white';
}

// ===== PRACTICE TAG =====
function setPracticeTag(el, cat) {
  var parent = el.parentElement;
  parent.querySelectorAll('.tag').forEach(function(t) {
    t.classList.remove('active');
    t.style.background = '';
    t.style.color = '';
  });
  el.classList.add('active');
  el.style.background = 'var(--blue)';
  el.style.color = 'white';
  document.querySelectorAll('.practice-item').forEach(function(item) {
    if (cat === 'all' || item.dataset.cat === cat) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  });
}

// ===== Q OPTION SELECT =====
function selectOption(el) {
  var container = el.closest('.q-options');
  if (!container) return;
  container.querySelectorAll('.q-option').forEach(function(o) {
    o.classList.remove('selected');
  });
  el.classList.add('selected');
}

// ===== QUESTION JUMP =====
var currentQ = 8;
var examQData = {
  1:{l:'第 1 题 (2分)',c:'实验室安全管理的核心目标是什么？',diff:'简单'},
  2:{l:'第 2 题 (2分)',c:'以下哪项属于一级生物安全防护设施？',diff:'一般'},
  3:{l:'第 3 题 (2分)',c:'化学品安全数据表（SDS）的主要作用是？',diff:'简单'},
  4:{l:'第 4 题 (2分)',c:'实验室发生化学品泄漏时，正确的第一步处理方式是？',diff:'一般'},
  5:{l:'第 5 题 (2分)',c:'下列哪种废液属于危险废物，必须单独收集处理？',diff:'一般'},
  6:{l:'第 6 题 (2分)',c:'使用高压灭菌锅时，以下哪项操作是不正确的？',diff:'很难'},
  7:{l:'第 7 题 (2分)',c:'实验室电气安全规范中，禁止在实验室内进行哪种行为？',diff:'简单'},
  8:{l:'第 8 题 (2分)',c:'以下哪种操作违反了实验室生物安全操作规范？',diff:'很难'},
  9:{l:'第 9 题 (2分)',c:'辐射防护的三要素是？',diff:'极难'},
  10:{l:'第 10 题 (2分)',c:'实验室个人防护装备（PPE）选择的依据是？',diff:'一般'},
  11:{l:'第 11 题 (2分)',c:'消防器材应至少每隔多长时间进行一次检查？',diff:'简单'},
  12:{l:'第 12 题 (2分)',c:'下列关于实验室安全标志的说法，正确的是？',diff:'一般'}
};
var diffClass = {简单:'diff-easy',一般:'diff-normal',很难:'diff-hard',极难:'diff-extreme'};
function jumpToQ(n) {
  if (n < 1 || n > 12) return;
  currentQ = n;
  var d = examQData[n] || {l:'第 '+n+' 题 (2分)',c:'题目内容加载中...',diff:'一般'};
  document.getElementById('qLabel').textContent = d.l;
  document.getElementById('qContent').textContent = d.c;
  var diffEl = document.getElementById('qLabel').nextElementSibling;
  if (diffEl) { diffEl.className = diffClass[d.diff] || 'diff-normal'; diffEl.textContent = d.diff; }
  document.querySelectorAll('#qNavPanel .q-num').forEach(function(el) {
    el.classList.remove('current');
    if (parseInt(el.textContent) === n) el.classList.add('current');
  });
  toggleQNav(); toggleQNav(); // close nav after jump
}
var currentPQ = 34;
function jumpToPQ(n) {
  if (n < 1) return;
  currentPQ = n;
  document.getElementById('pqLabel').textContent = '第 ' + n + ' 题';
  document.querySelectorAll('#practiceQNav .q-num').forEach(function(el) {
    el.classList.remove('current');
    if (parseInt(el.textContent) === n) el.classList.add('current');
  });
  var ab = document.getElementById('answerBox');
  if (ab) ab.style.display = 'none';
  var btn2 = document.getElementById('toggleAnswerBtn2');
  if (btn2) btn2.textContent = '查看答案';
  togglePracticeNav(); togglePracticeNav();
}

// ===== TOGGLE PANELS =====
function toggleQNav() {
  var el = document.getElementById('qNavPanel');
  if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
function togglePracticeNav() {
  var el = document.getElementById('practiceQNav');
  if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
function toggleAnswer() {
  var el = document.getElementById('answerBox');
  var btn = document.getElementById('toggleAnswerBtn') || document.getElementById('toggleAnswerBtn2');
  if (!el) return;
  var shown = el.style.display !== 'none';
  el.style.display = shown ? 'none' : 'block';
  if (btn) btn.textContent = shown ? '查看答案' : '收起答案';
}

// ===== APPROVE ITEM =====
function approveItem(btn, action) {
  var card = btn.closest('.approval-card');
  var statusEl = card.querySelector('.approval-status-pending');
  var btnsEl = card.querySelector('div[style*="display:flex;gap:8px"]');
  if (action === 'pass') {
    if (statusEl) { statusEl.textContent = '已通过'; statusEl.className = 'approval-status-pass'; }
    card.style.background = '#f6ffed';
    card.style.border = '1px solid var(--green)';
  } else {
    if (statusEl) { statusEl.textContent = '已驳回'; statusEl.className = 'approval-status-reject'; }
    card.style.background = '#fff1f0';
    card.style.border = '1px solid var(--red)';
  }
  if (btnsEl) btnsEl.style.display = 'none';
}

// ===== EXAM TIMER =====
var timerInterval = null;
var timerSeconds = 52 * 60 + 14;
function startTimer() {
  if (timerInterval) clearInterval(timerInterval);
  timerInterval = setInterval(function() {
    timerSeconds--;
    if (timerSeconds <= 0) {
      timerSeconds = 0;
      clearInterval(timerInterval);
      submitExam();
    }
    var m = Math.floor(timerSeconds / 60);
    var s = timerSeconds % 60;
    var el = document.getElementById('examTimer');
    if (el) el.textContent = (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
    // 剩余10分钟以内变红色警告
    var bar = document.getElementById('examTimerBar');
    if (bar) bar.style.background = timerSeconds <= 600 ? 'linear-gradient(90deg,#f5222d,#cf1322)' : 'linear-gradient(90deg,#1677ff,#0958d9)';
  }, 1000);
}

// ===== SUBMIT EXAM =====
function submitExam() {
  if (confirm('确认交卷吗？')) {
    clearInterval(timerInterval);
    goto('screen-exam-result');
  }
}

// ===== TRAINING ROLE / SCAN / QR =====
function openTrainingDetail(state) {
  // Always opens as student view
  window._trainingRole = 'student';
  _openTrainingDetailImpl(state);
}

function openTrainingDetailAsTeacher(state) {
  window._trainingRole = 'teacher';
  _openTrainingDetailImpl(state);
}

function _openTrainingDetailImpl(state) {
  // state: 'active' | 'done' | 'unpublished'
  var isTeacher = window._trainingRole === 'teacher';
  var isDone = state === 'done';
  var isUnpublished = state === 'unpublished';

  var statusTag = document.getElementById('td-status-tag');
  var signinSection = document.getElementById('td-signin-section');
  var uploadSection = document.getElementById('td-upload-section');
  var doneSection = document.getElementById('td-done-section');
  var titleEl = document.getElementById('td-title');
  var timeEl = document.getElementById('td-time');
  var locationEl = document.getElementById('td-location');
  var orgEl = document.getElementById('td-org');
  var lecturerEl = document.getElementById('td-lecturer');
  var durationEl = document.getElementById('td-duration');
  var teacherTopbar = document.getElementById('td-teacher-topbar');
  var publishLabel = document.getElementById('td-publish-label');
  var publishToggle = document.getElementById('td-publish-toggle');
  var publishKnob = document.getElementById('td-publish-knob');
  var unpublishedBanner = document.getElementById('td-unpublished-banner');
  var signinStats = document.getElementById('td-signin-stats');
  var rosterSection = document.getElementById('td-roster-section');
  var qrSection = document.getElementById('td-qr-section');

  // Teacher topbar toggle
  if (teacherTopbar) teacherTopbar.style.display = isTeacher ? 'flex' : 'none';
  if (qrSection) qrSection.style.display = isTeacher ? 'block' : 'none';

  if (isDone) {
    if (statusTag) { statusTag.textContent = '✓ 已完成'; statusTag.style.cssText = 'font-size:11px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;border-radius:10px;padding:3px 10px;font-weight:500;'; }
    if (titleEl) titleEl.textContent = '2025年秋季消防安全知识培训';
    if (timeEl) timeEl.textContent = '2025-10-20   09:00 – 10:30';
    if (locationEl) locationEl.innerHTML = '📍 综合楼报告厅';
    if (orgEl) orgEl.innerHTML = '🏢 生命科学学院';
    if (lecturerEl) lecturerEl.textContent = '王刚教授';
    if (durationEl) durationEl.textContent = '90 分钟';
    if (signinSection) signinSection.style.display = 'none';
    if (uploadSection) uploadSection.style.display = 'none';
    if (doneSection) doneSection.style.display = 'block';
    if (unpublishedBanner) unpublishedBanner.style.display = 'none';
    if (signinStats) signinStats.style.display = isTeacher ? 'block' : 'none';
    if (rosterSection) rosterSection.style.display = isTeacher ? 'block' : 'none';
    setDetailPublishUI(true);
  } else if (isUnpublished) {
    if (statusTag) { statusTag.textContent = '● 未发布'; statusTag.style.cssText = 'font-size:11px;background:#f5f5f5;color:#8c8c8c;border:1px solid #d9d9d9;border-radius:10px;padding:3px 10px;font-weight:500;'; }
    if (titleEl) titleEl.textContent = '2026年生物安全专项技能培训';
    if (timeEl) timeEl.textContent = '2026-05-10   14:00 – 16:00';
    if (locationEl) locationEl.innerHTML = '📍 生命楼实验中心';
    if (orgEl) orgEl.innerHTML = '🏢 生命科学学院';
    if (lecturerEl) lecturerEl.textContent = '陈华教授';
    if (durationEl) durationEl.textContent = '120 分钟';
    if (signinSection) signinSection.style.display = 'none';
    if (uploadSection) uploadSection.style.display = 'none';
    if (doneSection) doneSection.style.display = 'none';
    if (unpublishedBanner) unpublishedBanner.style.display = 'block';
    if (signinStats) signinStats.style.display = 'none';
    if (rosterSection) rosterSection.style.display = 'none';
    setDetailPublishUI(false);
  } else {
    if (statusTag) { statusTag.textContent = '● 进行中'; statusTag.style.cssText = 'font-size:11px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;border-radius:10px;padding:3px 10px;font-weight:500;'; }
    if (titleEl) titleEl.textContent = '2026年春季实验室安全知识讲座';
    if (timeEl) timeEl.innerHTML = '2026-03-01 &nbsp; 10:00 – 11:00';
    if (locationEl) locationEl.innerHTML = '📍 学术报告厅 A201';
    if (orgEl) orgEl.innerHTML = '🏢 生命科学学院';
    if (lecturerEl) lecturerEl.textContent = '李明教授';
    if (durationEl) durationEl.textContent = '60 分钟';
    if (signinSection) signinSection.style.display = isTeacher ? 'none' : 'block';
    if (uploadSection) uploadSection.style.display = isTeacher ? 'none' : 'block';
    if (doneSection) doneSection.style.display = 'none';
    if (unpublishedBanner) unpublishedBanner.style.display = 'none';
    if (signinStats) signinStats.style.display = isTeacher ? 'block' : 'none';
    if (rosterSection) rosterSection.style.display = isTeacher ? 'block' : 'none';
    setDetailPublishUI(true);
    if (!isTeacher) {
      trainingProofFiles = [];
      renderTrainingProofPreviews();
    }
  }
  goto('screen-training-detail');
}

function setDetailPublishUI(isPublished) {
  var label = document.getElementById('td-publish-label');
  var toggle = document.getElementById('td-publish-toggle');
  var knob = document.getElementById('td-publish-knob');
  if (!label) return;
  if (isPublished) {
    label.textContent = '已发布'; label.style.color = '#52c41a';
    if (toggle) toggle.style.background = '#52c41a';
    if (knob) { knob.style.right = '4px'; knob.style.left = 'auto'; }
    toggle.dataset.published = '1';
  } else {
    label.textContent = '未发布'; label.style.color = '#8c8c8c';
    if (toggle) toggle.style.background = '#d9d9d9';
    if (knob) { knob.style.left = '4px'; knob.style.right = 'auto'; }
    toggle.dataset.published = '0';
  }
}

var _currentTrainingFilter = 'all';

function filterTrainingPublish(type, btnEl) {
  _currentTrainingFilter = type;
  // 更新按钮选中样式
  ['lx-filter-all','lx-filter-pub','lx-filter-unpub'].forEach(function(id) {
    var b = document.getElementById(id);
    if (b) { b.style.background = 'transparent'; b.style.color = '#888'; b.style.fontWeight = 'normal'; }
  });
  if (btnEl) { btnEl.style.background = '#1677ff'; btnEl.style.color = '#fff'; btnEl.style.fontWeight = '600'; }
  reapplyTrainingFilter();
}

function reapplyTrainingFilter() {
  var cards = document.querySelectorAll('.lx-training-card');
  var isTeacher = window._trainingRole === 'teacher';
  cards.forEach(function(card) {
    var pub = card.dataset.publish; // '1' or '0'
    var isDone = card.dataset.done === '1';
    var isUnpub = card.classList.contains('training-unpublished-card') || pub === '0';
    // 已完成的卡片始终隐藏（学员和老师均不显示）
    if (isDone) { card.style.display = 'none'; return; }
    // 学员视角：未发布卡片始终隐藏
    if (!isTeacher && isUnpub) { card.style.display = 'none'; return; }
    // 老师视角：按筛选条件决定
    if (_currentTrainingFilter === 'published')   { card.style.display = (pub === '1') ? 'block' : 'none'; }
    else if (_currentTrainingFilter === 'unpublished') { card.style.display = (pub === '0') ? 'block' : 'none'; }
    else { card.style.display = 'block'; } // 全部
  });
}

function toggleTrainingPublish(knobEl, currentlyPublished) {
  var ctrlWrap = knobEl.parentElement;          // .training-teacher-ctrl
  var labelEl = ctrlWrap.querySelector('span'); // "已发布/未发布" 文字
  var card = ctrlWrap.closest('.card');
  var cover = card ? card.children[0] : null;   // 第一个子元素：封面图 div
  var body  = card ? card.children[1] : null;   // 第二个子元素：内容区 div
  // 状态标签：内容区第一行右侧的 span
  var statusSpan = body ? body.querySelector('div:first-child span:last-child') : null;

  if (currentlyPublished) {
    // --- 取消发布 ---
    // 开关变灰
    knobEl.style.background = '#d9d9d9';
    var knob = knobEl.querySelector('div');
    if (knob) { knob.style.right = 'auto'; knob.style.left = '3px'; }
    if (labelEl) { labelEl.textContent = '未发布'; labelEl.style.color = '#8c8c8c'; }
    knobEl.setAttribute('onclick', 'toggleTrainingPublish(this,false)');
    // 封面图置灰
    if (cover) cover.style.filter = 'grayscale(1) brightness(.82)';
    // 文字区降透明
    if (body) body.style.opacity = '.5';
    // 状态标签改为"未发布"
    if (statusSpan) {
      statusSpan.dataset.origText  = statusSpan.textContent;
      statusSpan.dataset.origStyle = statusSpan.getAttribute('style') || '';
      statusSpan.textContent = '未发布';
      statusSpan.style.cssText = 'font-size:11px;background:#f5f5f5;color:#8c8c8c;border:1px solid #d9d9d9;border-radius:10px;padding:2px 8px;flex-shrink:0;';
    }
    if (card) card.dataset.publish = '0';
    reapplyTrainingFilter();
    showToast('培训已取消发布');
  } else {
    // --- 重新发布 ---
    // 开关变绿
    knobEl.style.background = '#52c41a';
    var knob = knobEl.querySelector('div');
    if (knob) { knob.style.left = 'auto'; knob.style.right = '3px'; }
    if (labelEl) { labelEl.textContent = '已发布'; labelEl.style.color = '#52c41a'; }
    knobEl.setAttribute('onclick', 'toggleTrainingPublish(this,true)');
    // 还原封面图
    if (cover) cover.style.filter = '';
    // 还原文字区透明度
    if (body) body.style.opacity = '1';
    // 还原状态标签
    if (statusSpan && statusSpan.dataset.origText) {
      statusSpan.textContent = statusSpan.dataset.origText;
      statusSpan.setAttribute('style', statusSpan.dataset.origStyle);
    }
    if (card) card.dataset.publish = '1';
    reapplyTrainingFilter();
    showToast('培训已发布，学员可见');
  }
}

function toggleDetailPublish() {
  var toggle = document.getElementById('td-publish-toggle');
  var banner = document.getElementById('td-unpublished-banner');
  var statusTag = document.getElementById('td-status-tag');
  var signinSection = document.getElementById('td-signin-section');
  var uploadSection = document.getElementById('td-upload-section');
  if (!toggle) return;
  var nowPublished = toggle.dataset.published === '1';
  if (nowPublished) {
    setDetailPublishUI(false);
    if (banner) banner.style.display = 'block';
    if (statusTag) { statusTag.textContent = '● 未发布'; statusTag.style.cssText = 'font-size:11px;background:#f5f5f5;color:#8c8c8c;border:1px solid #d9d9d9;border-radius:10px;padding:3px 10px;font-weight:500;'; }
    if (signinSection) signinSection.style.display = 'none';
    if (uploadSection) uploadSection.style.display = 'none';
    showToast('培训已取消发布');
  } else {
    setDetailPublishUI(true);
    if (banner) banner.style.display = 'none';
    if (statusTag) { statusTag.textContent = '● 进行中'; statusTag.style.cssText = 'font-size:11px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;border-radius:10px;padding:3px 10px;font-weight:500;'; }
    showToast('培训已发布，学员可见');
  }
}


function setTrainingRole(role) {
  var isTeacher = role === 'teacher';
  var sq = document.getElementById('training-student-qr');
  var tq = document.getElementById('training-teacher-qr');
  if (sq) sq.style.display = isTeacher ? 'none' : 'flex';
  if (tq) tq.style.display = isTeacher ? 'flex' : 'none';
  var bs = document.getElementById('trole-student');
  var bt = document.getElementById('trole-teacher');
  if (bs) { bs.style.background = isTeacher ? 'transparent' : '#eb2f96'; bs.style.color = isTeacher ? '#c41d7f' : '#fff'; }
  if (bt) { bt.style.background = isTeacher ? '#eb2f96' : 'transparent'; bt.style.color = isTeacher ? '#fff' : '#c41d7f'; }
  // sync list-page teacher overlays
  var teacherOverlays = document.querySelectorAll('.training-teacher-ctrl');
  teacherOverlays.forEach(function(el) { el.style.display = isTeacher ? 'flex' : 'none'; });
  // update list role buttons
  var lbs = document.getElementById('lx-trole-student');
  var lbt = document.getElementById('lx-trole-teacher');
  if (lbs) { lbs.style.background = isTeacher ? 'transparent' : '#eb2f96'; lbs.style.color = isTeacher ? '#c41d7f' : '#fff'; }
  if (lbt) { lbt.style.background = isTeacher ? '#eb2f96' : 'transparent'; lbt.style.color = isTeacher ? '#fff' : '#c41d7f'; }
  // store current role globally
  window._trainingRole = role;
  // 筛选栏随老师身份显示/隐藏，切回学员时重置为"全部"
  var filterBar = document.getElementById('lx-publish-filter');
  if (filterBar) filterBar.style.display = isTeacher ? 'block' : 'none';
  if (!isTeacher) filterTrainingPublish('all', document.getElementById('lx-filter-all'));
  // Show/hide unpublished card (teacher-only)
  var unpubCard = document.querySelector('.training-unpublished-card');
  if (unpubCard) unpubCard.style.display = isTeacher ? 'block' : 'none';
}
function showModal(id) {
  var m = document.getElementById(id);
  if (m) m.style.display = 'flex';
}
function hideTrainingHistory() {
  var m = document.getElementById('modal-training-history');
  if (m) m.style.display = 'none';
}
function openScanModal() {
  var m = document.getElementById('scanModal');
  m.style.display = 'flex';
}
function closeScanModal() {
  document.getElementById('scanModal').style.display = 'none';
}
function completeScan() {
  closeScanModal();
  var el = document.getElementById('trainingSignStatus');
  if (el) { el.textContent = '✓ 已签到'; el.style.color = '#52c41a'; }
  showToast('签到成功！');
}
function openQrModal() {
  var m = document.getElementById('qrModal');
  m.style.display = 'flex';
}
function closeQrModal() {
  document.getElementById('qrModal').style.display = 'none';
}

// ===== TRAINING PROOF IMAGE UPLOAD =====
var trainingProofFiles = [];

function onTrainingProofSelect(input) {
  var files = Array.from(input.files);
  var MAX = 5;
  var remaining = MAX - trainingProofFiles.length;
  if (remaining <= 0) { showToast('最多上传 5 张图片'); input.value = ''; return; }
  files = files.slice(0, remaining);
  var oversized = files.filter(function(f) { return f.size > 10 * 1024 * 1024; });
  if (oversized.length) { showToast('图片大小不能超过 10MB'); input.value = ''; return; }
  trainingProofFiles = trainingProofFiles.concat(files);
  renderTrainingProofPreviews();
  input.value = '';
}

function renderTrainingProofPreviews() {
  var container = document.getElementById('td-upload-preview');
  var submitBtn = document.getElementById('td-submit-proof-btn');
  var uploadBtn = document.getElementById('td-upload-btn');
  if (!container) return;
  container.innerHTML = '';
  trainingProofFiles.forEach(function(file, idx) {
    var url = URL.createObjectURL(file);
    var wrap = document.createElement('div');
    wrap.style.cssText = 'position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #91caff;flex-shrink:0;';
    var img = document.createElement('img');
    img.src = url;
    img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;';
    img.onclick = (function(u) { return function() { openProofImageViewerUrl(u); }; })(url);
    var del = document.createElement('button');
    del.innerHTML = '×';
    del.style.cssText = 'position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;';
    del.onclick = (function(i) { return function(e) { e.stopPropagation(); trainingProofFiles.splice(i,1); renderTrainingProofPreviews(); }; })(idx);
    wrap.appendChild(img);
    wrap.appendChild(del);
    container.appendChild(wrap);
  });
  if (submitBtn) submitBtn.style.display = trainingProofFiles.length ? 'inline-block' : 'none';
  if (uploadBtn) uploadBtn.style.display = trainingProofFiles.length >= 5 ? 'none' : 'inline-flex';
}

function submitTrainingProof() {
  if (!trainingProofFiles.length) { showToast('请先选择图片'); return; }
  showToast('培训证明已提交，等待审核');
  // Move submitted images to done view
  var doneImages = document.getElementById('td-done-images');
  if (doneImages) {
    doneImages.innerHTML = '';
    trainingProofFiles.forEach(function(file, idx) {
      var url = URL.createObjectURL(file);
      var wrap = document.createElement('div');
      wrap.style.cssText = 'position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;border:1px solid #f0f0f0;cursor:pointer;';
      var img = document.createElement('img');
      img.src = url;
      img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
      img.onclick = (function(u) { return function() { openProofImageViewerUrl(u); }; })(url);
      var label = document.createElement('div');
      label.style.cssText = 'position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.4);color:#fff;font-size:9px;text-align:center;padding:2px;';
      label.textContent = '证明' + (idx+1) + '.jpg';
      wrap.appendChild(img);
      wrap.appendChild(label);
      doneImages.appendChild(wrap);
    });
  }
}

function openProofImageViewer(idx) {
  // For static demo images
  showToast('查看图片 ' + (idx + 1));
}

function openProofImageViewerUrl(url) {
  var overlay = document.getElementById('proofImageOverlay');
  if (!overlay) {
    overlay = document.createElement('div');
    overlay.id = 'proofImageOverlay';
    overlay.style.cssText = 'position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;cursor:pointer;';
    overlay.onclick = function() { overlay.style.display = 'none'; };
    var img = document.createElement('img');
    img.id = 'proofImageOverlayImg';
    img.style.cssText = 'max-width:95vw;max-height:90vh;border-radius:8px;object-fit:contain;';
    overlay.appendChild(img);
    document.body.appendChild(overlay);
  }
  document.getElementById('proofImageOverlayImg').src = url;
  overlay.style.display = 'flex';
}


// ===== SIGN-IN =====
function doSignIn(btn) {
  if (btn.dataset.signed) return;
  btn.dataset.signed = '1';
  btn.textContent = '已签到';
  btn.style.background = 'var(--green)';
  btn.style.borderColor = 'var(--green)';
  showToast('签到成功！');
}

// ===== RIPPLE =====
document.addEventListener('click', function(e) {
  var card = e.target.closest('.card');
  if (!card) return;
  if (e.target.tagName === 'BUTTON' || e.target.closest('button')) return;
  var r = document.createElement('span');
  r.style.cssText = 'position:absolute;border-radius:50%;background:rgba(0,112,255,0.12);pointer-events:none;transform:scale(0);animation:rippleAnim 0.5s linear;';
  var size = Math.max(card.offsetWidth, card.offsetHeight);
  var rect = card.getBoundingClientRect();
  r.style.width = r.style.height = size + 'px';
  r.style.left = (e.clientX - rect.left - size/2) + 'px';
  r.style.top = (e.clientY - rect.top - size/2) + 'px';
  if (getComputedStyle(card).position === 'static') card.style.position = 'relative';
  card.style.overflow = 'hidden';
  card.appendChild(r);
  setTimeout(function() { r.remove(); }, 500);
});
var rippleStyle = document.createElement('style');
rippleStyle.textContent = '@keyframes rippleAnim{to{transform:scale(2.5);opacity:0}}';
document.head.appendChild(rippleStyle);

// ===== REPORT MODAL =====
function showReportModal() {
  var m = document.getElementById('reportModal');
  m.style.display = 'flex';
}
function closeReportModal() {
  document.getElementById('reportModal').style.display = 'none';
}
function downloadReport() {
  var a = document.createElement('a');
  a.href = 'img/毕业报告.png';
  a.download = '毕业报告.png';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  showToast('开始下载…');
}

// ===== BIND LAB MODAL =====
var labData = [
  { name:'有机化学实验室（A301）', loc:'理学楼A栋3层', head:'张教授', dept:'化学与化工学院', level:'Ⅱ', levelColor:'#fa8c16', cat:'化学类', type:'科研实验室', label:'化学与化工学院-有机化学实验室（A301）-理学楼A栋3层' },
  { name:'细胞生物学实验室（B202）', loc:'生命楼B栋2层', head:'李教授', dept:'生命科学学院', level:'Ⅲ', levelColor:'#f5222d', cat:'生物类', type:'科研实验室', label:'生命科学学院-细胞生物学实验室（B202）-生命楼B栋2层' },
  { name:'机械加工实验室（C105）', loc:'工程楼C栋1层', head:'王教授', dept:'机电工程学院', level:'Ⅰ', levelColor:'#52c41a', cat:'机电类', type:'科研实验室', label:'机电工程学院-机械加工实验室（C105）-工程楼C栋1层' }
];
var selectedLabIdx = -1;
function onBindLabSearch(val) {
  var dd = document.getElementById('bindLabDropdown');
  dd.style.display = val.trim() ? 'block' : 'none';
}
function selectLab(idx) {
  selectedLabIdx = idx;
  var lab = labData[idx];
  var inp = document.getElementById('bindLabSearch');
  inp.value = lab.label;
  document.getElementById('bindLabDropdown').style.display = 'none';
  document.getElementById('blab-name').textContent = lab.name;
  document.getElementById('blab-loc').textContent = lab.loc;
  document.getElementById('blab-head').textContent = lab.head;
  document.getElementById('blab-dept').textContent = lab.dept;
  var lvl = document.getElementById('blab-level');
  lvl.innerHTML = '<span style="color:' + lab.levelColor + ';font-weight:600;border:1px solid ' + lab.levelColor + ';border-radius:4px;padding:1px 6px;">' + lab.level + '级</span>';
  document.getElementById('blab-cat').textContent = lab.cat;
  document.getElementById('blab-type').textContent = lab.type;
  document.getElementById('bindLabInfo').style.display = 'block';
}
function closeBindLabModal() {
  document.getElementById('bindLabModal').style.display = 'none';
}
function confirmBindLab() {
  var noLab = document.getElementById('bindNoLabCheck').checked;
  var agreed = document.getElementById('bindAgreeCheck').checked;
  if (!noLab && selectedLabIdx < 0) { showToast('请先搜索并选择实验室'); return; }
  if (!agreed) { showToast('请阅读并勾选须知及责任说明'); return; }
  closeBindLabModal();
  showToast('已提交申请，请等待负责人审批');
}

// ===== ROSTER TAB SWITCH =====
function switchRosterTab(idx) {
  for (var i = 0; i < 2; i++) {
    var tab = document.getElementById('roster-tab-' + i);
    var panel = document.getElementById('roster-panel-' + i);
    if (tab) {
      tab.style.color = i === idx ? '#1677ff' : '#888';
      tab.style.fontWeight = i === idx ? '600' : '400';
      tab.style.borderBottom = i === idx ? '2px solid #1677ff' : '2px solid transparent';
    }
    if (panel) panel.style.display = i === idx ? 'block' : 'none';
  }
}

// ===== EXAM TAB SWITCH =====
function switchExTab(idx) {
  for (var i = 0; i < 3; i++) {
    var tab = document.getElementById('extab-' + i);
    var panel = document.getElementById('expanel-' + i);
    if (tab) {
      tab.style.color = i === idx ? '#1677ff' : '#888';
      tab.style.fontWeight = i === idx ? '600' : '400';
      tab.style.borderBottom = i === idx ? '2px solid #1677ff' : '2px solid transparent';
    }
    if (panel) panel.style.display = i === idx ? 'block' : 'none';
  }
}

// ===== LEARNING TAB SWITCH =====
function switchLxTab(idx) {
  var ids = [1, 2, 3];
  for (var k = 0; k < ids.length; k++) {
    var i = ids[k];
    var tab = document.getElementById('lxtab-' + i);
    var panel = document.getElementById('lxpanel-' + i);
    if (tab) {
      tab.style.color = i === idx ? '#1677ff' : '#888';
      tab.style.fontWeight = i === idx ? '600' : '400';
      tab.style.borderBottom = i === idx ? '2px solid #1677ff' : '2px solid transparent';
    }
    if (panel) panel.style.display = i === idx ? 'block' : 'none';
  }
}

// ===== TRAINING TASK TAB SWITCH =====
function switchTtTab(idx) {
  for (var i = 0; i < 2; i++) {
    var tab = document.getElementById('tt-tab-' + i);
    var panel = document.getElementById('tt-panel-' + i);
    if (tab) {
      tab.style.color = i === idx ? '#1677ff' : '#888';
      tab.style.fontWeight = i === idx ? '600' : '400';
      tab.style.borderBottom = i === idx ? '2px solid #1677ff' : '2px solid transparent';
    }
    if (panel) panel.style.display = i === idx ? 'block' : 'none';
  }
}

// ===== KNOWLEDGE SUB-TAB SWITCH =====
function switchKxTab(idx) {
  for (var i = 0; i < 2; i++) {
    var tab = document.getElementById('kxtab-' + i);
    var panel = document.getElementById('kxpanel-' + i);
    if (tab) {
      tab.style.color = i === idx ? '#1677ff' : '#888';
      tab.style.fontWeight = i === idx ? '600' : '400';
      tab.style.borderBottom = i === idx ? '2px solid #1677ff' : '2px solid transparent';
    }
    if (panel) panel.style.display = i === idx ? 'block' : 'none';
  }
}

// ===== INIT =====
window.addEventListener('DOMContentLoaded', function() {
  startTimer();
  // 进入系统后显示绑定实验室弹窗
  setTimeout(function() {
    document.getElementById('bindLabModal').style.display = 'flex';
  }, 400);
});
</script>

<div class="screen" id="screen-study-detail">
<div class="topbar"><div class="topbar-back" onclick="goBack()">&#8249; 返回</div><div class="topbar-title">学习任务详情</div><div></div></div>
<div class="scroll-content"><div class="card" style="margin-top:12px;">
<div style="font-size:17px;font-weight:700;margin-bottom:6px;">实验室安全基础知识</div>
<div class="chip-row mb8"><span class="tag tag-blue text-xs">学习任务</span><span class="tag tag-orange text-xs">待完成</span></div>
<div class="text-xs text-gray mb4">来源：生命科学学院 | 要求：20分钟</div>
<div class="text-xs text-gray">可获：<span class="text-blue fw500">1学时</span> + <span class="text-orange fw500">3积分</span></div>
<div class="row-between mt12 mb4"><span class="text-sm text-gray">学习进度</span><span class="text-blue fw500">40%</span></div>
<div class="progress-wrap mb12"><div class="progress-bar" style="width:40%"></div></div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px;">
<div style="text-align:center;border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">已学</div><div class="text-blue fw500">8 分钟</div></div>
<div style="text-align:center;border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">要求</div><div class="fw500">20 分钟</div></div>
<div style="text-align:center;border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">剩余</div><div class="text-orange fw500">12 分钟</div></div>
</div></div>
<div class="card"><div class="card-title mb12">课件目录</div>
<div class="course-item current-course"><div class="row-between mb6"><div class="fw500">第1章 实验室安全概论</div><span class="tag tag-orange text-xs">学习中</span></div><div class="text-xs text-gray mb8">文档课件 · 8分钟</div><div style="display:flex;gap:8px;"><button class="btn btn-primary btn-sm">继续学习</button><button class="btn btn-outline btn-sm" onclick="goto('screen-posttest')">课后考核</button></div></div>
<div class="course-item"><div class="row-between mb6"><div class="fw500">第2章 危险化学品管理</div><span class="tag tag-gray text-xs">未学习</span></div><div class="text-xs text-gray mb8">视频课件 · 12分钟</div><button class="btn btn-outline btn-sm">开始学习</button></div>
</div></div></div>
<div class="screen" id="screen-mock-detail">
<div class="topbar"><div class="topbar-back" onclick="goBack()">&#8249; 返回</div><div class="topbar-title">模拟考试</div><div></div></div>
<div class="scroll-content"><div class="card" style="margin-top:12px;">
<div style="font-size:17px;font-weight:700;margin-bottom:8px;">新生入学安全知识模拟卷 A</div>
<div class="chip-row mb12"><span class="tag tag-blue text-xs">新生入学考试</span><span class="tag tag-orange text-xs">模拟卷</span></div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">题目总数</div><div class="text-blue fw500">50 题</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">考试时长</div><div class="fw500">60 分钟</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">满分</div><div class="fw500">100 分</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">及格分数</div><div class="text-orange fw500">70 分</div></div>
</div>
<div style="background:var(--gray-light);border-radius:8px;padding:12px;margin-bottom:14px;"><div class="text-sm fw500 mb8">历次模拟成绩</div><div class="row-between mb4"><span class="text-sm text-gray">第1次 2026-02-10</span><span class="text-sm text-red fw500">60 分（未通过）</span></div><div class="text-xs text-gray">还需提高 10 分达到及格线</div></div>
<div style="background:var(--orange-light);border-radius:8px;padding:10px;margin-bottom:14px;font-size:13px;color:var(--orange);">模拟考试需达到及格分数（70分）方可参加正式在线考试。</div>
<button class="btn btn-primary btn-block" onclick="goto('screen-exam-doing')">开始模拟考试</button>
</div></div></div>
<div class="screen" id="screen-exam-detail">
<div class="topbar"><div class="topbar-back" onclick="goBack()">&#8249; 返回</div><div class="topbar-title">考试详情</div><div></div></div>
<div class="scroll-content" style="padding-bottom:80px;"><div class="card" style="margin-top:12px;">
<div class="chip-row mb8"><span class="tag tag-orange text-xs">应知应会考试</span><span class="tag tag-orange text-xs">进行中</span></div>
<div style="font-size:17px;font-weight:700;margin-bottom:12px;">2025-2026学年应知应会安全考试</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">题目总数</div><div class="text-blue fw500">100 题</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">考试时长</div><div class="fw500">90 分钟</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">满分/及格</div><div class="fw500">100/70 分</div></div>
<div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">可考次数</div><div class="fw500">3 次</div></div>
</div>
<div class="text-sm fw500 mb8">考前任务状态</div>
<div style="border-radius:10px;border:1px solid var(--gray-border);overflow:hidden;margin-bottom:14px;">
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--gray-border);"><span class="fw500 text-sm">学时要求</span><span class="tag tag-green text-xs">✓ 达标</span></div>
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;"><span class="fw500 text-sm">学习任务</span><span class="tag tag-green text-xs">✓ 完成</span></div>
</div>
<div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:12px;margin-bottom:16px;font-size:13px;color:#52c41a;">已完成全部考前任务，请点击开始考试。</div>
</div></div>
<!-- 悬浮按钮 -->
<div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:#fff;border-top:1px solid var(--gray-border);box-shadow:0 -2px 8px rgba(0,0,0,.06);">
  <button class="btn btn-primary btn-block" onclick="goto('screen-exam-doing')">开始考试</button>
</div>
</div>
<div class="screen" id="screen-regular-exam-detail">
<div class="topbar"><div class="topbar-back" onclick="goBack()">&#8249; 返回</div><div class="topbar-title">考试详情</div><div></div></div>
<div class="scroll-content" style="padding-bottom:80px;">
  <div class="card" style="margin-top:12px;">
    <div class="chip-row mb8">
      <span class="tag tag-blue text-xs" style="background:#e6f4ff;color:#0958d9;border-color:#91caff;">常规考试</span>
      <span class="tag tag-gray text-xs">未开始</span>
    </div>
    <div style="font-size:17px;font-weight:700;margin-bottom:12px;">2025-2026学年实验室安全常规考试</div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
      <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">题目总数</div><div class="text-blue fw500">80 题</div></div>
      <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">考试时长</div><div class="fw500">60 分钟</div></div>
      <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">满分/及格</div><div class="fw500">100/60 分</div></div>
      <div style="border:1px solid var(--gray-border);border-radius:8px;padding:10px;"><div class="text-xs text-gray mb4">可考次数</div><div class="fw500">2 次</div></div>
    </div>
    <div style="background:var(--gray-light);border-radius:8px;padding:12px;font-size:13px;color:var(--text-secondary);line-height:1.7;">
      本次考试为年度常规安全考试，请认真作答。考试结果将记入个人安全档案。
    </div>
  </div>
</div>
<!-- 悬浮按钮 -->
<div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;background:#fff;border-top:1px solid var(--gray-border);box-shadow:0 -2px 8px rgba(0,0,0,.06);">
  <button class="btn btn-primary btn-block" onclick="goto('screen-exam-doing')">立即考试</button>
</div>
</div>

<!-- SCREEN: 答题详情 -->
<div class="screen" id="screen-score-detail">
  <div class="topbar">
    <div class="topbar-back" onclick="goBack()">&#8249; 返回</div>
    <div class="topbar-title">答题详情</div>
    <div></div>
  </div>
  <div class="scroll-content">
    <!-- 考试概览 -->
    <div class="card" style="margin-top:12px;">
      <div class="row-between mb8">
        <span class="tag tag-blue text-xs">新生入学考试</span>
        <span class="score-result-pass">通过</span>
      </div>
      <div style="font-size:16px;font-weight:700;margin-bottom:10px;">2025级新生实验室安全入学考试</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:13px;margin-bottom:14px;">
        <div><span class="text-gray">考试时间：</span>2026-01-10</div>
        <div><span class="text-gray">用时：</span>37分22秒</div>
        <div><span class="text-gray">满分/及格：</span>100 / 70</div>
        <div><span class="text-gray">考次：</span>2 / 3</div>
        <div><span class="text-gray">最高成绩：</span><span class="text-blue fw500">78 分</span></div>
        <div><span class="text-gray">考试结果：</span><span class="text-green fw500">通过</span></div>
      </div>
      <!-- 答题统计 -->
      <div style="background:var(--gray-light);border-radius:8px;padding:12px;margin-bottom:14px;">
        <div class="text-sm fw500 mb8">答题统计</div>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;text-align:center;">
          <div><div style="font-size:20px;font-weight:700;color:var(--blue);">100</div><div class="text-xs text-gray">总题数</div></div>
          <div><div style="font-size:20px;font-weight:700;color:var(--green);">78</div><div class="text-xs text-gray">正确</div></div>
          <div><div style="font-size:20px;font-weight:700;color:var(--red);">22</div><div class="text-xs text-gray">错误</div></div>
          <div><div style="font-size:20px;font-weight:700;color:var(--blue);">78%</div><div class="text-xs text-gray">正确率</div></div>
        </div>
      </div>
    </div>
    <!-- 答题详情 -->
    <div style="padding:0 12px 12px;">
      <div class="text-sm fw500" style="padding:14px 0 10px;">答题详情 <span class="text-gray" style="font-weight:400;">（共100题）</span></div>
      <!-- 第1题 正确 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">单选题</span><span class="text-xs text-gray" style="margin-left:6px;">第 1 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;">简单</span></div>
          <span class="tag tag-green text-xs">答对</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">实验室废液应如何处理？</div>
        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-green fw500">C. 分类收集，交专业机构处理（正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">C. 分类收集，交专业机构处理</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：实验室废液必须按化学性质分类收集，贴上标签，交由有资质的专业机构统一处理，严禁直接倒入下水道。</div>
      </div>
      <!-- 第2题 正确 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">判断题</span><span class="text-xs text-gray" style="margin-left:6px;">第 2 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;">简单</span></div>
          <span class="tag tag-green text-xs">答对</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">实验室工作人员在操作危险化学品时必须佩戴相应个人防护装备。（ ）</div>
        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-green fw500">A. 正确（正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">A. 正确</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：操作危险化学品时，必须根据化学品危险性佩戴防护手套、护目镜、防毒口罩等相应个人防护装备。</div>
      </div>
      <!-- 第3题 错误 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">单选题</span><span class="text-xs text-gray" style="margin-left:6px;">第 3 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;">一般</span></div>
          <span class="tag tag-orange text-xs">答错</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">以下哪种废液可以直接倒入普通下水道排放？</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A. 含汞废液（错误）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">D. 少量洗涤蒸馏水</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：含汞废液属于危险废物，必须进行无害化处理，不能直接排放。少量洗涤蒸馏水危害极小，可直接排放。</div>
      </div>
      <!-- 第4题 正确 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">多选题</span><span class="text-xs text-gray" style="margin-left:6px;">第 4 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#fff7e6;color:#fa8c16;border:1px solid #ffd591;">一般</span></div>
          <span class="tag tag-green text-xs">答对</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">以下属于实验室一级危险源的有？（多选）</div>
        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-green fw500">A B D（正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">A B D</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：爆炸物(A)、剧毒品(B)、强氧化剂(D)均属于一级危险源，需严格管控存储和使用。</div>
      </div>
      <!-- 第5题 正确 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">判断题</span><span class="text-xs text-gray" style="margin-left:6px;">第 5 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#f6ffed;color:#52c41a;border:1px solid #b7eb8f;">简单</span></div>
          <span class="tag tag-green text-xs">答对</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">实验室消防通道可临时堆放物品，只需保留60cm宽度即可。（ ）</div>
        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-green fw500">B. 错误（正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">B. 错误</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：消防通道必须保持畅通，严禁堆放任何物品，通道宽度不得小于1.2米。</div>
      </div>
      <!-- 省略中间题目提示 -->
      <div style="text-align:center;padding:10px 0;color:var(--text-hint);font-size:12px;">…… 共100题，展示部分代表性题目 ……</div>
      <!-- 第11题 错误 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">判断题</span><span class="text-xs text-gray" style="margin-left:6px;">第 11 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#fff2f0;color:#f5222d;border:1px solid #ffccc7;">很难</span></div>
          <span class="tag tag-orange text-xs">答错</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">实验室发生化学品泄漏时，第一步应立即拨打119报警。（ ）</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A. 正确（错误）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">B. 错误</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：发生化学品泄漏时，第一步应先疏散人员并撤离危险区域，再根据泄漏情况判断是否需要拨打119。</div>
      </div>
      <!-- 第27题 错误 -->
      <div style="background:var(--white);border-radius:10px;padding:14px;margin-bottom:10px;border:1px solid var(--gray-border);">
        <div class="row-between mb8">
          <div><span class="q-type-badge">多选题</span><span class="text-xs text-gray" style="margin-left:6px;">第 27 题</span><span style="margin-left:6px;font-size:10px;padding:1px 6px;border-radius:4px;background:#f9f0ff;color:#722ed1;border:1px solid #d3adf7;">极难</span></div>
          <span class="tag tag-orange text-xs">答错</span>
        </div>
        <div class="text-sm" style="line-height:1.7;margin-bottom:10px;">下列属于个人防护装备（PPE）的是？（多选）</div>
        <div style="background:var(--gray-light);border-radius:8px;padding:10px;margin-bottom:10px;">
          <div class="text-xs text-gray mb4">我的答案：<span class="text-red fw500">A C（部分正确）</span></div>
          <div class="text-xs text-gray">正确答案：<span class="text-green fw500">A B C D</span></div>
        </div>
        <div style="background:#f6ffed;border-radius:8px;padding:10px;font-size:13px;color:var(--text-secondary);line-height:1.7;">解析：防护眼镜(A)、实验手套(B)、防护口罩(C)、实验室防护服(D)均属于个人防护装备。</div>
      </div>
    </div>
  </div>
</div>

</body>
</html>