|
|
@@ -0,0 +1,826 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=1920">
|
|
|
+<title>实验室安全教育考试系统 · 移动端使用说明文档</title>
|
|
|
+<style>
|
|
|
+*{box-sizing:border-box;margin:0;padding:0;}
|
|
|
+:root{
|
|
|
+ --blue:#1857d4;--blue-mid:#2e6fe0;--blue-light:#eef3fd;--blue-xlight:#f5f8ff;
|
|
|
+ --green:#10a37f;--green-light:#edfaf6;
|
|
|
+ --orange:#e67e22;--orange-light:#fef6ec;
|
|
|
+ --red:#e53e3e;--red-light:#fff5f5;
|
|
|
+ --purple:#722ed1;--purple-light:#f9f0ff;
|
|
|
+ --gray:#8896a7;--gray-light:#f4f6fa;--gray-border:#dde3ed;
|
|
|
+ --text-primary:#1a2233;--text-secondary:#4a5568;--text-hint:#8896a7;
|
|
|
+ --bg:#f0f4fb;--white:#fff;
|
|
|
+ --shadow:0 2px 12px rgba(24,87,212,.08);
|
|
|
+ --shadow-md:0 4px 24px rgba(24,87,212,.12);
|
|
|
+}
|
|
|
+body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;background:#f0f4fb;color:var(--text-primary);font-size:15px;line-height:1.7;min-width:1920px;}
|
|
|
+
|
|
|
+/* ===== LAYOUT ===== */
|
|
|
+.page{max-width:1920px;min-height:1080px;margin:0 auto;display:flex;flex-direction:column;}
|
|
|
+.doc-header{background:linear-gradient(135deg,#1857d4 0%,#2e6fe0 60%,#0f3ea8 100%);color:#fff;padding:48px 80px 40px;position:relative;overflow:hidden;}
|
|
|
+.doc-header::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
|
|
|
+.doc-header-inner{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;}
|
|
|
+.doc-title{font-size:36px;font-weight:800;letter-spacing:1px;margin-bottom:10px;}
|
|
|
+.doc-subtitle{font-size:16px;opacity:.82;letter-spacing:.5px;}
|
|
|
+.doc-meta{display:flex;gap:32px;font-size:13px;opacity:.75;margin-top:14px;}
|
|
|
+.doc-meta span{display:flex;align-items:center;gap:6px;}
|
|
|
+.doc-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:6px 18px;font-size:13px;font-weight:600;}
|
|
|
+
|
|
|
+/* ===== NAV SIDEBAR ===== */
|
|
|
+.doc-body{display:flex;flex:1;}
|
|
|
+.sidebar{width:260px;flex-shrink:0;background:var(--white);border-right:1px solid var(--gray-border);padding:24px 0;position:sticky;top:0;height:calc(100vh - 148px);overflow-y:auto;}
|
|
|
+.sidebar::-webkit-scrollbar{width:4px;}
|
|
|
+.sidebar::-webkit-scrollbar-thumb{background:rgba(24,87,212,.15);border-radius:2px;}
|
|
|
+.nav-section{padding:0 20px;margin-bottom:6px;}
|
|
|
+.nav-section-title{font-size:11px;font-weight:700;color:var(--text-hint);letter-spacing:1.5px;text-transform:uppercase;padding:14px 4px 6px;}
|
|
|
+.nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:13px;color:var(--text-secondary);cursor:pointer;text-decoration:none;transition:all .15s;}
|
|
|
+.nav-item:hover{background:var(--blue-xlight);color:var(--blue);}
|
|
|
+.nav-item.active{background:var(--blue-light);color:var(--blue);font-weight:600;}
|
|
|
+.nav-item .nav-icon{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
|
|
|
+
|
|
|
+/* ===== MAIN CONTENT ===== */
|
|
|
+.main-content{flex:1;padding:40px 60px;max-width:1580px;}
|
|
|
+.section{margin-bottom:56px;}
|
|
|
+.section-title{font-size:24px;font-weight:800;color:var(--text-primary);margin-bottom:6px;display:flex;align-items:center;gap:10px;}
|
|
|
+.section-title::before{content:'';width:4px;height:24px;background:linear-gradient(180deg,var(--blue-mid),var(--blue));border-radius:3px;display:inline-block;}
|
|
|
+.section-desc{font-size:14px;color:var(--text-hint);margin-bottom:28px;padding-left:14px;}
|
|
|
+.sub-section{margin-bottom:36px;}
|
|
|
+.sub-title{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:14px;padding-left:12px;border-left:3px solid var(--blue-mid);}
|
|
|
+
|
|
|
+/* ===== FEATURE CARDS ===== */
|
|
|
+.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px;}
|
|
|
+.feature-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px;}
|
|
|
+.feature-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:24px;}
|
|
|
+.feature-card{background:var(--white);border:1px solid var(--gray-border);border-radius:14px;padding:22px;box-shadow:var(--shadow);transition:box-shadow .2s;}
|
|
|
+.feature-card:hover{box-shadow:var(--shadow-md);}
|
|
|
+.feature-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
|
|
|
+.feature-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
|
|
|
+.feature-name{font-size:15px;font-weight:700;color:var(--text-primary);}
|
|
|
+.feature-tag{font-size:11px;color:var(--text-hint);margin-top:2px;}
|
|
|
+.feature-list{list-style:none;padding:0;}
|
|
|
+.feature-list li{font-size:13px;color:var(--text-secondary);padding:5px 0;border-bottom:1px solid var(--gray-light);display:flex;align-items:flex-start;gap:8px;line-height:1.6;}
|
|
|
+.feature-list li:last-child{border-bottom:none;}
|
|
|
+.feature-list li::before{content:'·';color:var(--blue);font-size:16px;flex-shrink:0;line-height:1.4;}
|
|
|
+
|
|
|
+/* ===== SCREEN SPEC TABLE ===== */
|
|
|
+.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px;}
|
|
|
+.spec-table th{background:var(--blue-xlight);color:var(--blue);font-weight:700;padding:10px 16px;text-align:left;border:1px solid var(--blue-light);}
|
|
|
+.spec-table td{padding:10px 16px;border:1px solid var(--gray-border);vertical-align:top;line-height:1.7;}
|
|
|
+.spec-table tr:nth-child(even) td{background:#fafbfd;}
|
|
|
+.spec-table tr:hover td{background:var(--blue-xlight);}
|
|
|
+
|
|
|
+/* ===== TAGS ===== */
|
|
|
+.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:600;}
|
|
|
+.tag-blue{background:var(--blue-light);color:var(--blue);}
|
|
|
+.tag-green{background:var(--green-light);color:var(--green);}
|
|
|
+.tag-orange{background:var(--orange-light);color:var(--orange);}
|
|
|
+.tag-red{background:var(--red-light);color:var(--red);}
|
|
|
+.tag-gray{background:var(--gray-light);color:var(--gray);}
|
|
|
+.tag-purple{background:var(--purple-light);color:var(--purple);}
|
|
|
+
|
|
|
+/* ===== FLOW ===== */
|
|
|
+.flow-row{display:flex;align-items:stretch;gap:0;margin-bottom:24px;flex-wrap:wrap;}
|
|
|
+.flow-step{background:var(--white);border:1px solid var(--gray-border);border-radius:12px;padding:16px 20px;min-width:160px;flex:1;position:relative;box-shadow:var(--shadow);}
|
|
|
+.flow-arrow{display:flex;align-items:center;padding:0 10px;color:var(--blue);font-size:22px;flex-shrink:0;}
|
|
|
+.flow-num{width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
|
|
|
+.flow-name{font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:4px;}
|
|
|
+.flow-desc{font-size:12px;color:var(--text-hint);}
|
|
|
+
|
|
|
+/* ===== NOTICE BOX ===== */
|
|
|
+.notice{border-radius:10px;padding:14px 18px;margin-bottom:18px;display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.7;}
|
|
|
+.notice-info{background:var(--blue-xlight);border:1px solid var(--blue-light);}
|
|
|
+.notice-warn{background:#fffbe6;border:1px solid #ffe58f;}
|
|
|
+.notice-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
|
|
|
+
|
|
|
+/* ===== OVERVIEW HERO ===== */
|
|
|
+.overview-hero{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:16px;margin-bottom:32px;}
|
|
|
+.stat-card{background:var(--white);border-radius:14px;padding:22px 20px;border:1px solid var(--gray-border);box-shadow:var(--shadow);text-align:center;}
|
|
|
+.stat-num{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--blue-mid),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;}
|
|
|
+.stat-label{font-size:12px;color:var(--text-hint);margin-top:6px;}
|
|
|
+
|
|
|
+/* ===== SCREEN OVERVIEW GRID ===== */
|
|
|
+.screen-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;}
|
|
|
+.screen-card{background:var(--white);border:1px solid var(--gray-border);border-radius:12px;padding:16px;box-shadow:var(--shadow);}
|
|
|
+.screen-card-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px;}
|
|
|
+.screen-card-name{font-size:13px;font-weight:700;margin-bottom:4px;}
|
|
|
+.screen-card-desc{font-size:11px;color:var(--text-hint);line-height:1.5;}
|
|
|
+
|
|
|
+/* ===== DIVIDER ===== */
|
|
|
+.divider{height:1px;background:var(--gray-border);margin:40px 0;}
|
|
|
+
|
|
|
+/* ===== FOOTER ===== */
|
|
|
+.doc-footer{background:var(--white);border-top:1px solid var(--gray-border);padding:24px 80px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-hint);}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="page">
|
|
|
+<!-- ===== HEADER ===== -->
|
|
|
+<div class="doc-header">
|
|
|
+ <div class="doc-header-inner">
|
|
|
+ <div>
|
|
|
+ <div style="font-size:13px;opacity:.7;margin-bottom:8px;letter-spacing:2px;">LABORATORY SAFETY EDUCATION SYSTEM</div>
|
|
|
+ <div class="doc-title">实验室安全教育考试系统</div>
|
|
|
+ <div class="doc-subtitle">移动端应用 · 产品使用说明文档</div>
|
|
|
+ <div class="doc-meta">
|
|
|
+ <span>📱 移动端 H5 单页应用</span>
|
|
|
+ <span>📅 文档版本：v2.1 · 2026-08</span>
|
|
|
+ <span>🏛️ 适用范围：在校师生 / 实验室管理人员</span>
|
|
|
+ <span>🖥️ 推荐分辨率：1920 × 1080</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align:right;">
|
|
|
+ <div class="doc-badge">🔬 实验室安全教育平台</div>
|
|
|
+ <div style="margin-top:12px;font-size:13px;opacity:.7;">共 22 个功能页面 · 4 个底部导航Tab</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- ===== BODY ===== -->
|
|
|
+<div class="doc-body">
|
|
|
+<!-- SIDEBAR -->
|
|
|
+<div class="sidebar">
|
|
|
+ <div class="nav-section">
|
|
|
+ <div class="nav-section-title">概览</div>
|
|
|
+ <a class="nav-item active" href="#overview"><span class="nav-icon" style="background:#eef3fd;">🏠</span>系统概述</a>
|
|
|
+ <a class="nav-item" href="#arch"><span class="nav-icon" style="background:#eef3fd;">🗂️</span>页面架构</a>
|
|
|
+ <a class="nav-item" href="#nav"><span class="nav-icon" style="background:#eef3fd;">🧭</span>导航说明</a>
|
|
|
+ </div>
|
|
|
+ <div class="nav-section">
|
|
|
+ <div class="nav-section-title">功能模块</div>
|
|
|
+ <a class="nav-item" href="#workbench"><span class="nav-icon" style="background:#fff7e6;">🏠</span>工作台</a>
|
|
|
+ <a class="nav-item" href="#study"><span class="nav-icon" style="background:#edfaf6;">📚</span>学习培训</a>
|
|
|
+ <a class="nav-item" href="#exam"><span class="nav-icon" style="background:#eef3fd;">🎓</span>在线考试</a>
|
|
|
+ <a class="nav-item" href="#practice"><span class="nav-icon" style="background:#fff2f0;">✏️</span>刷题练习</a>
|
|
|
+ </div>
|
|
|
+ <div class="nav-section">
|
|
|
+ <div class="nav-section-title">功能详情</div>
|
|
|
+ <a class="nav-item" href="#approval"><span class="nav-icon" style="background:#eef3fd;">🏛️</span>实验室审批</a>
|
|
|
+ <a class="nav-item" href="#offline"><span class="nav-icon" style="background:#fff7e6;">🎤</span>线下培训</a>
|
|
|
+ <a class="nav-item" href="#scores"><span class="nav-icon" style="background:#edfaf6;">📊</span>我的成绩</a>
|
|
|
+ <a class="nav-item" href="#cert"><span class="nav-icon" style="background:#fff7e6;">🏅</span>我的证书</a>
|
|
|
+ <a class="nav-item" href="#score-detail"><span class="nav-icon" style="background:#eef3fd;">📝</span>答题详情</a>
|
|
|
+ </div>
|
|
|
+ <div class="nav-section">
|
|
|
+ <div class="nav-section-title">角色权限</div>
|
|
|
+ <a class="nav-item" href="#roles"><span class="nav-icon" style="background:#f9f0ff;">🔐</span>角色说明</a>
|
|
|
+ <a class="nav-item" href="#admin"><span class="nav-icon" style="background:#fff2f0;">⚙️</span>管理端功能</a>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- MAIN CONTENT -->
|
|
|
+<div class="main-content">
|
|
|
+<div class="section" id="overview">
|
|
|
+ <div class="section-title">系统概述</div>
|
|
|
+ <div class="section-desc">实验室安全教育考试系统移动端，面向在校师生提供安全知识学习、考试、证书管理等一站式服务。</div>
|
|
|
+ <div class="overview-hero">
|
|
|
+ <div class="stat-card"><div class="stat-num">22</div><div class="stat-label">功能页面</div></div>
|
|
|
+ <div class="stat-card"><div class="stat-num">4</div><div class="stat-label">主功能Tab</div></div>
|
|
|
+ <div class="stat-card"><div class="stat-num">4</div><div class="stat-label">底部导航Tab</div></div>
|
|
|
+ <div class="stat-card"><div class="stat-num">3</div><div class="stat-label">用户角色</div></div>
|
|
|
+ <div class="stat-card"><div class="stat-num">H5</div><div class="stat-label">单页应用</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-info"><span class="notice-icon">💡</span><div>本系统为 <strong>移动端 H5 单页应用</strong>，采用 screen 切换机制模拟原生 App 体验，无需安装，微信或浏览器直接访问。底部固定导航栏提供工作台、学习培训、在线考试、刷题练习四大入口。</div></div>
|
|
|
+ <div class="sub-title">目标用户</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🎓</div><div><div class="feature-name">本科生 / 研究生</div><div class="feature-tag">主要用户群体</div></div></div>
|
|
|
+ <ul class="feature-list"><li>完成入学/学年安全考试</li><li>在线学习安全知识课程</li><li>参与线下培训并签到</li><li>查看成绩、证书、积分</li><li>申请实验室绑定</li></ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">👩‍🏫</div><div><div class="feature-name">实验室管理员</div><div class="feature-tag">管理角色（线下培训）</div></div></div>
|
|
|
+ <ul class="feature-list"><li>发布/管理线下培训活动</li><li>展示签到二维码</li><li>查看签到统计与名单</li><li>切换发布/草稿状态</li></ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#f6ffed;">🏛</div><div><div class="feature-name">实验室审批人</div><div class="feature-tag">审批角色</div></div></div>
|
|
|
+ <ul class="feature-list"><li>处理学生实验室绑定申请</li><li>审批/驳回申请</li><li>查看申请详情与安全须知</li><li>待审批数角标提醒</li></ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== PAGE ARCHITECTURE ===== -->
|
|
|
+<div class="section" id="arch">
|
|
|
+ <div class="section-title">页面架构</div>
|
|
|
+ <div class="section-desc">系统共包含 22 个功能页面，按底部 4 个导航 Tab 及独立页面分组，页面间通过 screen 参数切换。</div>
|
|
|
+ <div class="notice notice-info"><span class="notice-icon">🗂️</span><div>所有页面均为单页应用内的虚拟路由，通过 <strong>goto(screenId)</strong> 控制显示与隐藏，支持 goBack() 返回操作，保留滚动位置。</div></div>
|
|
|
+ <div class="sub-title">工作台（3 个页面）</div>
|
|
|
+ <div class="screen-grid">
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#eef3fd;">🏠</div><div class="screen-card-name">screen-home</div><div class="screen-card-desc">工作台首页，卡片式聚合展示考试任务、学习任务、培训活动、积分通知</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#eef3fd;">🔔</div><div class="screen-card-name">screen-notice-list</div><div class="screen-card-desc">消息通知列表，系统公告与个人消息</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#eef3fd;">🏛️</div><div class="screen-card-name">screen-approval</div><div class="screen-card-desc">实验室审批页，处理学生实验室绑定申请</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">学习培训（5 个页面）</div>
|
|
|
+ <div class="screen-grid">
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#edfaf6;">📚</div><div class="screen-card-name">screen-knowledge-list</div><div class="screen-card-desc">学习培训首页，推荐/全部/考前/线下四个子Tab</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#edfaf6;">📖</div><div class="screen-card-name">screen-knowledge-detail</div><div class="screen-card-desc">课程详情，含章节目录、简介、学习进度</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#edfaf6;">📋</div><div class="screen-card-name">screen-posttest</div><div class="screen-card-desc">课后测验，完成课程后的知识检测</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#edfaf6;">🎤</div><div class="screen-card-name">screen-training-detail</div><div class="screen-card-desc">线下培训详情，时间地点、签到二维码、名单统计</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#edfaf6;">📖</div><div class="screen-card-name">screen-study-detail</div><div class="screen-card-desc">学习资料详情，知识点阅读页</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">在线考试（7 个页面）</div>
|
|
|
+ <div class="screen-grid">
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">🎓</div><div class="screen-card-name">screen-exam-list</div><div class="screen-card-desc">在线考试首页，考试任务/模拟考试/我的成绩三个子Tab</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">✍️</div><div class="screen-card-name">screen-exam-doing</div><div class="screen-card-desc">答题中，题目展示、选项作答、倒计时</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">🏆</div><div class="screen-card-name">screen-exam-result</div><div class="screen-card-desc">考试结果，成绩、通过状态、可查看答题详情</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">📋</div><div class="screen-card-name">screen-exam-detail</div><div class="screen-card-desc">考试任务详情，考试说明与开始入口</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">🎯</div><div class="screen-card-name">screen-mock-detail</div><div class="screen-card-desc">模拟考试详情，模拟说明与开始入口</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">📝</div><div class="screen-card-name">screen-regular-exam-detail</div><div class="screen-card-desc">常规考试详情，考试信息与历史成绩</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f0f4ff;">🔍</div><div class="screen-card-name">screen-score-detail</div><div class="screen-card-desc">答题详情，逐题查看答案、解析与难度</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">刷题练习（2 个页面）</div>
|
|
|
+ <div class="screen-grid">
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#fff2f0;">✏️</div><div class="screen-card-name">screen-practice-list</div><div class="screen-card-desc">刷题练习首页，按科目/类型选择练习范围</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#fff2f0;">📝</div><div class="screen-card-name">screen-practice-detail</div><div class="screen-card-desc">刷题答题页，即时反馈正确答案与解析</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">我的个人中心（5 个页面，从工作台头像入口访问，非底部Tab）</div>
|
|
|
+ <div class="screen-grid">
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f9f0ff;">👤</div><div class="screen-card-name">screen-my</div><div class="screen-card-desc">我的首页，用户信息、学时/证书/积分概览及功能入口</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f9f0ff;">📊</div><div class="screen-card-name">screen-scores</div><div class="screen-card-desc">我的成绩，各科目历次考试成绩列表</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f9f0ff;">🏅</div><div class="screen-card-name">screen-certs</div><div class="screen-card-desc">我的证书，已获得安全资质证书列表</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f9f0ff;">📁</div><div class="screen-card-name">screen-exam-records</div><div class="screen-card-desc">考试记录，历次参加考试的详细记录</div></div>
|
|
|
+ <div class="screen-card"><div class="screen-card-icon" style="background:#f9f0ff;">❌</div><div class="screen-card-name">screen-wrong-questions</div><div class="screen-card-desc">历史错题，汇总答错题目便于复习</div></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== NAVIGATION ===== -->
|
|
|
+<div class="section" id="nav">
|
|
|
+ <div class="section-title">底部导航说明</div>
|
|
|
+ <div class="section-desc">底部固定导航栏包含 4 个 Tab（工作台、学习培训、在线考试、刷题练习），始终可见，切换 Tab 时记忆各模块的浏览状态。「我的」个人中心通过工作台右上角入口访问，不在底部 Tab 内。</div>
|
|
|
+ <div class="feature-grid">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">🏠</div><div><div class="feature-name">工作台</div><div class="feature-tag">Tab 1 · 首页入口</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>首页入口，聚合展示所有重要任务</li>
|
|
|
+ <li>展示待完成考试任务与截止提醒</li>
|
|
|
+ <li>展示学习任务进度与已完成学时</li>
|
|
|
+ <li>展示近期培训活动与积分等级</li>
|
|
|
+ <li>右上角消息通知角标入口</li>
|
|
|
+ <li>实验室审批待处理数角标提醒</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📚</div><div><div class="feature-name">学习培训</div><div class="feature-tag">Tab 2 · 课程与培训</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>在线课程列表，支持推荐/全部/考前分类</li>
|
|
|
+ <li>视频学习，支持进度记录与续播</li>
|
|
|
+ <li>考前必修课程专属入口</li>
|
|
|
+ <li>线下培训活动报名与签到入口</li>
|
|
|
+ <li>课程学习进度可视化展示</li>
|
|
|
+ <li>完成课程自动累计积分</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🎓</div><div><div class="feature-name">在线考试</div><div class="feature-tag">Tab 3 · 三个子Tab</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>考试任务 Tab：必考任务列表与截止时间</li>
|
|
|
+ <li>模拟考试 Tab：可多次参加的模拟练习</li>
|
|
|
+ <li>我的成绩 Tab：历次考试成绩汇总</li>
|
|
|
+ <li>倒计时答题，自动提交保障</li>
|
|
|
+ <li>防切屏提示，保障考试公正性</li>
|
|
|
+ <li>考后可查看答题详情与解析</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff2f0;">✏️</div><div><div class="feature-name">刷题练习</div><div class="feature-tag">Tab 4 · 三种练习模式</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>随机练习：系统随机抽取题目</li>
|
|
|
+ <li>错题本：汇总历史答错题目</li>
|
|
|
+ <li>按题型/知识点分类练习</li>
|
|
|
+ <li>即时反馈正确答案与解析</li>
|
|
|
+ <li>收藏题目，形成个人题库</li>
|
|
|
+ <li>练习数据统计与正确率分析</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-warn"><span class="notice-icon">⚠️</span><div>Tab 切换不会重置页面状态，返回时可继续浏览。但<strong>正在进行的考试</strong>切换 Tab 后须在规定时间内返回，超时将自动提交。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== WORKBENCH MODULE ===== -->
|
|
|
+<div class="section" id="workbench">
|
|
|
+ <div class="section-title">工作台模块</div>
|
|
|
+ <div class="section-desc">工作台是应用的默认首屏，以卡片式布局聚合展示所有重要任务入口与数据概览，帮助用户快速了解待办事项。</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">📝</div><div><div class="feature-name">考试任务卡片</div><div class="feature-tag">高优先级展示</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示当前待完成与已完成考试列表</li>
|
|
|
+ <li>每个考试显示截止时间与剩余天数</li>
|
|
|
+ <li>进度条可视化展示完成状态</li>
|
|
|
+ <li>点击卡片直接跳转考试入口</li>
|
|
|
+ <li>已过期考试以灰色标注区分</li>
|
|
|
+ <li>支持按截止时间紧急程度排序</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📚</div><div><div class="feature-name">学习任务卡片</div><div class="feature-tag">学时统计</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示分配给用户的课程学习任务</li>
|
|
|
+ <li>显示每门课程的学习进度百分比</li>
|
|
|
+ <li>汇总已完成学时与总要求学时</li>
|
|
|
+ <li>点击课程直接进入学习详情页</li>
|
|
|
+ <li>完成课程后学时自动累计更新</li>
|
|
|
+ <li>超期未完成课程红色高亮提示</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🎯</div><div><div class="feature-name">模拟考试卡片</div><div class="feature-tag">快速入口</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示最近一次模拟考试成绩与时间</li>
|
|
|
+ <li>一键快速开始新的模拟练习</li>
|
|
|
+ <li>显示历史模拟最高分记录</li>
|
|
|
+ <li>与正式考试隔离，不影响成绩档案</li>
|
|
|
+ <li>模拟次数不限，随时练习</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#f9f0ff;">🎤</div><div><div class="feature-name">培训活动卡片</div><div class="feature-tag">线下活动</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示近期即将举行的线下培训活动</li>
|
|
|
+ <li>显示活动时间、地点、剩余名额</li>
|
|
|
+ <li>支持一键报名参加培训</li>
|
|
|
+ <li>管理员可直接在此入口管理活动</li>
|
|
|
+ <li>已报名活动显示签到入口</li>
|
|
|
+ <li>活动结束后自动归档</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">⭐</div><div><div class="feature-name">积分展示</div><div class="feature-tag">激励机制</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示用户当前总积分与等级徽章</li>
|
|
|
+ <li>积分来源：学习、考试通过、签到、活动参与</li>
|
|
|
+ <li>显示距下一等级所需积分差值</li>
|
|
|
+ <li>点击跳转积分详细记录页面</li>
|
|
|
+ <li>等级标志在个人主页显示</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff2f0;">🔔</div><div><div class="feature-name">消息通知</div><div class="feature-tag">系统公告 + 个人消息</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>系统公告：平台通知、考试提醒、安全预警</li>
|
|
|
+ <li>个人消息：审批结果、培训报名确认</li>
|
|
|
+ <li>未读消息数角标显示在导航图标上</li>
|
|
|
+ <li>点击消息可跳转对应功能页</li>
|
|
|
+ <li>支持消息标为已读与全部已读</li>
|
|
|
+ <li>重要通知支持置顶展示</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== STUDY MODULE ===== -->
|
|
|
+<div class="section" id="study">
|
|
|
+ <div class="section-title">学习培训模块</div>
|
|
|
+ <div class="section-desc">提供在线课程、视频学习、考前培训与线下培训四个维度，满足不同学习场景需求，学习进度全程记录。</div>
|
|
|
+ <div class="feature-grid">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">⭐</div><div><div class="feature-name">推荐课程 Tab</div><div class="feature-tag">精选安全课程</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示平台精选安全知识课程卡片</li>
|
|
|
+ <li>卡片显示课程封面、名称、学时</li>
|
|
|
+ <li>显示课程热度与学习人数</li>
|
|
|
+ <li>个性化推荐基于用户学习历史</li>
|
|
|
+ <li>支持收藏课程到个人学习清单</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📂</div><div><div class="feature-name">全部课程 Tab</div><div class="feature-tag">分类浏览</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>按类别展示全部课程（化学/生物/辐射/消防等）</li>
|
|
|
+ <li>支持关键字搜索课程名称</li>
|
|
|
+ <li>筛选器：按类别/学时/难度过滤</li>
|
|
|
+ <li>列表/网格视图切换</li>
|
|
|
+ <li>显示已学和未学标记</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">🎓</div><div><div class="feature-name">考前课程 Tab</div><div class="feature-tag">必修关联</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>仅展示与考试任务关联的必修课程</li>
|
|
|
+ <li>标注对应考试科目与完成要求</li>
|
|
|
+ <li>未完成课程影响考试资格提示</li>
|
|
|
+ <li>完成进度与考试倒计时同步显示</li>
|
|
|
+ <li>完成后自动解锁对应考试入口</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📍</div><div><div class="feature-name">线下培训 Tab</div><div class="feature-tag">报名与签到</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示所有线下培训活动列表</li>
|
|
|
+ <li>活动状态：待开始/进行中/已结束</li>
|
|
|
+ <li>一键报名，名额有限先到先得</li>
|
|
|
+ <li>已报名活动显示签到二维码入口</li>
|
|
|
+ <li>管理员可查看参与名单与统计</li>
|
|
|
+ <li>活动结束后可查看历史记录</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">课程详情与视频播放</div>
|
|
|
+ <div class="feature-grid-2">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📖</div><div><div class="feature-name">课程详情页</div><div class="feature-tag">screen-knowledge-detail</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示课程封面、简介、讲师信息</li>
|
|
|
+ <li>章节目录列表，点击跳转对应视频</li>
|
|
|
+ <li>可视化学习进度（已学/全部章节数）</li>
|
|
|
+ <li>课程资料下载入口（如有附件）</li>
|
|
|
+ <li>学习记录：上次学到哪一章自动标记</li>
|
|
|
+ <li>完成全部章节后标注"已完成"并发放积分</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">▶️</div><div><div class="feature-name">学习资料阅读页</div><div class="feature-tag">screen-study-detail</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>支持竖屏/横屏自动适配</li>
|
|
|
+ <li>播放进度自动保存，下次续播</li>
|
|
|
+ <li>播放速度调节（0.5x ~ 2x）</li>
|
|
|
+ <li>视频下方显示当前章节笔记区域</li>
|
|
|
+ <li>不可快进（防止学时作弊保障）</li>
|
|
|
+ <li>完成播放自动更新课程进度</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== EXAM MODULE ===== -->
|
|
|
+<div class="section" id="exam">
|
|
|
+ <div class="section-title">在线考试模块</div>
|
|
|
+ <div class="section-desc">支持正式考试与模拟考试，内置倒计时、防切屏、自动提交等机制，确保考试公正性；成绩实时反馈并可查看答题详情。</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">📋</div><div><div class="feature-name">考试任务 Tab</div><div class="feature-tag">必考任务</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>列出当前用户所有必参加考试任务</li>
|
|
|
+ <li>每项显示考试名称、截止时间、剩余天数</li>
|
|
|
+ <li>状态标签：待参加/进行中/已完成/已过期</li>
|
|
|
+ <li>点击进入考试须知与开始确认页</li>
|
|
|
+ <li>已完成考试显示成绩与通过状态</li>
|
|
|
+ <li>可查看对应考试的历次成绩记录</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🎯</div><div><div class="feature-name">模拟考试 Tab</div><div class="feature-tag">不限次练习</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>提供与正式考试同类型的模拟题库</li>
|
|
|
+ <li>参加次数不限，成绩不计入档案</li>
|
|
|
+ <li>系统随机抽题，每次题目不同</li>
|
|
|
+ <li>模拟结束立即显示成绩与答题解析</li>
|
|
|
+ <li>记录历次模拟成绩与最高分</li>
|
|
|
+ <li>标记薄弱知识点辅助备考</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">📊</div><div><div class="feature-name">我的成绩 Tab</div><div class="feature-tag">历次记录</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示所有考试科目的历次成绩</li>
|
|
|
+ <li>每条记录显示考试名称、时间、分数、通过状态</li>
|
|
|
+ <li>支持按时间/科目/通过状态筛选</li>
|
|
|
+ <li>点击记录查看答题详情与解析</li>
|
|
|
+ <li>通过考试的记录关联证书信息</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">答题流程</div>
|
|
|
+ <div class="flow-row">
|
|
|
+ <div class="flow-step"><div class="flow-num">1</div><div class="flow-name">考试须知</div><div class="flow-desc">展示规则、题量、时长、注意事项</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">2</div><div class="flow-name">开始答题</div><div class="flow-desc">点击确认后倒计时开始，进入答题页</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">3</div><div class="flow-name">答题中</div><div class="flow-desc">逐题作答，可标记跳过，顶部进度条</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">4</div><div class="flow-name">提交确认</div><div class="flow-desc">提交前显示未作答题数，确认后提交</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">5</div><div class="flow-name">考试结果</div><div class="flow-desc">显示分数、通过状态、可查看详情</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-warn"><span class="notice-icon">⚠️</span><div>答题过程中切换到其他 App 或页面时，系统将弹出警告提示。倒计时归零后自动提交当前已作答内容，未作答题目计为错误。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== PRACTICE MODULE ===== -->
|
|
|
+<div class="section" id="practice">
|
|
|
+ <div class="section-title">刷题练习模块</div>
|
|
|
+ <div class="section-desc">提供随机练习、错题本、按类别练习三种模式，帮助用户查漏补缺，强化薄弱知识点，答题即时反馈。</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff2f0;">🎲</div><div><div class="feature-name">随机练习</div><div class="feature-tag">系统随机出题</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>系统从全题库随机抽取题目</li>
|
|
|
+ <li>每次练习题目不重复，覆盖多知识点</li>
|
|
|
+ <li>可设置单次练习题目数量（10/20/30题）</li>
|
|
|
+ <li>作答后立即显示正误与解析</li>
|
|
|
+ <li>错误题目自动加入错题本</li>
|
|
|
+ <li>支持随时暂停，进度自动保存</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff2f0;">📒</div><div><div class="feature-name">错题本</div><div class="feature-tag">精准查漏补缺</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>汇总所有练习与考试中的历史错题</li>
|
|
|
+ <li>按知识点分类归纳错题</li>
|
|
|
+ <li>显示错误次数与最近错误时间</li>
|
|
|
+ <li>支持重新练习错题，答对后可移除</li>
|
|
|
+ <li>手动收藏重要题目到错题本</li>
|
|
|
+ <li>错题统计图表辅助分析薄弱环节</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff2f0;">🗂️</div><div><div class="feature-name">按类别练习</div><div class="feature-tag">针对性强化</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>按知识点类别选择练习范围</li>
|
|
|
+ <li>支持按题型筛选（单选/多选/判断）</li>
|
|
|
+ <li>显示每个类别的历史正确率</li>
|
|
|
+ <li>可选择困难模式（只做错过的题）</li>
|
|
|
+ <li>完成一轮后显示本次练习分析报告</li>
|
|
|
+ <li>成绩趋势图展示提升进度</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== LAB APPROVAL ===== -->
|
|
|
+<div class="section" id="approval">
|
|
|
+ <div class="section-title">实验室审批功能</div>
|
|
|
+ <div class="section-desc">学生可提交实验室绑定申请，审批人通过移动端处理申请，全流程通知推送，角标提示待处理数量。</div>
|
|
|
+ <div class="sub-title">审批流程</div>
|
|
|
+ <div class="flow-row">
|
|
|
+ <div class="flow-step"><div class="flow-num">1</div><div class="flow-name">提交申请</div><div class="flow-desc">学生填写实验室信息，提交绑定申请</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">2</div><div class="flow-name">通知推送</div><div class="flow-desc">审批人收到消息通知，角标数量+1</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">3</div><div class="flow-name">查看详情</div><div class="flow-desc">审批人查看申请详情与安全须知</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">4</div><div class="flow-name">审批操作</div><div class="flow-desc">通过或驳回，可填写审批意见</div></div>
|
|
|
+ <div class="flow-arrow">→</div>
|
|
|
+ <div class="flow-step"><div class="flow-num">5</div><div class="flow-name">结果通知</div><div class="flow-desc">学生收到审批结果消息推送</div></div>
|
|
|
+ </div>
|
|
|
+ <div class="feature-grid-2">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🏛️</div><div><div class="feature-name">审批列表与详情</div><div class="feature-tag">screen-approval</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示待处理与历史审批列表</li>
|
|
|
+ <li>每条显示申请人姓名、学号、申请实验室</li>
|
|
|
+ <li>状态标签：待审批/已通过/已驳回</li>
|
|
|
+ <li>「我的」页面显示待审批数量角标</li>
|
|
|
+ <li>支持按状态筛选申请记录</li>
|
|
|
+ <li>点击查看完整申请详情</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">📋</div><div><div class="feature-name">审批详情</div><div class="feature-tag">screen-approval（详情区域）</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>展示申请人完整信息（姓名/学院/学号）</li>
|
|
|
+ <li>申请实验室名称与编号</li>
|
|
|
+ <li>申请理由与实验室安全须知确认状态</li>
|
|
|
+ <li>审批意见文本框（驳回时必填）</li>
|
|
|
+ <li>通过/驳回操作按钮，操作不可撤销</li>
|
|
|
+ <li>历史审批记录在详情页底部展示</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-info"><span class="notice-icon">💡</span><div>审批人身份由后台配置，普通学生无法看到审批入口。审批后的结果会通过消息通知实时推送给申请人，双方均可在消息中心查看记录。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== OFFLINE TRAINING ===== -->
|
|
|
+<div class="section" id="offline">
|
|
|
+ <div class="section-title">线下培训管理功能</div>
|
|
|
+ <div class="section-desc">管理员可在移动端发布培训活动、展示签到二维码，实时查看签到统计与人员名单，支持草稿与发布状态管理。</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">➕</div><div><div class="feature-name">发布培训活动</div><div class="feature-tag">管理员专属</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>填写培训标题、简介、培训目标</li>
|
|
|
+ <li>设置培训时间（开始/结束时间）</li>
|
|
|
+ <li>设置培训地点（支持文字或地图选点）</li>
|
|
|
+ <li>设置最大参与人数限制</li>
|
|
|
+ <li>支持存为草稿后继续编辑</li>
|
|
|
+ <li>发布后学生端立即可见并可报名</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">📱</div><div><div class="feature-name">签到二维码</div><div class="feature-tag">现场扫码签到</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>管理员在培训详情页展示专属签到码</li>
|
|
|
+ <li>二维码包含活动 ID 与时效校验</li>
|
|
|
+ <li>学生使用微信/浏览器扫码完成签到</li>
|
|
|
+ <li>签到成功后积分自动累计</li>
|
|
|
+ <li>二维码支持刷新（每 5 分钟自动更新）</li>
|
|
|
+ <li>重复签到系统自动拦截提示</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">📊</div><div><div class="feature-name">签到统计</div><div class="feature-tag">实时查看</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>实时显示总报名人数、已签到、未签到数</li>
|
|
|
+ <li>进度环形图直观展示签到比例</li>
|
|
|
+ <li>可查看已签到学生名单（姓名+学工号+学院）</li>
|
|
|
+ <li>可查看未签到学生名单，支持手动补签</li>
|
|
|
+ <li>名单支持导出为 Excel 文件</li>
|
|
|
+ <li>按学院/专业分组查看签到情况</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sub-title">活动状态管理</div>
|
|
|
+ <div class="feature-grid-2">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">📝</div><div><div class="feature-name">草稿状态</div><div class="feature-tag">仅管理员可见</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>草稿状态学生端不展示，仅管理员可编辑</li>
|
|
|
+ <li>支持保存草稿后继续修改内容</li>
|
|
|
+ <li>草稿列表在管理员的培训管理入口展示</li>
|
|
|
+ <li>切换为发布状态后立即对学生可见</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">🚀</div><div><div class="feature-name">发布状态</div><div class="feature-tag">学生可见可报名</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>发布后出现在学习培训-线下培训列表</li>
|
|
|
+ <li>符合条件的学生可报名参加</li>
|
|
|
+ <li>管理员仍可编辑时间、地点等信息</li>
|
|
|
+ <li>可切换回草稿状态（已报名学生收到通知）</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== MY SCORES ===== -->
|
|
|
+<div class="section" id="scores">
|
|
|
+ <div class="section-title">我的成绩</div>
|
|
|
+ <div class="section-desc">汇总展示用户所有考试科目的历次成绩记录，支持筛选与排序，可深入查看每次考试的完整答题详情。</div>
|
|
|
+ <div class="feature-grid-2">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📊</div><div><div class="feature-name">成绩列表</div><div class="feature-tag">screen-scores</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>按科目分组展示所有历次考试成绩</li>
|
|
|
+ <li>每条记录：科目名称、考试时间、得分、满分、通过状态</li>
|
|
|
+ <li><span class="tag tag-green">通过</span> / <span class="tag tag-red">未通过</span> 标签直观区分</li>
|
|
|
+ <li>支持按时间倒序或成绩高低排序</li>
|
|
|
+ <li>支持按科目/通过状态筛选</li>
|
|
|
+ <li>点击任意记录进入答题详情页</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📈</div><div><div class="feature-name">成绩统计</div><div class="feature-tag">数据概览</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>顶部展示总考试次数与通过率</li>
|
|
|
+ <li>各科目最高分与平均分对比</li>
|
|
|
+ <li>成绩趋势折线图（近 6 次考试）</li>
|
|
|
+ <li>通过考试关联证书，点击可查看</li>
|
|
|
+ <li>未通过考试显示建议复习知识点</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- ===== SCORE DETAIL ===== -->
|
|
|
+<div class="section" id="score-detail">
|
|
|
+ <div class="section-title">答题详情</div>
|
|
|
+ <div class="section-desc">逐题展示考试作答情况，标注正确答案与解析，帮助用户找出知识盲点，支持将错题加入练习本。</div>
|
|
|
+ <div class="feature-grid-2">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">📝</div><div><div class="feature-name">题目回顾</div><div class="feature-tag">screen-score-detail</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>逐题展示题目内容与用户作答</li>
|
|
|
+ <li>绿色标注正确答案，红色标注错误作答</li>
|
|
|
+ <li>每题附带知识点解析说明</li>
|
|
|
+ <li>顶部显示本次得分与题目总数</li>
|
|
|
+ <li>快速跳转到指定题目编号</li>
|
|
|
+ <li>错题可一键加入错题本</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🔍</div><div><div class="feature-name">答题分析</div><div class="feature-tag">辅助提升</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>按知识点分类汇总本次答题正确率</li>
|
|
|
+ <li>标注薄弱知识点并推荐相关课程</li>
|
|
|
+ <li>与上次考试对比，展示进步情况</li>
|
|
|
+ <li>可直接从详情页发起再次刷题练习</li>
|
|
|
+ <li>分享成绩卡片功能（可选）</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-info"><span class="notice-icon">💡</span><div>答题详情页同时适用于<strong>正式考试</strong>与<strong>模拟考试</strong>的结果回顾，路由均为 screen-score-detail，通过传入不同的考试记录 ID 区分。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== ROLES & PERMISSIONS ===== -->
|
|
|
+<div class="section" id="roles">
|
|
|
+ <div class="section-title">角色与权限说明</div>
|
|
|
+ <div class="section-desc">系统内置三种用户角色，权限由后台统一配置，前端根据角色动态显示/隐藏对应功能入口。</div>
|
|
|
+ <table class="spec-table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>角色</th>
|
|
|
+ <th>可访问模块</th>
|
|
|
+ <th>特有权限</th>
|
|
|
+ <th>备注</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td><span class="tag tag-blue">学生（默认）</span></td>
|
|
|
+ <td>全部模块（工作台、学习培训、在线考试、刷题练习、我的）</td>
|
|
|
+ <td>学习课程/参加考试/培训签到/查看成绩与证书/提交实验室绑定申请</td>
|
|
|
+ <td>主要用户群体，登录后默认角色</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><span class="tag tag-orange">实验室管理员</span></td>
|
|
|
+ <td>全部模块 + 线下培训管理功能</td>
|
|
|
+ <td>发布培训活动/展示签到二维码/查看签到统计与名单/切换草稿发布状态</td>
|
|
|
+ <td>需后台配置管理员身份，可同时拥有学生权限</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td><span class="tag tag-purple">实验室审批人</span></td>
|
|
|
+ <td>全部模块 + 审批管理功能</td>
|
|
|
+ <td>查看审批列表/审批或驳回申请/填写审批意见/查看申请详情</td>
|
|
|
+ <td>工作台与消息通知显示待审批数角标</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div class="notice notice-warn"><span class="notice-icon">⚠️</span><div>一个用户可同时具备多个角色（如既是管理员又是审批人）。权限组合由后台灵活配置，前端无需修改代码即可生效。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<div class="divider"></div>
|
|
|
+
|
|
|
+<!-- ===== ADMIN FEATURES ===== -->
|
|
|
+<div class="section" id="admin">
|
|
|
+ <div class="section-title">管理端功能汇总</div>
|
|
|
+ <div class="section-desc">具备管理员或审批人身份的用户，在移动端可使用以下专属管理功能，普通学生不可见。</div>
|
|
|
+ <div class="feature-grid-3">
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#fff7e6;">🎤</div><div><div class="feature-name">培训活动管理</div><div class="feature-tag">实验室管理员</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>创建新的线下培训活动</li>
|
|
|
+ <li>编辑已有活动信息（时间/地点/人数）</li>
|
|
|
+ <li>切换活动草稿/发布状态</li>
|
|
|
+ <li>展示并刷新签到二维码</li>
|
|
|
+ <li>实时查看签到统计数据</li>
|
|
|
+ <li>导出签到名单为 Excel</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#eef3fd;">🏛️</div><div><div class="feature-name">申请审批管理</div><div class="feature-tag">实验室审批人</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>查看所有待处理实验室绑定申请</li>
|
|
|
+ <li>审批或驳回申请，填写意见</li>
|
|
|
+ <li>查看申请人完整信息与申请记录</li>
|
|
|
+ <li>工作台角标实时提示待处理数量</li>
|
|
|
+ <li>消息通知同步新申请提醒</li>
|
|
|
+ <li>历史审批记录可随时查阅</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="feature-card">
|
|
|
+ <div class="feature-card-header"><div class="feature-icon" style="background:#edfaf6;">📋</div><div><div class="feature-name">人员名单管理</div><div class="feature-tag">实验室管理员</div></div></div>
|
|
|
+ <ul class="feature-list">
|
|
|
+ <li>查看培训活动已报名学生名单</li>
|
|
|
+ <li>按已签到/未签到筛选名单</li>
|
|
|
+ <li>名单信息：姓名、学工号、学院、签到时间</li>
|
|
|
+ <li>支持手动为学生补录签到记录</li>
|
|
|
+ <li>按学院/专业分组统计查看</li>
|
|
|
+ <li>名单一键导出为 Excel 文件</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="notice notice-info"><span class="notice-icon">💡</span><div>管理端功能均嵌入在移动端应用内，无需单独安装。管理员身份由系统后台统一配置，前端识别身份后动态展示对应管理入口，普通学生界面保持简洁。</div></div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div><!-- end main-content -->
|
|
|
+</div><!-- end doc-body -->
|
|
|
+
|
|
|
+<!-- ===== FOOTER ===== -->
|
|
|
+<div class="doc-footer">
|
|
|
+ <div>© 2026 实验室安全教育平台 · 移动端应用 v2.1 | 文档版本：2026-08 | 技术支持：信息化管理中心</div>
|
|
|
+ <div style="display:flex;gap:24px;align-items:center;">
|
|
|
+ <span>📱 移动端 H5 单页应用</span>
|
|
|
+ <span>🗂️ 22 个功能页面</span>
|
|
|
+ <span>🔐 3 种用户角色</span>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+</div><!-- end page -->
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
anne
дней назад: 4
