training.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>公司培训系统</title>
  7. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  15. background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  16. min-height: 100vh;
  17. padding: 20px;
  18. color: #333;
  19. }
  20. .container {
  21. max-width: 1200px;
  22. margin: 0 auto;
  23. background: white;
  24. border-radius: 20px;
  25. box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  26. overflow: hidden;
  27. }
  28. .header {
  29. background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  30. color: white;
  31. padding: 60px 40px;
  32. text-align: center;
  33. }
  34. .header h1 {
  35. font-size: 48px;
  36. margin-bottom: 15px;
  37. font-weight: 700;
  38. }
  39. .header p {
  40. font-size: 20px;
  41. opacity: 0.95;
  42. }
  43. .content {
  44. padding: 50px 40px;
  45. }
  46. .section {
  47. margin-bottom: 50px;
  48. }
  49. .section h2 {
  50. font-size: 32px;
  51. color: #4facfe;
  52. margin-bottom: 25px;
  53. padding-bottom: 15px;
  54. border-bottom: 3px solid #4facfe;
  55. }
  56. .section p {
  57. font-size: 18px;
  58. line-height: 1.8;
  59. color: #555;
  60. margin-bottom: 20px;
  61. }
  62. .features {
  63. display: grid;
  64. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  65. gap: 30px;
  66. margin-top: 30px;
  67. }
  68. .feature-card {
  69. background: linear-gradient(135deg, #e6f4ff 0%, #d0e8ff 100%);
  70. padding: 30px;
  71. border-radius: 15px;
  72. transition: transform 0.3s ease, box-shadow 0.3s ease;
  73. }
  74. .feature-card:hover {
  75. transform: translateY(-5px);
  76. box-shadow: 0 10px 30px rgba(79, 172, 254, 0.3);
  77. }
  78. .feature-card h3 {
  79. font-size: 24px;
  80. color: #4facfe;
  81. margin-bottom: 15px;
  82. }
  83. .feature-card p {
  84. font-size: 16px;
  85. color: #666;
  86. line-height: 1.6;
  87. }
  88. .back-button {
  89. display: inline-block;
  90. margin-top: 30px;
  91. padding: 15px 40px;
  92. background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  93. color: white;
  94. text-decoration: none;
  95. border-radius: 50px;
  96. font-size: 18px;
  97. transition: transform 0.3s ease, box-shadow 0.3s ease;
  98. }
  99. .back-button:hover {
  100. transform: translateY(-2px);
  101. box-shadow: 0 10px 25px rgba(79, 172, 254, 0.4);
  102. }
  103. .icon {
  104. font-size: 40px;
  105. margin-bottom: 15px;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <div class="container">
  111. <div class="header">
  112. <h1>📚 公司培训系统</h1>
  113. <p>员工培训课程与学习管理</p>
  114. </div>
  115. <div class="content">
  116. <div class="section">
  117. <h2>系统简介</h2>
  118. <p>
  119. 公司培训系统是一套完整的在线学习管理平台,为企业提供培训课程管理、学习进度跟踪、考核评估等功能。
  120. 系统支持多种学习形式,包括在线视频、直播课程、文档学习等,帮助员工提升专业技能和综合素质,
  121. 同时为企业建立完善的人才培养体系,提升组织竞争力。
  122. </p>
  123. </div>
  124. <div class="section">
  125. <h2>核心功能</h2>
  126. <div class="features">
  127. <div class="feature-card">
  128. <div class="icon">🎓</div>
  129. <h3>课程管理</h3>
  130. <p>支持创建和管理各类培训课程,包括课程分类、课程内容、学习资料上传等,支持视频、文档、PPT等多种格式。</p>
  131. </div>
  132. <div class="feature-card">
  133. <div class="icon">📺</div>
  134. <h3>在线学习</h3>
  135. <p>提供流畅的在线学习体验,支持视频播放、进度记录、笔记功能,员工可随时随地学习,灵活安排学习时间。</p>
  136. </div>
  137. <div class="feature-card">
  138. <div class="icon">📝</div>
  139. <h3>学习跟踪</h3>
  140. <p>实时跟踪员工学习进度,记录学习时长、完成情况等数据,帮助管理者了解培训效果和员工学习状态。</p>
  141. </div>
  142. <div class="feature-card">
  143. <div class="icon">✅</div>
  144. <h3>考核评估</h3>
  145. <p>支持在线考试、作业提交、学习评估等功能,自动生成成绩单和培训证书,确保培训质量。</p>
  146. </div>
  147. <div class="feature-card">
  148. <div class="icon">👥</div>
  149. <h3>培训计划</h3>
  150. <p>制定和管理培训计划,支持按部门、岗位、个人制定培训方案,实现精准化培训管理。</p>
  151. </div>
  152. <div class="feature-card">
  153. <div class="icon">📊</div>
  154. <h3>数据分析</h3>
  155. <p>提供培训数据统计分析,包括学习完成率、考核通过率、培训效果评估等,为培训决策提供数据支持。</p>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="section">
  160. <h2>系统优势</h2>
  161. <p>
  162. • <strong>内容丰富</strong>:支持多种学习资源格式,满足不同岗位和层级的培训需求<br>
  163. • <strong>灵活学习</strong>:支持移动端学习,员工可随时随地参与培训,提高学习便利性<br>
  164. • <strong>个性化推荐</strong>:根据员工岗位和技能水平,智能推荐相关课程,提升学习效率<br>
  165. • <strong>互动性强</strong>:支持在线讨论、问答、直播互动等功能,增强学习体验<br>
  166. • <strong>效果可测</strong>:完善的考核评估体系,量化培训效果,确保培训质量
  167. </p>
  168. </div>
  169. <a href="javascript:history.back()" class="back-button">← 返回导航</a>
  170. </div>
  171. </div>
  172. </body>
  173. </html>