Compare commits
19 Commits
fix/exam-q
...
master
| Author | SHA1 | Date |
|---|---|---|
|
|
39113aa091 | 1 day ago |
|
|
0e237e5cdb | 1 day ago |
|
|
511abe73b9 | 1 day ago |
|
|
5f01ee20cb | 1 day ago |
|
|
71ac33be70 | 1 day ago |
|
|
5bf2ba612d | 1 day ago |
|
|
e1da3bd6a2 | 1 day ago |
|
|
ae64fb3465 | 1 day ago |
|
|
ab6c9cdc7b | 3 days ago |
|
|
c3b1e99267 | 3 days ago |
|
|
4b20ea3d99 | 3 days ago |
|
|
d8c4e40bef | 5 days ago |
|
|
4419a3cfd1 | 5 days ago |
|
|
89d08986cf | 5 days ago |
|
|
d4d7a1c033 | 6 days ago |
|
|
e175e3e4f9 | 6 days ago |
|
|
a8425d74bd | 6 days ago |
|
|
623771ec6b | 6 days ago |
|
|
2b640c32f5 | 6 days ago |
@ -0,0 +1,17 @@
|
||||
# 2026-10-11
|
||||
|
||||
## AI 学习助手悬浮按钮重设计
|
||||
- 文件:`src/views/components/TrainingAiSidebar.vue`(收起态 `.ai-fab`)
|
||||
- 原状:50px 纯图标圆形蓝球(MagicStick 图标),不够显眼
|
||||
- 新设计:3D 黏土风 SVG 小助手(渐变头部、深蓝面罩发光眼、天线顶珠、星光点缀)+ 文字胶囊按钮(主标题"AI 学习助手" + 副标语"学习有疑问?随时问我")
|
||||
- 动效:头像上下浮动(bob)、呼吸光环(pulse)、悬停上浮 + 小助手摆动(wiggle);含 prefers-reduced-motion 降级
|
||||
- 尺寸:头像 44px,胶囊整体约 56px 高,固定右下角不遮挡内容;纯 SVG 内联无图片资源
|
||||
|
||||
### 追加:遮挡修复
|
||||
- 用户反馈悬浮胶囊会遮挡底部「保存/Step 01-04/下一步」导航栏(step-navigation 为普通文档流,滚到底部即被压住)
|
||||
- 方案:滚动方向感知自动隐藏 —— `.ai-fab` 增加 `is-hidden` 状态;window scroll 监听(rAF 节流,阈值 6px),向下滚动且 scrollY>40 时 translateY(150%)+opacity:0+pointer-events:none,向上滚动滑出;含 reduced-motion 兼容
|
||||
|
||||
### 追加:扇形展开交互
|
||||
- 用户要求默认只展示头像,悬停时像扇子一样展开文字
|
||||
- 实现:待机态按钮为 52px 圆形(padding 4px + 头像 44px),透明背景 + 圆形投影;渐变胶囊底色移到 `.ai-fab::before` 用 opacity 淡入(渐变本身不可 transition);文字用 max-width 0→180px + margin-left 0→10px + translateX(-10px)→0 展开,悬停/:focus-visible 均触发;滚动隐藏逻辑保留
|
||||
- 调速:展开放慢至 0.55s cubic-bezier(0.22,1,0.36,1) ease-out(文字 opacity 延迟 0.08s),收合 0.32s ease-in 稍快回收;利用"transition 定义在目标态"机制区分展开/收合速度
|
||||
@ -1,352 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>互联网产品开发实训系统</title>
|
||||
<!--[if lt IE 11]>
|
||||
<script>
|
||||
window.location.href = "/html/ie.html";
|
||||
</script>
|
||||
<![endif]-->
|
||||
<style>
|
||||
:root {
|
||||
--ink: #06101f;
|
||||
--panel: rgba(8, 30, 52, 0.82);
|
||||
--line: rgba(80, 177, 214, 0.28);
|
||||
--cyan: #53d6ff;
|
||||
--mint: #8ff7d1;
|
||||
--gold: #ffd978;
|
||||
--text: #f3fbff;
|
||||
--muted: #9fc1d8;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<title>电商互联网产品开发实训系统</title>
|
||||
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
||||
<style>
|
||||
:root {
|
||||
--ink: #06101f;
|
||||
--panel: rgba(8, 30, 52, 0.82);
|
||||
--line: rgba(80, 177, 214, 0.28);
|
||||
--cyan: #53d6ff;
|
||||
--mint: #8ff7d1;
|
||||
--gold: #ffd978;
|
||||
--text: #f3fbff;
|
||||
--muted: #9fc1d8;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#loading-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Source Han Sans CN", sans-serif;
|
||||
background:
|
||||
linear-gradient(rgba(92, 192, 255, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(92, 192, 255, 0.08) 1px, transparent 1px),
|
||||
radial-gradient(circle at 18% 18%, rgba(83, 214, 255, 0.14), transparent 28%),
|
||||
radial-gradient(circle at 82% 72%, rgba(143, 247, 209, 0.1), transparent 30%),
|
||||
linear-gradient(135deg, #071426 0%, #06101f 50%, #091827 100%);
|
||||
background-size: 52px 52px, 52px 52px, auto, auto, auto;
|
||||
}
|
||||
|
||||
#loading-wrapper::before,
|
||||
#loading-wrapper::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#loading-wrapper::before {
|
||||
background:
|
||||
linear-gradient(120deg, transparent 0 22%, rgba(83, 214, 255, 0.14) 22.3%, transparent 22.8% 62%, rgba(255, 217, 120, 0.12) 62.3%, transparent 62.8%),
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.24), transparent 36%, rgba(0, 0, 0, 0.2));
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#loading-wrapper::after {
|
||||
border: 1px solid rgba(83, 214, 255, 0.16);
|
||||
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
|
||||
.loading-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 154px minmax(320px, 520px);
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
max-width: min(820px, calc(100vw - 40px));
|
||||
padding: 34px 38px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(14, 42, 68, 0.92), rgba(6, 20, 38, 0.9)),
|
||||
var(--panel);
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
animation: shell-in 0.7s ease both;
|
||||
}
|
||||
|
||||
.loading-mark {
|
||||
position: relative;
|
||||
width: 154px;
|
||||
height: 154px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(83, 214, 255, 0.28);
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 23px, rgba(83, 214, 255, 0.11) 24px, transparent 25px),
|
||||
linear-gradient(0deg, transparent 23px, rgba(83, 214, 255, 0.1) 24px, transparent 25px),
|
||||
rgba(5, 22, 39, 0.9);
|
||||
background-size: 25px 25px;
|
||||
}
|
||||
|
||||
.learning-card {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 34px;
|
||||
width: 100px;
|
||||
height: 72px;
|
||||
border: 1px solid rgba(143, 247, 209, 0.36);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, rgba(143, 247, 209, 0.18), rgba(83, 214, 255, 0.08));
|
||||
box-shadow: 0 10px 28px rgba(83, 214, 255, 0.12);
|
||||
animation: card-float 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.learning-card::before,
|
||||
.learning-card::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.learning-card::before {
|
||||
left: 15px;
|
||||
top: 18px;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
border-radius: 99px;
|
||||
background: var(--mint);
|
||||
box-shadow: 0 15px 0 rgba(211, 239, 255, 0.7), 0 30px 0 rgba(211, 239, 255, 0.42);
|
||||
}
|
||||
|
||||
.learning-card::after {
|
||||
right: -18px;
|
||||
bottom: -18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid var(--gold);
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.pulse-node {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
bottom: 22px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--cyan);
|
||||
box-shadow: 28px -8px 0 var(--gold), 58px 4px 0 var(--mint), 86px -18px 0 rgba(83, 214, 255, 0.72);
|
||||
}
|
||||
|
||||
.pulse-node::before {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
width: 112px;
|
||||
height: 36px;
|
||||
content: "";
|
||||
border-top: 1px solid rgba(83, 214, 255, 0.34);
|
||||
border-right: 1px solid rgba(143, 247, 209, 0.26);
|
||||
transform: skewX(-24deg);
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loading-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(83, 214, 255, 0.32);
|
||||
border-radius: 999px;
|
||||
color: var(--mint);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
background: rgba(83, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.loading-eyebrow::before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: var(--mint);
|
||||
box-shadow: 0 0 14px var(--mint);
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
margin: 16px 0 8px;
|
||||
color: var(--text);
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.loading-subtitle {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
margin: 26px 0 18px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(143, 190, 214, 0.16);
|
||||
}
|
||||
|
||||
.progress-track::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 44%;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--mint), var(--gold));
|
||||
animation: progress 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-steps {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.loading-step {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(83, 214, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
color: #c8e5f5;
|
||||
font-size: 13px;
|
||||
background: rgba(3, 19, 34, 0.52);
|
||||
}
|
||||
|
||||
.loading-step span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: var(--mint);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@keyframes shell-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
#loading-wrapper {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--text);
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Source Han Sans CN", sans-serif;
|
||||
background: linear-gradient(rgba(92, 192, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 192, 255, 0.08) 1px, transparent 1px), radial-gradient(circle at 18% 18%, rgba(83, 214, 255, 0.14), transparent 28%), radial-gradient(circle at 82% 72%, rgba(143, 247, 209, 0.1), transparent 30%), linear-gradient(135deg, #071426 0%, #06101f 50%, #091827 100%);
|
||||
background-size:
|
||||
52px 52px,
|
||||
52px 52px,
|
||||
auto,
|
||||
auto,
|
||||
auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes card-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
#loading-wrapper::before,
|
||||
#loading-wrapper::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
#loading-wrapper::before {
|
||||
background: linear-gradient(120deg, transparent 0 22%, rgba(83, 214, 255, 0.14) 22.3%, transparent 22.8% 62%, rgba(255, 217, 120, 0.12) 62.3%, transparent 62.8%), linear-gradient(0deg, rgba(0, 0, 0, 0.24), transparent 36%, rgba(0, 0, 0, 0.2));
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
#loading-wrapper::after {
|
||||
border: 1px solid rgba(83, 214, 255, 0.16);
|
||||
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.42);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
transform: translateX(-110%);
|
||||
.loading-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 154px minmax(320px, 520px);
|
||||
gap: 30px;
|
||||
align-items: center;
|
||||
max-width: min(820px, calc(100vw - 40px));
|
||||
padding: 34px 38px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(145deg, rgba(14, 42, 68, 0.92), rgba(6, 20, 38, 0.9)), var(--panel);
|
||||
box-shadow:
|
||||
0 24px 70px rgba(0, 0, 0, 0.34),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
animation: shell-in 0.7s ease both;
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translateX(82%);
|
||||
.loading-mark {
|
||||
position: relative;
|
||||
width: 154px;
|
||||
height: 154px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(83, 214, 255, 0.28);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, transparent 23px, rgba(83, 214, 255, 0.11) 24px, transparent 25px), linear-gradient(0deg, transparent 23px, rgba(83, 214, 255, 0.1) 24px, transparent 25px), rgba(5, 22, 39, 0.9);
|
||||
background-size: 25px 25px;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(240%);
|
||||
.learning-card {
|
||||
position: absolute;
|
||||
left: 27px;
|
||||
top: 34px;
|
||||
width: 100px;
|
||||
height: 72px;
|
||||
border: 1px solid rgba(143, 247, 209, 0.36);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, rgba(143, 247, 209, 0.18), rgba(83, 214, 255, 0.08));
|
||||
box-shadow: 0 10px 28px rgba(83, 214, 255, 0.12);
|
||||
animation: card-float 2.8s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.loading-shell {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 22px;
|
||||
padding: 26px;
|
||||
.learning-card::before,
|
||||
.learning-card::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.loading-mark {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
.learning-card::before {
|
||||
left: 15px;
|
||||
top: 18px;
|
||||
width: 70px;
|
||||
height: 5px;
|
||||
border-radius: 99px;
|
||||
background: var(--mint);
|
||||
box-shadow:
|
||||
0 15px 0 rgba(211, 239, 255, 0.7),
|
||||
0 30px 0 rgba(211, 239, 255, 0.42);
|
||||
}
|
||||
|
||||
.learning-card {
|
||||
left: 16px;
|
||||
top: 26px;
|
||||
.learning-card::after {
|
||||
right: -18px;
|
||||
bottom: -18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px solid var(--gold);
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.pulse-node {
|
||||
position: absolute;
|
||||
left: 22px;
|
||||
bottom: 22px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--cyan);
|
||||
box-shadow:
|
||||
28px -8px 0 var(--gold),
|
||||
58px 4px 0 var(--mint),
|
||||
86px -18px 0 rgba(83, 214, 255, 0.72);
|
||||
}
|
||||
|
||||
.pulse-node::before {
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
width: 112px;
|
||||
height: 36px;
|
||||
content: "";
|
||||
border-top: 1px solid rgba(83, 214, 255, 0.34);
|
||||
border-right: 1px solid rgba(143, 247, 209, 0.26);
|
||||
transform: skewX(-24deg);
|
||||
}
|
||||
|
||||
.loading-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.loading-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(83, 214, 255, 0.32);
|
||||
border-radius: 999px;
|
||||
color: var(--mint);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
background: rgba(83, 214, 255, 0.08);
|
||||
}
|
||||
|
||||
.loading-eyebrow::before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
background: var(--mint);
|
||||
box-shadow: 0 0 14px var(--mint);
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
font-size: 24px;
|
||||
margin: 16px 0 8px;
|
||||
color: var(--text);
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.loading-subtitle {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
position: relative;
|
||||
height: 8px;
|
||||
margin: 26px 0 18px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(143, 190, 214, 0.16);
|
||||
}
|
||||
|
||||
.progress-track::before {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 44%;
|
||||
content: "";
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--mint), var(--gold));
|
||||
animation: progress 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.loading-steps {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
|
||||
.loading-step {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(83, 214, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
color: #c8e5f5;
|
||||
font-size: 13px;
|
||||
background: rgba(3, 19, 34, 0.52);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="loading-wrapper">
|
||||
<div class="loading-shell" role="status" aria-live="polite">
|
||||
<div class="loading-mark" aria-hidden="true">
|
||||
<div class="learning-card"></div>
|
||||
<div class="pulse-node"></div>
|
||||
</div>
|
||||
<div class="loading-copy">
|
||||
<div class="loading-eyebrow">Teaching Lab System</div>
|
||||
<h1 class="loading-title">正在初始化教学环境</h1>
|
||||
<p class="loading-subtitle">正在同步课程资源、实训数据与学习进度,请稍候。</p>
|
||||
<div class="progress-track" aria-hidden="true"></div>
|
||||
<div class="loading-steps" aria-hidden="true">
|
||||
<div class="loading-step"><span>01</span>课程资源</div>
|
||||
<div class="loading-step"><span>02</span>实训任务</div>
|
||||
<div class="loading-step"><span>03</span>学习数据</div>
|
||||
|
||||
.loading-step span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: var(--mint);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@keyframes shell-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes card-float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes progress {
|
||||
0% {
|
||||
transform: translateX(-110%);
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: translateX(82%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(240%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.loading-shell {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 22px;
|
||||
padding: 26px;
|
||||
}
|
||||
|
||||
.loading-mark {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.learning-card {
|
||||
left: 16px;
|
||||
top: 26px;
|
||||
}
|
||||
|
||||
.loading-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.loading-steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="loading-wrapper">
|
||||
<div class="loading-shell" role="status" aria-live="polite">
|
||||
<div class="loading-mark" aria-hidden="true">
|
||||
<div class="learning-card"></div>
|
||||
<div class="pulse-node"></div>
|
||||
</div>
|
||||
<div class="loading-copy">
|
||||
<div class="loading-eyebrow">Teaching Lab System</div>
|
||||
<h1 class="loading-title">正在初始化教学环境</h1>
|
||||
<p class="loading-subtitle">正在同步课程资源、实训数据与学习进度,请稍候。</p>
|
||||
<div class="progress-track" aria-hidden="true"></div>
|
||||
<div class="loading-steps" aria-hidden="true">
|
||||
<div class="loading-step">
|
||||
<span>01</span>
|
||||
课程资源
|
||||
</div>
|
||||
<div class="loading-step">
|
||||
<span>02</span>
|
||||
实训任务
|
||||
</div>
|
||||
<div class="loading-step">
|
||||
<span>03</span>
|
||||
学习数据
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue