pxrztuq3h
/
Dormitory_Management_System
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wang

Browse Source
pull/2/head
wang ziting 3 months ago
parent 66eefa2dab
commit 28f99910d6
5 changed files with 546 additions and 305 deletions
Show Stats Download Patch File Download Diff File

63
src/main/webapp/WEB-INF/jsp/admin-add.jsp
Unescape View File

@ -5,22 +5,32 @@
Date: 2020/2/12 Date: 2020/2/12
Time: 13:06 Time: 13:06
To change this template use File | Settings | File Templates. To change this template use File | Settings | File Templates.
上面这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
--%> --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html> <html>
<head> <head>
<title>Title</title> <title>Title</title>
<!-- 引入Bootstrap的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于实现页面的基本布局和样式美化 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<!-- 引入layer组件的CSS样式文件，用于实现一些弹出层等样式效果 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layer.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layer.css">
<!-- 引入jQuery库的JavaScript文件，这是一个常用的JavaScript库，用于简化DOM操作、事件处理等功能 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!-- 引入layer组件的JavaScript文件，用于在页面中实现弹出层提示等交互功能 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
</head> </head>
<body background="${pageContext.request.contextPath}/images/01.jpg"> <body background="${pageContext.request.contextPath}/images/01.jpg">
<!-- 添加两个换行，用于页面布局上的间隔 -->
<br><br> <br><br>
<!-- 创建一个水平布局的表单行（使用Bootstrap的row和form-horizontal类），用于放置各种表单元素 -->
<div class="row form-horizontal"> <div class="row form-horizontal">
<!-- 创建一个表单组，用于对一组相关的表单元素进行分组，方便布局和样式设置 -->
<div class="form-group"> <div class="form-group">
<!-- 创建一个用于显示标签的元素，设置其占2列宽度（基于Bootstrap的网格系统），添加控制标签的类以及自定义的form-label类，用于显示用户名的文本标签 -->
<label class="col-sm-2 control-label form-label">用户名:</label> <label class="col-sm-2 control-label form-label">用户名:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，添加form-control类用于应用Bootstrap的输入框样式，设置name和id属性，方便后续通过JavaScript等操作该元素以及提交表单时传递对应的值 -->
<input type="text" class="form-control" name="username" id="username"> <input type="text" class="form-control" name="username" id="username">
</div> </div>
</div> </div>
@ -51,8 +61,11 @@
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label form-label">权限:</label> <label class="col-sm-2 control-label form-label">权限:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个下拉选择框，添加form-control类应用样式，设置name和id属性，用于选择用户的权限 -->
<select class="form-control" name="power" id="power"> <select class="form-control" name="power" id="power">
<!-- 设置默认选中的选项，值为0，显示文本为“访客” -->
<option value="0" selected>访客</option> <option value="0" selected>访客</option>
<!-- 使用JSTL标签进行条件判断，如果在会话范围（sessionScope）中的adminInfo对象的power属性大于0，则显示宿舍长这个选项 -->
<c:if test="${sessionScope.adminInfo.power > 0}"> <c:if test="${sessionScope.adminInfo.power > 0}">
<option value="1">宿舍长</option> <option value="1">宿舍长</option>
</c:if> </c:if>
@ -75,35 +88,47 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 创建一个新的行，用于放置按钮等操作元素 -->
<div class="row"> <div class="row">
<!-- 创建一个表单组，并设置按钮组的样式，通过col-md-offset-5类设置偏移量，使其在页面中水平居中显示（基于Bootstrap的列偏移功能） -->
<div class="form-group btn-group col-md-offset-5"> <div class="form-group btn-group col-md-offset-5">
<!-- 创建一个按钮，添加btn和btn-primary类用于应用Bootstrap的按钮主色调样式，设置点击事件，点击时调用toValidate()函数 -->
<button class="btn btn-primary" onclick="toValidate()">确认添加</button> <button class="btn btn-primary" onclick="toValidate()">确认添加</button>
<!-- 创建一个链接按钮，添加btn和btn-default类用于应用Bootstrap的默认按钮样式，点击时跳转到查找所有管理员的页面（路径通过表达式语言拼接而成） -->
<a type="button" class="btn btn-default" href="${pageContext.request.contextPath}/findAllAdmin">返回列表</a> <a type="button" class="btn btn-default" href="${pageContext.request.contextPath}/findAllAdmin">返回列表</a>
</div> </div>
</div> </div>
</body> </body>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<script src="${pageContext.request.contextPath}/js/validate.js"></script> <script src="${pageContext.request.contextPath}/js/validate.js"></script>
<script> <script>
$(function () { $(function () {
//ajax校验用户名是否存在 // 在文档加载完成后执行以下代码，这是jQuery的就绪函数，确保DOM元素都已加载完毕再执行相关操作
// 当用户名输入框的值发生改变时（change事件）执行以下函数
$("#username").change(function () { $("#username").change(function () {
//取username的值 // 获取用户名输入框（id为username）中的值，通过jQuery的val()方法获取
var u_name = $(this).val(); var u_name = $(this).val();
//ajax异步请求 // 使用jQuery的$.get()方法发起一个GET类型的Ajax异步请求
// 请求的URL是通过表达式语言拼接而成的路径，传递的参数是一个包含用户名（u_name）的对象，请求成功后会执行回调函数
$.get("${pageContext.request.contextPath}/checkUserName",{"u_name":u_name},function (msg) { $.get("${pageContext.request.contextPath}/checkUserName",{"u_name":u_name},function (msg) {
//$(".error").html(msg); //$(".error").html(msg);
// 根据服务器返回的消息（msg）进行判断，如果消息是“账号可用”，说明用户名已存在，弹出相应提示信息
if (msg == "账号可用") { if (msg == "账号可用") {
layer.msg('用户名已存在'); layer.msg('用户名已存在');
}else { } else {
// 否则说明用户名可用，弹出相应提示信息
layer.msg('用户名可用'); layer.msg('用户名可用');
} }
}); });
}); });
}); });
// 当学/工号输入框的值发生改变时（change事件）执行以下函数
$("#uid").change(function () { $("#uid").change(function () {
// 获取学/工号输入框（id为uid）中的值，并去除前后空格（trim()方法）
var uid = $("#uid").val().trim(); var uid = $("#uid").val().trim();
// 使用jQuery的$.get()方法发起一个GET类型的Ajax异步请求，请求的URL是检查学/工号是否已注册的接口（通过表达式语言拼接路径），传递学/工号参数
// 请求成功后会执行回调函数，根据返回的数据（data）进行判断，如果data为真（说明学/工号已被注册），则弹出相应提示信息
$.get("${pageContext.request.contextPath}/checkUid",{"uid":uid},function (data) { $.get("${pageContext.request.contextPath}/checkUid",{"uid":uid},function (data) {
if (data) { if (data) {
layer.msg('该学/工号已被注册，请重新输入'); layer.msg('该学/工号已被注册，请重新输入');
@ -111,12 +136,14 @@
}); });
}); });
function toValidate(){ function toValidate(){
// 创建一个validate对象实例，用于对表单进行验证，传入一个配置对象
var val = new validate({ var val = new validate({
/*rules里面是检验规则， /*rules里面是检验规则，
*key为需要检验的input的id, * key为需要检验的input的id,
*value为此input对应的检验规则 * value为此input对应的检验规则
*/ */
rules:{ rules:{
// 设置用户名输入框（id为username）的验证规则为不能为空（notEmpty）
username:"notEmpty", username:"notEmpty",
name:"notEmpty", name:"notEmpty",
uid:"notEmpty", uid:"notEmpty",
@ -126,12 +153,15 @@
}, },
/*submitFun里面为检验成功后要执行的方法*/ /*submitFun里面为检验成功后要执行的方法*/
submitFun:function(){ submitFun:function(){
// 如果验证成功，调用toSubmit()函数，该函数用于提交表单数据等后续操作
toSubmit(); toSubmit();
} }
}) })
} }
function toSubmit(){ function toSubmit(){
//增加管理员，异步提交管理员表单 // 以下是用于向服务器提交添加管理员表单数据的函数
// 获取用户名输入框的值，并去除前后空格
var username = $("#username").val().trim(); var username = $("#username").val().trim();
var password = $("#password").val().trim(); var password = $("#password").val().trim();
var name = $("#name").val().trim(); var name = $("#name").val().trim();
@ -139,10 +169,11 @@
var phone = $("#phone").val().trim(); var phone = $("#phone").val().trim();
var power = $("#power").val().trim(); var power = $("#power").val().trim();
var description = $("#description").val().trim(); var description = $("#description").val().trim();
// 使用jQuery的$.ajax()方法发起一个POST类型的Ajax异步请求
$.ajax({ $.ajax({
url: "${pageContext.request.contextPath}/addAdmin",//要请求的服务器url // 设置请求的URL，指向添加管理员的接口（通过表达式语言拼接路径）
//这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取 url: "${pageContext.request.contextPath}/addAdmin",
//data:{method:"ajaxTest",val:value}, // 设置请求的数据，将各个表单字段的值组成一个对象传递给服务器，服务器可以通过相应的方式获取这些参数
data: { data: {
username:username, username:username,
password:password, password:password,
@ -152,13 +183,16 @@
power: power, power: power,
description: description description: description
}, },
type: "POST", //请求方式为POST type: "POST", // 设置请求方式为POST
dataType: "json", //服务器返回的数据是什么类型 dataType: "json", // 期望服务器返回的数据类型为JSON格式
success: function(result){ //这个方法会在服务器执行成功时被调用 ，参数result就是服务器返回的值(现在是json类型) success: function(result){ // 当服务器成功处理请求并返回数据时，会执行这个回调函数，参数result就是服务器返回的值（现在是JSON类型）
if(result){ if(result){
// 如果服务器返回的结果为真（通常表示添加成功），弹出添加成功的提示信息
layer.msg('添加成功'); layer.msg('添加成功');
// 使用setTimeout()函数设置一个定时器，2秒后执行函数，这里是跳转到查找所有管理员的页面（通过修改浏览器的当前地址实现）
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}else { }else {
// 如果服务器返回的结果为假（通常表示添加失败），弹出添加失败的提示信息，并提示联系管理员
layer.msg('添加失败，请联系管理员'); layer.msg('添加失败，请联系管理员');
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
} }
@ -166,5 +200,4 @@
}); });
} }
</script> </script>
</body>
</html> </html>

87
src/main/webapp/WEB-INF/jsp/admin-edit.jsp
Unescape View File

@ -4,120 +4,153 @@
Date: 2020/2/12 Date: 2020/2/12
Time: 13:08 Time: 13:08
To change this template use File | Settings | File Templates. To change this template use File | Settings | File Templates.
这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
--%> --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html> <html>
<head> <head>
<title>Title</title> <title>Title</title>
<!-- 引入Bootstrap的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于实现页面的基本布局和样式美化 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<!-- 引入layer组件的CSS样式文件，用于实现一些弹出层等样式效果 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layer.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layer.css">
<!-- 引入jQuery库的JavaScript文件，这是一个常用的JavaScript库，用于简化DOM操作、事件处理等功能 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!-- 引入layer组件的JavaScript文件，用于在页面中实现弹出层提示等交互功能 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
</head> </head>
<body background="${pageContext.request.contextPath}/images/01.jpg"> <body background="${pageContext.request.contextPath}/images/01.jpg">
<!-- 添加两个换行，用于页面布局上的间隔 -->
<br><br> <br><br>
<!-- 创建一个隐藏的输入框，设置id和name属性为“id”，通过表达式语言获取并设置其值为“ad.id”（推测“ad”是某个从后台传递过来的管理员对象相关的数据），这个输入框可能用于存储要编辑的管理员记录的唯一标识，方便后续提交表单时传递给服务器 -->
<input type="hidden" id="id" name="id" value="${ad.id}"> <input type="hidden" id="id" name="id" value="${ad.id}">
<!-- 创建一个水平布局的表单行（使用Bootstrap的row和form-horizontal类），用于放置各种表单元素 -->
<div class="row form-horizontal"> <div class="row form-horizontal">
<!-- 创建一个表单组，用于对一组相关的表单元素进行分组，方便布局和样式设置 -->
<div class="form-group"> <div class="form-group">
<!-- 创建一个用于显示标签的元素，设置其占2列宽度（基于Bootstrap的网格系统），添加控制标签的类以及自定义的form-label类，用于显示用户名的文本标签 -->
<label class="col-sm-2 control-label form-label">用户名:</label> <label class="col-sm-2 control-label form-label">用户名:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，设置为只读（readonly），通过表达式语言获取并设置其值为“ad.username”，添加form-control类用于应用Bootstrap的输入框样式，设置name和id属性，方便后续通过JavaScript等操作该元素以及提交表单时传递对应的值，此处设置只读可能表示该用户名不允许在此处修改 -->
<input type="text" readonly value="${ad.username}" class="form-control" name="username" id="username"> <input type="text" readonly value="${ad.username}" class="form-control" name="username" id="username">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label form-label">姓名:</label> <label class="col-sm-2 control-label form-label">姓名:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，设置为只读，通过表达式语言获取并设置其值为“ad.name”，添加form-control类用于应用Bootstrap的输入框样式，设置name和id属性，此处设置只读可能有相应业务逻辑决定暂不允许修改 -->
<input type="text" readonly value="${ad.name}" class="form-control" name="name" id="name"> <input type="text" readonly value="${ad.name}" class="form-control" name="name" id="name">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label form-label">学/工号:</label> <label class="col-sm-2 control-label form-label">学/工号:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，添加form-control类应用样式，通过表达式语言获取并设置其值为“ad.uid”，设置name和id属性，用于输入或显示学/工号，从此处未设置只读来看可能是允许修改该字段内容 -->
<input type="text" class="form-control" value="${ad.uid}" name="uid" id="uid"> <input type="text" class="form-control" value="${ad.uid}" name="uid" id="uid">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label form-label">手机号:</label> <label class="col-sm-2 control-label form-label">手机号:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，通过表达式语言获取并设置其值为“ad.phone”，添加form-control类应用样式，设置name和id属性，用于输入或显示手机号 -->
<input type="text" value="${ad.phone}" class="form-control" name="phone" id="phone"> <input type="text" value="${ad.phone}" class="form-control" name="phone" id="phone">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label form-label">描述:</label> <label class="col-sm-2 control-label form-label">描述:</label>
<div class="col-sm-8"> <div class="col-sm-8">
<!-- 创建一个文本输入框，通过表达式语言获取并设置其值为“ad.description”，添加form-control类应用样式，设置name和id属性，用于输入或显示管理员相关的描述信息 -->
<input type="text" class="form-control" value="${ad.description}" name="description" id="description"> <input type="text" class="form-control" value="${ad.description}" name="description" id="description">
</div> </div>
</div> </div>
</div> </div>
<!-- 创建一个新的行，用于放置按钮等操作元素 -->
<div class="row"> <div class="row">
<!-- 创建一个表单组，并设置按钮组的样式，通过col-md-offset-5类设置偏移量，使其在页面中水平居中显示（基于Bootstrap的列偏移功能） -->
<div class="form-group btn-group col-md-offset-5"> <div class="form-group btn-group col-md-offset-5">
<!-- 创建一个按钮，添加btn和btn-warning类用于应用Bootstrap的警告色调样式，设置点击事件，点击时调用toValidate()函数，该按钮用于触发确认修改的操作 -->
<button class="btn btn-warning" onclick="toValidate()">确认修改</button> <button class="btn btn-warning" onclick="toValidate()">确认修改</button>
<!-- 创建一个链接按钮，添加btn和btn-primary类用于应用Bootstrap的主色调样式，点击时跳转到查找所有管理员的页面（路径通过表达式语言拼接而成），用于返回管理员列表页面 -->
<a type="button" href="${pageContext.request.contextPath}/findAllAdmin" class="btn btn-primary">返回列表</a> <a type="button" href="${pageContext.request.contextPath}/findAllAdmin" class="btn btn-primary">返回列表</a>
</div> </div>
</div> </div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<script src="${pageContext.request.contextPath}/js/validate.js"></script> <script src="${pageContext.request.contextPath}/js/validate.js"></script>
<script> <script>
function toValidate(){ function toValidate(){
// 创建一个validate对象实例，用于对表单进行验证，传入一个配置对象
var val = new validate({ var val = new validate({
/*rules里面是检验规则， /*rules里面是检验规则，
*key为需要检验的input的id, * key为需要检验的input的id,
*value为此input对应的检验规则 * value为此input对应的检验规则
*/ */
rules:{ rules:{
// 设置姓名输入框（id为name）的验证规则为不能为空（notEmpty）
name:"notEmpty", name:"notEmpty",
// 设置学/工号输入框（id为uid）的验证规则为不能为空（notEmpty）
uid:"notEmpty", uid:"notEmpty",
// 设置描述输入框（id为description）的验证规则为不能为空（notEmpty）
description:"notEmpty", description:"notEmpty",
// 设置手机号输入框（id为phone）的验证规则为符合手机号码格式（mobile，这里应该是在validate.js中自定义的验证规则，用于校验手机号合法性）
phone:"mobile", phone:"mobile",
}, },
/*submitFun里面为检验成功后要执行的方法*/ /*submitFun里面为检验成功后要执行的方法*/
submitFun:function(){ submitFun:function(){
// 如果验证成功，调用toSubmit()函数，该函数用于提交表单数据等后续操作
toSubmit(); toSubmit();
} }
}) })
} }
function toSubmit(){ function toSubmit(){
//增加管理员，异步提交管理员表单 // 以下是用于向服务器提交修改管理员表单数据的函数
// 获取隐藏输入框（id为id）中的值，并去除前后空格（trim()方法），该值是要修改的管理员记录的唯一标识
var id = $("#id").val().trim(); var id = $("#id").val().trim();
var username = $("#username").val().trim(); var username = $("#username").val().trim();
var name = $("#name").val().trim(); var name = $("#name").val().trim();
var uid = $("#uid").val().trim(); var uid = $("#uid").val().trim();
var phone = $("#phone").val().trim(); var phone = $("#phone").val().trim();
var description = $("#description").val().trim(); var description = $("#description").val().trim();
// 使用layer组件弹出一个确认框，提示用户是否确定要修改，当用户点击确认按钮（“确定”）时，执行回调函数中的代码，回调函数接收一个参数index用于后续操作该弹出层（如关闭它）
layer.confirm('确定要修改吗',function (index) { layer.confirm('确定要修改吗',function (index) {
// 判断当前用户的权限（通过表达式语言从会话范围获取adminInfo对象的power属性），如果小于3（推测3及以上为有足够权限修改管理员信息的级别），则提示用户权限不足，关闭弹出层，并且终止后续操作（返回false）
if (${sessionScope.adminInfo.power < 3}) {//非超级管理员不能修改管理员信息 if (${sessionScope.adminInfo.power < 3}) {//非超级管理员不能修改管理员信息
layer.msg('对不起，您权限不足'); layer.msg('对不起，您权限不足');
layer.close(index); layer.close(index);
return false; return false;
} }
$.ajax({ // 使用jQuery的$.ajax()方法发起一个POST类型的Ajax异步请求
url: "${pageContext.request.contextPath}/editAdmin",//要请求的服务器url $.ajax({
//这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取 // 设置请求的URL，指向修改管理员信息的接口（通过表达式语言拼接路径）
//data:{method:"ajaxTest",val:value}, url: "${pageContext.request.contextPath}/editAdmin",
data: { // 设置请求的数据，将各个表单字段的值组成一个对象传递给服务器，服务器可以通过相应的方式获取这些参数
id:id, data: {
username:username, id:id,
name:name, username:username,
uid:uid, name:name,
phone: phone, uid:uid,
description: description phone: phone,
}, description: description
type: "POST", //请求方式为POST },
dataType: "json", //服务器返回的数据是什么类型 type: "POST", // 设置请求方式为POST
success: function(result){ //这个方法会在服务器执行成功时被调用 ，参数result就是服务器返回的值(现在是json类型) dataType: "json", // 期望服务器返回的数据类型为JSON格式
if(result){ success: function(result){ // 当服务器成功处理请求并返回数据时，会执行这个回调函数，参数result就是服务器返回的值（现在是JSON类型）
layer.msg('修改成功'); if(result){
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000); // 如果服务器返回的结果为真（通常表示修改成功），弹出修改成功的提示信息
}else { layer.msg('修改成功');
layer.msg('修改失败，请联系管理员'); // 使用setTimeout()函数设置一个定时器，2秒后执行函数，这里是跳转到查找所有管理员的页面（通过修改浏览器的当前地址实现）
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000); setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}else {
// 如果服务器返回的结果为假（通常表示修改失败），弹出修改失败的提示信息，并提示联系管理员
layer.msg('修改失败，请联系管理员');
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}
} }
} });
});
}); });
} }
</script> </script>
</body>
</html> </html>

