From 28f99910d6cef96d929c9485915cba42049790e1 Mon Sep 17 00:00:00 2001
From: wang ziting <3165305859@qq.com>
Date: Fri, 13 Dec 2024 23:25:25 +0800
Subject: [PATCH] wang

---
 src/main/webapp/WEB-INF/jsp/admin-add.jsp  |  65 +++--
 src/main/webapp/WEB-INF/jsp/admin-edit.jsp |  89 +++++--
 src/main/webapp/WEB-INF/jsp/admin-list.jsp | 247 ++++++++----------
 src/main/webapp/css/nouislider.css         | 163 ++++++++----
 src/main/webapp/css/style.css              | 287 ++++++++++++++++-----
 5 files changed, 546 insertions(+), 305 deletions(-)
diff --git a/src/main/webapp/WEB-INF/jsp/admin-add.jsp b/src/main/webapp/WEB-INF/jsp/admin-add.jsp
index c89bdfa..bf1df89 100644
--- a/src/main/webapp/WEB-INF/jsp/admin-add.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin-add.jsp
@@ -5,22 +5,32 @@
   Date: 2020/2/12
   Time: 13:06
   To change this template use File | Settings | File Templates.
+  上面这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <html>
 <head>
     <title>Title</title>
+    <!-- 引入Bootstrap的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于实现页面的基本布局和样式美化 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.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>
+    <!-- 引入layer组件的JavaScript文件，用于在页面中实现弹出层提示等交互功能 -->
     <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
 </head>
 <body background="${pageContext.request.contextPath}/images/01.jpg">
+<!-- 添加两个换行，用于页面布局上的间隔 -->
 <br><br>
+<!-- 创建一个水平布局的表单行（使用Bootstrap的row和form-horizontal类），用于放置各种表单元素 -->
 <div class="row form-horizontal">
+    <!-- 创建一个表单组，用于对一组相关的表单元素进行分组，方便布局和样式设置 -->
     <div class="form-group">
+        <!-- 创建一个用于显示标签的元素，设置其占2列宽度（基于Bootstrap的网格系统），添加控制标签的类以及自定义的form-label类，用于显示用户名的文本标签 -->
         <label class="col-sm-2 control-label form-label">用户名:</label>
         <div class="col-sm-8">
+            <!-- 创建一个文本输入框，添加form-control类用于应用Bootstrap的输入框样式，设置name和id属性，方便后续通过JavaScript等操作该元素以及提交表单时传递对应的值 -->
             <input type="text" class="form-control" name="username" id="username">
         </div>
     </div>
@@ -51,8 +61,11 @@
     <div class="form-group">
         <label class="col-sm-2 control-label form-label">权限:</label>
         <div class="col-sm-8">
+            <!-- 创建一个下拉选择框，添加form-control类应用样式，设置name和id属性，用于选择用户的权限 -->
             <select class="form-control" name="power" id="power">
+                <!-- 设置默认选中的选项，值为0，显示文本为“访客” -->
                 <option value="0" selected>访客</option>
+                <!-- 使用JSTL标签进行条件判断，如果在会话范围（sessionScope）中的adminInfo对象的power属性大于0，则显示宿舍长这个选项 -->
                 <c:if test="${sessionScope.adminInfo.power > 0}">
                     <option value="1">宿舍长</option>
                 </c:if>
@@ -75,35 +88,47 @@
         </div>
     </div>
 </div>
+<!-- 创建一个新的行，用于放置按钮等操作元素 -->
 <div class="row">
+    <!-- 创建一个表单组，并设置按钮组的样式，通过col-md-offset-5类设置偏移量，使其在页面中水平居中显示（基于Bootstrap的列偏移功能） -->
     <div class="form-group btn-group col-md-offset-5">
+        <!-- 创建一个按钮，添加btn和btn-primary类用于应用Bootstrap的按钮主色调样式，设置点击事件，点击时调用toValidate()函数 -->
         <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>
     </div>
 </div>
-
 </body>
 <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
 <script src="${pageContext.request.contextPath}/js/validate.js"></script>
 <script>
     $(function () {
-        //ajax校验用户名是否存在
+        // 在文档加载完成后执行以下代码，这是jQuery的就绪函数，确保DOM元素都已加载完毕再执行相关操作
+
+        // 当用户名输入框的值发生改变时（change事件）执行以下函数
         $("#username").change(function () {
-            //取username的值
+            // 获取用户名输入框（id为username）中的值，通过jQuery的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) {
                 //$(".error").html(msg);
+                // 根据服务器返回的消息（msg）进行判断，如果消息是“账号可用”，说明用户名已存在，弹出相应提示信息
                 if (msg == "账号可用") {
                     layer.msg('用户名已存在');
-                }else {
+                } else {
+                    // 否则说明用户名可用，弹出相应提示信息
                     layer.msg('用户名可用');
                 }
             });
         });
     });
+    // 当学/工号输入框的值发生改变时（change事件）执行以下函数
     $("#uid").change(function () {
+        // 获取学/工号输入框（id为uid）中的值，并去除前后空格（trim()方法）
         var uid = $("#uid").val().trim();
+        // 使用jQuery的$.get()方法发起一个GET类型的Ajax异步请求，请求的URL是检查学/工号是否已注册的接口（通过表达式语言拼接路径），传递学/工号参数
+        // 请求成功后会执行回调函数，根据返回的数据（data）进行判断，如果data为真（说明学/工号已被注册），则弹出相应提示信息
         $.get("${pageContext.request.contextPath}/checkUid",{"uid":uid},function (data) {
             if (data) {
                 layer.msg('该学/工号已被注册，请重新输入');
@@ -111,12 +136,14 @@
         });
     });
     function toValidate(){
+        // 创建一个validate对象实例，用于对表单进行验证，传入一个配置对象
         var val = new validate({
             /*rules里面是检验规则，
-            *key为需要检验的input的id,
-            *value为此input对应的检验规则
+            * key为需要检验的input的id,
+            * value为此input对应的检验规则
             */
             rules:{
+                // 设置用户名输入框（id为username）的验证规则为不能为空（notEmpty）
                 username:"notEmpty",
                 name:"notEmpty",
                 uid:"notEmpty",
@@ -126,12 +153,15 @@
             },
             /*submitFun里面为检验成功后要执行的方法*/
             submitFun:function(){
+                // 如果验证成功，调用toSubmit()函数，该函数用于提交表单数据等后续操作
                 toSubmit();
             }
         })
     }
     function toSubmit(){
-        //增加管理员，异步提交管理员表单
+        // 以下是用于向服务器提交添加管理员表单数据的函数
+
+        // 获取用户名输入框的值，并去除前后空格
         var username = $("#username").val().trim();
         var password = $("#password").val().trim();
         var name = $("#name").val().trim();
@@ -139,10 +169,11 @@
         var phone = $("#phone").val().trim();
         var power = $("#power").val().trim();
         var description = $("#description").val().trim();
+        // 使用jQuery的$.ajax()方法发起一个POST类型的Ajax异步请求
         $.ajax({
-            url: "${pageContext.request.contextPath}/addAdmin",//要请求的服务器url
-            //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取
-            //data:{method:"ajaxTest",val:value},
+            // 设置请求的URL，指向添加管理员的接口（通过表达式语言拼接路径）
+            url: "${pageContext.request.contextPath}/addAdmin",
+            // 设置请求的数据，将各个表单字段的值组成一个对象传递给服务器，服务器可以通过相应的方式获取这些参数
             data: {
                 username:username,
                 password:password,
@@ -152,13 +183,16 @@
                 power: power,
                 description: description
             },
-            type: "POST", //请求方式为POST
-            dataType: "json",   //服务器返回的数据是什么类型
-            success: function(result){  //这个方法会在服务器执行成功时被调用 ，参数result就是服务器返回的值(现在是json类型)
+            type: "POST", // 设置请求方式为POST
+            dataType: "json",   // 期望服务器返回的数据类型为JSON格式
+            success: function(result){  // 当服务器成功处理请求并返回数据时，会执行这个回调函数，参数result就是服务器返回的值（现在是JSON类型）
                 if(result){
+                    // 如果服务器返回的结果为真（通常表示添加成功），弹出添加成功的提示信息
                     layer.msg('添加成功');
+                    // 使用setTimeout()函数设置一个定时器，2秒后执行函数，这里是跳转到查找所有管理员的页面（通过修改浏览器的当前地址实现）
                     setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
                 }else {
+                    // 如果服务器返回的结果为假（通常表示添加失败），弹出添加失败的提示信息，并提示联系管理员
                     layer.msg('添加失败，请联系管理员');
                     setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
                 }
@@ -166,5 +200,4 @@
         });
     }
 </script>
-</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/admin-edit.jsp b/src/main/webapp/WEB-INF/jsp/admin-edit.jsp
index 6493e7e..08af6b2 100644
--- a/src/main/webapp/WEB-INF/jsp/admin-edit.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin-edit.jsp
@@ -4,120 +4,153 @@
   Date: 2020/2/12
   Time: 13:08
   To change this template use File | Settings | File Templates.
+  这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <html>
 <head>
     <title>Title</title>
+    <!-- 引入Bootstrap的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于实现页面的基本布局和样式美化 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.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>
+    <!-- 引入layer组件的JavaScript文件，用于在页面中实现弹出层提示等交互功能 -->
     <script type="text/javascript" src="${pageContext.request.contextPath}/layer/layer.js"></script>
 </head>
 <body background="${pageContext.request.contextPath}/images/01.jpg">
+<!-- 添加两个换行，用于页面布局上的间隔 -->
 <br><br>
+<!-- 创建一个隐藏的输入框，设置id和name属性为“id”，通过表达式语言获取并设置其值为“ad.id”（推测“ad”是某个从后台传递过来的管理员对象相关的数据），这个输入框可能用于存储要编辑的管理员记录的唯一标识，方便后续提交表单时传递给服务器 -->
 <input type="hidden" id="id" name="id" value="${ad.id}">
+<!-- 创建一个水平布局的表单行（使用Bootstrap的row和form-horizontal类），用于放置各种表单元素 -->
 <div class="row form-horizontal">
+    <!-- 创建一个表单组，用于对一组相关的表单元素进行分组，方便布局和样式设置 -->
     <div class="form-group">
+        <!-- 创建一个用于显示标签的元素，设置其占2列宽度（基于Bootstrap的网格系统），添加控制标签的类以及自定义的form-label类，用于显示用户名的文本标签 -->
         <label class="col-sm-2 control-label form-label">用户名:</label>
         <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">
         </div>
     </div>
     <div class="form-group">
         <label class="col-sm-2 control-label form-label">姓名:</label>
         <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">
         </div>
     </div>
     <div class="form-group">
         <label class="col-sm-2 control-label form-label">学/工号:</label>
         <div class="col-sm-8">
+            <!-- 创建一个文本输入框，添加form-control类应用样式，通过表达式语言获取并设置其值为“ad.uid”，设置name和id属性，用于输入或显示学/工号，从此处未设置只读来看可能是允许修改该字段内容 -->
             <input type="text" class="form-control"  value="${ad.uid}" name="uid" id="uid">
         </div>
     </div>
     <div class="form-group">
         <label class="col-sm-2 control-label form-label">手机号:</label>
         <div class="col-sm-8">
+            <!-- 创建一个文本输入框，通过表达式语言获取并设置其值为“ad.phone”，添加form-control类应用样式，设置name和id属性，用于输入或显示手机号 -->
             <input type="text" value="${ad.phone}" class="form-control" name="phone" id="phone">
         </div>
     </div>
     <div class="form-group">
         <label class="col-sm-2 control-label form-label">描述:</label>
         <div class="col-sm-8">
+            <!-- 创建一个文本输入框，通过表达式语言获取并设置其值为“ad.description”，添加form-control类应用样式，设置name和id属性，用于输入或显示管理员相关的描述信息 -->
             <input type="text" class="form-control" value="${ad.description}" name="description" id="description">
         </div>
     </div>
 </div>
+<!-- 创建一个新的行，用于放置按钮等操作元素 -->
 <div class="row">
+    <!-- 创建一个表单组，并设置按钮组的样式，通过col-md-offset-5类设置偏移量，使其在页面中水平居中显示（基于Bootstrap的列偏移功能） -->
     <div class="form-group btn-group col-md-offset-5">
+        <!-- 创建一个按钮，添加btn和btn-warning类用于应用Bootstrap的警告色调样式，设置点击事件，点击时调用toValidate()函数，该按钮用于触发确认修改的操作 -->
         <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>
     </div>
 </div>
+</body>
 <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
 <script src="${pageContext.request.contextPath}/js/validate.js"></script>
 <script>
     function toValidate(){
+        // 创建一个validate对象实例，用于对表单进行验证，传入一个配置对象
         var val = new validate({
             /*rules里面是检验规则，
-            *key为需要检验的input的id,
-            *value为此input对应的检验规则
+            * key为需要检验的input的id,
+            * value为此input对应的检验规则
             */
             rules:{
+                // 设置姓名输入框（id为name）的验证规则为不能为空（notEmpty）
                 name:"notEmpty",
+                // 设置学/工号输入框（id为uid）的验证规则为不能为空（notEmpty）
                 uid:"notEmpty",
+                // 设置描述输入框（id为description）的验证规则为不能为空（notEmpty）
                 description:"notEmpty",
+                // 设置手机号输入框（id为phone）的验证规则为符合手机号码格式（mobile，这里应该是在validate.js中自定义的验证规则，用于校验手机号合法性）
                 phone:"mobile",
             },
             /*submitFun里面为检验成功后要执行的方法*/
             submitFun:function(){
+                // 如果验证成功，调用toSubmit()函数，该函数用于提交表单数据等后续操作
                 toSubmit();
             }
         })
     }
     function toSubmit(){
-        //增加管理员，异步提交管理员表单
+        // 以下是用于向服务器提交修改管理员表单数据的函数
+
+        // 获取隐藏输入框（id为id）中的值，并去除前后空格（trim()方法），该值是要修改的管理员记录的唯一标识
         var id = $("#id").val().trim();
         var username = $("#username").val().trim();
         var name = $("#name").val().trim();
         var uid = $("#uid").val().trim();
         var phone = $("#phone").val().trim();
         var description = $("#description").val().trim();
+        // 使用layer组件弹出一个确认框，提示用户是否确定要修改，当用户点击确认按钮（“确定”）时，执行回调函数中的代码，回调函数接收一个参数index用于后续操作该弹出层（如关闭它）
         layer.confirm('确定要修改吗',function (index) {
+            // 判断当前用户的权限（通过表达式语言从会话范围获取adminInfo对象的power属性），如果小于3（推测3及以上为有足够权限修改管理员信息的级别），则提示用户权限不足，关闭弹出层，并且终止后续操作（返回false）
             if (${sessionScope.adminInfo.power < 3}) {//非超级管理员不能修改管理员信息
                 layer.msg('对不起，您权限不足');
                 layer.close(index);
                 return false;
             }
 
-        $.ajax({
-            url: "${pageContext.request.contextPath}/editAdmin",//要请求的服务器url
-            //这是一个对象，表示请求的参数，两个参数：method=ajax&val=xxx，服务器可以通过request.getParameter()来获取
-            //data:{method:"ajaxTest",val:value},
-            data: {
-                id:id,
-                username:username,
-                name:name,
-                uid:uid,
-                phone: phone,
-                description: description
-            },
-            type: "POST", //请求方式为POST
-            dataType: "json",   //服务器返回的数据是什么类型
-            success: function(result){  //这个方法会在服务器执行成功时被调用 ，参数result就是服务器返回的值(现在是json类型)
-                if(result){
-                    layer.msg('修改成功');
-                    setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
-                }else {
-                    layer.msg('修改失败，请联系管理员');
-                    setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
+            // 使用jQuery的$.ajax()方法发起一个POST类型的Ajax异步请求
+            $.ajax({
+                // 设置请求的URL，指向修改管理员信息的接口（通过表达式语言拼接路径）
+                url: "${pageContext.request.contextPath}/editAdmin",
+                // 设置请求的数据，将各个表单字段的值组成一个对象传递给服务器，服务器可以通过相应的方式获取这些参数
+                data: {
+                    id:id,
+                    username:username,
+                    name:name,
+                    uid:uid,
+                    phone: phone,
+                    description: description
+                },
+                type: "POST", // 设置请求方式为POST
+                dataType: "json",   // 期望服务器返回的数据类型为JSON格式
+                success: function(result){  // 当服务器成功处理请求并返回数据时，会执行这个回调函数，参数result就是服务器返回的值（现在是JSON类型）
+                    if(result){
+                        // 如果服务器返回的结果为真（通常表示修改成功），弹出修改成功的提示信息
+                        layer.msg('修改成功');
+                        // 使用setTimeout()函数设置一个定时器，2秒后执行函数，这里是跳转到查找所有管理员的页面（通过修改浏览器的当前地址实现）
+                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
+                    }else {
+                        // 如果服务器返回的结果为假（通常表示修改失败），弹出修改失败的提示信息，并提示联系管理员
+                        layer.msg('修改失败，请联系管理员');
+                        setTimeout(function () {window.location.href='${pageContext.request.contextPath}/findAllAdmin';},2000);
+                    }
                 }
-            }
-        });
+            });
         });
     }
 </script>
-</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/WEB-INF/jsp/admin-list.jsp b/src/main/webapp/WEB-INF/jsp/admin-list.jsp
index 89d719c..6f980fb 100644
--- a/src/main/webapp/WEB-INF/jsp/admin-list.jsp
+++ b/src/main/webapp/WEB-INF/jsp/admin-list.jsp
@@ -4,6 +4,7 @@
   Date: 2020/2/10
   Time: 21:45
   To change this template use File | Settings | File Templates.
+  这部分是JSP页面的头部注释，说明了该文件创建时的相关信息，如创建者、创建日期、时间以及提示如何修改模板等内容
 --%>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
@@ -11,38 +12,59 @@
 <head>
     <meta charset="UTF-8">
     <title></title>
+    <!-- 设置页面渲染引擎为webkit，用于在一些浏览器中更好地渲染页面样式等 -->
     <meta name="renderer" content="webkit">
+    <!-- 配置页面兼容模式，使其在IE浏览器下以最高级别的标准模式（IE=edge）以及启用Chrome Frame（chrome=1）来渲染页面，以提高兼容性 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- 引入字体相关的CSS样式文件，路径通过表达式语言获取当前页面上下文请求路径拼接而成，用于页面中字体的显示样式设置 -->
     <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.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">
+    <!-- 引入jQuery库的JavaScript文件，这是一个常用的JavaScript库，用于简化DOM操作、事件处理等功能 -->
     <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>
+    <!-- 引入xadmin框架的JavaScript文件，用于实现该框架相关的功能和交互效果 -->
     <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>
+    <!-- 再次引入jQuery库的JavaScript文件，此处可能存在重复引入问题，可根据实际情况进行优化 -->
     <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]>
     <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>
     <![endif]-->
     <script>
         function changePageSize() {
-            //获取下拉框的值
+            // 获取下拉框（id为changePageSize）中用户选择的值，该下拉框通常用于选择每页显示的数据条数
             var pageSize = $("#changePageSize").val();
-            //向服务器发送请求，改变每页显示条数
-            location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size="+ pageSize;
+            // 通过修改浏览器地址栏的URL（location.href）向服务器发送请求，传递新的每页显示条数参数（pageSize），同时设置当前页码为1，用于改变每页显示条数后刷新页面数据展示
+            location.href = "${pageContext.request.contextPath}/findAllAdmin?page=1&size=" + pageSize;
         }
+
+        // 当搜索按钮（id为serarch_btn）被点击时执行以下函数
         $("#serarch_btn").click(function () {
+            // 获取输入框（id为keyword）中的用户输入的关键字内容，该关键字通常用于在查找管理员数据时进行筛选
             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 () {
+            // 重置表单（id为myform），将表单中的输入框等元素的值恢复到初始状态（此处假设表单中各元素有相应的重置逻辑实现）
             $("#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>
 </head>
 <body>
+<%-- 以下这部分代码被注释掉了，原本可能是用于页面导航栏的展示，包含了面包屑导航以及一个刷新按钮，点击刷新按钮可重新加载当前页面 --%>
 <%--<div class="x-nav">
           <span class="layui-breadcrumb">
             <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="刷新">
         <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
 </div>--%>
+<!-- 使用layui的流体布局容器类layui-fluid，使内部元素能自适应页面宽度 -->
 <div class="layui-fluid">
+    <!-- 创建一个layui的行元素，并设置列间距为15px，用于放置页面中的各种模块 -->
     <div class="layui-row layui-col-space15">
         <div class="layui-col-md12">
             <div class="layui-card">
                 <div class="layui-card-body ">
+                    <!-- 创建一个表单，设置id为myform，应用layui的表单样式以及列间距样式，用于放置搜索等相关的表单元素 -->
                     <form id="myform" class="layui-form layui-col-space5">
+                        <!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，用于放置一个文本输入框 -->
                         <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}">
                         </div>
+                        <!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，用于放置一个搜索按钮 -->
                         <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>
                         </div>
+                        <!-- 创建一个内联的表单元素块，在小屏幕（xs尺寸）下显示，并且设置靠右对齐（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>
                         </div>
                     </form>
                 </div>
                 <xblock>
+                    <!-- 创建一个添加按钮，点击可跳转到添加管理员的页面，按钮应用layui的常规按钮样式，按钮内部通过图标展示添加的图标样式 -->
                     <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>
+                    <!-- 创建一个靠右对齐的文本元素，用于展示总的数据条数信息，通过表达式语言获取并展示总数据条数（pageInfo.total） -->
                     <span class="x-right" style="line-height:40px">共有数据：${pageInfo.total} 条</span>
                 </xblock>
                 <div class="layui-card-body">
+                    <!-- 创建一个layui的表格，应用layui的表格和表单样式，用于展示管理员数据列表 -->
                     <table class="layui-table layui-form">
                         <thead>
                         <tr style="text-align: center">
+                            <!-- 表格表头部分，分别设置各列的标题，如ID、用户名等，并且设置文本居中对齐 -->
                             <th style="text-align: center">ID</th>
                             <th style="text-align: center">用户名</th>
                             <th style="text-align: center">姓名</th>
@@ -92,35 +128,43 @@
                         <%
                             int j = 1;
                         %>
+                        <!-- 使用JSTL的<>标签循环遍历从服务器端获取的管理员数据列表（pageInfo.list），每次循环将一个管理员对象赋值给admin变量 -->
                         <c:forEach items="${pageInfo.list}" var="admin">
-                        <tr id="light" style="text-align: center">
-                            <td><%=j++%></td>
-                            <td>${admin.username}</td>
-                            <td>${admin.name}</td>
-                            <td>${admin.uid}</td>
-                            <td>${admin.phone}</td>
-                            <td>${admin.power}</td>
-                            <td>${admin.description}</td>
-                            <td class="td-manage">
-                                <a title="编辑" href="${pageContext.request.contextPath}/adminEdit?id=${admin.id}">
-                                    <i class="layui-icon">&#xe642;</i>
-                                </a>
-                                <a title="授权" onclick="put_power(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
-                                    <i class="layui-icon">&#xe672;</i>
-                                </a>
-                                <a title="删除" onclick="member_del(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
-                                    <i class="layui-icon">&#xe640;</i>
-                                </a>
-                            </td>
-                            </c:forEach>
-                        </tr>
+                            <tr id="light" style="text-align: center">
+                                <!-- 在表格行中展示数据，ID列通过Java代码片段（<%=j++%>）自增序号来显示序号，其他列通过表达式语言展示管理员对象的各个属性值，如用户名、姓名等 -->
+                                <td><%=j++%></td>
+                                <td>${admin.username}</td>
+                                <td>${admin.name}</td>
+                                <td>${admin.uid}</td>
+                                <td>${admin.phone}</td>
+                                <td>${admin.power}</td>
+                                <td>${admin.description}</td>
+                                <td class="td-manage">
+                                    <!-- 创建一个编辑操作的链接按钮，点击可跳转到编辑管理员信息的页面，通过传递管理员的id参数来指定要编辑的对象，按钮内部通过图标展示编辑的图标样式 -->
+                                    <a title="编辑" href="${pageContext.request.contextPath}/adminEdit?id=${admin.id}">
+                                        <i class="layui-icon">&#xe642;</i>
+                                    </a>
+                                    <!-- 创建一个授权操作的链接按钮，点击时调用put_power函数，并传递当前管理员的id以及当前用户的权限信息（用于判断是否有权限进行授权操作），按钮内部通过图标展示授权的图标样式 -->
+                                    <a title="授权" onclick="put_power(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
+                                        <i class="layui-icon">&#xe672;</i>
+                                    </a>
+                                    <!-- 创建一个删除操作的链接按钮，点击时调用member_del函数，并传递当前管理员的id以及当前用户的权限信息（用于判断是否有权限进行删除操作），按钮内部通过图标展示删除的图标样式 -->
+                                    <a title="删除" onclick="member_del(this,${admin.id},${sessionScope.adminInfo.power})" href="javascript:;">
+                                        <i class="layui-icon">&#xe640;</i>
+                                    </a>
+                                </td>
+                            </tr>
+                        </c:forEach>
                         </tbody>
                     </table>
                 </div>
                 <div class="pull-left">
                     <div class="form-group form-inline">
+                        <!-- 展示分页相关信息，如总页数、当前页码等文本信息，并且通过表达式语言获取相应的数据进行展示 -->
                         共&nbsp;${pageInfo.pages}&nbsp;页&emsp;当前页：${pageInfo.pageNum}&nbsp;/&nbsp;${pageInfo.pages}&emsp; 每页
+                        <!-- 创建一个下拉框，用于选择每页显示的条数，添加表单控制类样式，设置id属性，当下拉框的值改变时调用changePageSize函数来改变每页显示条数 -->
                         <select class="form-control" id="changePageSize" onchange="changePageSize()">
+                            <!-- 下拉框中的各个选项，通过表达式语言获取当前每页显示条数作为默认选中项，并设置其他可选的每页显示条数选项 -->
                             <option value="1">${pageInfo.size}</option>
                             <option value="5">5</option>
                             <option value="10">10</option>
@@ -130,129 +174,42 @@
                     </div>
                 </div>
                 <c:choose>
-                    <c:when test="${pageInfo.pages < 5}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
-                    </c:when>
-                    <c:when test="${pageInfo.pageNum <= 3}">
-                        <c:set var="begin" value="1">
-                        </c:set>
-                        <c:set var="end" value="5">
-                        </c:set>
-                    </c:when>
-                    <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
-                        <c:set var="begin" value="${pageInfo.pageNum - 2}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pageNum + 2}">
-                        </c:set>
-                    </c:when>
-                    <c:otherwise>
-                        <c:set var="begin" value="${pageInfo.pages - 4}">
-                        </c:set>
-                        <c:set var="end" value="${pageInfo.pages}">
-                        </c:set>
-                    </c:otherwise>
+                <c:when test="${pageInfo.pages < 5}">
+                <!-- 当总页数小于5时，设置分页导航的起始页码（begin）和结束页码（end）都为1到总页数，用于展示所有页码链接 -->
+                <c:set var="begin" value="1">
+                </c:set>
+                <c:set var="end" value="${pageInfo.pages}">
+                </c:set>
+                </c:when>
+                <c:when test="${pageInfo.pageNum <= 3}">
+                <!-- 当当前页码小于等于3时，设置分页导航的起始页码为1，结束页码为5，通常用于在前面几页时展示固定范围的页码链接 -->
+                <c:set var="begin" value="1">
+                </c:set>
+                <c:set var="end" value="5">
+                </c:set>
+                </c:when>
+                <c:when test="${pageInfo.pageNum > 3 and pageInfo.pageNum <= pageInfo.pages-2}">
+                <!-- 当当前页码大于3且小于等于总页数减2时，设置分页导航的起始页码为当前页码减2，结束页码为当前页码加2，用于在中间页码范围时动态展示周边的页码链接 -->
+                <c:set var="begin" value="${pageInfo.pageNum - 2}">
+                </c:set>
+                <c:set var="end" value="${pageInfo.pageNum + 2}">
+                </c:set>
+                </c:when>
+                <c:otherwise>
+                <!-- 当当前页码大于总页数减2时（即接近尾页时），设置分页导航的起始页码为总页数减4，结束页码为总页数，用于展示尾页附近的页码链接 -->
+                <c:set var="begin" value="${pageInfo.pages - 4}">
+                </c:set>
+                <c:set var="end" value="${pageInfo.pages}">
+                </c:set>
+                </c:otherwise>
                 </c:choose>
                 <div class="layui-card-body x-right" style="height: min-content">
                     <div class="page">
                         <div>
+                            <!-- 创建一个首页链接按钮，点击可跳转到第一页，传递每页显示条数以及关键字参数（如果有），按钮应用相应的样式类 -->
                             <a class="next" href="${pageContext.request.contextPath}/findAllAdmin?page=1&size=${pageInfo.pageSize}&keyword=${param.keyword}">首页</a>
+                            <!-- 当当前页码大于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:forEach var="i" begin="${begin}" end="${end}" step="1">
-                                <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>
+                            <!-- 使用JSTL的标签循环生成页码链接按钮，根据前面设置的起始页码（begin）和
\ No newline at end of file
diff --git a/src/main/webapp/css/nouislider.css b/src/main/webapp/css/nouislider.css
index 97a96f0..4b14569 100644
--- a/src/main/webapp/css/nouislider.css
+++ b/src/main/webapp/css/nouislider.css
@@ -2,7 +2,9 @@
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
- */
+ * 以下是功能性样式相关的注释，这些样式是nouiSlider能正常工作所必需的，通常不需要修改它们来适配设计，保持其默认设置即可 */
+
+/* 针对.noUi-target类以及其内部所有元素设置一些交互相关的属性，禁止长按弹出菜单、去除点击高亮颜色、禁止用户选择文本等操作，同时设置盒模型为border-box，使得元素的尺寸计算包含边框和内边距 */
 .noUi-target,
 .noUi-target * {
   -webkit-touch-callout: none;
@@ -16,10 +18,14 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+/* 设置.noUi-target类元素（一般是滑块的外层容器）为相对定位，并且设置文本方向从左到右（ltr），这符合常规的页面布局习惯 */
 .noUi-target {
   position: relative;
   direction: ltr;
 }
+
+/* 设置.noUi-base类元素（一般是滑块的基础部分，比如轨道等）宽度和高度都占满父容器，并且设置相对定位以及较高的z-index值，使其在堆叠顺序中处于较上层，方便后续元素基于它进行定位，注释中的“Fix 401”可能是针对某个特定问题的修复说明，具体需结合相关开发背景理解 */
 .noUi-base {
   width: 100%;
   height: 100%;
@@ -27,6 +33,8 @@
   z-index: 1;
   /* Fix 401 */
 }
+
+/* 设置.noUi-connect类元素（一般是滑块轨道上表示已选择范围的连接部分）为绝对定位，使其占满整个.noUi-target元素（即滑块外层容器）的内部空间，通过设置上下左右都为0来实现 */
 .noUi-connect {
   position: absolute;
   right: 0;
@@ -34,59 +42,82 @@
   left: 0;
   bottom: 0;
 }
+
+/* 设置.noUi-origin类元素（可能与滑块的起始位置等相关概念对应）为绝对定位，并且初始高度和宽度都设置为0，后续可能会通过JavaScript等动态改变其尺寸和位置来实现滑块的功能逻辑 */
 .noUi-origin {
   position: absolute;
   height: 0;
   width: 0;
 }
+
+/* 设置.noUi-handle类元素（即滑块的手柄部分）为相对定位，并且设置较高的z-index值，使其在堆叠顺序中处于较上层，能显示在轨道等元素之上 */
 .noUi-handle {
   position: relative;
   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;
   transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
 }
+
+/* 当.noUi-target元素处于拖动状态（.noUi-state-drag类存在时），将其内部所有元素的鼠标指针样式强制设置为继承父元素的样式，这样可以确保在拖动过程中鼠标指针样式符合预期，不会出现异常 */
 .noUi-state-drag * {
-  cursor: inherit !important;
+  cursor: inherit!important;
 }
+
 /* Painting and performance;
  * Browsers can paint handles in their own layer.
- */
+ * 以下样式与绘制和性能相关，浏览器可以将滑块手柄绘制在独立的图层中，通过使用3D变换来触发硬件加速，提升滑块操作的流畅度 */
 .noUi-base,
 .noUi-handle {
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 }
+
 /* Slider size and handle placement;
- */
+ * 以下是关于滑块尺寸以及手柄位置相关的样式设置，区分水平和垂直两种布局情况 */
+
+/* 当滑块为水平布局（.noUi-horizontal类存在时），设置滑块的高度为18px */
 .noUi-horizontal {
   height: 18px;
 }
-.noUi-horizontal .noUi-handle {
+
+/* 当滑块为水平布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
+.noUi-horizontal.noUi-handle {
   width: 34px;
   height: 28px;
   left: -17px;
   top: -6px;
 }
+
+/* 当滑块为垂直布局（.noUi-vertical类存在时），设置滑块的宽度为18px */
 .noUi-vertical {
   width: 18px;
 }
-.noUi-vertical .noUi-handle {
+
+/* 当滑块为垂直布局时，对其内部的.noUi-handle类元素（滑块手柄）进行样式设置，设置宽度、高度、水平和垂直方向的偏移量，使其在滑块轨道上处于合适的位置 */
+.noUi-vertical.noUi-handle {
   width: 28px;
   height: 34px;
   left: -6px;
   top: -17px;
 }
+
 /* Styling;
- */
+ * 以下是滑块整体以及各部分的外观样式设置 */
+
+/* 设置.noUi-target类元素（滑块外层容器）的背景颜色、边框圆角、边框样式以及内部阴影效果，使其呈现出一种特定的外观风格 */
 .noUi-target {
   background: #FAFAFA;
   border-radius: 4px;
   border: 1px solid #D3D3D3;
   box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
 }
+
+/* 设置.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）的背景颜色、边框圆角以及内部阴影效果，并且设置其背景颜色改变时有过渡动画，过渡时间为450毫秒，用于实现一些交互时的视觉效果 */
 .noUi-connect {
   background: #3FB8AF;
   border-radius: 4px;
@@ -94,14 +125,21 @@
   -webkit-transition: background 450ms;
   transition: background 450ms;
 }
+
 /* Handles and cursors;
- */
+ * 以下是关于滑块手柄以及鼠标指针样式相关的设置 */
+
+/* 当滑块可拖动（.noUi-draggable类存在时，一般是水平滑块的情况），设置鼠标指针样式为左右拉伸的样式，符合水平拖动操作的视觉提示 */
 .noUi-draggable {
   cursor: ew-resize;
 }
-.noUi-vertical .noUi-draggable {
+
+/* 当滑块为垂直可拖动（.noUi-vertical类且.noUi-draggable类存在时，即垂直滑块情况），设置鼠标指针样式为上下拉伸的样式，符合垂直拖动操作的视觉提示 */
+.noUi-vertical.noUi-draggable {
   cursor: ns-resize;
 }
+
+/* 设置.noUi-handle类元素（滑块手柄）的边框样式、边框圆角、背景颜色以及多种阴影效果，使其呈现出立体、有质感的外观，并且将默认鼠标指针样式设置为默认样式（default） */
 .noUi-handle {
   border: 1px solid #D9D9D9;
   border-radius: 3px;
@@ -109,11 +147,16 @@
   cursor: default;
   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
 }
+
+/* 当.noUi-handle类元素处于激活状态（.noUi-active类存在时，比如正在被点击或拖动时），改变其阴影效果，呈现出一种不同的视觉反馈，用于提示用户当前正在操作滑块手柄 */
 .noUi-active {
   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
 }
+
 /* Handle stripes;
- */
+ * 以下是在滑块手柄上添加条纹样式的设置，通过伪元素:before和:after来实现 */
+
+/* 在.noUi-handle类元素（滑块手柄）的:before伪元素上设置样式，创建一个竖条样式，用于模拟手柄上的条纹装饰效果，设置其内容为空（因为只是用于装饰）、显示为块状元素、设置高度、宽度、背景颜色以及位置等属性 */
 .noUi-handle:before,
 .noUi-handle:after {
   content: "";
@@ -125,69 +168,98 @@
   left: 14px;
   top: 6px;
 }
+
+/* 同样在.noUi-handle类元素（滑块手柄）的:after伪元素上设置样式，创建另一个竖条样式，位置与:before略有不同，共同构成手柄上的条纹装饰效果 */
 .noUi-handle:after {
   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;
   height: 1px;
   left: 6px;
   top: 14px;
 }
-.noUi-vertical .noUi-handle:after {
+
+/* 针对垂直布局下的.noUi-handle类元素（滑块手柄）的:after伪元素，进一步调整其位置，使其与:before伪元素配合形成合适的横条装饰效果 */
+.noUi-vertical.noUi-handle:after {
   top: 17px;
 }
+
 /* Disabled state;
- */
-[disabled] .noUi-connect {
+ * 以下是滑块处于禁用状态时的样式设置 */
+
+/* 当元素处于禁用状态（[disabled]选择器匹配时），对.noUi-connect类元素（滑块轨道上表示已选择范围的连接部分）设置背景颜色，使其呈现出一种表示不可用的视觉效果 */
+[disabled].noUi-connect {
   background: #B8B8B8;
 }
+
+/* 当元素处于禁用状态时，对.noUi-target、.noUi-handle以及.noUi-handle类元素（分别对应滑块外层容器、滑块手柄等）设置鼠标指针样式为不允许操作的样式（not-allowed），提示用户当前滑块不可用 */
 [disabled].noUi-target,
 [disabled].noUi-handle,
-[disabled] .noUi-handle {
+[disabled].noUi-handle {
   cursor: not-allowed;
 }
+
 /* Base;
  *
- */
+ * 以下是与滑块上的刻度标记、数值显示等相关的基础样式设置，首先对.noUi-pips以及其内部所有元素设置盒模型为border-box，确保尺寸计算符合预期 */
 .noUi-pips,
 .noUi-pips * {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
+/* 设置.noUi-pips类元素（一般是用于放置刻度标记、数值显示等内容的容器）为绝对定位，并且设置文字颜色 */
 .noUi-pips {
   position: absolute;
   color: #999;
 }
+
 /* Values;
  *
- */
+ * 以下是关于滑块上数值显示相关的样式设置 */
+
+/* 设置.noUi-value类元素（一般用于显示具体的数值）为绝对定位，并且设置文本不换行、文本水平居中对齐，确保数值能正确显示在相应位置 */
 .noUi-value {
   position: absolute;
   white-space: nowrap;
   text-align: center;
 }
+
+/* 设置.noUi-value-sub类元素（可能是用于显示数值的副标题、辅助信息等，比如小数部分等）的文字颜色和字体大小，使其与主数值有一定的视觉区分 */
 .noUi-value-sub {
   color: #ccc;
   font-size: 10px;
 }
+
 /* Markings;
  *
- */
+ * 以下是关于滑块上各种标记（如刻度线等）相关的样式设置 */
+
+/* 设置.noUi-marker类元素（一般是滑块上的刻度线等标记）为绝对定位，并且设置背景颜色，用于呈现出刻度线的外观 */
 .noUi-marker {
   position: absolute;
   background: #CCC;
 }
+
+/* 设置.noUi-marker-sub类元素（可能是细分刻度线等更小的标记）的背景颜色，使其与普通刻度线有一定视觉区分 */
 .noUi-marker-sub {
   background: #AAA;
 }
+
+/* 设置.noUi-marker-large类元素（可能是较大的重要刻度线等标记）的背景颜色，同样用于视觉区分，突出显示重要刻度 */
 .noUi-marker-large {
   background: #AAA;
 }
+
 /* Horizontal layout;
  *
- */
+ * 以下是滑块为水平布局时，与刻度标记、数值显示等相关的具体样式设置 */
+
+/* 设置.noUi-pips-horizontal类元素（水平布局下的刻度标记等容器）的内边距、高度、垂直位置以及宽度，使其在水平滑块下方合适的位置显示 */
 .noUi-pips-horizontal {
   padding: 10px 0;
   height: 80px;
@@ -195,66 +267,61 @@
   left: 0;
   width: 100%;
 }
+
+/* 当滑块为水平布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置上方 */
 .noUi-value-horizontal {
   -webkit-transform: translate3d(-50%, 50%, 0);
   transform: translate3d(-50%, 50%, 0);
 }
+
+/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及左右外边距等，使其呈现出水平方向的刻度线外观 */
 .noUi-marker-horizontal.noUi-marker {
   margin-left: -1px;
   width: 2px;
   height: 5px;
 }
+
+/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的细分刻度线等标记）进行样式设置，调整其高度，使其与普通刻度线有一定视觉区分 */
 .noUi-marker-horizontal.noUi-marker-sub {
   height: 10px;
 }
+
+/* 当滑块为水平布局时，对.noUi-marker-horizontal类元素（水平布局下的较大刻度线等标记）进行样式设置，调整其高度，使其更加突出显示，与其他刻度线区分开来 */
 .noUi-marker-horizontal.noUi-marker-large {
   height: 15px;
 }
+
 /* Vertical layout;
  *
- */
+ * 以下是滑块为垂直布局时，与刻度标记、数值显示等相关的具体样式设置 */
+
+/* 设置.noUi-pips-vertical类元素（垂直布局下的刻度标记等容器）的内边距、高度、垂直和水平位置，使其在垂直滑块右侧合适的位置显示 */
 .noUi-pips-vertical {
   padding: 0 10px;
   height: 100%;
   top: 0;
   left: 100%;
 }
+
+/* 当滑块为垂直布局时，对.noUi-value类元素（数值显示部分）进行位置调整，通过3D变换将其在水平和垂直方向上移动到合适位置，使其能准确显示在对应的刻度位置右侧，并且设置左边距，使其与刻度线等有合适的间距 */
 .noUi-value-vertical {
   -webkit-transform: translate3d(0, 50%, 0);
   transform: translate3d(0, 50%, 0);
   padding-left: 25px;
 }
+
+/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的刻度线等标记）进行样式设置，设置其宽度、高度以及上下外边距等，使其呈现出垂直方向的刻度线外观 */
 .noUi-marker-vertical.noUi-marker {
   width: 5px;
   height: 2px;
   margin-top: -1px;
 }
+
+/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的细分刻度线等标记）进行样式设置，调整其宽度，使其与普通刻度线有一定视觉区分 */
 .noUi-marker-vertical.noUi-marker-sub {
   width: 10px;
 }
+
+/* 当滑块为垂直布局时，对.noUi-marker-vertical类元素（垂直布局下的较大刻度线等标记）进行样式设置，调整其宽度，使其更加突出显示，与其他刻度线区分开来 */
 .noUi-marker-vertical.noUi-marker-large {
-  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%;
-}
+  width: 15px;}
\ No newline at end of file
diff --git a/src/main/webapp/css/style.css b/src/main/webapp/css/style.css
index 7971229..45d0c8d 100644
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@@ -1,64 +1,75 @@
-html,body{ 
-	width:100%;
-	height:100%;
+/* 设置html和body元素的宽度和高度都占满整个视口，确保页面能铺满浏览器窗口 */
+html,body{
+    width:100%;
+    height:100%;
 }
 
+/* 设置canvas元素的显示方式为块级元素，并且在垂直方向上与父元素底部对齐，常用于图形绘制等相关场景，比如一些基于canvas的动画、特效展示等 */
 canvas{
-  display:block;
-  vertical-align:bottom;
+    display:block;
+    vertical-align:bottom;
 }
 
+/* 类名为.count-particles的元素样式，用于统计粒子相关的显示设置 */
+/* 设置背景颜色为深黑色，绝对定位，指定其在页面中的位置（距离顶部48px，左侧0px），设置宽度为80px，文字颜色为特定的亮色，字体大小为相对父元素的0.8em，文本左对齐，设置首行缩进，行高，底部内边距等样式，并且指定字体族以及加粗字体样式 */
 .count-particles{
-  background: #000022;
-  position: absolute;
-  top: 48px;
-  left: 0;
-  width: 80px;
-  color: #13E8E9;
-  font-size: .8em;
-  text-align: left;
-  text-indent: 4px;
-  line-height: 14px;
-  padding-bottom: 2px;
-  font-family: Helvetica, Arial, sans-serif;
-  font-weight: bold;
+    background: #000022;
+    position: absolute;
+    top: 48px;
+    left: 0;
+    width: 80px;
+    color: #13E8E9;
+    font-size:.8em;
+    text-align: left;
+    text-indent: 4px;
+    line-height: 14px;
+    padding-bottom: 2px;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: bold;
 }
 
+/* 类名为.js-count-particles的元素样式，可能用于通过JavaScript动态控制的粒子计数相关元素，设置字体大小为相对父元素的1.1em，相对.count-particles类中的字体大小有所增大，用于突出显示等目的 */
 .js-count-particles{
-  font-size: 1.1em;
+    font-size: 1.1em;
 }
 
+/* 对id为stats以及类名为count-particles的元素设置样式，禁止用户选择文本内容（在一些交互场景下避免用户误操作选择文本），并且设置顶部和左侧的外边距为5px，使其在页面中有一定的间距 */
 #stats,
 .count-particles{
-  -webkit-user-select: none;
-  margin-top: 5px;
-  margin-left: 5px;
+    -webkit-user-select: none;
+    margin-top: 5px;
+    margin-left: 5px;
 }
 
+/* 对id为stats的元素设置样式，设置其边框右上角和左上角的圆角半径为3px，右下角和左下角的圆角半径为0，并且设置超出部分隐藏，常用于一些需要展示特定形状且不希望内容溢出的容器元素，比如统计信息展示框等 */
 #stats{
-  border-radius: 3px 3px 0 0;
-  overflow: hidden;
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
 }
 
+/* 对类名为count-particles的元素设置样式，设置其边框右下角和左下角的圆角半径为3px，右上角和左上角的圆角半径为0，与#stats元素的边框圆角设置配合，可能用于形成一个完整的、有特定外观的容器样式 */
 .count-particles{
-  border-radius: 0 0 3px 3px;
+    border-radius: 0 0 3px 3px;
 }
 
-
+/* 对id为particles-js的元素设置样式，通常用于承载粒子效果的容器 */
+/* 设置宽度和高度都占满父容器（一般就是整个页面可视区域），相对定位，设置背景图片，指定其在水平和垂直方向上都居中显示，设置背景图片铺满整个容器（根据容器大小自动缩放），并且不重复显示，使其作为页面的背景铺满整个页面，同时让其在水平方向上自动居中（通过设置左右外边距为auto实现） */
 #particles-js{
-	width: 100%;
-	height: 100%;
-	position: relative;
-	background-image: url(../images/bg.jpg);
-	background-position: 50% 50%;
-	background-size: cover;
-	background-repeat: no-repeat;
-	margin-left: auto;
-	margin-right: auto;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-image: url(../images/bg.jpg);
+    background-position: 50% 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin-left: auto;
+    margin-right: auto;
 }
 
+/* 类名为sk-rotating-plane的元素样式，一般用于实现旋转动画效果的元素 */
+/* 初始设置为不显示（display: none），指定宽度和高度，设置自动水平居中（通过设置左右外边距为auto实现），背景颜色为白色，定义动画名称、持续时间以及循环播放且缓动效果为ease-in-out，设置较高的z-index值使其能显示在其他元素之上，绝对定位，并且通过设置top和left属性以及负外边距来使其在页面中垂直和水平方向上都居中显示 */
 .sk-rotating-plane {
-	display: none;
+    display: none;
     width: 80px;
     height: 80px;
     margin: auto;
@@ -72,42 +83,182 @@ canvas{
     margin-left: -40px;
     margin-top: -80px;
 }
+
+/* 当类名为sk-rotating-plane的元素同时具有active类时，将其显示出来（display: block），可能通过JavaScript动态添加active类来控制其显示隐藏，实现特定的交互效果 */
 .sk-rotating-plane.active{display: block;}
 
+/* 定义名为sk-rotating-plane的关键帧动画 */
+/* 在动画的不同阶段（0%、50%、100%）设置元素的3D旋转效果，通过transform属性以及不同浏览器前缀来兼容各种浏览器，实现一个围绕X轴和Y轴旋转的动画效果，用于呈现旋转的视觉效果 */
 @keyframes sk-rotating-plane{
-	0% {
-	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-	}
-	50% {
-	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-	}
-	100% {
-	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-	}
+    0% {
+        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    }
+    50% {
+        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    }
+    100% {
+        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    }
 }
 
+/* 定义名为login-small的关键帧动画 */
+/* 在动画的开始（0%）和结束（100%）阶段设置元素的缩放效果，通过不同浏览器前缀的transform属性来兼容各种浏览器，实现从原始大小缩放到较小尺寸的动画效果，可能用于登录框等元素的隐藏或缩小展示等交互场景 */
 @keyframes login-small{
-	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 */
-	}
-	100%{
-		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 */
-	}
-}
-
-.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 */}
-.login-top{font-size: 24px;margin-top: 100px;padding-left: 40px;box-sizing: border-box;color: #333333;margin-bottom: 50px;}
-.login-center{width: 100%;box-sizing: border-box;padding: 0 40px;margin-bottom: 30px;}
-.login-center-img{width: 20px;height: 20px;float: left;margin-top: 5px;}
-.login-center-img>img{width: 100%;}
-.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-center-input input:focus~.login-center-input-text{top: 0;z-index: 3;opacity: 1;margin-top: -15px;}
-.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;width: 250px;text-align: center;height: 40px;line-height: 40px;background-color: dodgerblue;border-radius: 5px;margin: 0 auto;margin-top: 50px;color: white;}
+    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 */
+    }
+    100%{
+        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 */
+    }
+}
+
+/* 类名为login的元素样式，一般用于登录框相关的整体布局和外观设置 */
+/* 设置较高的z-index值使其能显示在其他元素之上，绝对定位，指定宽度、边框圆角、高度以及背景颜色为白色，添加阴影效果使其有立体感，通过设置top和left属性以及负外边距来使其在页面中垂直和水平方向上都居中显示，并且设置所有属性改变时的过渡效果，用于实现一些动画过渡效果，比如显示隐藏、大小改变等操作时的平滑过渡 */
+.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 */
+}
+
+/* 类名为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;
+}
\ No newline at end of file

ID	用户名	姓名
<%=j++%>	${admin.username}	${admin.name}	${admin.uid}	${admin.phone}	${admin.power}	${admin.description}	- - - - - - - - - -
<%=j++%>	${admin.username}	${admin.name}	${admin.uid}	${admin.phone}	${admin.power}	${admin.description}	+ + + + + + + + + + + + +