Compare commits
2 Commits
89d08986cf
...
c3b1e99267
| Author | SHA1 | Date |
|---|---|---|
|
|
c3b1e99267 | 2 days ago |
|
|
4b20ea3d99 | 3 days ago |
@ -1,352 +1,363 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<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>
|
html,
|
||||||
<meta charset="utf-8">
|
body {
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
width: 100%;
|
||||||
<meta name="renderer" content="webkit">
|
height: 100%;
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
margin: 0;
|
||||||
<link rel="icon" href="/favicon.ico">
|
overflow: hidden;
|
||||||
<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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
#loading-wrapper {
|
||||||
opacity: 1;
|
position: relative;
|
||||||
transform: translateY(0);
|
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 {
|
#loading-wrapper::before,
|
||||||
0%,
|
#loading-wrapper::after {
|
||||||
100% {
|
position: absolute;
|
||||||
transform: translateY(0);
|
inset: 0;
|
||||||
|
content: "";
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
#loading-wrapper::before {
|
||||||
transform: translateY(-8px);
|
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 {
|
#loading-wrapper::after {
|
||||||
to {
|
border: 1px solid rgba(83, 214, 255, 0.16);
|
||||||
transform: rotate(360deg);
|
box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.42);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes progress {
|
.loading-shell {
|
||||||
0% {
|
position: relative;
|
||||||
transform: translateX(-110%);
|
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% {
|
.loading-mark {
|
||||||
transform: translateX(82%);
|
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% {
|
.learning-card {
|
||||||
transform: translateX(240%);
|
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) {
|
.learning-card::before,
|
||||||
.loading-shell {
|
.learning-card::after {
|
||||||
grid-template-columns: 1fr;
|
position: absolute;
|
||||||
gap: 22px;
|
content: "";
|
||||||
padding: 26px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-mark {
|
.learning-card::before {
|
||||||
width: 132px;
|
left: 15px;
|
||||||
height: 132px;
|
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 {
|
.learning-card::after {
|
||||||
left: 16px;
|
right: -18px;
|
||||||
top: 26px;
|
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 {
|
.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 {
|
.loading-steps {
|
||||||
grid-template-columns: 1fr;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.loading-step {
|
||||||
@media (prefers-reduced-motion: reduce) {
|
padding: 10px 12px;
|
||||||
*,
|
border: 1px solid rgba(83, 214, 255, 0.18);
|
||||||
*::before,
|
border-radius: 8px;
|
||||||
*::after {
|
color: #c8e5f5;
|
||||||
animation-duration: 0.001ms !important;
|
font-size: 13px;
|
||||||
animation-iteration-count: 1 !important;
|
background: rgba(3, 19, 34, 0.52);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</style>
|
.loading-step span {
|
||||||
</head>
|
display: block;
|
||||||
|
margin-bottom: 4px;
|
||||||
<body>
|
color: var(--mint);
|
||||||
<div id="app">
|
font-size: 12px;
|
||||||
<div id="loading-wrapper">
|
font-weight: 700;
|
||||||
<div class="loading-shell" role="status" aria-live="polite">
|
}
|
||||||
<div class="loading-mark" aria-hidden="true">
|
|
||||||
<div class="learning-card"></div>
|
@keyframes shell-in {
|
||||||
<div class="pulse-node"></div>
|
from {
|
||||||
</div>
|
opacity: 0;
|
||||||
<div class="loading-copy">
|
transform: translateY(14px);
|
||||||
<div class="loading-eyebrow">Teaching Lab System</div>
|
}
|
||||||
<h1 class="loading-title">正在初始化教学环境</h1>
|
|
||||||
<p class="loading-subtitle">正在同步课程资源、实训数据与学习进度,请稍候。</p>
|
to {
|
||||||
<div class="progress-track" aria-hidden="true"></div>
|
opacity: 1;
|
||||||
<div class="loading-steps" aria-hidden="true">
|
transform: translateY(0);
|
||||||
<div class="loading-step"><span>01</span>课程资源</div>
|
}
|
||||||
<div class="loading-step"><span>02</span>实训任务</div>
|
}
|
||||||
<div class="loading-step"><span>03</span>学习数据</div>
|
|
||||||
|
@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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<script type="module" src="/src/main.js"></script>
|
||||||
<script type="module" src="/src/main.js"></script>
|
</body>
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
</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
Loading…
Reference in New Issue