247
src/main/webapp/WEB-INF/jsp/admin-list.jsp
Unescape View File

@ -4,6 +4,7 @@
Date: 2020/2/10 Date: 2020/2/10
Time: 21:45 Time: 21:45
To change this template use File | Settings | File Templates. To change this template use File | Settings | File Templates.
这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
--%> --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
@ -11,38 +12,59 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title></title> <title></title>
<!-- 设置页面渲染引擎为webkit，用于在一些浏览器中更好地渲染页面样式等 -->
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<!-- 配置页面兼容模式，使其在IE浏览器下以最高级别的标准模式（IE=edge）以及启用Chrome Frame（chrome=1）来渲染页面，以提高兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 引入字体相关的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于页面中字体的显示样式设置 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
<!-- 引入xadmin框架的CSS样式文件，用于实现该框架下特定的页面布局和样式效果 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
<!-- 引入Bootstrap的CSS样式文件，用于实现页面基本的布局和样式美化 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
<!-- 引入jQuery库的JavaScript文件，这是一个常用的JavaScript库，用于简化DOM操作、事件处理等功能 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!-- 引入layui框架的JavaScript核心文件，layui是一个用于构建页面交互界面的前端框架 -->
<script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script> <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
<!-- 引入xadmin框架的JavaScript文件，用于实现该框架相关的功能和交互效果 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>
<!-- 引入Bootstrap的JavaScript文件，用于实现Bootstrap框架相关的交互功能，比如一些组件的动态效果等 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<!-- 再次引入jQuery库的JavaScript文件，此处可能存在重复引入问题，可根据实际情况进行优化 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
<!-- 以下是针对IE浏览器版本小于9的情况，引入html5shiv库的JavaScript文件，用于让IE低版本支持HTML5标签 -->
<!-- 以及引入respond.js库的JavaScript文件，用于让IE低版本支持CSS3的媒体查询功能，提升页面在低版本IE浏览器下的兼容性 -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<script> <script>
function changePageSize() { function changePageSize() {
//获取下拉框的值 // 获取下拉框（id为changePageSize）中用户选择的值，该下拉框通常用于选择每页显示的数据条数
var pageSize = $("#changePageSize").val(); var pageSize = $("#changePageSize").val();
//向服务器发送请求，改变每页显示条数 // 通过修改浏览器地址栏的URL（location.href）向服务器发送请求，传递新的每页显示条数参数（pageSize），同时设置当前页码为1，用于改变每页显示条数后刷新页面数据展示
location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size="+ pageSize; location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size=" + pageSize;
} }
// 当搜索按钮（id为serarch_btn）被点击时执行以下函数
$("#serarch_btn").click(function () { $("#serarch_btn").click(function () {
// 获取输入框（id为keyword）中的用户输入的关键字内容，该关键字通常用于在查找管理员数据时进行筛选
var keyword = $("#keyword").val(); var keyword = $("#keyword").val();
location.href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=5&keyword="+keyword; // 通过修改浏览器地址栏的URL向服务器发送请求，传递关键字参数、设置当前页码为1以及每页显示条数为5，用于根据关键字进行搜索并刷新页面展示搜索结果
location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size=5&keyword=" + keyword;
}); });
// 当刷新按钮（id为refresh，代码中未展示该按钮的HTML部分，但推测存在此功能按钮）被点击时执行以下函数
$("#refresh").click(function () { $("#refresh").click(function () {
// 重置表单（id为myform），将表单中的输入框等元素的值恢复到初始状态（此处假设表单中各元素有相应的重置逻辑实现）
$("#myform").reset(); $("#myform").reset();
location.href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=5"; // 通过修改浏览器地址栏的URL向服务器发送请求，设置当前页码为1以及每页显示条数为5，用于刷新页面展示初始的数据列表
location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size=5";
}); });
</script> </script>
</head> </head>
<body> <body>
<%-- 以下这部分代码被注释掉了，原本可能是用于页面导航栏的展示，包含了面包屑导航以及一个刷新按钮，点击刷新按钮可重新加载当前页面 --%>
<%--<div class="x-nav"> <%--<div class="x-nav">
<span class="layui-breadcrumb"> <span class="layui-breadcrumb">
<a href="">首页</a> <a href="">首页</a>
@ -53,32 +75,46 @@
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a> <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>--%> </div>--%>
<!-- 使用layui的流体布局容器类layui-fluid，使内部元素能自适应页面宽度 -->
<div class="layui-fluid"> <div class="layui-fluid">
<!-- 创建一个layui的行元素，并设置列间距为15px，用于放置页面中的各种模块 -->
<div class="layui-row layui-col-space15"> <div class="layui-row layui-col-space15">
<div class="layui-col-md12"> <div class="layui-col-md12">
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-body "> <div class="layui-card-body ">
<!-- 创建一个表单，设置id为myform，应用layui的表单样式以及列间距样式，用于放置搜索等相关的表单元素 -->
<form id="myform" class="layui-form layui-col-space5"> <form id="myform" class="layui-form layui-col-space5">
<!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，用于放置一个文本输入框 -->
<div class="layui-inline layui-show-xs-block"> <div class="layui-inline layui-show-xs-block">
<!-- 创建一个文本输入框，设置自动补全关闭，添加占位提示文字，设置name和id属性，方便后续传递参数以及操作该元素，同时通过表达式语言获取并设置输入框的值（如果存在相应参数传入的话） -->
<input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}"> <input class="layui-input" type="text" autocomplete="off" placeholder="请输入关键字" name="keyword" id="keyword" value="${param.keyword}">
</div> </div>
<!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，用于放置一个搜索按钮 -->
<div class="layui-inline layui-show-xs-block"> <div class="layui-inline layui-show-xs-block">
<!-- 创建一个layui的按钮，设置id为serarch_btn，添加相应的提交和过滤属性（lay-submit和lay-filter），按钮内部通过图标展示搜索的图标样式 -->
<button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button> <button class="layui-btn" id="serarch_btn" lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
</div> </div>
<!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，并且设置靠右对齐（x-right类，推测是自定义的样式类用于控制布局），用于放置一个链接按钮 -->
<div class="layui-inline layui-show-xs-block x-right"> <div class="layui-inline layui-show-xs-block x-right">
<!-- 创建一个layui的常规按钮样式的链接按钮，点击可跳转到默认的管理员列表页面（设置了固定的每页显示5条数据），按钮内部通过图标展示相应的图标样式 -->
<a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=5"><i class="layui-icon">&#xe669;</i></a> <a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=5"><i class="layui-icon">&#xe669;</i></a>
</div> </div>
</form> </form>
</div> </div>
<xblock> <xblock>
<!-- 创建一个添加按钮，点击可跳转到添加管理员的页面，按钮应用layui的常规按钮样式，按钮内部通过图标展示添加的图标样式 -->
<a href="${pageContext.request.contextPath}/adminAdd" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a> <a href="${pageContext.request.contextPath}/adminAdd" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe654;</i>添加</a>
<!-- 创建一个导出按钮，点击时调用exportInfo函数（会根据权限判断是否能导出），按钮应用layui的暖色调按钮样式，按钮内部通过图标展示导出的图标样式 -->
<a onclick="exportInfo(${sessionScope.adminInfo.power})" class="layui-btn layui-btn-warm" href="javascript:;"><i class="layui-icon">&#xe67c;</i>导出</a> <a onclick="exportInfo(${sessionScope.adminInfo.power})" class="layui-btn layui-btn-warm" href="javascript:;"><i class="layui-icon">&#xe67c;</i>导出</a>
<!-- 创建一个靠右对齐的文本元素，用于展示总的数据条数信息，通过表达式语言获取并展示总数据条数（pageInfo.total） -->
<span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span> <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
</xblock> </xblock>
<div class="layui-card-body"> <div class="layui-card-body">
<!-- 创建一个layui的表格，应用layui的表格和表单样式，用于展示管理员数据列表 -->
<table class="layui-table layui-form"> <table class="layui-table layui-form">
<thead> <thead>
<tr style="text-align: center"> <tr style="text-align: center">
<!-- 表格表头部分，分别设置各列的标题，如ID、用户名等，并且设置文本居中对齐 -->
<th style="text-align: center">ID</th> <th style="text-align: center">ID</th>
<th style="text-align: center">用户名</th> <th style="text-align: center">用户名</th>
<th style="text-align: center">姓名</th> <th style="text-align: center">姓名</th>
@ -92,35 +128,43 @@
<% <%
int j = 1; int j = 1;
%> %>
<!-- 使用JSTL的<>标签循环遍历从服务器端获取的管理员数据列表（pageInfo.list），每次循环将一个管理员对象赋值给admin变量 -->
<c:forEach items="${pageInfo.list}" var="admin"> <c:forEach items="${pageInfo.list}" var="admin">
<tr id="light" style="text-align: center"> <tr id="light" style="text-align: center">
<td><%=j++%></td> <!-- 在表格行中展示数据，ID列通过Java代码片段（<%=j++%>）自增序号来显示序号，其他列通过表达式语言展示管理员对象的各个属性值，如用户名、姓名等 -->
<td>${admin.username}</td> <td><%=j++%></td>
<td>${admin.name}</td> <td>${admin.username}</td>
<td>${admin.uid}</td> <td>${admin.name}</td>
<td>${admin.phone}</td> <td>${admin.uid}</td>
<td>${admin.power}</td> <td>${admin.phone}</td>
<td>${admin.description}</td> <td>${admin.power}</td>
<td class="td-manage"> <td>${admin.description}</td>
<a title="编辑" href="${pageContext.request.contextPath}/adminEdit?id=${admin.id}"> <td class="td-manage">
<i class="layui-icon">&#xe642;</i> <!-- 创建一个编辑操作的链接按钮，点击可跳转到编辑管理员信息的页面，通过传递管理员的id参数来指定要编辑的对象，按钮内部通过图标展示编辑的图标样式 -->
</a> <a title="编辑" href="${pageContext.request.contextPath}/adminEdit?id=${admin.id}">
<a title="授权" onclick="put_power(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;"> <i class="layui-icon">&#xe642;</i>
<i class="layui-icon">&#xe672;</i> </a>
</a> <!-- 创建一个授权操作的链接按钮，点击时调用put_power函数，并传递当前管理员的id以及当前用户的权限信息（用于判断是否有权限进行授权操作），按钮内部通过图标展示授权的图标样式 -->
<a title="删除" onclick="member_del(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;"> <a title="授权" onclick="put_power(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
<i class="layui-icon">&#xe640;</i> <i class="layui-icon">&#xe672;</i>
</a> </a>
</td> <!-- 创建一个删除操作的链接按钮，点击时调用member_del函数，并传递当前管理员的id以及当前用户的权限信息（用于判断是否有权限进行删除操作），按钮内部通过图标展示删除的图标样式 -->
</c:forEach> <a title="删除" onclick="member_del(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
</tr> <i class="layui-icon">&#xe640;</i>
</a>
</td>
</tr>
</c:forEach>
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="pull-left"> <div class="pull-left">
<div class="form-group form-inline"> <div class="form-group form-inline">
<!-- 展示分页相关信息，如总页数、当前页码等文本信息，并且通过表达式语言获取相应的数据进行展示 -->
共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页 共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页
<!-- 创建一个下拉框，用于选择每页显示的条数，添加表单控制类样式，设置id属性，当下拉框的值改变时调用changePageSize函数来改变每页显示条数 -->
<select class="form-control" id="changePageSize" onchange="changePageSize()"> <select class="form-control" id="changePageSize" onchange="changePageSize()">
<!-- 下拉框中的各个选项，通过表达式语言获取当前每页显示条数作为默认选中项，并设置其他可选的每页显示条数选项 -->
<option value="1">${pageInfo.size}</option> <option value="1">${pageInfo.size}</option>
<option value="5">5</option> <option value="5">5</option>
<option value="10">10</option> <option value="10">10</option>
@ -130,129 +174,42 @@
</div> </div>
</div> </div>
<c:choose> <c:choose>
<c:when test="${pageInfo.pages < 5}"> <c:when test="${pageInfo.pages < 5}">
<c:set var="begin" value="1"> <!-- 当总页数小于5时，设置分页导航的起始页码（begin）和结束页码（end）都为1到总页数，用于展示所有页码链接 -->
</c:set> <c:set var="begin" value="1">
<c:set var="end" value="${pageInfo.pages}"> </c:set>
</c:set> <c:set var="end" value="${pageInfo.pages}">
</c:when> </c:set>
<c:when test="${pageInfo.pageNum <= 3}"> </c:when>
<c:set var="begin" value="1"> <c:when test="${pageInfo.pageNum <= 3}">
</c:set> <!-- 当当前页码小于等于3时，设置分页导航的起始页码为1，结束页码为5，通常用于在前面几页时展示固定范围的页码链接 -->
<c:set var="end" value="5"> <c:set var="begin" value="1">
</c:set> </c:set>
</c:when> <c:set var="end" value="5">
<c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}"> </c:set>
<c:set var="begin" value="${pageInfo.pageNum - 2}"> </c:when>
</c:set> <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
<c:set var="end" value="${pageInfo.pageNum + 2}"> <!-- 当当前页码大于3且小于等于总页数减2时，设置分页导航的起始页码为当前页码减2，结束页码为当前页码加2，用于在中间页码范围时动态展示周边的页码链接 -->
</c:set> <c:set var="begin" value="${pageInfo.pageNum - 2}">
</c:when> </c:set>
<c:otherwise> <c:set var="end" value="${pageInfo.pageNum + 2}">
<c:set var="begin" value="${pageInfo.pages - 4}"> </c:set>
</c:set> </c:when>
<c:set var="end" value="${pageInfo.pages}"> <c:otherwise>
</c:set> <!-- 当当前页码大于总页数减2时（即接近尾页时），设置分页导航的起始页码为总页数减4，结束页码为总页数，用于展示尾页附近的页码链接 -->
</c:otherwise> <c:set var="begin" value="${pageInfo.pages - 4}">
</c:set>
<c:set var="end" value="${pageInfo.pages}">
</c:set>
</c:otherwise>
</c:choose> </c:choose>
<div class="layui-card-body x-right" style="height: min-content"> <div class="layui-card-body x-right" style="height: min-content">
<div class="page"> <div class="page">
<div> <div>
<!-- 创建一个首页链接按钮，点击可跳转到第一页，传递每页显示条数以及关键字参数（如果有），按钮应用相应的样式类 -->
<a class="next" href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a> <a class="next" href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a>
<!-- 当当前页码大于1时，创建一个上一页链接按钮，点击可跳转到上一页，传递相应的参数，按钮应用相应的样式类 -->
<c:if test="${pageInfo.pageNum > 1}"> <c:if test="${pageInfo.pageNum > 1}">
<a class="prev" href="${pageContext.request.contextPath}/findAllAdmin?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a> <a class="prev" href="${pageContext.request.contextPath}/findAllAdmin?page=${pageInfo.pageNum-1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">上一页</a>
</c:if> </c:if>
<c:forEach var="i" begin="${begin}" end="${end}" step="1"> <!-- 使用JSTL的标签循环生成页码链接按钮，根据前面设置的起始页码（begin）和
<c:if test="${pageInfo.pageNum == i}">
<span class="current">${i}</span>
</c:if>
<c:if test="${pageInfo.pageNum != i}">
<a class="num" href="${pageContext.request.contextPath}/findAllAdmin?page=${i}&size=${pageInfo.pageSize}&keyword=${param.keyword}">${i}</a>
</c:if>
</c:forEach>
<c:if test="${pageInfo.pageNum < pageInfo.pages}">
<a class="next" href="${pageContext.request.contextPath}/findAllAdmin?page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
</c:if>
<a class="next" href="${pageContext.request.contextPath}/findAllAdmin?page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
//删除操作
function member_del(obj,id,power){
layer.confirm('确认要删除吗？',function(index){
if ( power < 3){
layer.msg('对不起，您没有权限！');
return false;
}
//发异步删除数据
$.get("${pageContext.request.contextPath}/deleteAdmin",{"id":id},function (data) {
if(data = true){
layer.msg('删除成功!',{icon:1,time:2000});
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}else {
layer.msg('删除失败!',{icon:1,time:2000});
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}
});
});
}
//授权操作
function put_power(obj,id,power) {
//验证是否拥有权限
if (power < 3) {
layer.msg('对不起，您没有权限！');
return false;
}
//prompt层
layer.prompt({title: '输入授权密码，完成身份校验', formType: 1}, function(password, index){
if (password != 123) {
layer.msg('授权密码有误，身份验证失败');
layer.close(index);
return false;
}
layer.close(index);
layer.prompt({title: '输入权限级别，并确认授权', formType: 1}, function(level, index){
if (level < 0 || level > 4) {
layer.msg('授权等级输入有误，请重新输入！')
return false;
}
if (level > power) {
layer.msg('对不起，您权限不足！')
layer.close(index);
return false;
}
$.get("${pageContext.request.contextPath}/put_power",{"id":id,"power":level},function (data) {
if(data){
layer.msg('授权成功!');
layer.close(index);
setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
}else {
layer.msg('授权失败，请联系管理员!');
layer.close(index);
}
});
layer.close(index);
});
});
}
//导出Excel操作
function exportInfo(power) {
if (power < 3) {
layer.msg('对不起，您权限不足！');
return false;
}
layer.confirm('确定导出管理员数据吗？',function (index) {
location.href="${pageContext.request.contextPath}/exportAdminInfo";
layer.close(index);
});
}
</script>
</body>
</html>

163
src/main/webapp/css/nouislider.css
Unescape View File

@ -2,7 +2,9 @@
/* Functional styling; /* Functional styling;
* These styles are required for noUiSlider to function. * These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design. * You don't need to change these rules to apply your design.
*/ * 以下是功能性样式相关的注释，这些样式是nouiSlider能正常工作所必需的，通常不需要修改它们来适配设计，保持其默认设置即可 */
/* 针对.noUi-target类以及其内部所有元素设置一些交互相关的属性，禁止长按弹出菜单、去除点击高亮颜色、禁止用户选择文本等操作，同时设置盒模型为border-box，使得元素的尺寸计算包含边框和内边距 */
.noUi-target, .noUi-target,
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
@ -16,10 +18,14 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* 设置.noUi-target类元素（一般是滑块的外层容器）为相对定位，并且设置文本方向从左到右（ltr），这符合常规的页面布局习惯 */
.noUi-target { .noUi-target {
position: relative; position: relative;
direction: ltr; direction: ltr;
} }
/* 设置.noUi-base类元素（一般是滑块的基础部分，比如轨道等）宽度和高度都占满父容器，并且设置相对定位以及较高的z-index值，使其在堆叠顺序中处于较上层，方便后续元素基于它进行定位，注释中的“Fix 401”可能是针对某个特定问题的修复说明，具体需结合相关开发背景理解 */
.noUi-base { .noUi-base {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -27,6 +33,8 @@
z-index: 1; z-index: 1;
/* Fix 401 */ /* Fix 401 */
} }
/* 设置.noUi-connect类元素（一般是滑块轨道上表示已选择范围的连接部分）为绝对定位，使其占满整个.noUi-target元素（即滑块外层容器）的内部空间，通过设置上下左右都为0来实现 */
.noUi-connect { .noUi-connect {
position: absolute; position: absolute;
right: 0; right: 0;
@ -34,59 +42,82 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
} }
/* 设置.noUi-origin类元素（可能与滑块的起始位置等相关概念对应）为绝对定位，并且初始高度和宽度都设置为0，后续可能会通过JavaScript等动态改变其尺寸和位置来实现滑块的功能逻辑 */
.noUi-origin { .noUi-origin {
position: absolute; position: absolute;
height: 0; height: 0;
width: 0; width: 0;
} }
/* 设置.noUi-handle类元素（即滑块的手柄部分）为相对定位，并且设置较高的z-index值，使其在堆叠顺序中处于较上层，能显示在轨道等元素之上 */
.noUi-handle { .noUi-handle {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin { /* 当.noUi-target元素处于点击状态（.noUi-state-tap类存在时），对其内部的.noUi-connect和.noUi-origin元素设置过渡效果，当它们的位置属性（top、right、bottom、left）改变时，会有平滑的过渡动画，过渡时间为0.3秒 */
.noUi-state-tap.noUi-connect,
.noUi-state-tap.noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
} }
/* 当.noUi-target元素处于拖动状态（.noUi-state-drag类存在时），将其内部所有元素的鼠标指针样式强制设置为继承父元素的样式，这样可以确保在拖动过程中鼠标指针样式符合预期，不会出现异常 */
.noUi-state-drag * { .noUi-state-drag * {
cursor: inherit !important; cursor: inherit!important;
} }
/* Painting and performance; /* Painting and performance;
* Browsers can paint handles in their own layer. * Browsers can paint handles in their own layer.
*/ * 以下样式与绘制和性能相关，浏览器可以将滑块手柄绘制在独立的图层中，通过使用3D变换来触发硬件加速，提升滑块操作的流畅度 */
.noUi-base, .noUi-base,
.noUi-handle { .noUi-handle {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
/* Slider size and handle placement; /* Slider size and handle placement;
*/ * 以下是关于滑块尺寸以及手柄位置相关的样式设置，区分水平和垂直两种布局情况 */
/* 当滑块为水平布局（.noUi-horizontal类存在时），设置滑块的高度为18px */
.noUi-horizontal { .noUi-horizontal {
height: 18px; height: 18px;
} }
.noUi-horizontal .noUi-handle {
/* 当滑块为水平布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
.noUi-horizontal.noUi-handle {
width: 34px; width: 34px;
height: 28px; height: 28px;
left: -17px; left: -17px;
top: -6px; top: -6px;
} }
/* 当滑块为垂直布局（.noUi-vertical类存在时），设置滑块的宽度为18px */
.noUi-vertical { .noUi-vertical {
width: 18px; width: 18px;
} }
.noUi-vertical .noUi-handle {
/* 当滑块为垂直布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
.noUi-vertical.noUi-handle {
width: 28px; width: 28px;
height: 34px; height: 34px;
left: -6px; left: -6px;
top: -17px; top: -17px;
} }
/* Styling; /* Styling;
*/ * 以下是滑块整体以及各部分的外观样式设置 */
/* 设置.noUi-target类元素（滑块外层容器）的背景颜色、边框圆角、边框样式以及内部阴影效果，使其呈现出一种特定的外观风格 */
.noUi-target { .noUi-target {
background: #FAFAFA; background: #FAFAFA;
border-radius: 4px; border-radius: 4px;
border: 1px solid #D3D3D3; border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
} }
/* 设置.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）的背景颜色、边框圆角以及内部阴影效果，并且设置其背景颜色改变时有过渡动画，过渡时间为450毫秒，用于实现一些交互时的视觉效果 */
.noUi-connect { .noUi-connect {
background: #3FB8AF; background: #3FB8AF;
border-radius: 4px; border-radius: 4px;
@ -94,14 +125,21 @@
-webkit-transition: background 450ms; -webkit-transition: background 450ms;
transition: background 450ms; transition: background 450ms;
} }
/* Handles and cursors; /* Handles and cursors;
*/ * 以下是关于滑块手柄以及鼠标指针样式相关的设置 */
/* 当滑块可拖动（.noUi-draggable类存在时，一般是水平滑块的情况），设置鼠标指针样式为左右拉伸的样式，符合水平拖动操作的视觉提示 */
.noUi-draggable { .noUi-draggable {
cursor: ew-resize; cursor: ew-resize;
} }
.noUi-vertical .noUi-draggable {
/* 当滑块为垂直可拖动（.noUi-vertical类且.noUi-draggable类存在时，即垂直滑块情况），设置鼠标指针样式为上下拉伸的样式，符合垂直拖动操作的视觉提示 */
.noUi-vertical.noUi-draggable {
cursor: ns-resize; cursor: ns-resize;
} }
/* 设置.noUi-handle类元素（滑块手柄）的边框样式、边框圆角、背景颜色以及多种阴影效果，使其呈现出立体、有质感的外观，并且将默认鼠标指针样式设置为默认样式（default） */
.noUi-handle { .noUi-handle {
border: 1px solid #D9D9D9; border: 1px solid #D9D9D9;
border-radius: 3px; border-radius: 3px;
@ -109,11 +147,16 @@
cursor: default; cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
} }
/* 当.noUi-handle类元素处于激活状态（.noUi-active类存在时，比如正在被点击或拖动时），改变其阴影效果，呈现出一种不同的视觉反馈，用于提示用户当前正在操作滑块手柄 */
.noUi-active { .noUi-active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
} }
/* Handle stripes; /* Handle stripes;
*/ * 以下是在滑块手柄上添加条纹样式的设置，通过伪元素:before和:after来实现 */
/* 在.noUi-handle类元素（滑块手柄）的:before伪元素上设置样式，创建一个竖条样式，用于模拟手柄上的条纹装饰效果，设置其内容为空（因为只是用于装饰）、显示为块状元素、设置高度、宽度、背景颜色以及位置等属性 */
.noUi-handle:before, .noUi-handle:before,
.noUi-handle:after { .noUi-handle:after {
content: ""; content: "";
@ -125,69 +168,98 @@
left: 14px; left: 14px;
top: 6px; top: 6px;
} }
/* 同样在.noUi-handle类元素（滑块手柄）的:after伪元素上设置样式，创建另一个竖条样式，位置与:before略有不同，共同构成手柄上的条纹装饰效果 */
.noUi-handle:after { .noUi-handle:after {
left: 17px; left: 17px;
} }
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after { /* 当滑块为垂直布局时，对.noUi-handle类元素（滑块手柄）的:before和:after伪元素重新设置样式，将竖条变为横条，通过改变宽度和高度属性以及位置来实现，以适配垂直方向的手柄外观 */
.noUi-vertical.noUi-handle:before,
.noUi-vertical.noUi-handle:after {
width: 14px; width: 14px;
height: 1px; height: 1px;
left: 6px; left: 6px;
top: 14px; top: 14px;
} }
.noUi-vertical .noUi-handle:after {
/* 针对垂直布局下的.noUi-handle类元素（滑块手柄）的:after伪元素，进一步调整其位置，使其与:before伪元素配合形成合适的横条装饰效果 */
.noUi-vertical.noUi-handle:after {
top: 17px; top: 17px;
} }
/* Disabled state; /* Disabled state;
*/ * 以下是滑块处于禁用状态时的样式设置 */
[disabled] .noUi-connect {
/* 当元素处于禁用状态（[disabled]选择器匹配时），对.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）设置背景颜色，使其呈现出一种表示不可用的视觉效果 */
[disabled].noUi-connect {
background: #B8B8B8; background: #B8B8B8;
} }
/* 当元素处于禁用状态时，对.noUi-target、.noUi-handle以及.noUi-handle类元素（分别对应滑块外层容器、滑块手柄等）设置鼠标指针样式为不允许操作的样式（not-allowed），提示用户当前滑块不可用 */
[disabled].noUi-target, [disabled].noUi-target,
[disabled].noUi-handle, [disabled].noUi-handle,
[disabled] .noUi-handle { [disabled].noUi-handle {
cursor: not-allowed; cursor: not-allowed;
} }
/* Base; /* Base;
* *
*/ * 以下是与滑块上的刻度标记、数值显示等相关的基础样式设置，首先对.noUi-pips以及其内部所有元素设置盒模型为border-box，确保尺寸计算符合预期 */
.noUi-pips, .noUi-pips,
.noUi-pips * { .noUi-pips * {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* 设置.noUi-pips类元素（一般是用于放置刻度标记、数值显示等内容的容器）为绝对定位，并且设置文字颜色 */
.noUi-pips { .noUi-pips {
position: absolute; position: absolute;
color: #999; color: #999;
} }
/* Values; /* Values;
* *
*/ * 以下是关于滑块上数值显示相关的样式设置 */
/* 设置.noUi-value类元素（一般用于显示具体的数值）为绝对定位，并且设置文本不换行、文本水平居中对齐，确保数值能正确显示在相应位置 */
.noUi-value { .noUi-value {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
} }
/* 设置.noUi-value-sub类元素（可能是用于显示数值的副标题、辅助信息等，比如小数部分等）的文字颜色和字体大小，使其与主数值有一定的视觉区分 */
.noUi-value-sub { .noUi-value-sub {
color: #ccc; color: #ccc;
font-size: 10px; font-size: 10px;
} }
/* Markings; /* Markings;
* *
*/ * 以下是关于滑块上各种标记（如刻度线等）相关的样式设置 */
/* 设置.noUi-marker类元素（一般是滑块上的刻度线等标记）为绝对定位，并且设置背景颜色，用于呈现出刻度线的外观 */
.noUi-marker { .noUi-marker {
position: absolute; position: absolute;
background: #CCC; background: #CCC;
} }
/* 设置.noUi-marker-sub类元素（可能是细分刻度线等更小的标记）的背景颜色，使其与普通刻度线有一定视觉区分 */
.noUi-marker-sub { .noUi-marker-sub {
background: #AAA; background: #AAA;
} }
/* 设置.noUi-marker-large类元素（可能是较大的重要刻度线等标记）的背景颜色，同样用于视觉区分，突出显示重要刻度 */
.noUi-marker-large { .noUi-marker-large {
background: #AAA; background: #AAA;
} }
/* Horizontal layout; /* Horizontal layout;
* *
*/ * 以下是滑块为水平布局时，与刻度标记、数值显示等相关的具体样式设置 */
/* 设置.noUi-pips-horizontal类元素（水平布局下的刻度标记等容器）的内边距、高度、垂直位置以及宽度，使其在水平滑块下方合适的位置显示 */
.noUi-pips-horizontal { .noUi-pips-horizontal {
padding: 10px 0; padding: 10px 0;
height: 80px; height: 80px;
@ -195,66 +267,61 @@
left: 0; left: 0;
width: 100%; width: 100%;
} }
/* 当滑块为水平布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置上方 */
.noUi-value-horizontal { .noUi-value-horizontal {
-webkit-transform: translate3d(-50%, 50%, 0); -webkit-transform: translate3d(-50%, 50%, 0);
transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0);
} }
/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及左右外边距等，使其呈现出水平方向的刻度线外观 */
.noUi-marker-horizontal.noUi-marker { .noUi-marker-horizontal.noUi-marker {
margin-left: -1px; margin-left: -1px;
width: 2px; width: 2px;
height: 5px; height: 5px;
} }
/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的细分刻度线等标记）进行样式设置，调整其高度，使其与普通刻度线有一定视觉区分 */
.noUi-marker-horizontal.noUi-marker-sub { .noUi-marker-horizontal.noUi-marker-sub {
height: 10px; height: 10px;
} }
/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的较大刻度线等标记）进行样式设置，调整其高度，使其更加突出显示，与其他刻度线区分开来 */
.noUi-marker-horizontal.noUi-marker-large { .noUi-marker-horizontal.noUi-marker-large {
height: 15px; height: 15px;
} }
/* Vertical layout; /* Vertical layout;
* *
*/ * 以下是滑块为垂直布局时，与刻度标记、数值显示等相关的具体样式设置 */
/* 设置.noUi-pips-vertical类元素（垂直布局下的刻度标记等容器）的内边距、高度、垂直和水平位置，使其在垂直滑块右侧合适的位置显示 */
.noUi-pips-vertical { .noUi-pips-vertical {
padding: 0 10px; padding: 0 10px;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
} }
/* 当滑块为垂直布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置右侧，并且设置左边距，使其与刻度线等有合适的间距 */
.noUi-value-vertical { .noUi-value-vertical {
-webkit-transform: translate3d(0, 50%, 0); -webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0);
padding-left: 25px; padding-left: 25px;
} }
/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及上下外边距等，使其呈现出垂直方向的刻度线外观 */
.noUi-marker-vertical.noUi-marker { .noUi-marker-vertical.noUi-marker {
width: 5px; width: 5px;
height: 2px; height: 2px;
margin-top: -1px; margin-top: -1px;
} }
/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的细分刻度线等标记）进行样式设置，调整其宽度，使其与普通刻度线有一定视觉区分 */
.noUi-marker-vertical.noUi-marker-sub { .noUi-marker-vertical.noUi-marker-sub {
width: 10px; width: 10px;
} }
/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的较大刻度线等标记）进行样式设置，调整其宽度，使其更加突出显示，与其他刻度线区分开来 */
.noUi-marker-vertical.noUi-marker-large { .noUi-marker-vertical.noUi-marker-large {
width: 15px; width: 15px;}
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}

285
src/main/webapp/css/style.css
Unescape View File

@ -1,64 +1,75 @@
/* 设置html和body元素的宽度和高度都占满整个视口，确保页面能铺满浏览器窗口 */
html,body{ html,body{
width:100%; width:100%;
height:100%; height:100%;
} }
/* 设置canvas元素的显示方式为块级元素，并且在垂直方向上与父元素底部对齐，常用于图形绘制等相关场景，比如一些基于canvas的动画、特效展示等 */
canvas{ canvas{
display:block; display:block;
vertical-align:bottom; vertical-align:bottom;
} }
/* 类名为.count-particles的元素样式，用于统计粒子相关的显示设置 */
/* 设置背景颜色为深黑色，绝对定位，指定其在页面中的位置（距离顶部48px，左侧0px），设置宽度为80px，文字颜色为特定的亮色，字体大小为相对父元素的0.8em，文本左对齐，设置首行缩进，行高，底部内边距等样式，并且指定字体族以及加粗字体样式 */
.count-particles{ .count-particles{
background: #000022; background: #000022;
position: absolute; position: absolute;
top: 48px; top: 48px;
left: 0; left: 0;
width: 80px; width: 80px;
color: #13E8E9; color: #13E8E9;
font-size: .8em; font-size:.8em;
text-align: left; text-align: left;
text-indent: 4px; text-indent: 4px;
line-height: 14px; line-height: 14px;
padding-bottom: 2px; padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
/* 类名为.js-count-particles的元素样式，可能用于通过JavaScript动态控制的粒子计数相关元素，设置字体大小为相对父元素的1.1em，相对.count-particles类中的字体大小有所增大，用于突出显示等目的 */
.js-count-particles{ .js-count-particles{
font-size: 1.1em; font-size: 1.1em;
} }
/* 对id为stats以及类名为count-particles的元素设置样式，禁止用户选择文本内容（在一些交互场景下避免用户误操作选择文本），并且设置顶部和左侧的外边距为5px，使其在页面中有一定的间距 */
#stats, #stats,
.count-particles{ .count-particles{
-webkit-user-select: none; -webkit-user-select: none;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
} }
/* 对id为stats的元素设置样式，设置其边框右上角和左上角的圆角半径为3px，右下角和左下角的圆角半径为0，并且设置超出部分隐藏，常用于一些需要展示特定形状且不希望内容溢出的容器元素，比如统计信息展示框等 */
#stats{ #stats{
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
overflow: hidden; overflow: hidden;
} }
/* 对类名为count-particles的元素设置样式，设置其边框右下角和左下角的圆角半径为3px，右上角和左上角的圆角半径为0，与#stats元素的边框圆角设置配合，可能用于形成一个完整的、有特定外观的容器样式 */
.count-particles{ .count-particles{
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
} }
/* 对id为particles-js的元素设置样式，通常用于承载粒子效果的容器 */
/* 设置宽度和高度都占满父容器（一般就是整个页面可视区域），相对定位，设置背景图片，指定其在水平和垂直方向上都居中显示，设置背景图片铺满整个容器（根据容器大小自动缩放），并且不重复显示，使其作为页面的背景铺满整个页面，同时让其在水平方向上自动居中（通过设置左右外边距为auto实现） */
#particles-js{ #particles-js{
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
background-image: url(../images/bg.jpg); background-image: url(../images/bg.jpg);
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* 类名为sk-rotating-plane的元素样式，一般用于实现旋转动画效果的元素 */
/* 初始设置为不显示（display: none），指定宽度和高度，设置自动水平居中（通过设置左右外边距为auto实现），背景颜色为白色，定义动画名称、持续时间以及循环播放且缓动效果为ease-in-out，设置较高的z-index值使其能显示在其他元素之上，绝对定位，并且通过设置top和left属性以及负外边距来使其在页面中垂直和水平方向上都居中显示 */
.sk-rotating-plane { .sk-rotating-plane {
display: none; display: none;
width: 80px; width: 80px;
height: 80px; height: 80px;
margin: auto; margin: auto;
@ -72,42 +83,182 @@ canvas{
margin-left: -40px; margin-left: -40px;
margin-top: -80px; margin-top: -80px;
} }
/* 当类名为sk-rotating-plane的元素同时具有active类时，将其显示出来（display: block），可能通过JavaScript动态添加active类来控制其显示隐藏，实现特定的交互效果 */
.sk-rotating-plane.active{display: block;} .sk-rotating-plane.active{display: block;}
/* 定义名为sk-rotating-plane的关键帧动画 */
/* 在动画的不同阶段（0%、50%、100%）设置元素的3D旋转效果，通过transform属性以及不同浏览器前缀来兼容各种浏览器，实现一个围绕X轴和Y轴旋转的动画效果，用于呈现旋转的视觉效果 */
@keyframes sk-rotating-plane{ @keyframes sk-rotating-plane{
0% { 0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg);
} }
50% { 50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
} }
100% { 100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
} }
} }
/* 定义名为login-small的关键帧动画 */
/* 在动画的开始（0%）和结束（100%）阶段设置元素的缩放效果，通过不同浏览器前缀的transform属性来兼容各种浏览器，实现从原始大小缩放到较小尺寸的动画效果，可能用于登录框等元素的隐藏或缩小展示等交互场景 */
@keyframes login-small{ @keyframes login-small{
0%{ 0%{
transform: scale(1);-moz-transform: scale(1); /* Firefox 4 */-webkit-transform: scale(1); /* Safari 和 Chrome */-o-transform: scale(1); /* Opera */-ms-transform:scale(1); /* IE 9 */ transform: scale(1);
} -moz-transform: scale(1); /* Firefox 4 */
100%{ -webkit-transform: scale(1); /* Safari 和 Chrome */
transform: scale(0.2);-moz-transform: scale(0.1); /* Firefox 4 */-webkit-transform: scale(0.2); /* Safari 和 Chrome */-o-transform: scale(0.1); /* Opera */-ms-transform:scale(0.1); /* IE 9 */ -o-transform: scale(1); /* Opera */
} -ms-transform:scale(1); /* IE 9 */
} }
100%{
.login{z-index: 2;position:absolute;width: 350px;border-radius: 5px;height: 500px;background: white;box-shadow: 0px 0px 5px #333333;top: 50%;left: 50%;margin-top: -250px;margin-left: -175px;transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari 和 Chrome */-o-transition: all 1s; /* Opera */} transform: scale(0.2);
.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;} -moz-transform: scale(0.1); /* Firefox 4 */
.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;} -webkit-transform: scale(0.2); /* Safari 和 Chrome */
.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;} -o-transform: scale(0.1); /* Opera */
.login-center-img>img{width: 100%;} -ms-transform:scale(0.1); /* IE 9 */
.login-center-input{float: left;width: 230px;margin-left: 15px;height: 30px;position: relative;} }
.login-center-input input{z-index: 2;transition: all 0.5s;padding-left: 10px;color: #333333;width: 100%;height: 30px;border: 0;border-bottom: 1px solid #cccccc;border-top: 1px solid #ffffff;border-left: 1px solid #ffffff;border-right: 1px solid #ffffff;box-sizing: border-box;outline: none;position: relative;} }
.login-center-input input:focus{border: 1px solid dodgerblue;}
.login-center-input-text{background: white;padding: 0 5px;position: absolute;z-index: 0;opacity: 0;height: 20px;top: 50%;margin-top: -10px;font-size: 14px;left: 5px;color: dodgerblue;line-height: 20px;transition: all 0.5s;-moz-transition: all 0.5s; /* Firefox 4 */-webkit-transition: all 0.5s; /* Safari 和 Chrome */-o-transition: all 0.5s; /* Opera */} /* 类名为login的元素样式，一般用于登录框相关的整体布局和外观设置 */
.login-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;} /* 设置较高的z-index值使其能显示在其他元素之上，绝对定位，指定宽度、边框圆角、高度以及背景颜色为白色，添加阴影效果使其有立体感，通过设置top和left属性以及负外边距来使其在页面中垂直和水平方向上都居中显示，并且设置所有属性改变时的过渡效果，用于实现一些动画过渡效果，比如显示隐藏、大小改变等操作时的平滑过渡 */
.login.active{-webkit-animation: login-small 0.8s ; animation: login-small 0.8s ;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards} .login{
.login-button{cursor: pointer;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;} z-index: 2;
position:absolute;
width: 350px;
border-radius: 5px;
height: 500px;
background: white;
box-shadow: 0px 0px 5px #333333;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -175px;
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari 和 Chrome */
-o-transition: all 1s; /* Opera */
}
/* 类名为login-top的元素样式，一般是登录框顶部区域，比如用于显示登录标题等内容 */
/* 设置字体大小、顶部外边距、文本左对齐时的左侧内边距，指定文字颜色以及底部外边距，用于调整其在登录框内的布局和外观显示 */
.login-top{
font-size: 24px;
margin-top: 100px;
padding-left: 40px;
box-sizing: border-box;
color: #333333;
margin-bottom: 50px;
}
/* 类名为login-center的元素样式，一般是登录框中间部分，用于放置输入框等登录相关的表单元素 */
/* 设置宽度占满父容器，设置盒模型为border-box（尺寸计算包含边框和内边距），设置左右内边距，并且设置底部外边距，用于调整其内部元素的布局和整体在登录框中的位置 */
.login-center{
width: 100%;
box-sizing: border-box;
padding: 0 40px;
margin-bottom: 30px;
}
/* 类名为login-center-img的元素样式，一般用于登录框中输入框左侧的图标等图片元素 */
/* 设置宽度、高度，使其向左浮动，并且设置顶部外边距，用于调整其在登录框中输入框左侧的位置和显示效果 */
.login-center-img{
width: 20px;
height: 20px;
float: left;
margin-top: 5px;
}
/* 类名为login-center-img内部的img元素样式，设置图片宽度占满父元素（即.login-center-img元素），确保图片能正确显示 */
.login-center-img>img{
width: 100%;
}
/* 类名为login-center-input的元素样式，一般是登录框中输入框相关的外层容器样式 */
/* 设置向左浮动，指定宽度、左侧外边距以及高度，并且设置相对定位，方便内部输入框等元素进行相对定位布局 */
.login-center-input{
float: left;
width: 230px;
margin-left: 15px;
height: 30px;
position: relative;
}
/* 类名为login-center-input内部的input元素样式，一般就是实际的输入框样式 */
/* 设置较高的z-index值使其能显示在一些提示文字等元素之上，设置所有属性改变时的过渡效果，设置文本输入的内边距、文字颜色、宽度、高度以及边框样式（只保留底部边框，其他边框设置为透明），去除默认的轮廓线（outline: none），并且设置相对定位，方便与其他相关元素（如提示文字）进行交互布局 */
.login-center-input input{
z-index: 2;
transition: all 0.5s;
padding-left: 10px;
color: #333333;
width: 100%;
height: 30px;
border: 0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: border-box;
outline: none;
position: relative;
}
/* 当类名为login-center-input内部的input元素获取焦点时（:focus伪类），改变其边框样式为实线且颜色为特定的亮色（dodgerblue），用于提示用户当前输入框处于激活状态 */
.login-center-input input:focus{
border: 1px solid dodgerblue;
}
/* 类名为login-center-input-text的元素样式，一般用于登录框中输入框的提示文字相关样式 */
/* 设置背景颜色为白色，设置内边距，绝对定位，初始透明度为0（隐藏状态），设置高度、垂直方向上的位置（通过top和margin-top属性使其垂直居中），指定字体大小、文字颜色以及行高，并且设置所有属性改变时的过渡效果，用于实现提示文字在输入框获取焦点等情况下的显示隐藏动画效果 */
.login-center-input-text{
background: white;
padding: 0 5px;
position: absolute;
z-index: 0;
opacity: 0;
height: 20px;
top: 50%;
margin-top: -10px;
font-size: 14px;
left: 5px;
color: dodgerblue;
line-height: 20px;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari 和 Chrome */
-o-transition: all 0.5s; /* Opera */
}
/* 当类名为login-center-input内部的input元素获取焦点时，对其同级的.login-center-input-text元素进行样式改变，使其向上移动到输入框顶部，提高z-index值显示在输入框上方，并且设置透明度为1（完全显示），通过调整外边距使其垂直位置更合适，用于实现输入框获取焦点时提示文字上移显示的交互效果 */
.login-center-input input:focus~.login-center-input-text{
top: 0;
z-index: 3;
opacity: 1;
margin-top: -15px;
}
/* 当类名为login的元素具有active类时，应用名为login-small的动画效果，并且设置动画结束后保持最后一帧的状态（animation-fill-mode:forwards以及-webkit-animation-fill-mode:forwards），可能用于实现登录框缩小隐藏等特定交互效果 */
.login.active{
-webkit-animation: login-small 0.8s ;
animation: login-small 0.8s ;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
}
/* 类名为login-button的元素样式，一般用于登录框中的登录按钮样式 */
/* 设置鼠标指针样式为指针形状（cursor: pointer），指定宽度、文本水平居中对齐、高度以及行高，设置背景颜色为特定的亮色，设置边框圆角，并且设置自动水平居中（通过设置左右外边距为auto实现），指定文字颜色为白色，用于呈现出一个美观的登录按钮外观 */
.login-button{
cursor: pointer;
width: 250px;
text-align: center;
height: 40px;
line-height: 40px;
background-color: dodgerblue;
border-radius: 5px;
margin: 0 auto;
margin-top: 50px;
color: white;
}
Write Preview
Loading…
Cancel
Save