|
|
<!DOCTYPE html>
|
|
|
<!-- 声明文档类型，这里是HTML5 -->
|
|
|
|
|
|
<html lang="zh-cmn-Hans">
|
|
|
<!-- 开始HTML文档，指定语言为简体中文（简体，汉字） -->
|
|
|
|
|
|
<head>
|
|
|
<!-- 文档的头部 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 设置文档的字符编码为UTF-8 -->
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<!-- 告诉IE浏览器使用最新的渲染引擎 -->
|
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
<!-- 设置视口，以确保页面在不同设备上都能正确显示 -->
|
|
|
|
|
|
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
|
|
<!-- 设置网页的图标，图标路径使用了模板变量BASE_URL -->
|
|
|
|
|
|
<title>在线考试系统</title>
|
|
|
<!-- 设置网页的标题 -->
|
|
|
|
|
|
<style>
|
|
|
/* 内嵌样式表 */
|
|
|
#loading-mask {
|
|
|
/* 加载遮罩层的样式 */
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background: #fff;
|
|
|
user-select: none;
|
|
|
z-index: 9999;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.loading-wrapper {
|
|
|
/* 加载动画容器的样式 */
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -100%); /* 修正位置 */
|
|
|
}
|
|
|
.loading-dot {
|
|
|
/* 加载动画点的样式 */
|
|
|
animation: antRotate 1.2s infinite linear;
|
|
|
transform: rotate(45deg);
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
font-size: 64px;
|
|
|
width: 64px;
|
|
|
height: 64px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.loading-dot i {
|
|
|
/* 加载动画点内部的小圆圈的样式 */
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
position: absolute;
|
|
|
display: block;
|
|
|
background-color: #1890ff;
|
|
|
border-radius: 100%;
|
|
|
transform: scale(.75);
|
|
|
transform-origin: 50% 50%;
|
|
|
opacity: .3;
|
|
|
animation: antSpinMove 1s infinite linear alternate;
|
|
|
}
|
|
|
.loading-dot i:nth-child(1),
|
|
|
.loading-dot i:nth-child(2),
|
|
|
.loading-dot i:nth-child(3),
|
|
|
.loading-dot i:nth-child(4) {
|
|
|
/* 分别设置四个小圆圈的位置和动画延迟 */
|
|
|
}
|
|
|
@keyframes antRotate {
|
|
|
/* 定义旋转动画 */
|
|
|
to {
|
|
|
-webkit-transform: rotate(405deg);
|
|
|
transform: rotate(405deg);
|
|
|
}
|
|
|
}
|
|
|
@-webkit-keyframes antRotate {
|
|
|
/* 为旧版WebKit浏览器定义旋转动画 */
|
|
|
to {
|
|
|
-webkit-transform: rotate(405deg);
|
|
|
transform: rotate(405deg);
|
|
|
}
|
|
|
}
|
|
|
@keyframes antSpinMove {
|
|
|
/* 定义透明度变化动画 */
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
@-webkit-keyframes antSpinMove {
|
|
|
/* 为旧版WebKit浏览器定义透明度变化动画 */
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 文档的主体 -->
|
|
|
<noscript>
|
|
|
<!-- 如果浏览器禁用了JavaScript，显示此消息 -->
|
|
|
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
|
</noscript>
|
|
|
<div id="app">
|
|
|
<!-- Vue应用的挂载点 -->
|
|
|
<div id="loading-mask">
|
|
|
<!-- 加载遮罩层 -->
|
|
|
<div class="loading-wrapper">
|
|
|
<!-- 加载动画的容器 -->
|
|
|
<span class="loading-dot loading-dot-spin">
|
|
|
<!-- 加载动画，包含四个小圆圈 -->
|
|
|
<i></i><i></i><i></i><i></i>
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- built files will be auto injected -->
|
|
|
<!-- 注释说明构建后的文件会自动注入，通常指Vue单页应用的JavaScript和CSS文件 -->
|
|
|
</body>
|
|
|
|
|
|
</html> |
