anne
/
exam_main_2026


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327
							<!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 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 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 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 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 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 dot-green"></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="tag tag-risk-2">Ⅱ级实验室</span>
            <span class="tag tag-gray">生物类</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 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 style="border:1px solid var(--green) solid;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;">
          【实验室绑定审批】您申请绑定"生命科学学院-A301实验室"正在审批中，请耐心等待负责人处理 &nbsp;&nbsp;&nbsp; 【在线考试】应知应会考试将于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" style="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="background:var(--gray-light);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;">
          <div><span class="text-sm text-bold">📚 学习任务 <span class="badge">2</span></span>
          <span class="text-xs text-gray" style="margin-left:6px;">待完成的学习任务</span></div>
          <span onclick="goto('screen-knowledge-list');switchLxTab(2);" style="font-size:12px;color:var(--blue);cursor:pointer;">更多 ›</span>
        </div>
        <div style="padding:8px 14px;">
          <div class="list-item" onclick="goto('screen-study-detail')">
            <div class="list-left">
              <div class="fw500 mb4">实验室安全基础知识</div>
              <div class="text-xs text-gray">生命科学学院下发 · <span style="color:var(--orange)">待完成</span></div>
            </div>
            <span style="font-size:16px;color:var(--text-hint)">›</span>
          </div>
          <div class="list-item" onclick="goto('screen-study-detail')">
            <div class="list-left">
              <div class="fw500 mb4">生物安全操作规范</div>
              <div class="text-xs text-gray">生命科学学院下发 · <span style="color:var(--orange)">待完成</span></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="background:var(--gray-light);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;">
          <div><span class="text-sm text-bold">📝 模拟考试 <span class="badge">1</span></span>
          <span class="text-xs text-gray" style="margin-left:6px;">待完成的模拟练习</span></div>
          <span onclick="goto('screen-exam-list');switchExTab(1);" style="font-size:12px;color:var(--blue);cursor:pointer;">更多 ›</span>
        </div>
        <div style="padding:8px 14px;">
          <div class="list-item" onclick="goto('screen-mock-detail')">
            <div class="list-left">
              <div class="fw500 mb4">新生入学安全知识模拟卷 A</div>
              <div class="text-xs text-gray">最高成绩: <span class="text-orange">60 分</span> &nbsp;·&nbsp; 及格: 70分</div>
            </div>
            <span style="font-size:16px;color:var(--text-hint)">›</span>
          </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>
          <span class="text-xs text-gray" style="margin-left:6px;">待完成的线下培训活动</span></div>
          <span onclick="goto('screen-knowledge-list')" style="font-size:12px;color:#c41d7f;cursor:pointer;">更多 ›</span>
        </div>
        <div style="padding:12px 14px;">
          <!-- 角色演示切换 -->
          <div style="display:flex;gap:6px;margin-bottom:10px;">
            <button onclick="setTrainingRole('student')" id="trole-student" style="font-size:11px;padding:3px 12px;border-radius:20px;border:1px solid #eb2f96;background:#eb2f96;color:#fff;cursor:pointer;">学员</button>
            <button onclick="setTrainingRole('teacher')" id="trole-teacher" style="font-size:11px;padding:3px 12px;border-radius:20px;border:1px solid #ffadd2;background:transparent;color:#c41d7f;cursor:pointer;">管理</button>
          </div>
          <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 class="fw500 mb4" style="font-size:14px;">2026年春季实验室安全知识讲座</div>
                <div class="text-xs text-gray">2026-03-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 id="training-student-qr" style="flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;" onclick="event.stopPropagation()">
                <button 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>
                <div class="text-xs fw500" id="trainingSignStatus" style="color:#fa8c16;text-align:center;">● 未签到</div>
              </div>
              <!-- 老师端：签到二维码 -->
              <div id="training-teacher-qr" style="flex-shrink:0;display:none;flex-direction:column;align-items:center;" onclick="event.stopPropagation()">
                <div onclick="openQrModal()" style="width:66px;height:66px;border-radius:10px;border:1.5px solid #ffadd2;background:#fff;padding:5px;cursor:pointer;position:relative;box-sizing:border-box;">
                  <svg viewBox="0 0 21 21" width="54" height="54" 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 style="position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:#c41d7f;">点击放大</div>
                </div>
                <div style="font-size:9px;color:#c41d7f;margin-top:3px;text-align:center;">签到二维码</div>
                <!-- 老师：签到人数统计（已移至培训详情页） -->
              </div>
            </div>
          </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;">
          <div><span class="text-sm text-bold">🎓 在线考试</span>
          <span class="text-xs text-gray" style="margin-left:6px;">待完成的在线考试</span></div>
          <span onclick="goto('screen-exam-list');switchExTab(0);" style="font-size:12px;color:var(--blue);cursor:pointer;">更多 ›</span>
        </div>
        <div style="padding:8px 14px;">
          <!-- 新生入学考试 -->
          <div class="exam-task-card active-exam" 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(--white);border-radius:6px;padding:6px 8px;border:1px solid var(--gray-border);">
                <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(--white);border-radius:6px;padding:6px 8px;border:1px solid var(--gray-border);">
                <div class="text-xs text-gray mb4">学习任务</div>
                <div class="text-xs fw500 text-orange">待完成</div>
              </div>
              <div style="background:var(--white);border-radius:6px;padding:6px 8px;border:1px solid var(--gray-border);">
                <div class="text-xs text-gray mb4">模拟考试</div>
                <div class="text-xs fw500 text-orange">待完成</div>
              </div>
            </div>
          </div>
          <!-- 应知应会考试 -->
          <div class="exam-task-card" 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">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">无</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">待确认</div>
              </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 class="bottom-tab">
    <div class="tab-item active">
      <span class="tab-icon">🏠</span>
      <span>工作台</span>
    </div>
    <div class="tab-item">
      <span class="tab-icon">📚</span>
      <span>学习培训</span>
    </div>
    <div class="tab-item">
      <span class="tab-icon">🎓</span>
      <span>在线考试</span>
    </div>
    <div class="tab-item">
      <span class="tab-icon">✏️</span>
      <span>刷题练习</span>
    </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: 在线考试（底部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 style="visibility:hidden;width:40px;"></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">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 / 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 class="bottom-tab">
    <div class="tab-item"><span class="tab-icon">🏠</span><span>工作台</span></div>
    <div class="tab-item"><span class="tab-icon">📚</span><span>学习培训</span></div>
    <div class="tab-item active"><span class="tab-icon">🎓</span><span>在线考试</span></div>
    <div class="tab-item"><span class="tab-icon">✏️</span><span>刷题练习</span></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 class="bottom-tab">
    <div class="tab-item"><span class="tab-icon">🏠</span><span>工作台</span></div>
    <div class="tab-item"><span class="tab-icon">📚</span><span>学习培训</span></div>
    <div class="tab-item"><span class="tab-icon">🎓</span><span>在线考试</span></div>
    <div class="tab-item"><span class="tab-icon">✏️</span><span>刷题练习</span></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 style="visibility:hidden;width:40px;"></div>
      <div class="topbar-title">学习培训</div>
      <div></div>
    </div>
    <!-- 4个子Tab -->
    <div style="display:flex;padding:0 4px;">
      <div id="lxtab-0" onclick="switchLxTab(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="lxtab-1" onclick="switchLxTab(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="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-0" style="padding:12px;">
      <!-- 发布状态筛选（老师身份时显示） -->
      <div id="lx-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="filterTrainingPublish('all',this)" id="lx-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="filterTrainingPublish('published',this)" id="lx-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="filterTrainingPublish('unpublished',this)" id="lx-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>
      <!-- 老师/学员 角色切换 -->
      <div style="display:flex;gap:6px;margin-bottom:12px;align-items:center;">
        <span style="font-size:12px;color:#888;">身份：</span>
        <button onclick="setTrainingRole('student')" id="lx-trole-student" style="font-size:11px;padding:3px 12px;border-radius:20px;border:1px solid #eb2f96;background:#eb2f96;color:#fff;cursor:pointer;">学员</button>
        <button onclick="setTrainingRole('teacher')" id="lx-trole-teacher" style="font-size:11px;padding:3px 12px;border-radius:20px;border:1px solid #ffadd2;background:transparent;color:#c41d7f;cursor:pointer;">管理</button>
      </div>

      <!-- 卡片1：进行中（已发布） -->
      <div class="card lx-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 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="training-teacher-ctrl" onclick="event.stopPropagation()" style="display:none;position:absolute;top:8px;right:8px;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:20px;padding:4px 10px;box-shadow:0 1px 6px rgba(0,0,0,.12);">
          <span style="font-size:11px;color:#52c41a;font-weight:500;">已发布</span>
          <div onclick="toggleTrainingPublish(this,true)" class="publish-toggle published" style="width:36px;height:20px;border-radius:10px;background:#52c41a;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s;">
            <div style="position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:right .2s;"></div>
          </div>
        </div>
      </div>

      <!-- 卡片2：未开始（已发布） -->
      <div class="card lx-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="training-teacher-ctrl" onclick="event.stopPropagation()" style="display:none;position:absolute;top:8px;right:8px;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:20px;padding:4px 10px;box-shadow:0 1px 6px rgba(0,0,0,.12);">
          <span style="font-size:11px;color:#52c41a;font-weight:500;">已发布</span>
          <div onclick="toggleTrainingPublish(this,true)" class="publish-toggle published" style="width:36px;height:20px;border-radius:10px;background:#52c41a;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s;">
            <div style="position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:right .2s;"></div>
          </div>
        </div>
      </div>

      <!-- 卡片3：已完成（历史记录中展示，主列表隐藏） -->
      <div class="card lx-training-card" data-publish="1" data-done="1" onclick="openTrainingDetail('done')" style="display:none;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="training-teacher-ctrl" onclick="event.stopPropagation()" style="display:none;position:absolute;top:8px;right:8px;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:20px;padding:4px 10px;box-shadow:0 1px 6px rgba(0,0,0,.12);">
          <span style="font-size:11px;color:#52c41a;font-weight:500;">已发布</span>
          <div onclick="toggleTrainingPublish(this,true)" class="publish-toggle published" style="width:36px;height:20px;border-radius:10px;background:#52c41a;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s;">
            <div style="position:absolute;top:3px;right:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:right .2s;"></div>
          </div>
        </div>
      </div>

      <!-- 卡片4：未发布（草稿）——仅老师可见 -->
      <div class="card lx-training-card training-unpublished-card" data-publish="0" onclick="openTrainingDetail('unpublished')" style="margin:0;cursor:pointer;padding:0;overflow:hidden;position:relative;display:none;opacity:.85;">
        <div style="width:100%;height:100px;background:linear-gradient(135deg,#d9d9d9,#bfbfbf);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" style="color:#595959;">2026年生物安全专项技能培训</span>
            <span style="font-size:11px;background:#f5f5f5;color:#8c8c8c;border:1px solid #d9d9d9;border-radius:10px;padding:2px 8px;flex-shrink:0;">未发布</span>
          </div>
          <div class="text-xs text-gray mb4">2026-05-10 &nbsp; 14:00 – 16:00</div>
          <div class="text-xs text-gray mb4">📍 生命楼实验中心</div>
          <div class="text-xs text-gray">🏢 生命科学学院</div>
        </div>
        <!-- 老师端：发布开关（未发布） -->
        <div class="training-teacher-ctrl" onclick="event.stopPropagation()" style="display:none;position:absolute;top:8px;right:8px;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:20px;padding:4px 10px;box-shadow:0 1px 6px rgba(0,0,0,.12);">
          <span style="font-size:11px;color:#8c8c8c;font-weight:500;">未发布</span>
          <div onclick="toggleTrainingPublish(this,false)" class="publish-toggle unpublished" style="width:36px;height:20px;border-radius:10px;background:#d9d9d9;cursor:pointer;position:relative;flex-shrink:0;transition:background .2s;">
            <div style="position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s;"></div>
          </div>
        </div>
      </div>

    </div>
    <!-- 学时任务 -->
    <div id="lxpanel-1" style="display:none;">
      <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 class="bottom-tab">
    <div class="tab-item"><span class="tab-icon">🏠</span><span>工作台</span></div>
    <div class="tab-item active"><span class="tab-icon">📚</span><span>学习培训</span></div>
    <div class="tab-item"><span class="tab-icon">🎓</span><span>在线考试</span></div>
    <div class="tab-item"><span class="tab-icon">✏️</span><span>刷题练习</span></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-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 style="visibility:hidden;width:40px;"></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 class="bottom-tab">
    <div class="tab-item"><span class="tab-icon">🏠</span><span>工作台</span></div>
    <div class="tab-item"><span class="tab-icon">📚</span><span>学习培训</span></div>
    <div class="tab-item"><span class="tab-icon">🎓</span><span>在线考试</span></div>
    <div class="tab-item active"><span class="tab-icon">✏️</span><span>刷题练习</span></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 = [];
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-knowledge-list': 1,
  'screen-exam-list': 2,
  'screen-practice-list': 3,
  'screen-my': 4
};
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) {
  // 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');

  // Teacher topbar toggle
  if (teacherTopbar) teacherTopbar.style.display = isTeacher ? 'flex' : '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) {
  for (var i = 0; i < 4; i++) {
    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';
  }
}

// ===== 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() {
  // Wire bottom-tab clicks — each screen has its own .bottom-tab
  var tabTargets = ['screen-home', 'screen-knowledge-list', 'screen-exam-list', 'screen-practice-list', 'screen-my'];
  document.querySelectorAll('.bottom-tab').forEach(function(bar) {
    bar.querySelectorAll('.tab-item').forEach(function(tab, i) {
      tab.addEventListener('click', function() {
        if (tabTargets[i]) goto(tabTargets[i]);
      });
    });
  });
  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>