lovife
7df078e0ea
- 交接摘要补 §一·三十五~§一·三十八：角色与授权、需求收敛（4 角色 / 10 菜单 / 取消二期）、 PC 端重搭后的 UI 修复与卡片式基线、品牌改名与新标识 - PRD 与功能逻辑卷只改标题行与产品代号线；**文件名不动** —— verify-docs.py 按路径读， 全库还有 20+ 处按文件名引用，改名会连带炸脚本 - 原型 index / admin-web / teacher-app / student-app 的品牌区改「深学在线」， admin-web 的 .mark（10 处）换成内嵌的新标 data URI，保持原型"单文件自包含"的约定 - 根 AGENTS.md 与 frontend-pc 的规范同步：接线检查补第 ⑨ 项（SVG 资产是不是合法 XML —— SVG 注释里出现连续两个减号就 not well-formed，图标裂开而控制台一句话都不报）、 「最容易写错的约定」6 -> 7 条（新增品牌标） - deploy/docker-compose.yml 只改头注释里的项目名（compose 的 name 与七牛对象前缀都没动）
128 lines
6.6 KiB
HTML
Vendored
128 lines
6.6 KiB
HTML
Vendored
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>深学在线 · 原型索引</title>
|
||
<style>
|
||
:root{
|
||
--ink:#1b2430; --ink2:#4a5768; --ink3:#8b95a3;
|
||
--paper:#f4f1ea; --paper2:#fbfaf7; --card:#fff;
|
||
--line:#e0dbd0; --line2:#cfc8b8;
|
||
--seal:#c0392b; --seal-soft:#f9ece9;
|
||
--jade:#2f6b4f; --jade-soft:#e8f0eb;
|
||
--font-display:"Songti SC","STSong","SimSun",serif;
|
||
--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
|
||
--font-mono:"SF Mono","JetBrains Mono",Consolas,monospace;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{
|
||
font-family:var(--font-body);color:var(--ink);background:var(--paper);
|
||
background-image:linear-gradient(rgba(207,200,184,.28) 1px,transparent 1px),
|
||
linear-gradient(90deg,rgba(207,200,184,.28) 1px,transparent 1px);
|
||
background-size:26px 26px;-webkit-font-smoothing:antialiased;
|
||
display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:48px 24px;
|
||
}
|
||
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
|
||
.head{text-align:center;margin-bottom:38px}
|
||
.kicker{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-mono);margin-bottom:12px}
|
||
h1{font-family:var(--font-display);font-size:36px;font-weight:600;letter-spacing:.05em}
|
||
h1 em{font-style:normal;color:var(--seal)}
|
||
.head p{font-size:13.5px;color:var(--ink2);line-height:1.8;margin-top:12px}
|
||
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;max-width:1040px;width:100%}
|
||
a.card{
|
||
display:block;text-decoration:none;color:inherit;background:var(--card);
|
||
border:1px solid var(--line);border-radius:16px;padding:24px;transition:.26s;position:relative;overflow:hidden;
|
||
}
|
||
a.card::before{
|
||
content:"";position:absolute;inset:0;opacity:0;transition:.26s;
|
||
background:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(192,57,43,.03) 9px,rgba(192,57,43,.03) 18px);
|
||
}
|
||
a.card:hover{transform:translateY(-5px);border-color:var(--line2);box-shadow:0 22px 40px -18px rgba(27,36,48,.34)}
|
||
a.card:hover::before{opacity:1}
|
||
a.card .ic{
|
||
width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:23px;
|
||
background:var(--paper);border:1px solid var(--line);color:var(--ink2);margin-bottom:16px;position:relative;
|
||
}
|
||
a.card.tch .ic{background:#eef1f4;border-color:var(--line2);color:var(--ink)}
|
||
a.card.adm .ic{background:var(--jade-soft);border-color:#cfe0d6;color:var(--jade)}
|
||
a.card h2{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.04em;position:relative}
|
||
a.card .meta{font-size:11.5px;font-family:var(--font-mono);color:var(--seal);letter-spacing:.06em;margin-top:7px;position:relative}
|
||
a.card ul{list-style:none;margin-top:14px;position:relative}
|
||
a.card li{font-size:12.5px;color:var(--ink2);line-height:1.75;padding-left:15px;position:relative}
|
||
a.card li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--line2)}
|
||
a.card .go{
|
||
display:flex;align-items:center;gap:6px;margin-top:18px;font-size:12.5px;color:var(--ink3);position:relative;
|
||
}
|
||
a.card:hover .go{color:var(--seal)}
|
||
.foot{margin-top:40px;font-size:11.5px;color:var(--ink3);text-align:center;line-height:1.9;font-family:var(--font-mono)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||
<symbol id="i-user" viewBox="0 0 24 24"><circle cx="12" cy="8.4" r="3.6"/><path d="M5 19.6c0-3.4 3.1-5.6 7-5.6s7 2.2 7 5.6"/></symbol>
|
||
<symbol id="i-users" viewBox="0 0 24 24"><circle cx="9" cy="8.4" r="3.4"/><path d="M3 19.2c0-3.1 2.7-5.2 6-5.2s6 2.1 6 5.2"/><path d="M16.2 5.6a3.4 3.4 0 0 1 0 6.4M17.6 14.4c2 .6 3.4 2.3 3.4 4.8"/></symbol>
|
||
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M5 12h13M13.5 7.5L18 12l-4.5 4.5"/></symbol>
|
||
<symbol id="i-desktop" viewBox="0 0 24 24"><rect x="2.8" y="4.2" width="18.4" height="12.4" rx="1.8"/><path d="M8.5 20.2h7M12 16.6v3.6"/></symbol>
|
||
</svg>
|
||
|
||
<div class="head">
|
||
<div class="kicker">Prototype Index · V1.0</div>
|
||
<h1>深学在线 · <em>交互原型</em></h1>
|
||
<p>职业技能等级认定报名材料收集系统 · 两端原型<br>设计语言：「档案室 / 电子卷宗」</p>
|
||
</div>
|
||
|
||
<div class="cards">
|
||
<a class="card" href="student-app.html">
|
||
<div class="ic"><svg class="ico"><use href="#i-user"/></svg></div>
|
||
<h2>学生填报端</h2>
|
||
<div class="meta">10 SCREENS</div>
|
||
<ul>
|
||
<li>门禁核验 · 形近字确认 · 统一失败提示</li>
|
||
<li>填报主页（字段三类规则：锁定／可改／材料）</li>
|
||
<li>材料来源三通道（聊天记录／相册／文件，无拍照）</li>
|
||
<li>上传即规范化 · 压缩率可视化 · 传错位置提示</li>
|
||
<li>提交汇总 · 审核进度时间轴</li>
|
||
</ul>
|
||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||
</a>
|
||
|
||
<a class="card tch" href="teacher-app.html">
|
||
<div class="ic"><svg class="ico"><use href="#i-users"/></svg></div>
|
||
<h2>班主任端</h2>
|
||
<div class="meta">9 SCREENS</div>
|
||
<ul>
|
||
<li>电子花名册看板（一屏扫完 28 人）</li>
|
||
<li>待审列表 · 异常优先 · 材料状态缩略条</li>
|
||
<li>学生详情（给出判断依据）</li>
|
||
<li>批量通过（红黄一律排除并展示）</li>
|
||
<li><b>右滑通过 + 二次确认</b>（驳回须点按钮）</li>
|
||
<li>催报（额度透明）· 消息 · 代传材料</li>
|
||
</ul>
|
||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||
</a>
|
||
|
||
<a class="card adm" href="admin-web.html">
|
||
<div class="ic"><svg class="ico"><use href="#i-desktop"/></svg></div>
|
||
<h2>管理端（PC）</h2>
|
||
<div class="meta">10 SCREENS · 1180px</div>
|
||
<ul>
|
||
<li>工作台（结论优先 + 待办排序）</li>
|
||
<li><b>命名规则试跑</b>——发布前的唯一闸门</li>
|
||
<li>名单导入（表头定位可视化）</li>
|
||
<li>报考范围确认（聚合 + 一致性体检）</li>
|
||
<li>数据看板 · 终审 · 导出中心（目录树预览）</li>
|
||
<li><b>表单设计器 · 材料规则配置 · 角色与授权</b></li>
|
||
<li>支持 100% / 82% / 66% 缩放查看</li>
|
||
</ul>
|
||
<div class="go">打开原型 <svg class="ico"><use href="#i-arrow"/></svg></div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="foot">
|
||
docs/prototype/ · 单文件自包含 · 零外部依赖 · 无 emoji<br>
|
||
数据取自真实批次「24中技数控1班」28 名学生
|
||
</div>
|
||
</body>
|
||
</html>
|