Inicio Explorar Axuda
Iniciar sesión
anne
/
exam_main_2026
Seguir 1
Destacar 0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Rama: master
Ramas Etiquetas
exam_main_2026
/
web_exam.html

web_exam.html 136 KB
Permalink Histórico Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <meta name="viewport" content="width=1280">
    6. 

  6. <title>实验室安全教育与考试 — 管理后台</title>
    7. 

  7. <style>
    8. 

  8. *{box-sizing:border-box;margin:0;padding:0;}
    9. 

  9. :root{
    10. 

  10.   --blue:#1857d4;--blue-deep:#0f3ea8;--blue-mid:#2e6fe0;--blue-light:#eef3fd;--blue-xlight:#f5f8ff;
    11. 

  11.   --green:#10a37f;--green-dark:#0d8f6f;--green-light:#edfaf6;
    12. 

  12.   --orange:#e67e22;--orange-light:#fef6ec;
    13. 

  13.   --red:#e53e3e;--red-light:#fff5f5;
    14. 

  14.   --gray:#8896a7;--gray-light:#f4f6fa;--gray-border:#dde3ed;
    15. 

  15.   --text-primary:#1a2233;--text-secondary:#4a5568;--text-hint:#8896a7;
    16. 

  16.   --bg:#f0f4fb;--white:#ffffff;
    17. 

  17.   --radius:8px;--shadow:0 2px 12px rgba(24,87,212,.08);--shadow-md:0 4px 20px rgba(24,87,212,.12);
    18. 

  18.   --sidebar-w:260px;--header-h:64px;
    19. 

  19. }
    20. 

  20. body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text-primary);font-size:15px;display:flex;flex-direction:column;height:100vh;overflow:hidden;}
    21. 

  21. 

  22. /* ===== HEADER ===== */
    23. 

  23. .admin-header{height:var(--header-h);background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 100%);display:flex;align-items:center;padding:0 28px;gap:20px;flex-shrink:0;z-index:200;box-shadow:0 2px 8px rgba(24,87,212,.2);}
    24. 

  24. .header-logo{display:flex;align-items:center;gap:12px;color:#fff;font-size:17px;font-weight:700;letter-spacing:.3px;min-width:240px;}
    25. 

  25. .header-logo-icon{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;}
    26. 

  26. .header-tabs{display:flex;gap:4px;flex:1;}
    27. 

  27. .header-tab{color:rgba(255,255,255,.75);font-size:14px;padding:7px 18px;border-radius:6px;cursor:pointer;transition:all .18s;font-weight:500;white-space:nowrap;}
    28. 

  28. .header-tab:hover{color:#fff;background:rgba(255,255,255,.12);}
    29. 

  29. .header-tab.active{color:#fff;background:rgba(255,255,255,.2);font-weight:600;}
    30. 

  30. .header-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
    31. 

  31. .header-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;}
    32. 

  32. .header-username{color:rgba(255,255,255,.9);font-size:14px;}
    33. 

  33. 

  34. /* ===== LAYOUT ===== */
    35. 

  35. .admin-body{display:flex;flex:1;overflow:hidden;}
    36. 

  36. .sidebar{width:var(--sidebar-w);background:var(--white);border-right:1px solid var(--gray-border);overflow-y:auto;flex-shrink:0;padding:16px 0;}
    37. 

  37. .sidebar::-webkit-scrollbar{width:4px;}
    38. 

  38. .sidebar::-webkit-scrollbar-thumb{background:rgba(24,87,212,.15);border-radius:2px;}
    39. 

  39. .main-content{flex:1;overflow-y:auto;padding:32px 40px;}
    40. 

  40. .main-content::-webkit-scrollbar{width:7px;}
    41. 

  41. .main-content::-webkit-scrollbar-thumb{background:rgba(24,87,212,.15);border-radius:4px;}
    42. 

  42. 

  43. /* ===== SIDEBAR ===== */
    44. 

  44. .nav-group{margin-bottom:6px;}
    45. 

  45. .nav-group-label{font-size:11px;color:var(--text-hint);font-weight:600;letter-spacing:.8px;padding:10px 20px 4px;text-transform:uppercase;}
    46. 

  46. .nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;color:var(--text-secondary);font-size:14px;font-weight:500;transition:all .15s;border-left:3px solid transparent;margin:1px 0;}
    47. 

  47. .nav-item:hover{background:var(--blue-xlight);color:var(--blue);}
    48. 

  48. .nav-item.active{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:600;}
    49. 

  49. .nav-item .nav-icon{font-size:16px;width:20px;text-align:center;}
    50. 

  50. .nav-sub{padding-left:20px;}
    51. 

  51. .nav-sub .nav-item{font-size:13px;padding:8px 16px;}
    52. 

  52. 

  53. /* ===== PAGE SYSTEM ===== */
    54. 

  54. .page{display:none;}.page.active{display:block;}
    55. 

  55. 

  56. /* ===== BREADCRUMB ===== */
    57. 

  57. .breadcrumb{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text-hint);margin-bottom:24px;}
    58. 

  58. .breadcrumb a{color:var(--blue);cursor:pointer;text-decoration:none;}
    59. 

  59. .breadcrumb a:hover{text-decoration:underline;}
    60. 

  60. .breadcrumb-sep{color:var(--gray-border);}
    61. 

  61. 

  62. /* ===== PAGE HEADER ===== */
    63. 

  63. .page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
    64. 

  64. .page-title{font-size:22px;font-weight:700;color:var(--text-primary);}
    65. 

  65. .page-subtitle{font-size:14px;color:var(--text-hint);margin-top:4px;}
    66. 

  66. 

  67. /* ===== CARDS ===== */
    68. 

  68. .card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
    69. 

  69. .card-title{font-size:16px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;margin-bottom:18px;}
    70. 

  70. .card-title::before{content:'';width:3px;height:16px;background:linear-gradient(180deg,var(--blue-mid),var(--blue-deep));border-radius:2px;display:inline-block;}
    71. 

  71. 

  72. /* ===== STAT BOXES ===== */
    73. 

  73. .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px;}
    74. 

  74. .stat-box{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);}
    75. 

  75. .stat-box-icon{font-size:32px;margin-bottom:10px;}
    76. 

  76. .stat-box-val{font-size:32px;font-weight:700;color:var(--text-primary);line-height:1;}
    77. 

  77. .stat-box-label{font-size:13px;color:var(--text-hint);margin-top:8px;}
    78. 

  78. .stat-box.blue{border-top:3px solid var(--blue);}
    79. 

  79. .stat-box.green{border-top:3px solid var(--green);}
    80. 

  80. .stat-box.orange{border-top:3px solid var(--orange);}
    81. 

  81. .stat-box.red{border-top:3px solid var(--red);}
    82. 

  82. 

  83. /* ===== TAGS ===== */
    84. 

  84. .tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:500;}
    85. 

  85. .tag-blue{background:var(--blue-light);color:var(--blue);}
    86. 

  86. .tag-green{background:var(--green-light);color:var(--green-dark);}
    87. 

  87. .tag-orange{background:var(--orange-light);color:var(--orange);}
    88. 

  88. .tag-red{background:var(--red-light);color:var(--red);}
    89. 

  89. .tag-gray{background:var(--gray-light);color:var(--gray);}
    90. 

  90. 

  91. /* ===== BTNS ===== */
    92. 

  92. .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;outline:none;transition:all .18s;padding:0 16px;height:36px;}
    93. 

  93. .btn:active{opacity:.85;}
    94. 

  94. .btn-primary{background:linear-gradient(135deg,var(--blue-mid) 0%,var(--blue-deep) 100%);color:#fff;box-shadow:0 2px 8px rgba(24,87,212,.25);}
    95. 

  95. .btn-green{background:linear-gradient(135deg,#12b48a 0%,var(--green-dark) 100%);color:#fff;}
    96. 

  96. .btn-outline{background:var(--white);color:var(--blue);border:1px solid rgba(24,87,212,.3);}
    97. 

  97. .btn-outline-gray{background:var(--white);color:var(--text-secondary);border:1px solid var(--gray-border);}
    98. 

  98. .btn-sm{height:30px;font-size:12px;padding:0 12px;border-radius:5px;}
    99. 

  99. .btn-danger{background:var(--white);color:var(--red);border:1px solid rgba(229,62,62,.3);}
    100. 

  100. .btn-icon{width:30px;height:30px;padding:0;border-radius:5px;}
    101. 

  101. 

  102. /* ===== TABLE ===== */
    103. 

  103. .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--gray-border);}
    104. 

  104. table{width:100%;border-collapse:collapse;font-size:14px;}
    105. 

  105. thead tr{background:var(--gray-light);}
    106. 

  106. th{text-align:left;padding:12px 16px;color:var(--text-hint);font-weight:600;font-size:13px;border-bottom:1px solid var(--gray-border);white-space:nowrap;}
    107. 

  107. td{padding:14px 16px;border-bottom:1px solid var(--gray-border);color:var(--text-primary);vertical-align:middle;}
    108. 

  108. tbody tr:last-child td{border-bottom:none;}
    109. 

  109. tbody tr:hover{background:var(--blue-xlight);}
    110. 

  110. 

  111. /* ===== FORM ===== */
    112. 

  112. .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
    113. 

  113. .form-grid.cols-1{grid-template-columns:1fr;}
    114. 

  114. .form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
    115. 

  115. .form-item{display:flex;flex-direction:column;gap:7px;}
    116. 

  116. .form-item.col-2{grid-column:span 2;}
    117. 

  117. .form-label{font-size:14px;color:var(--text-secondary);font-weight:500;}
    118. 

  118. .form-label.required::after{content:'*';color:var(--red);margin-left:3px;}
    119. 

  119. .form-input{width:100%;border:1px solid var(--gray-border);border-radius:6px;padding:9px 14px;font-size:14px;color:var(--text-primary);background:var(--white);outline:none;transition:border-color .2s;}
    120. 

  120. .form-input:focus{border-color:var(--blue);}
    121. 

  121. textarea.form-input{min-height:110px;resize:vertical;line-height:1.6;}
    122. 

  122. .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;}
    123. 

  123. .form-hint{font-size:12px;color:var(--text-hint);}
    124. 

  124. 

  125. /* ===== TOGGLE ===== */
    126. 

  126. .toggle{position:relative;width:44px;height:24px;cursor:pointer;}
    127. 

  127. .toggle input{opacity:0;width:0;height:0;}
    128. 

  128. .toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:24px;transition:.3s;}
    129. 

  129. .toggle-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s;}
    130. 

  130. .toggle input:checked+.toggle-slider{background:var(--blue);}
    131. 

  131. .toggle input:checked+.toggle-slider::before{transform:translateX(20px);}
    132. 

  132. 

  133. /* ===== SEARCH BAR ===== */
    134. 

  134. .search-bar{display:flex;gap:10px;align-items:center;margin-bottom:20px;flex-wrap:wrap;}
    135. 

  135. .search-input-wrap{position:relative;flex:1;min-width:240px;}
    136. 

  136. .search-input-wrap .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-hint);font-size:14px;}
    137. 

  137. .search-input{width:100%;border:1px solid var(--gray-border);border-radius:6px;padding:8px 14px 8px 36px;font-size:14px;outline:none;background:var(--white);}
    138. 

  138. .search-input:focus{border-color:var(--blue);}
    139. 

  139. 

  140. /* ===== PAGINATION ===== */
    141. 

  141. .pagination{display:flex;align-items:center;gap:4px;margin-top:20px;justify-content:flex-end;}
    142. 

  142. .page-btn{min-width:34px;height:34px;border-radius:5px;border:1px solid var(--gray-border);background:var(--white);cursor:pointer;font-size:13px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-secondary);}
    143. 

  143. .page-btn:hover{border-color:var(--blue);color:var(--blue);}
    144. 

  144. .page-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}
    145. 

  145. .page-info{font-size:13px;color:var(--text-hint);margin-left:10px;}
    146. 

  146. 

  147. /* ===== TABS ===== */
    148. 

  148. .view-tabs{display:flex;gap:0;border-bottom:1px solid var(--gray-border);margin-bottom:24px;}
    149. 

  149. .view-tab{padding:10px 20px;cursor:pointer;font-size:14px;color:var(--text-hint);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;font-weight:500;}
    150. 

  150. .view-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
    151. 

  151. 

  152. /* ===== DETAIL PANEL ===== */
    153. 

  153. .detail-section{margin-bottom:28px;}
    154. 

  154. .detail-section-title{font-size:13px;font-weight:600;color:var(--text-hint);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--gray-border);}
    155. 

  155. .info-row{display:flex;padding:10px 0;border-bottom:1px solid var(--gray-border);}
    156. 

  156. .info-row:last-child{border-bottom:none;}
    157. 

  157. .info-key{width:130px;color:var(--text-hint);font-size:14px;flex-shrink:0;}
    158. 

  158. .info-val{flex:1;font-size:14px;color:var(--text-primary);font-weight:500;}
    159. 

  159. 

  160. /* ===== UPLOAD AREA ===== */
    161. 

  161. .upload-area{border:2px dashed var(--gray-border);border-radius:8px;padding:28px;text-align:center;cursor:pointer;transition:all .2s;background:var(--gray-light);}
    162. 

  162. .upload-area:hover{border-color:var(--blue);background:var(--blue-xlight);}
    163. 

  163. .upload-icon{font-size:36px;margin-bottom:10px;}
    164. 

  164. .upload-text{font-size:14px;color:var(--text-hint);}
    165. 

  165. 

  166. /* ===== RICH TEXT PLACEHOLDER ===== */
    167. 

  167. .rich-editor{border:1px solid var(--gray-border);border-radius:6px;overflow:hidden;}
    168. 

  168. .rich-toolbar{background:var(--gray-light);padding:8px 14px;display:flex;gap:6px;border-bottom:1px solid var(--gray-border);flex-wrap:wrap;}
    169. 

  169. .rich-tool-btn{background:var(--white);border:1px solid var(--gray-border);border-radius:4px;padding:3px 9px;font-size:13px;cursor:pointer;color:var(--text-secondary);}
    170. 

  170. .rich-tool-btn:hover{background:var(--blue-light);color:var(--blue);border-color:rgba(24,87,212,.3);}
    171. 

  171. .rich-body{min-height:130px;padding:14px;font-size:14px;color:var(--text-primary);outline:none;line-height:1.7;}
    172. 

  172. 

  173. /* ===== QR CODE ===== */
    174. 

  174. .qr-box{width:80px;height:80px;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:24px;cursor:pointer;transition:all .2s;}
    175. 

  175. .qr-box:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(24,87,212,.15);}
    176. 

  176. 

  177. /* ===== ATTENDANCE ===== */
    178. 

  178. .attend-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-border);}
    179. 

  179. .attend-row:last-child{border-bottom:none;}
    180. 

  180. .attend-avatar{width:38px;height:38px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
    181. 

  181. .attend-info{flex:1;}
    182. 

  182. .attend-status-yes{color:var(--green);font-size:12px;font-weight:600;}
    183. 

  183. .attend-status-no{color:var(--red);font-size:12px;font-weight:600;}
    184. 

  184. .attend-status-late{color:var(--orange);font-size:12px;font-weight:600;}
    185. 

  185. 

  186. /* ===== TRAINING EVENT CARD (PC version) ===== */
    187. 

  187. .training-event-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .2s;box-shadow:var(--shadow);}
    188. 

  188. .training-event-card:hover{box-shadow:var(--shadow-md);border-color:rgba(24,87,212,.2);transform:translateY(-2px);}
    189. 

  189. .training-event-cover{width:100%;height:160px;background:linear-gradient(135deg,#1857d4,#2e6fe0);display:flex;align-items:center;justify-content:center;font-size:42px;position:relative;overflow:hidden;}
    190. 

  190. .training-event-body{padding:16px;}
    191. 

  191. .training-event-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:10px;line-height:1.4;}
    192. 

  192. .training-event-meta{font-size:13px;color:var(--text-hint);display:flex;flex-direction:column;gap:5px;}
    193. 

  193. .training-events-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
    194. 

  194. 

  195. /* ===== MODAL ===== */
    196. 

  196. .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;align-items:center;justify-content:center;padding:20px;}
    197. 

  197. .modal-overlay.active{display:flex;}
    198. 

  198. .modal-box{background:var(--white);border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalIn .22s ease;box-shadow:0 8px 40px rgba(24,87,212,.18);}
    199. 

  199. .modal-box.modal-lg{max-width:900px;}
    200. 

  200. .modal-header{padding:22px 28px 18px;border-bottom:1px solid var(--gray-border);display:flex;align-items:center;justify-content:space-between;}
    201. 

  201. .modal-title{font-size:17px;font-weight:700;color:var(--text-primary);}
    202. 

  202. .modal-close{cursor:pointer;font-size:20px;color:var(--text-hint);background:none;border:none;line-height:1;padding:4px;}
    203. 

  203. .modal-close:hover{color:var(--text-primary);}
    204. 

  204. .modal-body{padding:24px 28px;}
    205. 

  205. .modal-footer{padding:18px 28px;border-top:1px solid var(--gray-border);display:flex;align-items:center;justify-content:flex-end;gap:10px;}
    206. 

  206. @keyframes modalIn{from{transform:scale(.93) translateY(10px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
    207. 

  207. 

  208. /* ===== MISC ===== */
    209. 

  209. .mt8{margin-top:8px;}.mt12{margin-top:12px;}.mt16{margin-top:16px;}.mt20{margin-top:20px;}
    210. 

  210. .mb8{margin-bottom:8px;}.mb12{margin-bottom:12px;}.mb16{margin-bottom:16px;}
    211. 

  211. .flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}
    212. 

  212. .justify-between{justify-content:space-between;}.gap8{gap:8px;}.gap12{gap:12px;}.gap16{gap:16px;}
    213. 

  213. .text-sm{font-size:13px;}.text-xs{font-size:12px;}.text-bold{font-weight:600;}.text-gray{color:var(--gray);}
    214. 

  214. .text-blue{color:var(--blue);}.text-green{color:var(--green);}.text-orange{color:var(--orange);}.text-red{color:var(--red);}
    215. 

  215. .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
    216. 

  216. .divider{height:1px;background:var(--gray-border);margin:20px 0;}
    217. 

  217. .empty-state{text-align:center;padding:60px 20px;color:var(--text-hint);}
    218. 

  218. .empty-icon{font-size:52px;margin-bottom:14px;}
    219. 

  219. .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
    220. 

  220. .dot-green{background:var(--green);}.dot-orange{background:var(--orange);}.dot-red{background:var(--red);}.dot-gray{background:#b0bec5;}
    221. 

  221. .progress-wrap{background:#e8edf6;border-radius:4px;height:6px;overflow:hidden;margin-top:4px;}
    222. 

  222. .progress-bar{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-mid),var(--blue));transition:width .4s;}
    223. 

  223. /* ===== PUBLISH TOGGLE (table-safe) ===== */
    224. 

  224. .pub-slider{position:absolute;inset:0;border-radius:24px;transition:.3s;cursor:pointer;}
    225. 

  225. .pub-slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:white;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
    226. 

  226. .pub-on{background:var(--blue);}
    227. 

  227. .pub-off{background:#ccc;}
    228. 

  228. .pub-on::before{transform:translateX(20px);}
    229. 

  229. </style>
    230. 

  230. </head>
    231. 

  231. <body>
    232. 

  232. 

  233. <!-- ===== HEADER ===== -->
    234. 

  234. <div class="admin-header">
    235. 

  235.   <div class="header-logo">
    236. 

  236.     <div class="header-logo-icon">🔬</div>
    237. 

  237.     <span>实验室安全教育与考试</span>
    238. 

  238.   </div>
    239. 

  239.   <div class="header-right">
    240. 

  240.     <div style="color:rgba(255,255,255,.7);font-size:12px;">2026-07-31</div>
    241. 

  241.     <div class="header-username">管理员</div>
    242. 

  242.     <div class="header-avatar">👤</div>
    243. 

  243.   </div>
    244. 

  244. </div>
    245. 

  245. 

  246. <!-- ===== BODY ===== -->
    247. 

  247. <div class="admin-body">
    248. 

  248. 

  249.   <!-- ===== SIDEBAR ===== -->
    250. 

  250.   <div class="sidebar" id="sidebar">
    251. 

  251.     <div class="nav-group">
    252. 

  252.       <div class="nav-group-label">培训管理</div>
    253. 

  253.       <div class="nav-item active" onclick="showPage('page-training-plan')"><span class="nav-icon">📋</span>培训计划</div>
    254. 

  254.       <div class="nav-item" onclick="showPage('page-training-record')"><span class="nav-icon">📁</span>培训记录</div>
    255. 

  255.     </div>
    256. 

  256.     <div class="nav-group">
    257. 

  257.       <div class="nav-group-label">培训活动</div>
    258. 

  258.       <div class="nav-item" onclick="showPage('page-training-activity-list')"><span class="nav-icon">📅</span>培训活动</div>
    259. 

  259.     </div>
    260. 

  260.     <div class="nav-group">
    261. 

  261.       <div class="nav-group-label">考试管理</div>
    262. 

  262.       <div class="nav-item" onclick="showPage('page-exam-template')"><span class="nav-icon">📋</span>考试模版</div>
    263. 

  263.       <div class="nav-item"><span class="nav-icon">📝</span>考试计划</div>
    264. 

  264.       <div class="nav-item"><span class="nav-icon">📊</span>考试记录</div>
    265. 

  265.     </div>
    266. 

  266.     <div class="nav-group">
    267. 

  267.       <div class="nav-group-label">用户管理</div>
    268. 

  268.       <div class="nav-item"><span class="nav-icon">👥</span>用户列表</div>
    269. 

  269.     </div>
    270. 

  270.     <div class="nav-group">
    271. 

  271.       <div class="nav-group-label">实验室管理</div>
    272. 

  272.       <div class="nav-item"><span class="nav-icon">🔬</span>实验室列表</div>
    273. 

  273.     </div>
    274. 

  274.   </div>
    275. 

  275. 

  276.   <!-- ===== MAIN CONTENT ===== -->
    277. 

  277.   <div class="main-content">
    278. 

  278. 

  279. 

  280.     <!-- ==================== PAGE: 培训计划 ==================== -->
    281. 

  281.     <div class="page active" id="page-training-plan">
    282. 

  282.       <div class="breadcrumb"><span>培训管理</span><span class="breadcrumb-sep">/</span><span>培训计划</span></div>
    283. 

  283.       <div class="page-header">
    284. 

  284.         <div><div class="page-title">培训计划</div><div class="page-subtitle">管理所有培训活动的计划与发布状态</div></div>
    285. 

  285.         <button class="btn btn-primary" onclick="showPage('page-training-new')">➕ 新建培训</button>
    286. 

  286.       </div>
    287. 

  287. 

  288.       <div class="search-bar">
    289. 

  289.         <div class="search-input-wrap"><span class="search-icon">🔍</span><input class="search-input" placeholder="搜索培训名称、主讲人..."></div>
    290. 

  290.         <select class="form-input form-select" style="width:130px;"><option>全部状态</option><option>进行中</option><option>即将开始</option><option>已结束</option></select>
    291. 

  291.         <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
    292. 

  292.         <input class="form-input" type="text" placeholder="组织单位" style="width:140px;">
    293. 

  293.         <div class="flex items-center gap8" style="flex-shrink:0;">
    294. 

  294.           <input class="form-input" type="date" style="width:150px;" title="开始日期">
    295. 

  295.           <span style="color:var(--text-hint);font-size:13px;">至</span>
    296. 

  296.           <input class="form-input" type="date" style="width:150px;" title="结束日期">
    297. 

  297.         </div>
    298. 

  298.         <button class="btn btn-outline">筛选</button>
    299. 

  299.         <button class="btn btn-outline-gray">重置</button>
    300. 

  300.       </div>
    301. 

  301. 

  302. 

  303.       <div id="plan-teacher-view">
    304. 

  304.         <div class="table-wrap">
    305. 

  305.           <table>
    306. 

  306.             <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>组织单位</th><th>学时/积分</th><th>活动状态</th><th>签到人数</th><th>签到状态</th><th>发布</th><th>操作</th></tr></thead>
    307. 

  307.             <tbody>
    308. 

  308.               <tr>
    309. 

  309.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">实验室生物安全操作规范培训</span></td>
    310. 

  310.                 <td><span class="tag tag-blue">知识讲座</span></td>
    311. 

  311.                 <td style="white-space:nowrap;">2026-08-01<br><span class="text-xs text-gray">10:00–12:00</span></td>
    312. 

  312.                 <td>生命科学学院</td>
    313. 

  313.                 <td><span class="text-green text-bold">2学时 +10分</span></td>
    314. 

  314.                 <td><span class="tag tag-orange">进行中</span></td>
    315. 

  315.                 <td><div><span class="text-bold text-blue">42</span> / 60</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:70%;"></div></div></td>
    316. 

  316.                 <td><div class="flex" style="gap:4px;flex-wrap:wrap;"><span class="tag tag-green" style="font-size:10px;">已签到 42</span><span class="tag tag-red" style="font-size:10px;">未到 18</span></div></td>
    317. 

  317.                 <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><input type="checkbox" checked style="opacity:0;width:0;height:0;position:absolute;"><div class="pub-slider pub-on"></div></div></td>
    318. 

  318.                 <td><div class="flex gap8" style="flex-wrap:wrap;"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-new')">✏️ 编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">🗑 删除</button></div></td>
    319. 

  319.               </tr>
    320. 

  320.               <tr>
    321. 

  321.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">化学品泄漏应急演练2026</span></td>
    322. 

  322.                 <td><span class="tag tag-orange">应急演练</span></td>
    323. 

  323.                 <td style="white-space:nowrap;">2026-08-05<br><span class="text-xs text-gray">14:00–17:00</span></td>
    324. 

  324.                 <td>化学化工学院</td>
    325. 

  325.                 <td><span class="text-green text-bold">3学时 +15分</span></td>
    326. 

  326.                 <td><span class="tag tag-blue">即将开始</span></td>
    327. 

  327.                 <td><div><span class="text-bold text-orange">0</span> / 50</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:0%;"></div></div></td>
    328. 

  328.                 <td><span class="tag tag-gray" style="font-size:10px;">未开始</span></td>
    329. 

  329.                 <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><input type="checkbox" style="opacity:0;width:0;height:0;position:absolute;"><div class="pub-slider pub-off"></div></div></td>
    330. 

  330.                 <td><div class="flex gap8" style="flex-wrap:wrap;"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-new')">✏️ 编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">🗑 删除</button></div></td>
    331. 

  331.               </tr>
    332. 

  332.               <tr>
    333. 

  333.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">辐射安全基础知识讲座</span></td>
    334. 

  334.                 <td><span class="tag tag-blue">知识讲座</span></td>
    335. 

  335.                 <td style="white-space:nowrap;">2026-07-20<br><span class="text-xs text-gray">14:00–16:00</span></td>
    336. 

  336.                 <td>物理学院</td>
    337. 

  337.                 <td><span class="text-green text-bold">2学时 +10分</span></td>
    338. 

  338.                 <td><span class="tag tag-gray">已结束</span></td>
    339. 

  339.                 <td><div><span class="text-bold text-green">55</span> / 60</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:92%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div></td>
    340. 

  340.                 <td><div class="flex" style="gap:4px;flex-wrap:wrap;"><span class="tag tag-green" style="font-size:10px;">已签到 55</span><span class="tag tag-red" style="font-size:10px;">未到 5</span></div></td>
    341. 

  341.                 <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><input type="checkbox" checked style="opacity:0;width:0;height:0;position:absolute;"><div class="pub-slider pub-on"></div></div></td>
    342. 

  342.                 <td><div class="flex gap8" style="flex-wrap:wrap;"><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-record')">查看记录</button><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-new')">✏️ 编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">🗑 删除</button></div></td>
    343. 

  343.               </tr>
    344. 

  344.               <tr>
    345. 

  345.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">全校实验室安全通识培训2026</span></td>
    346. 

  346.                 <td><span class="tag tag-blue">知识讲座</span></td>
    347. 

  347.                 <td style="white-space:nowrap;">2026-09-01<br><span class="text-xs text-gray">09:00–11:00</span></td>
    348. 

  348.                 <td>测试大学</td>
    349. 

  349.                 <td><span class="text-green text-bold">2学时 +10分</span></td>
    350. 

  350.                 <td><span class="tag tag-blue">即将开始</span></td>
    351. 

  351.                 <td><div><span class="text-bold text-gray">0</span> / —</div><div class="progress-wrap" style="width:80px;margin-top:4px;"><div class="progress-bar" style="width:0%;"></div></div></td>
    352. 

  352.                 <td><span class="tag tag-gray" style="font-size:10px;">未开始</span></td>
    353. 

  353.                 <td><div style="width:44px;height:24px;position:relative;cursor:pointer;"><input type="checkbox" style="opacity:0;width:0;height:0;position:absolute;"><div class="pub-slider pub-off"></div></div></td>
    354. 

  354.                 <td><div class="flex gap8" style="flex-wrap:wrap;"><button class="btn btn-sm btn-outline" onclick="showModal('modal-qr')">📷 签到码</button><button class="btn btn-sm btn-outline" onclick="showModal('modal-progress')">📊 进度</button><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-new')">✏️ 编辑</button><button class="btn btn-sm btn-danger" onclick="showModal('modal-confirm-delete')">🗑 删除</button></div></td>
    355. 

  355.               </tr>
    356. 

  356.             </tbody>
    357. 

  357.           </table>
    358. 

  358.         </div>
    359. 

  359.       </div>
    360. 

  360.       <div class="pagination">
    361. 

  361.         <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">3</button><button class="page-btn">»</button>
    362. 

  362.         <span class="page-info">共 18 条</span>
    363. 

  363.       </div>
    364. 

  364.     </div>
    365. 

  365. 

  366.     <!-- ==================== PAGE: 新建培训 ==================== -->
    367. 

  367.     <div class="page" id="page-training-new">
    368. 

  368.       <div class="breadcrumb"><span>培训管理</span><span class="breadcrumb-sep">/</span><span>新建培训</span></div>
    369. 

  369.       <div class="page-header">
    370. 

  370.         <div><div class="page-title">新建培训</div><div class="page-subtitle">填写培训活动信息</div></div>
    371. 

  371.         <div class="flex gap8">
    372. 

  372.           <button class="btn btn-outline-gray" onclick="showPage('page-training-plan')">取消</button>
    373. 

  373.           <button class="btn btn-primary">保存</button>
    374. 

  374.         </div>
    375. 

  375.       </div>
    376. 

  376.       <div class="card">
    377. 

  377.         <div class="card-title">基本信息</div>
    378. 

  378.         <div class="form-grid">
    379. 

  379.           <div class="form-item col-2">
    380. 

  380.             <label class="form-label required">活动名称</label>
    381. 

  381.             <input class="form-input" placeholder="请输入培训活动名称">
    382. 

  382.           </div>
    383. 

  383.           <div class="form-item">
    384. 

  384.             <label class="form-label required">活动分类</label>
    385. 

  385.             <select class="form-input form-select"><option value="">请选择</option><option>知识讲座</option><option>应急演练</option></select>
    386. 

  386.           </div>
    387. 

  387.           <div class="form-item">
    388. 

  388.             <label class="form-label required">组织单位</label>
    389. 

  389.             <input class="form-input" placeholder="请输入组织单位">
    390. 

  390.           </div>
    391. 

  391.           <div class="form-item">
    392. 

  392.             <label class="form-label required">培训开始时间</label>
    393. 

  393.             <input class="form-input" type="datetime-local" step="1">
    394. 

  394.           </div>
    395. 

  395.           <div class="form-item">
    396. 

  396.             <label class="form-label required">培训结束时间</label>
    397. 

  397.             <input class="form-input" type="datetime-local" step="1">
    398. 

  398.           </div>
    399. 

  399.           <div class="form-item">
    400. 

  400.             <label class="form-label required">主讲人</label>
    401. 

  401.             <input class="form-input" placeholder="请输入主讲人姓名">
    402. 

  402.           </div>
    403. 

  403.           <div class="form-item">
    404. 

  404.             <label class="form-label required">培训地点</label>
    405. 

  405.             <input class="form-input" placeholder="请输入培训地点">
    406. 

  406.           </div>
    407. 

  407.           <div class="form-item">
    408. 

  408.             <label class="form-label required">可得学时</label>
    409. 

  409.             <input class="form-input" type="number" placeholder="例：2" min="0.5" step="0.5">
    410. 

  410.           </div>
    411. 

  411.           <div class="form-item">
    412. 

  412.             <label class="form-label required">可得积分</label>
    413. 

  413.             <input class="form-input" type="number" placeholder="例：10" min="0" step="1">
    414. 

  414.           </div>
    415. 

  415.           <div class="form-item col-2">
    416. 

  416.             <label class="form-label required">培训范围</label>
    417. 

  417.             <div class="flex gap8" style="margin-bottom:10px;">
    418. 

  418.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-all" onclick="setScopeMode('all')">
    419. 

  419.                 <input type="radio" name="training-scope" value="all" checked style="accent-color:var(--blue);"> 全校
    420. 

  420.               </label>
    421. 

  421.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-dept" onclick="setScopeMode('dept')">
    422. 

  422.                 <input type="radio" name="training-scope" value="dept" style="accent-color:var(--blue);"> 指定范围
    423. 

  423.               </label>
    424. 

  424.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 14px;border:1.5px solid var(--gray-border);border-radius:6px;font-size:13px;transition:all .15s;" id="scope-label-person" onclick="setScopeMode('person')">
    425. 

  425.                 <input type="radio" name="training-scope" value="person" style="accent-color:var(--blue);"> 指定人员
    426. 

  426.               </label>
    427. 

  427.             </div>
    428. 

  428.             <!-- 指定范围：院系/专业 -->
    429. 

  429.             <div id="scope-dept-section" style="display:none;padding:14px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
    430. 

  430.               <div style="font-size:12px;color:var(--text-hint);margin-bottom:10px;">选择参与的院系 / 单位（可多选）</div>
    431. 

  431.               <div style="display:flex;flex-wrap:wrap;gap:8px;">
    432. 

  432.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">生命科学学院</label>
    433. 

  433.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">化学化工学院</label>
    434. 

  434.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">物理学院</label>
    435. 

  435.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">材料科学学院</label>
    436. 

  436.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">医学院</label>
    437. 

  437.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">环境科学学院</label>
    438. 

  438.                 <label style="display:flex;align-items:center;gap:5px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid var(--gray-border);border-radius:20px;background:var(--white);"><input type="checkbox" style="accent-color:var(--blue);">安全管理处</label>
    439. 

  439.               </div>
    440. 

  440.             </div>
    441. 

  441.             <!-- 指定人员 -->
    442. 

  442.             <div id="scope-person-section" style="display:none;padding:14px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
    443. 

  443.               <div style="font-size:12px;color:var(--text-hint);margin-bottom:10px;">输入学号或姓名搜索添加，或批量导入</div>
    444. 

  444.               <div class="flex gap8" style="margin-bottom:10px;">
    445. 

  445.                 <div class="search-input-wrap" style="flex:1;">
    446. 

  446.                   <span class="search-icon">🔍</span>
    447. 

  447.                   <input class="search-input" placeholder="搜索学号 / 姓名添加人员...">
    448. 

  448.                 </div>
    449. 

  449.                 <button class="btn btn-outline" style="white-space:nowrap;">📥 批量导入</button>
    450. 

  450.               </div>
    451. 

  451.               <div style="min-height:60px;border:1px dashed var(--gray-border);border-radius:6px;padding:10px;background:var(--white);">
    452. 

  452.                 <div style="display:flex;flex-wrap:wrap;gap:6px;">
    453. 

  453.                   <span style="display:inline-flex;align-items:center;gap:5px;background:var(--blue-light);color:var(--blue);border-radius:20px;padding:3px 10px;font-size:12px;">张明远 <span style="cursor:pointer;opacity:.6;" onclick="this.parentElement.remove()">✕</span></span>
    454. 

  454.                   <span style="display:inline-flex;align-items:center;gap:5px;background:var(--blue-light);color:var(--blue);border-radius:20px;padding:3px 10px;font-size:12px;">李晓燕 <span style="cursor:pointer;opacity:.6;" onclick="this.parentElement.remove()">✕</span></span>
    455. 

  455.                   <span style="font-size:12px;color:var(--text-hint);align-self:center;">已添加 2 人</span>
    456. 

  456.                 </div>
    457. 

  457.               </div>
    458. 

  458.             </div>
    459. 

  459.           </div>
    460. 

  460.         </div>
    461. 

  461.         <div class="divider"></div>
    462. 

  462.         <div class="card-title">封面图片</div>
    463. 

  463.         <div class="upload-area" style="max-width:400px;">
    464. 

  464.           <div class="upload-icon">🖼️</div>
    465. 

  465.           <div class="upload-text">点击或拖拽上传封面图<br><span style="font-size:11px;">推荐尺寸 16:9，支持 JPG / PNG，最大 5MB</span></div>
    466. 

  466.         </div>
    467. 

  467.         <div class="divider"></div>
    468. 

  468.         <div class="card-title">培训详情</div>
    469. 

  469.         <div class="rich-editor">
    470. 

  470.           <div class="rich-toolbar">
    471. 

  471.             <button class="rich-tool-btn">B</button><button class="rich-tool-btn"><i>I</i></button><button class="rich-tool-btn">U</button>
    472. 

  472.             <button class="rich-tool-btn">H1</button><button class="rich-tool-btn">H2</button>
    473. 

  473.             <button class="rich-tool-btn">≡</button><button class="rich-tool-btn">•</button>
    474. 

  474.             <button class="rich-tool-btn">🔗</button><button class="rich-tool-btn">🖼</button><button class="rich-tool-btn">📊</button>
    475. 

  475.           </div>
    476. 

  476.           <div class="rich-body" contenteditable="true">请输入培训详情内容，可包含培训目标、培训内容大纲、注意事项等...</div>
    477. 

  477.         </div>
    478. 

  478.         <div class="divider"></div>
    479. 

  479.         <div class="card-title">附件上传</div>
    480. 

  480.         <div class="upload-area">
    481. 

  481.           <div class="upload-icon">📎</div>
    482. 

  482.           <div class="upload-text">点击上传培训相关文件（PPT、PDF、Word等）<br><span style="font-size:11px;">支持 PDF / PPT / PPTX / DOC / DOCX，单文件最大 50MB</span></div>
    483. 

  483.         </div>
    484. 

  484.         <div class="divider"></div>
    485. 

  485.         <div style="display:flex;flex-direction:column;gap:16px;">
    486. 

  486.           <div class="form-item">
    487. 

  487.             <label class="form-label">发布状态</label>
    488. 

  488.             <div class="flex items-center gap8">
    489. 

  489.               <label class="toggle"><input type="checkbox" id="publish-toggle"><span class="toggle-slider"></span></label>
    490. 

  490.               <span style="font-size:13px;color:var(--text-secondary);">开启后培训学员可见</span>
    491. 

  491.             </div>
    492. 

  492.           </div>
    493. 

  493.           <div class="form-item">
    494. 

  494.             <label class="form-label">颁发证书</label>
    495. 

  495.             <div class="flex items-center gap8" style="margin-bottom:10px;">
    496. 

  496.               <label class="toggle"><input type="checkbox" id="cert-toggle" onchange="toggleCertTemplate(this)"><span class="toggle-slider"></span></label>
    497. 

  497.               <span style="font-size:13px;color:var(--text-secondary);">开启后完成培训的学员可获得培训证书</span>
    498. 

  498.             </div>
    499. 

  499.             <div id="cert-template-section" style="display:none;margin-top:8px;padding:14px;background:var(--blue-xlight);border-radius:8px;border:1px solid rgba(24,87,212,.12);">
    500. 

  500.               <label class="form-label" style="margin-bottom:8px;">证书模板</label>
    501. 

  501.               <select class="form-input form-select" style="max-width:360px;">
    502. 

  502.                 <option value="">请选择证书模板</option>
    503. 

  503.                 <option>实验室安全培训证书（通用）</option>
    504. 

  504.                 <option>生物安全专项培训证书</option>
    505. 

  505.                 <option>化学品安全培训证书</option>
    506. 

  506.                 <option>应急演练参与证书</option>
    507. 

  507.               </select>
    508. 

  508.               <div class="form-hint" style="margin-top:6px;">证书将自动填入学员姓名、培训名称、培训日期及学时信息</div>
    509. 

  509.             </div>
    510. 

  510.           </div>
    511. 

  511.         </div>
    512. 

  512.       </div>
    513. 

  513.     </div>
    514. 

  514. 

  515.     <!-- ==================== PAGE: 培训记录 ==================== -->
    516. 

  516.     <div class="page" id="page-training-record">
    517. 

  517.       <div class="breadcrumb"><span>培训管理</span><span class="breadcrumb-sep">/</span><span>培训记录</span></div>
    518. 

  518.       <div class="page-header">
    519. 

  519.         <div><div class="page-title">培训记录</div><div class="page-subtitle">已结束培训的参与记录与证明</div></div>
    520. 

  520.         <button class="btn btn-outline">📤 导出记录</button>
    521. 

  521.       </div>
    522. 

  522.       <div class="search-bar">
    523. 

  523.         <div class="search-input-wrap"><span class="search-icon">🔍</span><input class="search-input" placeholder="搜索培训名称、学员姓名..."></div>
    524. 

  524.         <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
    525. 

  525.         <input class="form-input" type="month" style="width:160px;" value="2026-07">
    526. 

  526.         <button class="btn btn-outline">筛选</button>
    527. 

  527.       </div>
    528. 

  528.       <div class="card mb16">
    529. 

  529.         <div class="card-title">已结束培训列表</div>
    530. 

  530.         <div class="table-wrap">
    531. 

  531.           <table>
    532. 

  532.             <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>主讲人</th><th>应到人数</th><th>实到人数</th><th>签到率</th><th>操作</th></tr></thead>
    533. 

  533.             <tbody>
    534. 

  534.               <tr>
    535. 

  535.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">辐射安全基础知识讲座</span></td>
    536. 

  536.                 <td><span class="tag tag-blue">知识讲座</span></td>
    537. 

  537.                 <td style="white-space:nowrap;">2026-07-20<br><span class="text-xs text-gray">14:00–16:00</span></td>
    538. 

  538.                 <td>陈教授</td>
    539. 

  539.                 <td>60</td>
    540. 

  540.                 <td><span class="text-bold text-green">55</span></td>
    541. 

  541.                 <td>
    542. 

  542.                   <div>91.7%</div>
    543. 

  543.                   <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:92%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div>
    544. 

  544.                 </td>
    545. 

  545.                 <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
    546. 

  546.               </tr>
    547. 

  547.               <tr>
    548. 

  548.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">生物安全法规与合规操作</span></td>
    549. 

  549.                 <td><span class="tag tag-blue">知识讲座</span></td>
    550. 

  550.                 <td style="white-space:nowrap;">2026-07-10<br><span class="text-xs text-gray">09:00–11:00</span></td>
    551. 

  551.                 <td>刘研究员</td>
    552. 

  552.                 <td>45</td>
    553. 

  553.                 <td><span class="text-bold text-green">43</span></td>
    554. 

  554.                 <td>
    555. 

  555.                   <div>95.6%</div>
    556. 

  556.                   <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:96%;background:linear-gradient(90deg,var(--green),var(--green-dark));"></div></div>
    557. 

  557.                 </td>
    558. 

  558.                 <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
    559. 

  559.               </tr>
    560. 

  560.               <tr>
    561. 

  561.                 <td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showModal('modal-record-detail')">消防疏散应急演练（A区）</span></td>
    562. 

  562.                 <td><span class="tag tag-orange">应急演练</span></td>
    563. 

  563.                 <td style="white-space:nowrap;">2026-06-25<br><span class="text-xs text-gray">15:00–17:30</span></td>
    564. 

  564.                 <td>安全部</td>
    565. 

  565.                 <td>120</td>
    566. 

  566.                 <td><span class="text-bold text-blue">98</span></td>
    567. 

  567.                 <td>
    568. 

  568.                   <div>81.7%</div>
    569. 

  569.                   <div class="progress-wrap" style="width:80px;"><div class="progress-bar" style="width:82%;"></div></div>
    570. 

  570.                 </td>
    571. 

  571.                 <td><div class="flex gap8"><button class="btn btn-sm btn-outline" onclick="showModal('modal-record-detail')">查看详情</button><button class="btn btn-sm btn-outline-gray">导出</button></div></td>
    572. 

  572.               </tr>
    573. 

  573.             </tbody>
    574. 

  574.           </table>
    575. 

  575.         </div>
    576. 

  576.         <div class="pagination">
    577. 

  577.           <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">»</button>
    578. 

  578.           <span class="page-info">共 9 条</span>
    579. 

  579.         </div>
    580. 

  580.       </div>
    581. 

  581.     </div>
    582. 

  582. 

  583.     <!-- PAGE: 培训活动列表 -->
    584. 

  584.     <div class="page" id="page-training-activity-list">
    585. 

  585.       <div class="breadcrumb"><span>培训活动</span></div>
    586. 

  586.       <div class="page-header">
    587. 

  587.         <div><div class="page-title">培训活动</div><div class="page-subtitle">全部培训活动列表</div></div>
    588. 

  588.         <button class="btn btn-primary" onclick="showPage('page-training-new');switchMenu('training-mgmt')">+ 新建培训</button>
    589. 

  589.       </div>
    590. 

  590.       <div class="search-bar">
    591. 

  591.         <div class="search-input-wrap"><span class="search-icon">&#128269;</span><input class="search-input" placeholder="搜索培训名称、主讲人..."></div>
    592. 

  592.         <select class="form-input form-select" style="width:130px;"><option>全部状态</option><option>进行中</option><option>即将开始</option><option>报名中</option><option>已结束</option></select>
    593. 

  593.         <select class="form-input form-select" style="width:130px;"><option>全部分类</option><option>知识讲座</option><option>应急演练</option></select>
    594. 

  594.         <button class="btn btn-outline">筛选</button>
    595. 

  595.         <div style="margin-left:auto;display:flex;gap:8px;">
    596. 

  596.           <button class="btn btn-outline-gray" onclick="setListView('grid')">卡片视图</button>
    597. 

  597.           <button class="btn btn-outline-gray" onclick="setListView('list')">列表视图</button>
    598. 

  598.         </div>
    599. 

  599.       </div>
    600. 

  600.       <div id="activity-grid-view" class="training-events-grid">
    601. 

  601.         <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
    602. 

  602.           <div class="training-event-cover" style="background:linear-gradient(135deg,#1857d4,#2e6fe0);">&#129514;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-orange" style="background:rgba(230,126,34,.9);color:#fff;">进行中</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2学时</div></div>
    603. 

  603.           <div class="training-event-body"><div class="training-event-title">实验室生物安全操作规范培训</div><div class="training-event-meta"><div>2026-08-01 10:00-12:00</div><div>生命科学楼 B206</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-gray">42/60人</span><span class="text-xs text-green">+2学时+10积分</span></div></div></div>
    604. 

  604.         </div>
    605. 

  605.         <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
    606. 

  606.           <div class="training-event-cover" style="background:linear-gradient(135deg,#e67e22,#f39c12);">&#128666;<div style="position:absolute;top:10px;left:10px;"><span class="tag" style="background:rgba(229,62,62,.9);color:#fff;">即将开始</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">3学时</div></div>
    607. 

  607.           <div class="training-event-body"><div class="training-event-title">化学品泄漏应急演练2026</div><div class="training-event-meta"><div>2026-08-05 14:00-17:00</div><div>化学实验楼 A101</div><div class="flex items-center gap8 mt8"><span class="tag tag-orange">应急演练</span><span class="text-xs text-gray">28/50人</span><span class="text-xs text-green">+3学时+15积分</span></div></div></div>
    608. 

  608.         </div>
    609. 

  609.         <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
    610. 

  610.           <div class="training-event-cover" style="background:linear-gradient(135deg,#10a37f,#0d8f6f);">&#9889;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-green" style="background:rgba(16,163,127,.9);color:#fff;">报名中</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">1.5学时</div></div>
    611. 

  611.           <div class="training-event-body"><div class="training-event-title">实验室用电安全与消防知识讲座</div><div class="training-event-meta"><div>2026-08-10 09:30-11:00</div><div>综合楼 3F 多功能厅</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-gray">15/80人</span><span class="text-xs text-green">+1.5学时+8积分</span></div></div></div>
    612. 

  612.         </div>
    613. 

  613.         <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
    614. 

  614.           <div class="training-event-cover" style="background:linear-gradient(135deg,#6f42c1,#5a35a0);">&#9762;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-gray" style="background:rgba(136,150,167,.9);color:#fff;">已结束</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2学时</div></div>
    615. 

  615.           <div class="training-event-body"><div class="training-event-title">辐射安全基础知识讲座</div><div class="training-event-meta"><div>2026-07-20 14:00-16:00</div><div>物理楼 C301</div><div class="flex items-center gap8 mt8"><span class="tag tag-blue">知识讲座</span><span class="text-xs text-green text-bold">55/60人签到</span></div></div></div>
    616. 

  616.         </div>
    617. 

  617.         <div class="training-event-card" onclick="showPage('page-training-activity-detail')">
    618. 

  618.           <div class="training-event-cover" style="background:linear-gradient(135deg,#e53e3e,#c53030);">&#128293;<div style="position:absolute;top:10px;left:10px;"><span class="tag tag-gray" style="background:rgba(136,150,167,.9);color:#fff;">已结束</span></div><div style="position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 8px;font-size:11px;color:rgba(255,255,255,.9);">2.5学时</div></div>
    619. 

  619.           <div class="training-event-body"><div class="training-event-title">消防疏散应急演练（A区）</div><div class="training-event-meta"><div>2026-06-25 15:00-17:30</div><div>A区操场及实验楼</div><div class="flex items-center gap8 mt8"><span class="tag tag-orange">应急演练</span><span class="text-xs text-blue text-bold">98/120人签到</span></div></div></div>
    620. 

  620.         </div>
    621. 

  621.       </div>
    622. 

  622.       <div id="activity-list-view" style="display:none;">
    623. 

  623.         <div class="table-wrap"><table>
    624. 

  624.           <thead><tr><th>培训名称</th><th>分类</th><th>培训时间</th><th>主讲人</th><th>组织单位</th><th>地点</th><th>学时/积分</th><th>签到</th><th>状态</th><th>操作</th></tr></thead>
    625. 

  625.           <tbody>
    626. 

  626.             <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">实验室生物安全操作规范培训</span></td><td><span class="tag tag-blue">知识讲座</span></td><td>2026-08-01</td><td>李教授</td><td>生命科学学院</td><td>生命科学楼 B206</td><td><span class="text-green text-bold">2学时+10分</span></td><td>42/60</td><td><span class="tag tag-orange">进行中</span></td><td><button class="btn btn-sm btn-outline" onclick="showPage('page-training-activity-detail')">详情</button></td></tr>
    627. 

  627.             <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">化学品泄漏应急演练2026</span></td><td><span class="tag tag-orange">应急演练</span></td><td>2026-08-05</td><td>王老师</td><td>化学化工学院</td><td>化学楼 A101</td><td><span class="text-green text-bold">3学时+15分</span></td><td>28/50</td><td><span class="tag tag-blue">即将开始</span></td><td><button class="btn btn-sm btn-outline" onclick="showPage('page-training-activity-detail')">详情</button></td></tr>
    628. 

  628.             <tr><td><span class="text-blue" style="cursor:pointer;font-weight:500;" onclick="showPage('page-training-activity-detail')">辐射安全基础知识讲座</span></td><td><span class="tag tag-blue">知识讲座</span></td><td>2026-07-20</td><td>陈教授</td><td>物理学院</td><td>物理楼 C301</td><td><span class="text-green text-bold">2学时+10分</span></td><td>55/60</td><td><span class="tag tag-gray">已结束</span></td><td><button class="btn btn-sm btn-outline-gray" onclick="showPage('page-training-record');switchMenu('training-mgmt')">记录</button></td></tr>
    629. 

  629.           </tbody>
    630. 

  630.         </table></div>
    631. 

  631.       </div>
    632. 

  632.       <div class="pagination" style="margin-top:20px;">
    633. 

  633.         <button class="page-btn">«</button><button class="page-btn active">1</button><button class="page-btn">2</button><button class="page-btn">»</button>
    634. 

  634.         <span class="page-info">共 12 条</span>
    635. 

  635.       </div>
    636. 

  636.     </div>
    637. 

  637. 

  638.     <!-- PAGE: 培训活动详情 -->
    639. 

  639.     <div class="page" id="page-training-activity-detail">
    640. 

  640.       <div class="breadcrumb"><a onclick="showPage('page-training-activity-list');switchMenu('training-activity')">培训活动</a><span class="breadcrumb-sep">/</span><span>培训详情</span></div>
    641. 

  641.       <div style="display:flex;gap:20px;align-items:flex-start;">
    642. 

  642.         <div style="flex:1;">
    643. 

  643.           <div class="card mb16">
    644. 

  644.             <div style="background:linear-gradient(135deg,#1857d4,#2e6fe0);border-radius:8px;height:200px;display:flex;align-items:center;justify-content:center;font-size:64px;margin-bottom:20px;position:relative;">&#129514;<div style="position:absolute;top:14px;left:14px;"><span class="tag tag-orange" style="background:rgba(230,126,34,.9);color:#fff;">进行中</span></div><div style="position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.15);border-radius:8px;padding:6px 12px;color:rgba(255,255,255,.95);font-size:13px;">2学时</div></div>
    645. 

  645.             <div style="font-size:22px;font-weight:700;margin-bottom:12px;">实验室生物安全操作规范培训</div>
    646. 

  646.             <div style="display:flex;gap:8px;margin-bottom:16px;"><span class="tag tag-blue">知识讲座</span><span class="tag tag-green">+2学时</span><span class="tag tag-orange">+10积分</span></div>
    647. 

  647.             <div class="divider"></div>
    648. 

  648.             <div class="detail-section">
    649. 

  649.               <div class="detail-section-title">活动信息</div>
    650. 

  650.               <div class="info-row"><div class="info-key">培训时间</div><div class="info-val">2026-08-01  10:00 – 12:00</div></div>
    651. 

  651.               <div class="info-row"><div class="info-key">培训地点</div><div class="info-val">生命科学楼 B206 报告厅</div></div>
    652. 

  652.               <div class="info-row"><div class="info-key">主讲人</div><div class="info-val">李教授（生命科学学院）</div></div>
    653. 

  653.               <div class="info-row"><div class="info-key">组织单位</div><div class="info-val">生命科学学院 安全教育办公室</div></div>
    654. 

  654.               <div class="info-row"><div class="info-key">培训时长</div><div class="info-val">2 学时（120分钟）</div></div>
    655. 

  655.               <div class="info-row"><div class="info-key">可获学时</div><div class="info-val"><span class="text-green text-bold">2 学时</span></div></div>
    656. 

  656.               <div class="info-row"><div class="info-key">可获积分</div><div class="info-val"><span class="text-orange text-bold">10 积分</span></div></div>
    657. 

  657.             </div>
    658. 

  658.             <div class="divider"></div>
    659. 

  659.             <div class="detail-section">
    660. 

  660.               <div class="detail-section-title">培训详情</div>
    661. 

  661.               <div style="font-size:14px;color:var(--text-secondary);line-height:1.8;">
    662. 

  662.                 <p style="margin-bottom:10px;">本次培训旨在强化实验室人员生物安全意识，规范日常实验操作，降低生物安全风险。</p>
    663. 

  663.                 <p style="margin-bottom:8px;font-weight:600;color:var(--text-primary);">培训内容：</p>
    664. 

  664.                 <ul style="padding-left:20px;display:flex;flex-direction:column;gap:6px;"><li>生物安全基本概念与法律法规解读</li><li>实验室生物安全等级介绍</li><li>个人防护装备（PPE）的正确使用</li><li>生物危险废弃物的分类处置</li><li>意外事故应急处理流程</li></ul>
    665. 

  665.               </div>
    666. 

  666.             </div>
    667. 

  667.           </div>
    668. 

  668.         </div>
    669. 

  669.         <div style="width:300px;flex-shrink:0;">
    670. 

  670.           <div class="card mb16">
    671. 

  671.             <div class="card-title">签到二维码</div>
    672. 

  672.             <div style="text-align:center;padding:16px 0;">
    673. 

  673.               <div style="width:140px;height:140px;background:var(--gray-light);border:2px solid var(--gray-border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 12px;font-size:48px;cursor:pointer;" onclick="showModal('modal-qr')">&#9640;<div style="font-size:11px;color:var(--text-hint);margin-top:4px;">点击放大</div></div>
    674. 

  674.               <button class="btn btn-primary" style="width:100%;margin-bottom:8px;" onclick="showModal('modal-qr')">显示签到码</button>
    675. 

  675.               <button class="btn btn-outline" style="width:100%;">下载二维码</button>
    676. 

  676.             </div>
    677. 

  677.           </div>
    678. 

  678.           <div class="card mb16">
    679. 

  679.             <div class="card-title">签到统计</div>
    680. 

  680.             <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;">
    681. 

  681.               <div style="background:var(--blue-xlight);border-radius:6px;padding:10px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--blue);">42</div><div class="text-xs text-gray">已签到</div></div>
    682. 

  682.               <div style="background:var(--red-light);border-radius:6px;padding:10px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--red);">18</div><div class="text-xs text-gray">未签到</div></div>
    683. 

  683.               <div style="background:var(--green-light);border-radius:6px;padding:10px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--green);">60</div><div class="text-xs text-gray">应到</div></div>
    684. 

  684.               <div style="background:var(--orange-light);border-radius:6px;padding:10px;text-align:center;"><div style="font-size:22px;font-weight:700;color:var(--orange);">70%</div><div class="text-xs text-gray">签到率</div></div>
    685. 

  685.             </div>
    686. 

  686.             <div class="progress-wrap" style="height:8px;"><div class="progress-bar" style="width:70%;"></div></div>
    687. 

  687.           </div>
    688. 

  688.           <div class="card">
    689. 

  689.             <div class="card-title">签到人员</div>
    690. 

  690.             <div style="max-height:280px;overflow-y:auto;">
    691. 

  691.               <div class="attend-row"><div class="attend-avatar">&#128100;</div><div class="attend-info"><div style="font-size:13px;font-weight:500;">张明远</div><div class="text-xs text-gray">20231001</div></div><span class="attend-status-yes">10:05</span></div>
    692. 

  692.               <div class="attend-row"><div class="attend-avatar">&#128100;</div><div class="attend-info"><div style="font-size:13px;font-weight:500;">李晓燕</div><div class="text-xs text-gray">20221056</div></div><span class="attend-status-yes">10:02</span></div>
    693. 

  693.               <div class="attend-row"><div class="attend-avatar">&#128100;</div><div class="attend-info"><div style="font-size:13px;font-weight:500;">王浩然</div><div class="text-xs text-gray">20231089</div></div><span class="attend-status-late">迟到10:22</span></div>
    694. 

  694.               <div class="attend-row"><div class="attend-avatar">&#128100;</div><div class="attend-info"><div style="font-size:13px;font-weight:500;">陈思雨</div><div class="text-xs text-gray">20241103</div></div><span class="attend-status-no">未签到</span></div>
    695. 

  695.             </div>
    696. 

  696.             <button class="btn btn-outline" style="width:100%;margin-top:12px;">查看全部 60 人</button>
    697. 

  697.           </div>
    698. 

  698.         </div>
    699. 

  699.       </div>
    700. 

  700.     </div>
    701. 

  701. 

  702. 

  703.     <!-- ==================== MODALS ==================== -->
    704. 

  704. 

  705.     <!-- QR Code Modal -->
    706. 

  706.     <div class="modal-overlay" id="modal-qr">
    707. 

  707.       <div class="modal-box" style="max-width:360px;">
    708. 

  708.         <div class="modal-header">
    709. 

  709.           <div class="modal-title">&#128247; 签到二维码</div>
    710. 

  710.           <button class="modal-close" onclick="hideModal('modal-qr')">&#10005;</button>
    711. 

  711.         </div>
    712. 

  712.         <div class="modal-body" style="text-align:center;">
    713. 

  713.           <div style="font-size:15px;font-weight:600;margin-bottom:4px;">实验室生物安全操作规范培训</div>
    714. 

  714.           <div style="font-size:12px;color:var(--text-hint);margin-bottom:16px;">2026-08-01 10:00–12:00</div>
    715. 

  715.           <div style="width:200px;height:200px;background:var(--gray-light);border:3px solid var(--gray-border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 16px;font-size:80px;">&#9640;</div>
    716. 

  716.           <div style="background:var(--blue-xlight);border-radius:8px;padding:10px;font-size:12px;color:var(--text-secondary);margin-bottom:16px;">
    717. 

  717.             学员扫描此二维码完成签到<br>
    718. 

  718.             <span style="color:var(--orange);font-weight:500;">有效期至 2026-08-01 12:30</span>
    719. 

  719.           </div>
    720. 

  720.           <div class="flex gap8" style="justify-content:center;">
    721. 

  721.             <button class="btn btn-primary">&#11015; 下载二维码</button>
    722. 

  722.             <button class="btn btn-outline" onclick="hideModal('modal-qr')">关闭</button>
    723. 

  723.           </div>
    724. 

  724.         </div>
    725. 

  725.       </div>
    726. 

  726.     </div>
    727. 

  727. 

  728.     <!-- Progress Modal -->
    729. 

  729.     <div class="modal-overlay" id="modal-progress">
    730. 

  730.       <div class="modal-box modal-lg">
    731. 

  731.         <div class="modal-header">
    732. 

  732.           <div class="modal-title">&#128202; 培训进度详情</div>
    733. 

  733.           <button class="modal-close" onclick="hideModal('modal-progress')">&#10005;</button>
    734. 

  734.         </div>
    735. 

  735.         <div class="modal-body">
    736. 

  736.           <div style="font-size:15px;font-weight:600;margin-bottom:12px;">实验室生物安全操作规范培训</div>
    737. 

  737.           <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;">
    738. 

  738.             <div style="background:var(--blue-xlight);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--blue);">60</div><div class="text-xs text-gray">计划人数</div></div>
    739. 

  739.             <div style="background:var(--green-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--green);">42</div><div class="text-xs text-gray">已签到</div></div>
    740. 

  740.             <div style="background:var(--red-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--red);">18</div><div class="text-xs text-gray">未签到</div></div>
    741. 

  741.             <div style="background:var(--orange-light);border-radius:8px;padding:12px;text-align:center;"><div style="font-size:24px;font-weight:700;color:var(--orange);">70%</div><div class="text-xs text-gray">签到率</div></div>
    742. 

  742.           </div>
    743. 

  743.           <div class="progress-wrap" style="height:10px;margin-bottom:20px;"><div class="progress-bar" style="width:70%;"></div></div>
    744. 

  744.           <div class="table-wrap">
    745. 

  745.             <table>
    746. 

  746.               <thead><tr><th>姓名</th><th>学号</th><th>院系</th><th>签到状态</th><th>签到时间</th><th>获得学时</th><th>获得积分</th></tr></thead>
    747. 

  747.               <tbody>
    748. 

  748.                 <tr><td>张明远</td><td>20231001</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>10:05</td><td>2</td><td>10</td></tr>
    749. 

  749.                 <tr><td>李晓燕</td><td>20221056</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>10:02</td><td>2</td><td>10</td></tr>
    750. 

  750.                 <tr><td>王浩然</td><td>20231089</td><td>化学化工学院</td><td><span class="tag tag-orange">迟到</span></td><td>10:22</td><td>2</td><td>8</td></tr>
    751. 

  751.                 <tr><td>陈思雨</td><td>20241103</td><td>物理学院</td><td><span class="tag tag-red">未签到</span></td><td>—</td><td>0</td><td>0</td></tr>
    752. 

  752.                 <tr><td>刘志远</td><td>20231055</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>09:58</td><td>2</td><td>10</td></tr>
    753. 

  753.               </tbody>
    754. 

  754.             </table>
    755. 

  755.           </div>
    756. 

  756.         </div>
    757. 

  757.         <div class="modal-footer">
    758. 

  758.           <button class="btn btn-outline">&#128196; 导出Excel</button>
    759. 

  759.           <button class="btn btn-outline-gray" onclick="hideModal('modal-progress')">关闭</button>
    760. 

  760.         </div>
    761. 

  761.       </div>
    762. 

  762.     </div>
    763. 

  763. 

  764.     <!-- Record Detail Modal -->
    765. 

  765.     <div class="modal-overlay" id="modal-record-detail">
    766. 

  766.       <div class="modal-box modal-lg">
    767. 

  767.         <div class="modal-header">
    768. 

  768.           <div class="modal-title">&#128196; 培训记录详情</div>
    769. 

  769.           <button class="modal-close" onclick="hideModal('modal-record-detail')">&#10005;</button>
    770. 

  770.         </div>
    771. 

  771.         <div class="modal-body">
    772. 

  772.           <div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px;">
    773. 

  773.             <div style="font-size:16px;font-weight:700;">辐射安全基础知识讲座</div>
    774. 

  774.             <span class="tag tag-gray">已结束</span>
    775. 

  775.             <span class="tag tag-blue">知识讲座</span>
    776. 

  776.             <span class="tag tag-green" style="gap:4px;">&#127941; 已颁发证书</span>
    777. 

  777.           </div>
    778. 

  778.           <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;font-size:13px;">
    779. 

  779.             <div><span style="color:var(--text-hint);">培训时间：</span>2026-07-20 14:00–16:00</div>
    780. 

  780.             <div><span style="color:var(--text-hint);">培训地点：</span>物理楼 C301</div>
    781. 

  781.             <div><span style="color:var(--text-hint);">主讲人：</span>陈教授</div>
    782. 

  782.             <div><span style="color:var(--text-hint);">签到率：</span><span class="text-green text-bold">91.7% (55/60)</span></div>
    783. 

  783.             <div><span style="color:var(--text-hint);">可得学时：</span><span class="text-green text-bold">2 学时</span></div>
    784. 

  784.             <div><span style="color:var(--text-hint);">可得积分：</span><span class="text-orange text-bold">10 积分</span></div>
    785. 

  785.             <div><span style="color:var(--text-hint);">证书模板：</span>实验室安全培训证书（通用）</div>
    786. 

  786.           </div>
    787. 

  787.           <div class="divider"></div>
    788. 

  788.           <div style="margin-bottom:12px;font-size:13px;font-weight:600;">参与人员签到记录</div>
    789. 

  789.           <div class="table-wrap">
    790. 

  790.             <table>
    791. 

  791.               <thead><tr><th>姓名</th><th>学号</th><th>院系</th><th>签到状态</th><th>签到时间</th><th>获得学时</th><th>获得积分</th><th>证书状态</th><th>操作</th></tr></thead>
    792. 

  792.               <tbody>
    793. 

  793.                 <tr><td>张明远</td><td>20231001</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>14:02</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">10</span></td><td><span class="tag tag-green" style="font-size:10px;">已颁发</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
    794. 

  794.                 <tr><td>李晓燕</td><td>20221056</td><td>生命科学学院</td><td><span class="tag tag-green">已签到</span></td><td>14:05</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">10</span></td><td><span class="tag tag-green" style="font-size:10px;">已颁发</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
    795. 

  795.                 <tr><td>王浩然</td><td>20231089</td><td>化学化工学院</td><td><span class="tag tag-orange">迟到</span></td><td>14:18</td><td><span class="text-green text-bold">2</span></td><td><span class="text-orange text-bold">8</span></td><td><span class="tag tag-green" style="font-size:10px;">已颁发</span></td><td><div class="flex gap8"><span class="text-blue text-sm" style="cursor:pointer;" onclick="showModal('modal-cert-preview')">查看</span><span class="text-blue text-sm" style="cursor:pointer;">下载</span></div></td></tr>
    796. 

  796.                 <tr><td>陈思雨</td><td>20241103</td><td>物理学院</td><td><span class="tag tag-red">未签到</span></td><td>—</td><td>0</td><td>0</td><td><span class="tag tag-gray" style="font-size:10px;">未颁发</span></td><td>—</td></tr>
    797. 

  797.               </tbody>
    798. 

  798.             </table>
    799. 

  799.           </div>
    800. 

  800.         </div>
    801. 

  801.         <div class="modal-footer">
    802. 

  802.           <button class="btn btn-outline">&#128196; 导出记录</button>
    803. 

  803.           <button class="btn btn-outline-gray" onclick="hideModal('modal-record-detail')">关闭</button>
    804. 

  804.         </div>
    805. 

  805.       </div>
    806. 

  806.     </div>
    807. 

  807. 

  808.     <!-- Certificate Preview Modal -->
    809. 

  809.     <div class="modal-overlay" id="modal-cert-preview">
    810. 

  810.       <div class="modal-box" style="max-width:580px;">
    811. 

  811.         <div class="modal-header">
    812. 

  812.           <div class="modal-title">&#127941; 培训证书</div>
    813. 

  813.           <button class="modal-close" onclick="hideModal('modal-cert-preview')">&#10005;</button>
    814. 

  814.         </div>
    815. 

  815.         <div class="modal-body">
    816. 

  816.           <!-- Certificate card -->
    817. 

  817.           <div style="background:linear-gradient(135deg,#1857d4 0%,#0f3ea8 100%);border-radius:12px;padding:32px 28px;color:#fff;position:relative;overflow:hidden;margin-bottom:16px;">
    818. 

  818.             <div style="position:absolute;right:-30px;top:-30px;width:160px;height:160px;background:rgba(255,255,255,.06);border-radius:50%;"></div>
    819. 

  819.             <div style="position:absolute;right:20px;bottom:-40px;width:120px;height:120px;background:rgba(255,255,255,.04);border-radius:50%;"></div>
    820. 

  820.             <div style="text-align:center;margin-bottom:20px;">
    821. 

  821.               <div style="font-size:13px;letter-spacing:2px;opacity:.75;margin-bottom:4px;">实验室安全培训证书</div>
    822. 

  822.               <div style="font-size:11px;opacity:.55;letter-spacing:1px;">LABORATORY SAFETY TRAINING CERTIFICATE</div>
    823. 

  823.             </div>
    824. 

  824.             <div style="text-align:center;margin-bottom:20px;">
    825. 

  825.               <div style="font-size:11px;opacity:.7;margin-bottom:6px;">兹证明</div>
    826. 

  826.               <div style="font-size:26px;font-weight:700;letter-spacing:3px;margin-bottom:6px;">张 明 远</div>
    827. 

  827.               <div style="font-size:11px;opacity:.7;">学号：20231001 &nbsp;·&nbsp; 硕士研究生 &nbsp;·&nbsp; 生命科学学院</div>
    828. 

  828.             </div>
    829. 

  829.             <div style="text-align:center;margin-bottom:20px;font-size:13px;opacity:.85;line-height:1.7;">
    830. 

  830.               已参加并完成 <strong>辐射安全基础知识讲座</strong> 培训<br>
    831. 

  831.               培训时间：2026-07-20 &nbsp;·&nbsp; 获得学时：<strong>2 学时</strong> &nbsp;·&nbsp; 获得积分：<strong>10 分</strong>
    832. 

  832.             </div>
    833. 

  833.             <div style="display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;font-size:11px;opacity:.7;">
    834. 

  834.               <div>证书编号：CERT-2026-0720-001</div>
    835. 

  835.               <div>颁发日期：2026-07-20</div>
    836. 

  836.               <div>颁发单位：实验室安全教育中心</div>
    837. 

  837.             </div>
    838. 

  838.           </div>
    839. 

  839.           <div class="flex gap8" style="justify-content:flex-end;">
    840. 

  840.             <button class="btn btn-primary">&#11015; 下载证书</button>
    841. 

  841.             <button class="btn btn-outline-gray" onclick="hideModal('modal-cert-preview')">关闭</button>
    842. 

  842.           </div>
    843. 

  843.         </div>
    844. 

  844.       </div>
    845. 

  845.     </div>
    846. 

  846. 

  847.     <!-- Delete Confirm Modal -->
    848. 

  848.     <div class="modal-overlay" id="modal-confirm-delete">
    849. 

  849.       <div class="modal-box" style="max-width:380px;">
    850. 

  850.         <div class="modal-header">
    851. 

  851.           <div class="modal-title">确认删除</div>
    852. 

  852.           <button class="modal-close" onclick="hideModal('modal-confirm-delete')">&#10005;</button>
    853. 

  853.         </div>
    854. 

  854.         <div class="modal-body" style="text-align:center;padding:24px;">
    855. 

  855.           <div style="font-size:40px;margin-bottom:12px;">🗑️</div>
    856. 

  856.           <div style="font-size:15px;font-weight:600;margin-bottom:8px;">确认删除此培训？</div>
    857. 

  857.           <div style="font-size:13px;color:var(--text-hint);">删除后数据将无法恢复，相关签到记录和证书也将一并删除。</div>
    858. 

  858.         </div>
    859. 

  859.         <div class="modal-footer" style="justify-content:center;">
    860. 

  860.           <button class="btn btn-outline-gray" onclick="hideModal('modal-confirm-delete')" style="min-width:90px;">取消</button>
    861. 

  861.           <button class="btn" style="min-width:90px;background:var(--red);color:#fff;" onclick="hideModal('modal-confirm-delete')">确认删除</button>
    862. 

  862.         </div>
    863. 

  863.       </div>
    864. 

  864.     </div>
    865. 

  865. 

  866.   </div><!-- end main-content -->
    867. 

  867. 

  868. 

  869. <div id="page-exam-template" class="page" style="padding:0;">
    870. 

  870.   <!-- Page Header -->
    871. 

  871.   <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;">
    872. 

  872.     <div>
    873. 

  873.       <div class="page-title">考试模版</div>
    874. 

  874.       <div class="page-subtitle">管理各类考试的模版配置，包含基本设置、考前配置、防作弊及证书颁发等。</div>
    875. 

  875.     </div>
    876. 

  876.     <span class="tag tag-blue" style="font-size:12px;padding:4px 12px;">唯一模版</span>
    877. 

  877.   </div>
    878. 

  878. 

  879.   <!-- Top-level tabs: 开学考试 / 分级考试 / 应知应会 -->
    880. 

  880.   <div class="view-tabs" id="exam-top-tabs">
    881. 

  881.     <div class="view-tab active" onclick="switchExamTab('kaixue')">开学考试</div>
    882. 

  882.     <div class="view-tab" onclick="switchExamTab('fenji')">分级考试</div>
    883. 

  883.     <div class="view-tab" onclick="switchExamTab('yingzhi')">应知应会</div>
    884. 

  884.   </div>
    885. 

  885. 

  886.   <!-- ══════════════════════════════════════════════════════════
    887. 

  887.        TAB 1: 开学考试
    888. 

  888.   ══════════════════════════════════════════════════════════ -->
    889. 

  889.   <div id="exam-tab-kaixue" class="exam-tab-panel" style="display:flex;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;">
    890. 

  890.     <!-- Left sidebar nav -->
    891. 

  891.     <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    892. 

  892.       <div class="nav-item active" id="kaixue-nav-basic" onclick="switchExamSection('kaixue','basic')">基本设置</div>
    893. 

  893.       <div class="nav-item" id="kaixue-nav-preexam" onclick="switchExamSection('kaixue','preexam')">考前配置</div>
    894. 

  894.       <div class="nav-item" id="kaixue-nav-cheat" onclick="switchExamSection('kaixue','cheat')">防作弊</div>
    895. 

  895.       <div class="nav-item" id="kaixue-nav-cert" onclick="switchExamSection('kaixue','cert')">获得证书</div>
    896. 

  896.     </div>
    897. 

  897.     <!-- Right content area -->
    898. 

  898.     <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - 220px);">
    899. 

  899. 

  900.       <!-- 权限层级 + 每学年自动执行 (common header) -->
    901. 

  901.       <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;">
    902. 

  902.         <div style="display:flex;align-items:center;gap:16px;">
    903. 

  903.           <span class="form-label">权限层级：</span>
    904. 

  904.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    905. 

  905.             <input type="radio" name="kaixue-perm" value="school" checked> 校级（全校/指定范围）
    906. 

  906.           </label>
    907. 

  907.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    908. 

  908.             <input type="radio" name="kaixue-perm" value="college"> 院级（所属学院）
    909. 

  909.           </label>
    910. 

  910.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    911. 

  911.             <input type="radio" name="kaixue-perm" value="lab"> 实验室（自己负责）
    912. 

  912.           </label>
    913. 

  913.         </div>
    914. 

  914.         <div style="display:flex;align-items:center;gap:8px;">
    915. 

  915.           <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
    916. 

  916.           <span class="form-hint">每学年自动按配置日期创建考试</span>
    917. 

  917.         </div>
    918. 

  918.       </div>
    919. 

  919. 

  920.       <!-- 基本设置 section -->
    921. 

  921.       <div id="kaixue-sec-basic" class="exam-section">
    922. 

  922.         <div class="card-title">基本设置</div>
    923. 

  923.         <div style="display:flex;flex-direction:column;gap:16px;">
    924. 

  924. 

  925.           <div style="display:flex;align-items:center;gap:16px;">
    926. 

  926.             <span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span>
    927. 

  927.             <input class="form-input" style="width:200px;" value="开学考试" disabled>
    928. 

  928.             <span class="form-hint">系统内置，不可更改</span>
    929. 

  929.           </div>
    930. 

  930. 

  931.           <div style="display:flex;align-items:center;gap:16px;">
    932. 

  932.             <span class="form-label" style="width:80px;flex-shrink:0;">风险等级</span>
    933. 

  933.             <select class="form-input form-select" style="width:200px;">
    934. 

  934.               <option value="">请选择风险等级</option>
    935. 

  935.               <option>重大风险</option>
    936. 

  936.               <option>高风险</option>
    937. 

  937.               <option>中风险</option>
    938. 

  938.               <option>低风险</option>
    939. 

  939.             </select>
    940. 

  940.           </div>
    941. 

  941. 

  942.           <div style="display:flex;align-items:center;gap:16px;">
    943. 

  943.             <span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span>
    944. 

  944.             <input class="form-input" style="width:300px;" placeholder="请输入考试名称">
    945. 

  945.           </div>
    946. 

  946. 

  947.           <div style="display:flex;align-items:center;gap:16px;">
    948. 

  948.             <span class="form-label" style="width:80px;flex-shrink:0;">答卷次数</span>
    949. 

  949.             <div style="display:flex;align-items:center;gap:8px;">
    950. 

  950.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-answer-cnt',-1)">－</button>
    951. 

  951.               <input id="kaixue-answer-cnt" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
    952. 

  952.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-answer-cnt',1)">＋</button>
    953. 

  953.             </div>
    954. 

  954.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;">
    955. 

  955.               <input type="radio" name="kaixue-answer-mode" value="limit" checked> 限制次数
    956. 

  956.             </label>
    957. 

  957.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    958. 

  958.               <input type="radio" name="kaixue-answer-mode" value="unlimited"> 无限制
    959. 

  959.             </label>
    960. 

  960.           </div>
    961. 

  961. 

  962.           <div style="display:flex;align-items:center;gap:16px;">
    963. 

  963.             <span class="form-label" style="width:80px;flex-shrink:0;">显示共享</span>
    964. 

  964.             <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    965. 

  965.             <span class="form-hint">开课共享，全程有学号信息不可匿名</span>
    966. 

  966.           </div>
    967. 

  967. 

  968.           <div style="display:flex;align-items:center;gap:16px;">
    969. 

  969.             <span class="form-label" style="width:80px;flex-shrink:0;">启用</span>
    970. 

  970.             <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
    971. 

  971.           </div>
    972. 

  972. 

  973.           <div style="display:flex;align-items:flex-start;gap:16px;">
    974. 

  974.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考卷</span>
    975. 

  975.             <div style="display:flex;flex-direction:column;gap:8px;">
    976. 

  976.               <div style="display:flex;align-items:center;gap:8px;">
    977. 

  977.                 <button class="btn btn-outline btn-sm">选择试卷</button>
    978. 

  978.                 <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全基础知识<span onclick="this.parentElement.remove()" style="cursor:pointer;margin-left:2px;">×</span></span>
    979. 

  979.               </div>
    980. 

  980.               <span class="form-hint">建议按知识点选择覆盖本校安全要求的试卷</span>
    981. 

  981.             </div>
    982. 

  982.           </div>
    983. 

  983. 

  984.           <div style="display:flex;align-items:center;gap:16px;">
    985. 

  985.             <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
    986. 

  986.             <input type="date" class="form-input" style="width:150px;">
    987. 

  987.             <span style="color:var(--text-hint);font-size:13px;">至</span>
    988. 

  988.             <input type="date" class="form-input" style="width:150px;">
    989. 

  989.           </div>
    990. 

  990. 

  991.           <div style="display:flex;align-items:center;gap:16px;">
    992. 

  992.             <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
    993. 

  993.             <div style="display:flex;align-items:center;gap:8px;">
    994. 

  994.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-duration',-5)">－</button>
    995. 

  995.               <input id="kaixue-duration" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
    996. 

  996.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-duration',5)">＋</button>
    997. 

  997.               <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
    998. 

  998.             </div>
    999. 

  999.             <span class="form-hint">限制答卷最大时长</span>
    1000. 

  1000.           </div>
    1001. 

  1001. 

  1002.           <!-- 考试范围 -->
    1003. 

  1003.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1004. 

  1004.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试范围</span>
    1005. 

  1005.             <div style="display:flex;flex-direction:column;gap:10px;flex:1;">
    1006. 

  1006.               <div style="display:flex;gap:16px;">
    1007. 

  1007.                 <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    1008. 

  1008.                   <input type="radio" name="kaixue-scope" value="all" checked onclick="setKaixueScope('all')"> 全校
    1009. 

  1009.                 </label>
    1010. 

  1010.                 <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    1011. 

  1011.                   <input type="radio" name="kaixue-scope" value="specify" onclick="setKaixueScope('specify')"> 考试范围（指定）
    1012. 

  1012.                 </label>
    1013. 

  1013.                 <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;">
    1014. 

  1014.                   <input type="radio" name="kaixue-scope" value="student" onclick="setKaixueScope('student')"> 指定学生
    1015. 

  1015.                 </label>
    1016. 

  1016.               </div>
    1017. 

  1017.               <div id="kaixue-scope-table" style="display:none;">
    1018. 

  1018.                 <div class="table-wrap" style="margin-bottom:8px;">
    1019. 

  1019.                   <table>
    1020. 

  1020.                     <thead><tr><th>学院</th><th>专业</th><th>角色</th><th>年级</th><th>操作</th></tr></thead>
    1021. 

  1021.                     <tbody id="kaixue-scope-tbody">
    1022. 

  1022.                       <tr><td colspan="5" style="text-align:center;color:var(--text-hint);">暂无数据，请添加</td></tr>
    1023. 

  1023.                     </tbody>
    1024. 

  1024.                   </table>
    1025. 

  1025.                 </div>
    1026. 

  1026.                 <button class="btn btn-outline btn-sm">＋ 添加范围</button>
    1027. 

  1027.               </div>
    1028. 

  1028.             </div>
    1029. 

  1029.           </div>
    1030. 

  1030. 

  1031.           <!-- 用户类别 -->
    1032. 

  1032.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1033. 

  1033.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span>
    1034. 

  1034.             <div style="display:flex;flex-direction:column;gap:8px;">
    1035. 

  1035.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
    1036. 

  1036.                 <input type="checkbox" id="kaixue-user-undergrad" checked onchange="updateKaixueHours()"> 新入学本科生（默认勾选）
    1037. 

  1037.               </label>
    1038. 

  1038.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
    1039. 

  1039.                 <input type="checkbox" id="kaixue-user-postgrad" checked onchange="updateKaixueHours()"> 新入学研究生
    1040. 

  1040.               </label>
    1041. 

  1041.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;">
    1042. 

  1042.                 <input type="checkbox" id="kaixue-user-staff" checked onchange="updateKaixueHours()"> 新入职教职工
    1043. 

  1043.               </label>
    1044. 

  1044.             </div>
    1045. 

  1045.           </div>
    1046. 

  1046. 

  1047.           <!-- 学时配置 -->
    1048. 

  1048.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1049. 

  1049.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span>
    1050. 

  1050.             <div style="flex:1;">
    1051. 

  1051.               <div class="table-wrap">
    1052. 

  1052.                 <table>
    1053. 

  1053.                   <thead><tr><th>用户类别</th><th>所需学时</th><th>备注</th></tr></thead>
    1054. 

  1054.                   <tbody id="kaixue-hours-tbody">
    1055. 

  1055.                     <tr><td>新入学本科生</td><td><input type="number" class="form-input" style="width:80px;" value="4" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1056. 

  1056.                     <tr><td>新入学研究生</td><td><input type="number" class="form-input" style="width:80px;" value="4" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1057. 

  1057.                     <tr><td>新入职教职工</td><td><input type="number" class="form-input" style="width:80px;" value="2" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1058. 

  1058.                   </tbody>
    1059. 

  1059.                 </table>
    1060. 

  1060.               </div>
    1061. 

  1061.             </div>
    1062. 

  1062.           </div>
    1063. 

  1063. 

  1064.         </div><!-- /flex col -->
    1065. 

  1065.         <div style="margin-top:24px;display:flex;gap:12px;">
    1066. 

  1066.           <button class="btn btn-primary">保存设置</button>
    1067. 

  1067.           <button class="btn btn-outline-gray">重置</button>
    1068. 

  1068.         </div>
    1069. 

  1069.       </div><!-- /kaixue-sec-basic -->
    1070. 

  1070. 

  1071.       <!-- 考前配置 section -->
    1072. 

  1072.       <div id="kaixue-sec-preexam" class="exam-section" style="display:none;">
    1073. 

  1073.         <div class="card-title">考前配置</div>
    1074. 

  1074.         <div style="display:flex;flex-direction:column;gap:20px;">
    1075. 

  1075. 

  1076.           <!-- 学时要求 -->
    1077. 

  1077.           <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    1078. 

  1078.             <span class="form-label" style="width:80px;flex-shrink:0;">学时要求</span>
    1079. 

  1079.             <label class="toggle"><input type="checkbox" id="kaixue-credit-toggle" onchange="document.getElementById('kaixue-credit-detail').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1080. 

  1080.             <div id="kaixue-credit-detail" style="display:none;align-items:center;gap:8px;">
    1081. 

  1081.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-credit-val',-1)">－</button>
    1082. 

  1082.               <input id="kaixue-credit-val" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="0">
    1083. 

  1083.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('kaixue-credit-val',1)">＋</button>
    1084. 

  1084.               <span style="font-size:13px;color:var(--text-secondary);">学时</span>
    1085. 

  1085.               <span class="form-hint">参加考试前需完成的最低学时数</span>
    1086. 

  1086.             </div>
    1087. 

  1087.           </div>
    1088. 

  1088. 

  1089.           <!-- 考前学习 -->
    1090. 

  1090.           <div style="display:flex;align-items:flex-start;gap:12px;">
    1091. 

  1091.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考前学习</span>
    1092. 

  1092.             <div style="display:flex;flex-direction:column;gap:8px;">
    1093. 

  1093.               <label class="toggle"><input type="checkbox" id="kaixue-prestudy-toggle" onchange="document.getElementById('kaixue-prestudy-detail').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1094. 

  1094.               <div id="kaixue-prestudy-detail" style="display:none;align-items:center;gap:8px;">
    1095. 

  1095.                 <button class="btn btn-outline btn-sm">选择课程</button>
    1096. 

  1096.                 <span class="tag tag-blue" style="display:inline-flex;align-items:center;gap:4px;">实验室安全基础课程<span onclick="this.parentElement.remove()" style="cursor:pointer;margin-left:2px;">×</span></span>
    1097. 

  1097.               </div>
    1098. 

  1098.             </div>
    1099. 

  1099.           </div>
    1100. 

  1100. 

  1101.           <!-- 模拟考试 -->
    1102. 

  1102.           <div style="display:flex;align-items:flex-start;gap:12px;">
    1103. 

  1103.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">模拟考试</span>
    1104. 

  1104.             <div style="display:flex;flex-direction:column;gap:8px;">
    1105. 

  1105.               <label class="toggle"><input type="checkbox" id="kaixue-mock-toggle" onchange="document.getElementById('kaixue-mock-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
    1106. 

  1106.               <div id="kaixue-mock-detail" style="display:none;">
    1107. 

  1107.                 <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
    1108. 

  1108.                   <button class="btn btn-outline btn-sm">选择试卷</button>
    1109. 

  1109.                   <span class="tag tag-gray" id="kaixue-mock-paper">未选择</span>
    1110. 

  1110.                 </div>
    1111. 

  1111.                 <div style="display:flex;gap:16px;font-size:12px;color:var(--text-hint);">
    1112. 

  1112.                   <span>总题数：<strong style="color:var(--text-primary);">50</strong></span>
    1113. 

  1113.                   <span>总分：<strong style="color:var(--text-primary);">100</strong></span>
    1114. 

  1114.                   <span>及格分：<strong style="color:var(--green);">60</strong></span>
    1115. 

  1115.                 </div>
    1116. 

  1116.               </div>
    1117. 

  1117.             </div>
    1118. 

  1118.           </div>
    1119. 

  1119. 

  1120.           <!-- 考试承诺书 -->
    1121. 

  1121.           <div style="display:flex;align-items:flex-start;gap:12px;">
    1122. 

  1122.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考试承诺书</span>
    1123. 

  1123.             <div style="display:flex;flex-direction:column;gap:8px;flex:1;">
    1124. 

  1124.               <label class="toggle"><input type="checkbox" id="kaixue-pledge-toggle" onchange="document.getElementById('kaixue-pledge-detail').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
    1125. 

  1125.               <div id="kaixue-pledge-detail" style="display:none;">
    1126. 

  1126.                 <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
    1127. 

  1127.                   <span class="form-label">承诺书编辑</span>
    1128. 

  1128.                   <label class="toggle"><input type="checkbox" onchange="document.getElementById('kaixue-pledge-editor').style.display=this.checked?'block':'none'"><span class="toggle-slider"></span></label>
    1129. 

  1129.                 </div>
    1130. 

  1130.                 <div id="kaixue-pledge-editor" style="display:none;">
    1131. 

  1131.                   <div class="rich-editor">
    1132. 

  1132.                     <div class="rich-toolbar">
    1133. 

  1133.                       <button class="rich-tool-btn">B</button><button class="rich-tool-btn">I</button>
    1134. 

  1134.                       <button class="rich-tool-btn">U</button><button class="rich-tool-btn">≡</button>
    1135. 

  1135.                       <button class="rich-tool-btn">链接</button><button class="rich-tool-btn">图片</button>
    1136. 

  1136.                     </div>
    1137. 

  1137.                     <div class="rich-body" contenteditable="true">
    1138. 

  1138.                       <p><strong>实验室安全承诺书</strong></p>
    1139. 

  1139.                       <p>本人郑重承诺：在参加实验室安全考试及日常实验操作过程中，严格遵守实验室各项安全规章制度，认真执行安全操作规程，不擅自使用不熟悉的仪器设备，不私自改装或违规操作实验装置。发现安全隐患及时上报，如实反映实验情况，对违规行为承担相应法律及校规责任。</p>
    1140. 

  1140.                     </div>
    1141. 

  1141.                   </div>
    1142. 

  1142.                 </div>
    1143. 

  1143.               </div>
    1144. 

  1144.             </div>
    1145. 

  1145.           </div>
    1146. 

  1146. 

  1147.         </div>
    1148. 

  1148.         <div style="margin-top:24px;display:flex;gap:12px;">
    1149. 

  1149.           <button class="btn btn-primary">保存设置</button>
    1150. 

  1150.           <button class="btn btn-outline-gray">重置</button>
    1151. 

  1151.         </div>
    1152. 

  1152.       </div><!-- /kaixue-sec-preexam -->
    1153. 

  1153. 

  1154.       <!-- 防作弊 section -->
    1155. 

  1155.       <div id="kaixue-sec-cheat" class="exam-section" style="display:none;">
    1156. 

  1156.         <div class="card-title">防作弊</div>
    1157. 

  1157.         <div style="display:flex;flex-direction:column;gap:16px;">
    1158. 

  1158. 

  1159.           <div style="display:flex;align-items:center;gap:12px;">
    1160. 

  1160.             <span class="form-label" style="width:100px;flex-shrink:0;">切屏限制</span>
    1161. 

  1161.             <label class="toggle"><input type="checkbox" id="kaixue-switchscreen" onchange="document.getElementById('kaixue-switchscreen-cnt-wrap').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1162. 

  1162.             <div id="kaixue-switchscreen-cnt-wrap" style="display:none;align-items:center;gap:6px;">
    1163. 

  1163.               <span style="font-size:13px;color:var(--text-secondary);">切屏</span>
    1164. 

  1164.               <input type="number" class="form-input" style="width:60px;text-align:center;" value="3" min="1">
    1165. 

  1165.               <span style="font-size:13px;color:var(--text-secondary);">次后提交</span>
    1166. 

  1166.             </div>
    1167. 

  1167.           </div>
    1168. 

  1168. 

  1169.           <div style="display:flex;align-items:center;gap:12px;">
    1170. 

  1170.             <span class="form-label" style="width:100px;flex-shrink:0;">随机题目</span>
    1171. 

  1171.             <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1172. 

  1172.           </div>
    1173. 

  1173. 

  1174.           <div style="display:flex;align-items:center;gap:12px;">
    1175. 

  1175.             <span class="form-label" style="width:100px;flex-shrink:0;">随机选项</span>
    1176. 

  1176.             <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1177. 

  1177.           </div>
    1178. 

  1178. 

  1179.           <div style="display:flex;align-items:center;gap:12px;">
    1180. 

  1180.             <span class="form-label" style="width:100px;flex-shrink:0;">人脸识别</span>
    1181. 

  1181.             <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1182. 

  1182.           </div>
    1183. 

  1183. 

  1184.         </div>
    1185. 

  1185.         <div style="margin-top:24px;display:flex;gap:12px;">
    1186. 

  1186.           <button class="btn btn-primary">保存设置</button>
    1187. 

  1187.           <button class="btn btn-outline-gray">重置</button>
    1188. 

  1188.         </div>
    1189. 

  1189.       </div><!-- /kaixue-sec-cheat -->
    1190. 

  1190. 

  1191.       <!-- 获得证书 section -->
    1192. 

  1192.       <div id="kaixue-sec-cert" class="exam-section" style="display:none;">
    1193. 

  1193.         <div class="card-title">获得证书</div>
    1194. 

  1194.         <div style="display:flex;flex-direction:column;gap:16px;">
    1195. 

  1195.           <div style="display:flex;align-items:center;gap:12px;">
    1196. 

  1196.             <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
    1197. 

  1197.             <label class="toggle"><input type="checkbox" id="kaixue-cert-toggle" onchange="document.getElementById('kaixue-cert-tmpl').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1198. 

  1198.           </div>
    1199. 

  1199.           <div id="kaixue-cert-tmpl" style="display:none;align-items:center;gap:12px;">
    1200. 

  1200.             <span class="form-label" style="width:80px;flex-shrink:0;">证书模板</span>
    1201. 

  1201.             <select class="form-input form-select" style="width:240px;">
    1202. 

  1202.               <option value="">请选择证书模板</option>
    1203. 

  1203.               <option>实验室安全教育证书（标准版）</option>
    1204. 

  1204.               <option>实验室安全教育证书（精英版）</option>
    1205. 

  1205.             </select>
    1206. 

  1206.           </div>
    1207. 

  1207.         </div>
    1208. 

  1208.         <div style="margin-top:24px;display:flex;gap:12px;">
    1209. 

  1209.           <button class="btn btn-primary">保存设置</button>
    1210. 

  1210.           <button class="btn btn-outline-gray">重置</button>
    1211. 

  1211.         </div>
    1212. 

  1212.       </div><!-- /kaixue-sec-cert -->
    1213. 

  1213. 

  1214.     </div><!-- /right content -->
    1215. 

  1215.   </div><!-- /exam-tab-kaixue -->
    1216. 

  1216. 

  1217.   <!-- ══════════════════════════════════════════════════════════
    1218. 

  1218.        TAB 2: 分级考试
    1219. 

  1219.   ══════════════════════════════════════════════════════════ -->
    1220. 

  1220.   <div id="exam-tab-fenji" class="exam-tab-panel" style="display:none;">
    1221. 

  1221.     <!-- Grade sub-tabs -->
    1222. 

  1222.     <div class="view-tabs" id="fenji-grade-tabs" style="margin-bottom:0;padding:0 24px;background:var(--white);border:1px solid var(--gray-border);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;">
    1223. 

  1223.       <div class="view-tab active" onclick="switchGradeTab('g1')">Ⅰ级（重大风险）</div>
    1224. 

  1224.       <div class="view-tab" onclick="switchGradeTab('g2')">Ⅱ级（高风险）</div>
    1225. 

  1225.       <div class="view-tab" onclick="switchGradeTab('g3')">Ⅲ级（中风险）</div>
    1226. 

  1226.       <div class="view-tab" onclick="switchGradeTab('g4')">Ⅳ级（低风险）</div>
    1227. 

  1227.     </div>
    1228. 

  1228. 

  1229.     <!-- Each grade panel shares the same two-column layout. We generate g1-g4. -->
    1230. 

  1230.     <div id="fenji-grade-g1" class="fenji-grade-panel" style="display:flex;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;">
    1231. 

  1231.       <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    1232. 

  1232.         <div class="nav-item active" onclick="switchExamSection('fenji-g1','basic')">基本设置</div>
    1233. 

  1233.         <div class="nav-item" onclick="switchExamSection('fenji-g1','preexam')">考前配置</div>
    1234. 

  1234.         <div class="nav-item" onclick="switchExamSection('fenji-g1','cheat')">防作弊</div>
    1235. 

  1235.         <div class="nav-item" onclick="switchExamSection('fenji-g1','cert')">获得证书</div>
    1236. 

  1236.       </div>
    1237. 

  1237.       <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - 260px);">
    1238. 

  1238.         <!-- Common header -->
    1239. 

  1239.         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;">
    1240. 

  1240.           <div style="display:flex;align-items:center;gap:16px;">
    1241. 

  1241.             <span class="form-label">权限层级：</span>
    1242. 

  1242.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-perm" value="school" checked> 校级（全校/指定范围）</label>
    1243. 

  1243.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-perm" value="college"> 院级（所属学院）</label>
    1244. 

  1244.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-perm" value="lab"> 实验室（自己负责）</label>
    1245. 

  1245.           </div>
    1246. 

  1246.           <div style="display:flex;align-items:center;gap:8px;">
    1247. 

  1247.             <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
    1248. 

  1248.             <span class="form-hint">每学年自动按配置日期创建考试</span>
    1249. 

  1249.           </div>
    1250. 

  1250.         </div>
    1251. 

  1251.         <!-- 基本设置 -->
    1252. 

  1252.         <div id="fenji-g1-sec-basic" class="exam-section">
    1253. 

  1253.           <div class="card-title">基本设置</div>
    1254. 

  1254.           <div style="display:flex;flex-direction:column;gap:16px;">
    1255. 

  1255.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅰ级（重大风险）" disabled></div>
    1256. 

  1256.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
    1257. 

  1257.             <div style="display:flex;align-items:center;gap:16px;">
    1258. 

  1258.               <span class="form-label" style="width:80px;flex-shrink:0;">答卷次数</span>
    1259. 

  1259.               <div style="display:flex;align-items:center;gap:8px;">
    1260. 

  1260.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-ans',-1)">－</button>
    1261. 

  1261.                 <input id="fenji-g1-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
    1262. 

  1262.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-ans',1)">＋</button>
    1263. 

  1263.               </div>
    1264. 

  1264.               <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="fenji-g1-ans-mode" value="limit" checked> 限制次数</label>
    1265. 

  1265.               <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="fenji-g1-ans-mode" value="unlimited"> 无限制</label>
    1266. 

  1266.             </div>
    1267. 

  1267.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">启用</span><label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label></div>
    1268. 

  1268.             <div style="display:flex;align-items:flex-start;gap:16px;">
    1269. 

  1269.               <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考卷</span>
    1270. 

  1270.               <div style="display:flex;flex-direction:column;gap:8px;">
    1271. 

  1271.                 <div style="display:flex;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择试卷</button></div>
    1272. 

  1272.                 <span class="form-hint">建议按知识点选择覆盖本校安全要求的试卷</span>
    1273. 

  1273.               </div>
    1274. 

  1274.             </div>
    1275. 

  1275.             <div style="display:flex;align-items:center;gap:16px;">
    1276. 

  1276.               <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
    1277. 

  1277.               <input type="date" class="form-input" style="width:150px;"><span style="color:var(--text-hint);font-size:13px;">至</span><input type="date" class="form-input" style="width:150px;">
    1278. 

  1278.             </div>
    1279. 

  1279.             <div style="display:flex;align-items:center;gap:16px;">
    1280. 

  1280.               <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
    1281. 

  1281.               <div style="display:flex;align-items:center;gap:8px;">
    1282. 

  1282.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-dur',-5)">－</button>
    1283. 

  1283.                 <input id="fenji-g1-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
    1284. 

  1284.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-dur',5)">＋</button>
    1285. 

  1285.                 <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
    1286. 

  1286.               </div>
    1287. 

  1287.               <span class="form-hint">限制答卷最大时长</span>
    1288. 

  1288.             </div>
    1289. 

  1289.             <!-- 用户类别 (分级考试专用) -->
    1290. 

  1290.             <div style="display:flex;align-items:flex-start;gap:16px;">
    1291. 

  1291.               <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span>
    1292. 

  1292.               <div style="display:flex;flex-direction:column;gap:8px;">
    1293. 

  1293.                 <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 通过入学考试后绑定实验室的本科生</label>
    1294. 

  1294.                 <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 绑定实验室的研究生</label>
    1295. 

  1295.               </div>
    1296. 

  1296.             </div>
    1297. 

  1297.             <!-- 学时配置 (分级考试) -->
    1298. 

  1298.             <div style="display:flex;align-items:flex-start;gap:16px;">
    1299. 

  1299.               <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span>
    1300. 

  1300.               <div style="padding:10px 14px;background:var(--gray-light);border-radius:6px;font-size:13px;color:var(--text-secondary);">按公共配置的分级规则执行</div>
    1301. 

  1301.             </div>
    1302. 

  1302.           </div>
    1303. 

  1303.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1304. 

  1304.         </div>
    1305. 

  1305.         <!-- 考前配置 -->
    1306. 

  1306.         <div id="fenji-g1-sec-preexam" class="exam-section" style="display:none;">
    1307. 

  1307.           <div class="card-title">考前配置</div>
    1308. 

  1308.           <div style="display:flex;flex-direction:column;gap:20px;">
    1309. 

  1309.             <div style="display:flex;align-items:center;gap:12px;">
    1310. 

  1310.               <span class="form-label" style="width:80px;flex-shrink:0;">学时要求</span>
    1311. 

  1311.               <label class="toggle"><input type="checkbox" onchange="this.closest('.exam-section').querySelector('.credit-detail').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1312. 

  1312.               <div class="credit-detail" style="display:none;align-items:center;gap:8px;">
    1313. 

  1313.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-credit',-1)">－</button>
    1314. 

  1314.                 <input id="fenji-g1-credit" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="0">
    1315. 

  1315.                 <button class="btn btn-outline-gray btn-sm" onclick="stepNum('fenji-g1-credit',1)">＋</button>
    1316. 

  1316.                 <span style="font-size:13px;color:var(--text-secondary);">学时</span>
    1317. 

  1317.               </div>
    1318. 

  1318.             </div>
    1319. 

  1319.             <div style="display:flex;align-items:center;gap:12px;">
    1320. 

  1320.               <span class="form-label" style="width:80px;flex-shrink:0;">考前学习</span>
    1321. 

  1321.               <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1322. 

  1322.             </div>
    1323. 

  1323.             <div style="display:flex;align-items:center;gap:12px;">
    1324. 

  1324.               <span class="form-label" style="width:80px;flex-shrink:0;">模拟考试</span>
    1325. 

  1325.               <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1326. 

  1326.             </div>
    1327. 

  1327.             <div style="display:flex;align-items:center;gap:12px;">
    1328. 

  1328.               <span class="form-label" style="width:80px;flex-shrink:0;">考试承诺书</span>
    1329. 

  1329.               <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1330. 

  1330.             </div>
    1331. 

  1331.           </div>
    1332. 

  1332.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1333. 

  1333.         </div>
    1334. 

  1334.         <!-- 防作弊 -->
    1335. 

  1335.         <div id="fenji-g1-sec-cheat" class="exam-section" style="display:none;">
    1336. 

  1336.           <div class="card-title">防作弊</div>
    1337. 

  1337.           <div style="display:flex;flex-direction:column;gap:16px;">
    1338. 

  1338.             <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">切屏限制</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1339. 

  1339.             <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">随机题目</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1340. 

  1340.             <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">随机选项</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1341. 

  1341.             <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">人脸识别</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1342. 

  1342.           </div>
    1343. 

  1343.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1344. 

  1344.         </div>
    1345. 

  1345.         <!-- 获得证书 -->
    1346. 

  1346.         <div id="fenji-g1-sec-cert" class="exam-section" style="display:none;">
    1347. 

  1347.           <div class="card-title">获得证书</div>
    1348. 

  1348.           <div style="display:flex;flex-direction:column;gap:16px;">
    1349. 

  1349.             <div style="display:flex;align-items:center;gap:12px;">
    1350. 

  1350.               <span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span>
    1351. 

  1351.               <label class="toggle"><input type="checkbox" onchange="this.closest('.exam-section').querySelector('.cert-tmpl-row').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label>
    1352. 

  1352.             </div>
    1353. 

  1353.             <div class="cert-tmpl-row" style="display:none;align-items:center;gap:12px;">
    1354. 

  1354.               <span class="form-label" style="width:80px;flex-shrink:0;">证书模板</span>
    1355. 

  1355.               <select class="form-input form-select" style="width:240px;"><option value="">请选择证书模板</option><option>实验室安全教育证书（标准版）</option></select>
    1356. 

  1356.             </div>
    1357. 

  1357.           </div>
    1358. 

  1358.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1359. 

  1359.         </div>
    1360. 

  1360.       </div>
    1361. 

  1361.     </div><!-- /fenji-grade-g1 -->
    1362. 

  1362. 

  1363.     <!-- Grades g2, g3, g4 share identical structure, only IDs and type labels differ -->
    1364. 

  1364.     <div id="fenji-grade-g2" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
    1365. 

  1365.       <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    1366. 

  1366.         <div class="nav-item active" onclick="switchExamSection('fenji-g2','basic')">基本设置</div>
    1367. 

  1367.         <div class="nav-item" onclick="switchExamSection('fenji-g2','preexam')">考前配置</div>
    1368. 

  1368.         <div class="nav-item" onclick="switchExamSection('fenji-g2','cheat')">防作弊</div>
    1369. 

  1369.         <div class="nav-item" onclick="switchExamSection('fenji-g2','cert')">获得证书</div>
    1370. 

  1370.       </div>
    1371. 

  1371.       <div style="flex:1;padding:24px;">
    1372. 

  1372.         <div id="fenji-g2-sec-basic" class="exam-section">
    1373. 

  1373.           <div class="card-title">基本设置</div>
    1374. 

  1374.           <div style="display:flex;flex-direction:column;gap:16px;">
    1375. 

  1375.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅱ级（高风险）" disabled></div>
    1376. 

  1376.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
    1377. 

  1377.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span><div style="display:flex;flex-direction:column;gap:8px;"><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 通过入学考试后绑定实验室的本科生</label><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 绑定实验室的研究生</label></div></div>
    1378. 

  1378.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span><div style="padding:10px 14px;background:var(--gray-light);border-radius:6px;font-size:13px;color:var(--text-secondary);">按公共配置的分级规则执行</div></div>
    1379. 

  1379.           </div>
    1380. 

  1380.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1381. 

  1381.         </div>
    1382. 

  1382.         <div id="fenji-g2-sec-preexam" class="exam-section" style="display:none;"><div class="card-title">考前配置</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1383. 

  1383.         <div id="fenji-g2-sec-cheat" class="exam-section" style="display:none;"><div class="card-title">防作弊</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1384. 

  1384.         <div id="fenji-g2-sec-cert" class="exam-section" style="display:none;"><div class="card-title">获得证书</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1385. 

  1385.       </div>
    1386. 

  1386.     </div><!-- /fenji-grade-g2 -->
    1387. 

  1387. 

  1388.     <div id="fenji-grade-g3" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
    1389. 

  1389.       <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    1390. 

  1390.         <div class="nav-item active" onclick="switchExamSection('fenji-g3','basic')">基本设置</div>
    1391. 

  1391.         <div class="nav-item" onclick="switchExamSection('fenji-g3','preexam')">考前配置</div>
    1392. 

  1392.         <div class="nav-item" onclick="switchExamSection('fenji-g3','cheat')">防作弊</div>
    1393. 

  1393.         <div class="nav-item" onclick="switchExamSection('fenji-g3','cert')">获得证书</div>
    1394. 

  1394.       </div>
    1395. 

  1395.       <div style="flex:1;padding:24px;">
    1396. 

  1396.         <div id="fenji-g3-sec-basic" class="exam-section">
    1397. 

  1397.           <div class="card-title">基本设置</div>
    1398. 

  1398.           <div style="display:flex;flex-direction:column;gap:16px;">
    1399. 

  1399.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅲ级（中风险）" disabled></div>
    1400. 

  1400.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
    1401. 

  1401.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span><div style="display:flex;flex-direction:column;gap:8px;"><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 通过入学考试后绑定实验室的本科生</label><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 绑定实验室的研究生</label></div></div>
    1402. 

  1402.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span><div style="padding:10px 14px;background:var(--gray-light);border-radius:6px;font-size:13px;color:var(--text-secondary);">按公共配置的分级规则执行</div></div>
    1403. 

  1403.           </div>
    1404. 

  1404.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1405. 

  1405.         </div>
    1406. 

  1406.         <div id="fenji-g3-sec-preexam" class="exam-section" style="display:none;"><div class="card-title">考前配置</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1407. 

  1407.         <div id="fenji-g3-sec-cheat" class="exam-section" style="display:none;"><div class="card-title">防作弊</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1408. 

  1408.         <div id="fenji-g3-sec-cert" class="exam-section" style="display:none;"><div class="card-title">获得证书</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1409. 

  1409.       </div>
    1410. 

  1410.     </div><!-- /fenji-grade-g3 -->
    1411. 

  1411. 

  1412.     <div id="fenji-grade-g4" class="fenji-grade-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
    1413. 

  1413.       <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    1414. 

  1414.         <div class="nav-item active" onclick="switchExamSection('fenji-g4','basic')">基本设置</div>
    1415. 

  1415.         <div class="nav-item" onclick="switchExamSection('fenji-g4','preexam')">考前配置</div>
    1416. 

  1416.         <div class="nav-item" onclick="switchExamSection('fenji-g4','cheat')">防作弊</div>
    1417. 

  1417.         <div class="nav-item" onclick="switchExamSection('fenji-g4','cert')">获得证书</div>
    1418. 

  1418.       </div>
    1419. 

  1419.       <div style="flex:1;padding:24px;">
    1420. 

  1420.         <div id="fenji-g4-sec-basic" class="exam-section">
    1421. 

  1421.           <div class="card-title">基本设置</div>
    1422. 

  1422.           <div style="display:flex;flex-direction:column;gap:16px;">
    1423. 

  1423.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span><input class="form-input" style="width:200px;" value="Ⅳ级（低风险）" disabled></div>
    1424. 

  1424.             <div style="display:flex;align-items:center;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span><input class="form-input" style="width:300px;" placeholder="请输入考试名称"></div>
    1425. 

  1425.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span><div style="display:flex;flex-direction:column;gap:8px;"><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 通过入学考试后绑定实验室的本科生</label><label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 绑定实验室的研究生</label></div></div>
    1426. 

  1426.             <div style="display:flex;align-items:flex-start;gap:16px;"><span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span><div style="padding:10px 14px;background:var(--gray-light);border-radius:6px;font-size:13px;color:var(--text-secondary);">按公共配置的分级规则执行</div></div>
    1427. 

  1427.           </div>
    1428. 

  1428.           <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1429. 

  1429.         </div>
    1430. 

  1430.         <div id="fenji-g4-sec-preexam" class="exam-section" style="display:none;"><div class="card-title">考前配置</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1431. 

  1431.         <div id="fenji-g4-sec-cheat" class="exam-section" style="display:none;"><div class="card-title">防作弊</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1432. 

  1432.         <div id="fenji-g4-sec-cert" class="exam-section" style="display:none;"><div class="card-title">获得证书</div><div style="color:var(--text-hint);font-size:13px;">（配置同Ⅰ级）</div><div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button></div></div>
    1433. 

  1433.       </div>
    1434. 

  1434.     </div><!-- /fenji-grade-g4 -->
    1435. 

  1435.   </div><!-- /exam-tab-fenji -->
    1436. 

  1436. 

  1437.   <!-- ══════════════════════════════════════════════════════════
    1438. 

  1438.        TAB 3: 应知应会
    1439. 

  1439.   ══════════════════════════════════════════════════════════ -->
    1440. 

  1440.   <div id="exam-tab-yingzhi" class="exam-tab-panel" style="display:none;gap:0;background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;flex-direction:row;">
    1441. 

  1441.     <div style="width:180px;flex-shrink:0;border-right:1px solid var(--gray-border);background:var(--gray-light);padding:14px 0;">
    1442. 

  1442.       <div class="nav-item active" id="yingzhi-nav-basic" onclick="switchExamSection('yingzhi','basic')">基本设置</div>
    1443. 

  1443.       <div class="nav-item" id="yingzhi-nav-preexam" onclick="switchExamSection('yingzhi','preexam')">考前配置</div>
    1444. 

  1444.       <div class="nav-item" id="yingzhi-nav-cheat" onclick="switchExamSection('yingzhi','cheat')">防作弊</div>
    1445. 

  1445.       <div class="nav-item" id="yingzhi-nav-cert" onclick="switchExamSection('yingzhi','cert')">获得证书</div>
    1446. 

  1446.     </div>
    1447. 

  1447.     <div style="flex:1;padding:28px;overflow-y:auto;max-height:calc(100vh - 220px);">
    1448. 

  1448.       <!-- Common header -->
    1449. 

  1449.       <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;">
    1450. 

  1450.         <div style="display:flex;align-items:center;gap:16px;">
    1451. 

  1451.           <span class="form-label">权限层级：</span>
    1452. 

  1452.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="yingzhi-perm" value="school" checked> 校级（全校/指定范围）</label>
    1453. 

  1453.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="yingzhi-perm" value="college"> 院级（所属学院）</label>
    1454. 

  1454.           <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="yingzhi-perm" value="lab"> 实验室（自己负责）</label>
    1455. 

  1455.         </div>
    1456. 

  1456.         <div style="display:flex;align-items:center;gap:8px;">
    1457. 

  1457.           <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
    1458. 

  1458.           <span class="form-hint">每学年自动按配置日期创建考试</span>
    1459. 

  1459.         </div>
    1460. 

  1460.       </div>
    1461. 

  1461. 

  1462.       <!-- 基本设置 -->
    1463. 

  1463.       <div id="yingzhi-sec-basic" class="exam-section">
    1464. 

  1464.         <div class="card-title">基本设置</div>
    1465. 

  1465.         <div style="display:flex;flex-direction:column;gap:16px;">
    1466. 

  1466. 

  1467.           <div style="display:flex;align-items:center;gap:16px;">
    1468. 

  1468.             <span class="form-label" style="width:80px;flex-shrink:0;">考试类型</span>
    1469. 

  1469.             <input class="form-input" style="width:200px;" value="应知应会" disabled>
    1470. 

  1470.             <span class="form-hint">系统内置，不可更改</span>
    1471. 

  1471.           </div>
    1472. 

  1472. 

  1473.           <div style="display:flex;align-items:center;gap:16px;">
    1474. 

  1474.             <span class="form-label" style="width:80px;flex-shrink:0;">考试名称</span>
    1475. 

  1475.             <input class="form-input" style="width:300px;" placeholder="请输入考试名称">
    1476. 

  1476.           </div>
    1477. 

  1477. 

  1478.           <div style="display:flex;align-items:center;gap:16px;">
    1479. 

  1479.             <span class="form-label" style="width:80px;flex-shrink:0;">答卷次数</span>
    1480. 

  1480.             <div style="display:flex;align-items:center;gap:8px;">
    1481. 

  1481.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-ans',-1)">－</button>
    1482. 

  1482.               <input id="yingzhi-ans" type="number" class="form-input" style="width:60px;text-align:center;" value="2" min="1">
    1483. 

  1483.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-ans',1)">＋</button>
    1484. 

  1484.             </div>
    1485. 

  1485.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;margin-left:8px;"><input type="radio" name="yingzhi-ans-mode" value="limit" checked> 限制次数</label>
    1486. 

  1486.             <label style="display:flex;align-items:center;gap:5px;cursor:pointer;font-size:13px;"><input type="radio" name="yingzhi-ans-mode" value="unlimited"> 无限制</label>
    1487. 

  1487.           </div>
    1488. 

  1488. 

  1489.           <div style="display:flex;align-items:center;gap:16px;">
    1490. 

  1490.             <span class="form-label" style="width:80px;flex-shrink:0;">显示共享</span>
    1491. 

  1491.             <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
    1492. 

  1492.             <span class="form-hint">开课共享，全程有学号信息不可匿名</span>
    1493. 

  1493.           </div>
    1494. 

  1494. 

  1495.           <div style="display:flex;align-items:center;gap:16px;">
    1496. 

  1496.             <span class="form-label" style="width:80px;flex-shrink:0;">启用</span>
    1497. 

  1497.             <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
    1498. 

  1498.           </div>
    1499. 

  1499. 

  1500.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1501. 

  1501.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">考卷</span>
    1502. 

  1502.             <div style="display:flex;flex-direction:column;gap:8px;">
    1503. 

  1503.               <div style="display:flex;align-items:center;gap:8px;"><button class="btn btn-outline btn-sm">选择试卷</button></div>
    1504. 

  1504.               <span class="form-hint">建议按知识点选择覆盖本校安全要求的试卷</span>
    1505. 

  1505.             </div>
    1506. 

  1506.           </div>
    1507. 

  1507. 

  1508.           <div style="display:flex;align-items:center;gap:16px;">
    1509. 

  1509.             <span class="form-label" style="width:80px;flex-shrink:0;">考试时间</span>
    1510. 

  1510.             <input type="date" class="form-input" style="width:150px;"><span style="color:var(--text-hint);font-size:13px;">至</span><input type="date" class="form-input" style="width:150px;">
    1511. 

  1511.           </div>
    1512. 

  1512. 

  1513.           <div style="display:flex;align-items:center;gap:16px;">
    1514. 

  1514.             <span class="form-label" style="width:80px;flex-shrink:0;">考试时长</span>
    1515. 

  1515.             <div style="display:flex;align-items:center;gap:8px;">
    1516. 

  1516.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-dur',-5)">－</button>
    1517. 

  1517.               <input id="yingzhi-dur" type="number" class="form-input" style="width:70px;text-align:center;" value="60" min="5" step="5">
    1518. 

  1518.               <button class="btn btn-outline-gray btn-sm" onclick="stepNum('yingzhi-dur',5)">＋</button>
    1519. 

  1519.               <span style="font-size:13px;color:var(--text-secondary);">分钟</span>
    1520. 

  1520.             </div>
    1521. 

  1521.             <span class="form-hint">限制答卷最大时长</span>
    1522. 

  1522.           </div>
    1523. 

  1523. 

  1524.           <!-- 用户类别 (应知应会) -->
    1525. 

  1525.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1526. 

  1526.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">用户类别</span>
    1527. 

  1527.             <div style="display:flex;flex-direction:column;gap:8px;">
    1528. 

  1528.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 无需进入实验室的新入学研究生</label>
    1529. 

  1529.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 新入职教职工</label>
    1530. 

  1530.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;" title="按实验室分级取年度学时值，不可取消">
    1531. 

  1531.                 <input type="checkbox" checked disabled style="opacity:.5;"> 在读研究生 <span class="tag tag-gray" style="font-size:11px;margin-left:4px;">按实验室分级取年度学时值</span>
    1532. 

  1532.               </label>
    1533. 

  1533.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 存量教职工</label>
    1534. 

  1534.               <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;"><input type="checkbox" checked> 在读本科生</label>
    1535. 

  1535.             </div>
    1536. 

  1536.           </div>
    1537. 

  1537. 

  1538.           <!-- 学时配置 (应知应会) -->
    1539. 

  1539.           <div style="display:flex;align-items:flex-start;gap:16px;">
    1540. 

  1540.             <span class="form-label" style="width:80px;flex-shrink:0;padding-top:4px;">学时配置</span>
    1541. 

  1541.             <div style="flex:1;">
    1542. 

  1542.               <div class="table-wrap">
    1543. 

  1543.                 <table>
    1544. 

  1544.                   <thead><tr><th>用户类别</th><th>所需学时</th><th>备注</th></tr></thead>
    1545. 

  1545.                   <tbody>
    1546. 

  1546.                     <tr><td>无需进入实验室的新入学研究生</td><td><input type="number" class="form-input" style="width:80px;" value="2" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1547. 

  1547.                     <tr><td>新入职教职工</td><td><input type="number" class="form-input" style="width:80px;" value="2" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1548. 

  1548.                     <tr style="background:var(--gray-light);color:var(--text-hint);">
    1549. 

  1549.                       <td>在读研究生</td>
    1550. 

  1550.                       <td><input type="number" class="form-input" style="width:80px;background:var(--gray-light);color:var(--text-hint);" disabled placeholder="按分级取值"></td>
    1551. 

  1551.                       <td><span style="font-size:12px;">按实验室分级取年度学时值</span></td>
    1552. 

  1552.                     </tr>
    1553. 

  1553.                     <tr><td>存量教职工</td><td><input type="number" class="form-input" style="width:80px;" value="1" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1554. 

  1554.                     <tr><td>在读本科生</td><td><input type="number" class="form-input" style="width:80px;" value="1" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>
    1555. 

  1555.                   </tbody>
    1556. 

  1556.                 </table>
    1557. 

  1557.               </div>
    1558. 

  1558.             </div>
    1559. 

  1559.           </div>
    1560. 

  1560. 

  1561.         </div>
    1562. 

  1562.         <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1563. 

  1563.       </div><!-- /yingzhi-sec-basic -->
    1564. 

  1564. 

  1565.       <!-- 考前配置 -->
    1566. 

  1566.       <div id="yingzhi-sec-preexam" class="exam-section" style="display:none;">
    1567. 

  1567.         <div class="card-title">考前配置</div>
    1568. 

  1568.         <div style="display:flex;flex-direction:column;gap:20px;">
    1569. 

  1569.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:80px;flex-shrink:0;">学时要求</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1570. 

  1570.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:80px;flex-shrink:0;">考前学习</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1571. 

  1571.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:80px;flex-shrink:0;">模拟考试</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1572. 

  1572.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:80px;flex-shrink:0;">考试承诺书</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1573. 

  1573.         </div>
    1574. 

  1574.         <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1575. 

  1575.       </div>
    1576. 

  1576. 

  1577.       <!-- 防作弊 -->
    1578. 

  1578.       <div id="yingzhi-sec-cheat" class="exam-section" style="display:none;">
    1579. 

  1579.         <div class="card-title">防作弊</div>
    1580. 

  1580.         <div style="display:flex;flex-direction:column;gap:16px;">
    1581. 

  1581.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">切屏限制</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1582. 

  1582.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">随机题目</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1583. 

  1583.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">随机选项</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1584. 

  1584.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:100px;flex-shrink:0;">人脸识别</span><label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label></div>
    1585. 

  1585.         </div>
    1586. 

  1586.         <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1587. 

  1587.       </div>
    1588. 

  1588. 

  1589.       <!-- 获得证书 -->
    1590. 

  1590.       <div id="yingzhi-sec-cert" class="exam-section" style="display:none;">
    1591. 

  1591.         <div class="card-title">获得证书</div>
    1592. 

  1592.         <div style="display:flex;flex-direction:column;gap:16px;">
    1593. 

  1593.           <div style="display:flex;align-items:center;gap:12px;"><span class="form-label" style="width:80px;flex-shrink:0;">颁发证书</span><label class="toggle"><input type="checkbox" onchange="document.getElementById('yingzhi-cert-tmpl').style.display=this.checked?'flex':'none'"><span class="toggle-slider"></span></label></div>
    1594. 

  1594.           <div id="yingzhi-cert-tmpl" style="display:none;align-items:center;gap:12px;">
    1595. 

  1595.             <span class="form-label" style="width:80px;flex-shrink:0;">证书模板</span>
    1596. 

  1596.             <select class="form-input form-select" style="width:240px;"><option value="">请选择证书模板</option><option>实验室安全教育证书（标准版）</option></select>
    1597. 

  1597.           </div>
    1598. 

  1598.         </div>
    1599. 

  1599.         <div style="margin-top:24px;display:flex;gap:12px;"><button class="btn btn-primary">保存设置</button><button class="btn btn-outline-gray">重置</button></div>
    1600. 

  1600.       </div>
    1601. 

  1601. 

  1602.     </div><!-- /right content yingzhi -->
    1603. 

  1603.   </div><!-- /exam-tab-yingzhi -->
    1604. 

  1604. 

  1605. </div><!-- /page-exam-template -->
    1606. 

  1606. 

  1607. </div><!-- end admin-body -->
    1608. 

  1608. 

  1609. <script>
    1610. 

  1610. // ===== PAGE ROUTING =====
    1611. 

  1611. function showPage(id) {
    1612. 

  1612.   document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    1613. 

  1613.   const target = document.getElementById(id);
    1614. 

  1614.   if (target) { target.classList.add('active'); window.scrollTo(0,0); }
    1615. 

  1615.   // Highlight matching nav item by onclick attr
    1616. 

  1616.   document.querySelectorAll('.nav-item').forEach(n => {
    1617. 

  1617.     n.classList.remove('active');
    1618. 

  1618.     const oc = n.getAttribute('onclick') || '';
    1619. 

  1619.     if (oc.includes("'" + id + "'")) n.classList.add('active');
    1620. 

  1620.     // detail pages highlight their parent list item
    1621. 

  1621.     if (id === 'page-training-activity-detail' && oc.includes("'page-training-activity-list'")) n.classList.add('active');
    1622. 

  1622.   });
    1623. 

  1623. }
    1624. 

  1624. 

  1625. // switchMenu kept for backwards compat with any remaining onclick refs — no-op since sidebar is now unified
    1626. 

  1626. function switchMenu() {}
    1627. 

  1627. 

  1628. // ===== CERT TEMPLATE TOGGLE =====
    1629. 

  1629. function toggleCertTemplate(checkbox) {
    1630. 

  1630.   document.getElementById('cert-template-section').style.display = checkbox.checked ? 'block' : 'none';
    1631. 

  1631. }
    1632. 

  1632. 

  1633. // ===== TRAINING SCOPE MODE =====
    1634. 

  1634. function setScopeMode(mode) {
    1635. 

  1635.   document.getElementById('scope-dept-section').style.display = mode === 'dept' ? 'block' : 'none';
    1636. 

  1636.   document.getElementById('scope-person-section').style.display = mode === 'person' ? 'block' : 'none';
    1637. 

  1637.   ['all','dept','person'].forEach(function(m) {
    1638. 

  1638.     var lbl = document.getElementById('scope-label-' + m);
    1639. 

  1639.     if (lbl) {
    1640. 

  1640.       lbl.style.borderColor = m === mode ? 'var(--blue)' : 'var(--gray-border)';
    1641. 

  1641.       lbl.style.background = m === mode ? 'var(--blue-xlight)' : '';
    1642. 

  1642.       lbl.style.color = m === mode ? 'var(--blue)' : '';
    1643. 

  1643.     }
    1644. 

  1644.   });
    1645. 

  1645. }
    1646. 

  1646. 

  1647. // ===== PUBLISH TOGGLE CLICK =====
    1648. 

  1648. document.addEventListener('click', function(e) {
    1649. 

  1649.   const wrap = e.target.closest('.pub-slider');
    1650. 

  1650.   if (!wrap) return;
    1651. 

  1651.   const isOn = wrap.classList.contains('pub-on');
    1652. 

  1652.   wrap.classList.toggle('pub-on', !isOn);
    1653. 

  1653.   wrap.classList.toggle('pub-off', isOn);
    1654. 

  1654. });
    1655. 

  1655. 

  1656. // ===== LIST/GRID VIEW =====
    1657. 

  1657. function setListView(mode) {
    1658. 

  1658.   const grid = document.getElementById('activity-grid-view');
    1659. 

  1659.   const list = document.getElementById('activity-list-view');
    1660. 

  1660.   if (!grid || !list) return;
    1661. 

  1661.   if (mode === 'grid') { grid.style.display = 'grid'; list.style.display = 'none'; }
    1662. 

  1662.   else { grid.style.display = 'none'; list.style.display = 'block'; }
    1663. 

  1663. }
    1664. 

  1664. 

  1665. // ===== MODALS =====
    1666. 

  1666. function showModal(id) {
    1667. 

  1667.   const m = document.getElementById(id);
    1668. 

  1668.   if (m) m.classList.add('active');
    1669. 

  1669. }
    1670. 

  1670. function hideModal(id) {
    1671. 

  1671.   const m = document.getElementById(id);
    1672. 

  1672.   if (m) m.classList.remove('active');
    1673. 

  1673. }
    1674. 

  1674. // Close modal on backdrop click
    1675. 

  1675. document.querySelectorAll('.modal-overlay').forEach(m => {
    1676. 

  1676.   m.addEventListener('click', function(e) {
    1677. 

  1677.     if (e.target === this) this.classList.remove('active');
    1678. 

  1678.   });
    1679. 

  1679. });
    1680. 

  1680. 

  1681. // ===== EXAM TEMPLATE PAGE =====
    1682. 

  1682. function switchExamTab(tab) {
    1683. 

  1683.   document.querySelectorAll('.exam-tab-panel').forEach(function(p) { p.style.display = 'none'; });
    1684. 

  1684.   var panel = document.getElementById('exam-tab-' + tab);
    1685. 

  1685.   if (panel) {
    1686. 

  1686.     panel.style.display = tab === 'yingzhi' ? 'flex' : 'flex';
    1687. 

  1687.     if (tab === 'fenji') {
    1688. 

  1688.       // ensure flex for fenji sub-tab wrapper
    1689. 

  1689.       panel.style.display = 'block';
    1690. 

  1690.     }
    1691. 

  1691.   }
    1692. 

  1692.   document.querySelectorAll('#exam-top-tabs .view-tab').forEach(function(t) { t.classList.remove('active'); });
    1693. 

  1693.   var tabMap = { kaixue: 0, fenji: 1, yingzhi: 2 };
    1694. 

  1694.   var tabs = document.querySelectorAll('#exam-top-tabs .view-tab');
    1695. 

  1695.   if (tabs[tabMap[tab]]) tabs[tabMap[tab]].classList.add('active');
    1696. 

  1696. }
    1697. 

  1697. 

  1698. function switchExamSection(prefix, section) {
    1699. 

  1699.   // Hide all sections in this prefix's container
    1700. 

  1700.   var secs = document.querySelectorAll('#' + prefix + '-sec-basic, #' + prefix + '-sec-preexam, #' + prefix + '-sec-cheat, #' + prefix + '-sec-cert');
    1701. 

  1701.   secs.forEach(function(s) { s.style.display = 'none'; });
    1702. 

  1702.   var target = document.getElementById(prefix + '-sec-' + section);
    1703. 

  1703.   if (target) target.style.display = 'block';
    1704. 

  1704.   // Update nav active state - find nav items in same sidebar
    1705. 

  1705.   var secContainer = target && target.closest('[style*="overflow:hidden"]');
    1706. 

  1706.   if (secContainer) {
    1707. 

  1707.     secContainer.querySelectorAll('.nav-item').forEach(function(n) {
    1708. 

  1708.       n.classList.remove('active');
    1709. 

  1709.       var oc = n.getAttribute('onclick') || '';
    1710. 

  1710.       if (oc.includes("'" + section + "'")) n.classList.add('active');
    1711. 

  1711.     });
    1712. 

  1712.   }
    1713. 

  1713. }
    1714. 

  1714. 

  1715. function switchGradeTab(grade) {
    1716. 

  1716.   document.querySelectorAll('.fenji-grade-panel').forEach(function(p) { p.style.display = 'none'; });
    1717. 

  1717.   var panel = document.getElementById('fenji-grade-' + grade);
    1718. 

  1718.   if (panel) panel.style.display = 'flex';
    1719. 

  1719.   document.querySelectorAll('#fenji-grade-tabs .view-tab').forEach(function(t) { t.classList.remove('active'); });
    1720. 

  1720.   var gradeMap = { g1: 0, g2: 1, g3: 2, g4: 3 };
    1721. 

  1721.   var tabs = document.querySelectorAll('#fenji-grade-tabs .view-tab');
    1722. 

  1722.   if (tabs[gradeMap[grade]]) tabs[gradeMap[grade]].classList.add('active');
    1723. 

  1723. }
    1724. 

  1724. 

  1725. function setKaixueScope(mode) {
    1726. 

  1726.   document.getElementById('kaixue-scope-table').style.display = (mode === 'specify' || mode === 'student') ? 'block' : 'none';
    1727. 

  1727.   document.querySelectorAll('[name="kaixue-scope"]').forEach(function(r) {
    1728. 

  1728.     r.checked = (r.value === mode);
    1729. 

  1729.   });
    1730. 

  1730. }
    1731. 

  1731. 

  1732. function stepNum(id, delta) {
    1733. 

  1733.   var el = document.getElementById(id);
    1734. 

  1734.   if (!el) return;
    1735. 

  1735.   var val = (parseInt(el.value, 10) || 0) + delta;
    1736. 

  1736.   var min = parseInt(el.min, 10);
    1737. 

  1737.   if (!isNaN(min) && val < min) val = min;
    1738. 

  1738.   el.value = val;
    1739. 

  1739. }
    1740. 

  1740. 

  1741. function updateKaixueHours() {
    1742. 

  1742.   // Reflect checked user types in the hours table
    1743. 

  1743.   var tbody = document.getElementById('kaixue-hours-tbody');
    1744. 

  1744.   if (!tbody) return;
    1745. 

  1745.   var types = [
    1746. 

  1746.     { id: 'kaixue-user-undergrad', label: '新入学本科生', def: 4 },
    1747. 

  1747.     { id: 'kaixue-user-postgrad',  label: '新入学研究生', def: 4 },
    1748. 

  1748.     { id: 'kaixue-user-staff',     label: '新入职教职工',  def: 2 }
    1749. 

  1749.   ];
    1750. 

  1750.   var rows = '';
    1751. 

  1751.   types.forEach(function(t) {
    1752. 

  1752.     var cb = document.getElementById(t.id);
    1753. 

  1753.     if (cb && cb.checked) {
    1754. 

  1754.       rows += '<tr><td>' + t.label + '</td><td><input type="number" class="form-input" style="width:80px;" value="' + t.def + '" min="0"></td><td><input class="form-input" placeholder="备注说明"></td></tr>';
    1755. 

  1755.     }
    1756. 

  1756.   });
    1757. 

  1757.   tbody.innerHTML = rows || '<tr><td colspan="3" style="text-align:center;color:var(--text-hint);">请先选择用户类别</td></tr>';
    1758. 

  1758. }
    1759. 

  1759. 

  1760. </script>
    1761. 

  1761. </body>
    1762. 

  1762. </html>
    1763. 

  1763.