From 10dab3ba501b681a1a0452453585b1c6f6c8c9e2 Mon Sep 17 00:00:00 2001
From: zhaozhiyuan <2920177614@qq.com>
Date: Tue, 17 Dec 2024 19:41:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E9=87=8A=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/applicationContext.xml | 113 +++--
 src/mybatis-config.xml     |  29 +-
 src/springmvc-config.xml   |  79 ++--
 web/css/font.css           |  34 +-
 web/css/login-style.css    | 530 +++++++++++++++++++---
 web/css/pg_btn.css         | 124 ++---
 web/css/usersLogin.css     | 152 ++++---
 web/css/xadmin.css         | 902 ++++++++++++++++++++++++++-----------
 8 files changed, 1428 insertions(+), 535 deletions(-)

diff --git a/src/applicationContext.xml b/src/applicationContext.xml
index 1b49cb9..0bcd2e2 100644
--- a/src/applicationContext.xml
+++ b/src/applicationContext.xml
@@ -1,54 +1,73 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<beans xmlns="http://www.springframework.org/schema/beans"
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-    xmlns:aop="http://www.springframework.org/schema/aop"
-    xmlns:tx="http://www.springframework.org/schema/tx" 
-    xmlns:context="http://www.springframework.org/schema/context"
-    xsi:schemaLocation="http://www.springframework.org/schema/beans 
-    http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
-    http://www.springframework.org/schema/tx 
-    http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
-    http://www.springframework.org/schema/context 
-    http://www.springframework.org/schema/context/spring-context-4.3.xsd
-    http://www.springframework.org/schema/aop 
-    http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">
-    <!-- 读取db.properties -->
+<!-- 声明 XML 文档的版本和编码格式 -->
+
+<beans xmlns="http://www.springframework.org/schema/beans"  <!-- 定义 Spring Beans 命名空间 -->
+    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  <!-- 定义 XML Schema 实例命名空间 -->
+    xmlns:aop="http://www.springframework.org/schema/aop"  <!-- 定义 AOP 命名空间 -->
+    xmlns:tx="http://www.springframework.org/schema/tx"  <!-- 定义事务管理命名空间 -->
+    xmlns:context="http://www.springframework.org/schema/context"  <!-- 定义 Spring 上下文命名空间 -->
+    xsi:schemaLocation="http://www.springframework.org/schema/beans  <!-- 定义 XML Schema 文件位置 -->
+    http://www.springframework.org/schema/beans/spring-beans-4.3.xsd  <!-- Beans schema 的位置 -->
+    http://www.springframework.org/schema/tx  <!-- 事务管理 schema 的位置 -->
+    http://www.springframework.org/schema/tx/spring-tx-4.3.xsd  <!-- 事务管理 schema 文件 -->
+    http://www.springframework.org/schema/context  <!-- 上下文配置 schema 的位置 -->
+    http://www.springframework.org/schema/context/spring-context-4.3.xsd  <!-- 上下文配置 schema 文件 -->
+    http://www.springframework.org/schema/aop  <!-- AOP schema 的位置 -->
+    http://www.springframework.org/schema/aop/spring-aop-4.3.xsd">  <!-- AOP schema 文件 -->
+    
+    <!-- 读取 db.properties 配置文件中的数据库相关信息 -->
     <context:property-placeholder location="classpath:db.properties"/>
-    <!-- 配置数据源 -->
-	<bean id="dataSource" 
-                           class="org.apache.commons.dbcp2.BasicDataSource">
-		<!--数据库驱动 -->
-		<property name="driverClassName" value="${jdbc.driver}" />
-		<!--连接数据库的url -->
-		<property name="url" value="${jdbc.url}" />
-		<!--连接数据库的用户名 -->
-		<property name="username" value="${jdbc.username}" />
-		<!--连接数据库的密码 -->
-		<property name="password" value="${jdbc.password}" />
-		<!--最大连接数 -->
-		<property name="maxTotal" value="${jdbc.maxTotal}" />
-		<!--最大空闲连接  -->
-		<property name="maxIdle" value="${jdbc.maxIdle}" />
-		<!--初始化连接数  -->
-		<property name="initialSize" value="${jdbc.initialSize}" />
-	</bean>
-     <!-- 事务管理器，依赖于数据源 -->
-	<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
-		<property name="dataSource" ref="dataSource" />
-	</bean>	
-    <!-- 开启事务注解 -->
-	<tx:annotation-driven transaction-manager="transactionManager"/>
-    <!-- 配置MyBatis工厂SqlSessionFactory -->
+    
+    <!-- 配置数据源，使用 Apache DBCP2 数据源 -->
+    <bean id="dataSource" 
+          class="org.apache.commons.dbcp2.BasicDataSource">
+          
+        <!-- 配置数据库连接驱动 -->
+        <property name="driverClassName" value="${jdbc.driver}" />
+        
+        <!-- 配置数据库连接的 URL -->
+        <property name="url" value="${jdbc.url}" />
+        
+        <!-- 配置数据库连接的用户名 -->
+        <property name="username" value="${jdbc.username}" />
+        
+        <!-- 配置数据库连接的密码 -->
+        <property name="password" value="${jdbc.password}" />
+        
+        <!-- 配置最大连接数 -->
+        <property name="maxTotal" value="${jdbc.maxTotal}" />
+        
+        <!-- 配置最大空闲连接数 -->
+        <property name="maxIdle" value="${jdbc.maxIdle}" />
+        
+        <!-- 配置初始化连接数 -->
+        <property name="initialSize" value="${jdbc.initialSize}" />
+    </bean>
+    
+    <!-- 配置事务管理器，依赖于上面定义的数据源 -->
+    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
+        <!-- 注入数据源到事务管理器 -->
+        <property name="dataSource" ref="dataSource" />
+    </bean>    
+    
+    <!-- 开启事务注解支持，指定事务管理器 -->
+    <tx:annotation-driven transaction-manager="transactionManager"/>
+    
+    <!-- 配置 MyBatis 的 SqlSessionFactory，负责创建数据库会话 -->
     <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
-         <!--注入数据源 -->
+         <!-- 注入数据源到 SqlSessionFactory -->
          <property name="dataSource" ref="dataSource" />
-         <!--指定核MyBatis心配置文件位置 -->
-          <property name="configLocation" value="classpath:mybatis-config.xml" />
+         
+         <!-- 配置 MyBatis 核心配置文件的位置 -->
+         <property name="configLocation" value="classpath:mybatis-config.xml" />
+    </bean>
+    
+    <!-- 配置 MyBatis 的 Mapper 扫描器，用于自动扫描 DAO 接口 -->
+    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
+        <!-- 配置要扫描的包，扫描所有 Mapper 接口 -->
+        <property name="basePackage" value="com.itheima.dao"/>
     </bean>
-    <!-- 配置mapper扫描器 -->
-	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
-		<property name="basePackage" value="com.itheima.dao"/>
-	</bean>
-    <!-- 扫描Service --> 
+    
+    <!-- 扫描并加载 Service 层的 Bean -->
     <context:component-scan base-package="com.itheima.service" />
 </beans>
diff --git a/src/mybatis-config.xml b/src/mybatis-config.xml
index a469bc9..27992ed 100644
--- a/src/mybatis-config.xml
+++ b/src/mybatis-config.xml
@@ -1,9 +1,22 @@
-<?xml version="1.0" encoding="UTF-8" ?>
-<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
-"http://mybatis.org/dtd/mybatis-3-config.dtd">
-<configuration>
+<?xml version="1.0" encoding="UTF-8" ?>  
+<!-- 定义 XML 文件的版本和编码格式，这里指定使用 UTF-8 编码。 -->
+
+<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
+"http://mybatis.org/dtd/mybatis-3-config.dtd">  
+<!-- 声明这个配置文件遵循 MyBatis 的 DTD (Document Type Definition)，用于验证 XML 文件的结构和规则。 -->
+
+<configuration>  
+<!-- 配置文件的根元素，所有的 MyBatis 配置信息都包含在这里面。 -->
+
 	<!-- 别名定义 -->
-	<typeAliases>
-		<package name="com.itheima.po" />
-	</typeAliases>
-</configuration>
+	<typeAliases>  
+		<!-- typeAliases 元素用于定义 Java 类型的别名，方便在 MyBatis 的映射文件中使用简短的类名。 -->
+		
+		<package name="com.itheima.po" />  
+		<!-- 指定一个 Java 包，用来扫描该包下的所有 POJO 类，并为每个类自动生成别名。 -->
+		<!-- 例如，如果包中有一个类 `User`，那么 MyBatis 会自动为它生成别名 `User`，可以在映射文件中直接使用 `User` 作为类型。 -->
+		
+	</typeAliases>  
+
+</configuration>  
+<!-- 结束配置文件的根元素 -->
diff --git a/src/springmvc-config.xml b/src/springmvc-config.xml
index 1bdc0c5..acb07c3 100644
--- a/src/springmvc-config.xml
+++ b/src/springmvc-config.xml
@@ -1,31 +1,58 @@
-<beans xmlns="http://www.springframework.org/schema/beans"
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-  xmlns:mvc="http://www.springframework.org/schema/mvc"
-  xmlns:context="http://www.springframework.org/schema/context"
-  xmlns:tx="http://www.springframework.org/schema/tx"
-  xsi:schemaLocation="http://www.springframework.org/schema/beans 
-  http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 
-  http://www.springframework.org/schema/mvc 
-  http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd 
-  http://www.springframework.org/schema/context 
-  http://www.springframework.org/schema/context/spring-context-4.3.xsd">
+<beans xmlns="http://www.springframework.org/schema/beans"  
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
+  xmlns:mvc="http://www.springframework.org/schema/mvc"  
+  xmlns:context="http://www.springframework.org/schema/context"  
+  xmlns:tx="http://www.springframework.org/schema/tx"  
+  xsi:schemaLocation="http://www.springframework.org/schema/beans  
+  http://www.springframework.org/schema/beans/spring-beans-4.3.xsd  
+  http://www.springframework.org/schema/mvc  
+  http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd  
+  http://www.springframework.org/schema/context  
+  http://www.springframework.org/schema/context/spring-context-4.3.xsd">  
+<!--
+声明当前文件使用 Spring 框架的 XML 配置格式，并指定各个 XML 命名空间（xmlns）以及对应的 XSD 文件（xsi:schemaLocation）。这些配置决定了文件的验证规则和使用的功能。
+- `xmlns` 定义了 XML 文件的命名空间，Spring 通过命名空间来识别不同的配置模块。
+- `xsi:schemaLocation` 定义了每个命名空间对应的 XSD 文件地址，用于验证配置文件的结构。
+-->
+
 	<!-- 配置包扫描器，扫描@Controller注解的类 -->
-	<context:component-scan base-package="com.itheima.controller" />
+	<context:component-scan base-package="com.itheima.controller" />  
+	<!--
+	<context:component-scan> 元素用于配置 Spring 扫描指定包及其子包中的类，自动识别并注册为 Spring 容器中的 Bean。
+	这里指定扫描 `com.itheima.controller` 包下的类，Spring 会自动扫描并注册标注了 `@Controller` 注解的类，便于实现控制器功能。
+	-->
+
 	<!-- 加载注解驱动 -->
-	<mvc:annotation-driven />
+	<mvc:annotation-driven />  
+	<!--
+	<mvc:annotation-driven> 配置启用 Spring MVC 的注解驱动功能。
+	该配置启用之后，Spring MVC 会支持如 `@Controller`、`@RequestMapping`、`@ResponseBody` 等注解功能。
+	-->
 
-	<!--配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
-	<mvc:resources location="/js/" mapping="/js/**"/>
-	<mvc:resources location="/css/" mapping="/css/**"/>
-	<mvc:resources location="/fonts/" mapping="/fonts/**"/>
-	<mvc:resources location="/images/" mapping="/images/**"/>
-	<mvc:resources location="/lib/" mapping="/lib/**"/>
-	<mvc:resources location="/layui_exts/" mapping="/layui_exts/**"/>
+	<!-- 配置静态资源的访问映射，此配置中的文件，将不被前端控制器拦截 -->
+	<mvc:resources location="/js/" mapping="/js/**"/>  
+	<mvc:resources location="/css/" mapping="/css/**"/>  
+	<mvc:resources location="/fonts/" mapping="/fonts/**"/>  
+	<mvc:resources location="/images/" mapping="/images/**"/>  
+	<mvc:resources location="/lib/" mapping="/lib/**"/>  
+	<mvc:resources location="/layui_exts/" mapping="/layui_exts/**"/>  
+	<!--
+	<mvc:resources> 元素用于配置静态资源（如 JavaScript、CSS、图片等）的访问路径映射。
+	这些静态资源不会经过 Spring MVC 的前端控制器拦截，直接通过对应的 URL 路径进行访问。
+	每个 `<mvc:resources>` 配置指定一个静态资源的根路径（`location`），和相应的 URL 映射（`mapping`）。
+	例如：`/js/**` 映射到 `/js/` 目录下的所有文件。
+	-->
 
 	<!-- 配置视图解析器 -->
-	<bean class=
-    "org.springframework.web.servlet.view.InternalResourceViewResolver">
-		<property name="prefix" value="/WEB-INF/jsp/" />
-		<property name="suffix" value=".jsp" />
-	</bean>
-</beans>
+	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
+		<property name="prefix" value="/WEB-INF/jsp/" />  
+		<property name="suffix" value=".jsp" />  
+	</bean>  
+	<!--
+	<bean> 元素定义了一个 Spring Bean，这里配置了 `InternalResourceViewResolver`，该类用于解析视图名称并找到相应的 JSP 文件。
+	- `prefix` 配置了 JSP 文件的前缀路径（即 JSP 文件所在的目录），这里是 `/WEB-INF/jsp/`，表示所有 JSP 文件都放在该目录下。
+	- `suffix` 配置了 JSP 文件的后缀，这里设置为 `.jsp`，表示视图名称解析后会拼接成 JSP 文件路径。
+	-->
+
+</beans>  
+<!-- 结束 Spring 配置文件 -->
diff --git a/web/css/font.css b/web/css/font.css
index b83e5b4..4898c3f 100644
--- a/web/css/font.css
+++ b/web/css/font.css
@@ -1,16 +1,36 @@
+/* 定义字体图标的字体文件 */
 @font-face {
+  /* 定义字体家族名称为 'iconfont' */
   font-family: 'iconfont';
+  
+  /* 指定字体文件路径，使用 eot 格式（IE6-IE8 支持） */
   src: url('../fonts/iconfont.eot');
-  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/iconfont.woff') format('woff'),
-  url('../fonts/iconfont.ttf') format('truetype'),
-  url('../fonts/iconfont.svg#iconfont') format('svg');
+  
+  /* 指定其他格式的字体文件，分别为：eot、woff、truetype 和 svg，
+     这些格式针对不同的浏览器提供支持。 */
+  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),  /* IE Fix for eot 文件 */
+       url('../fonts/iconfont.woff') format('woff'),  /* WOFF 格式，用于大多数现代浏览器 */
+       url('../fonts/iconfont.ttf') format('truetype'),  /* TTF 格式，用于某些旧版浏览器 */
+       url('../fonts/iconfont.svg#iconfont') format('svg');  /* SVG 格式，用于移动设备和一些现代浏览器 */
 }
+
+/* 配置图标字体的样式 */
 .iconfont{
-  font-family:"iconfont" !important;
-  font-size:16px;font-style:normal;
+  /* 设置字体家族为 'iconfont'，确保所有使用该类的元素应用自定义图标字体 */
+  font-family: "iconfont" !important;
+  
+  /* 设置字体大小为 16px，可以根据需求调整大小 */
+  font-size: 16px;
+  
+  /* 设置字体样式为正常，确保图标显示清晰 */
+  font-style: normal;
+  
+  /* 启用 Webkit 浏览器的字体平滑效果，使得字体显示更加柔和 */
   -webkit-font-smoothing: antialiased;
+  
+  /* 设置文本描边宽度，防止在某些浏览器中显示模糊的图标 */
   -webkit-text-stroke-width: 0.2px;
+  
+  /* 启用 Firefox OS X 上的字体平滑效果，使字体更加清晰 */
   -moz-osx-font-smoothing: grayscale;
 }
-
diff --git a/web/css/login-style.css b/web/css/login-style.css
index 4fd30ed..47431ec 100644
--- a/web/css/login-style.css
+++ b/web/css/login-style.css
@@ -1,66 +1,466 @@
-@charset "utf-8";
-/* CSS Document */
-*{font-size:9pt;border:0;margin:0;padding:0;}
-body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}
-ul{display:block;margin:0;padding:0;list-style:none;}
-li{display:block;margin:0;padding:0;list-style: none;}
-img{border:0;}
-dl,dt,dd,span{margin:0;padding:0;display:block;}
-a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
-a:hover{color:#00a4ac;text-decoration:none;}
-table{border-collapse:collapse;border-spacing: 0;}
-cite{font-style:normal;}
-h2{font-weight:normal;}
-
-/*cloud*/
-
-#mainBody {width:100%;height:100%;position:absolute;z-index:-1;}
-.cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/cloud.png) no-repeat;z-index:1;opacity:0.5;}
-#cloud2 {z-index:2;}
-
-
-/*login*/
-.logintop{height:47px; position:absolute; top:0; background:url(../images/loginbg1.png) repeat-x;z-index:100; width:100%;}
-.logintop span{color:#fff; line-height:47px; background:url(../images/loginsj.png) no-repeat 21px 18px; text-indent:44px; color:#afc5d2; float:left;}
-.logintop ul{float:right; padding-right:30px;}
-.logintop ul li{float:left; margin-left:20px; line-height:47px;}
-.logintop ul li a{color:#afc5d2;}
-.logintop ul li a:hover{color:#fff;}
-.loginbody{background:url(../images/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
-.systemlogo{background:url(../images/loginlogo.png) no-repeat center;width:100%; height:71px; margin-top:75px;}
-.loginbox{width:692px; height:336px; background:url(../images/logininfo.png) no-repeat; margin-top:30px;}
-.loginbox ul{margin-top:88px; margin-left:285px;}
-.loginbox ul li{margin-bottom:25px;}
-.loginbox ul li label{color:#687f92; padding-left:25px;}
-.loginbox ul li label a{color:#687f92;}
-.loginbox ul li label a:hover{color:#3d96c9;}
-.loginbox ul li label input{margin-right:5px;}
-.loginbox,.loginbox1,.loginbox2,.loginbox3,.loginbox4{width:692px; height:373px;margin-top:30px;}
-.loginuser{width:299px; height:48px; background:url(../images/loginuser.png) no-repeat; border:none; line-height:48px; padding-left:44px; font-size:14px; font-weight:bold;}
-.loginpwd{width:299px; height:48px; background:url(../images/loginpassword.png) no-repeat; border:none;line-height:48px; padding-left:44px; font-size:14px; color:#90a2bc;}
-.loginbtn{width:111px;height:35px; background:url(../images/buttonbg.png) repeat-x; font-size:14px; font-weight:bold; color:#fff;cursor:pointer; line-height:35px;}
-.loginbm{height:50px; line-height:50px; text-align:center; background:url(../images/loginbg2.png) repeat-x;position:absolute; bottom:0; width:100%; color:#0b3a58;}
-.loginbm a{font-weight:bold;color:#0b3a58;}
-.loginbm a:hover{color:#fff;}
-
-.loginbox1{background:url(../images/logininfo1.png) no-repeat;}
-.loginbox1 ul li{margin-bottom:16px;}
-.loginbox2{background:url(../images/logininfo2.png) no-repeat;}
-.loginbox2 ul li{margin-bottom:16px;}
-.loginbox3{background:url(../images/logininfo3.png) no-repeat;}
-.loginbox3 ul li{margin-bottom:16px;}
-.yzm{width:341px; height:46px; background:url(../images/yzmbg.png) no-repeat; padding-bottom:5px;}
-.yzm span{display:block; float:left;width:227px; height:46px;}
-.yzm span input{background:none; border:none; width:183px; height:46px; line-height:46px;padding-left:44px;font-size:14px; color:#cee4f1;}
-.yzm cite{float:right; width:114px; height:46px; line-height:46px; font-size:18px; color:#fff; text-align:center;}
-
-.loginbody1{background:url(../images/loginbg4.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
-.systemlogo{width:100%; height:71px; margin-top:120px; text-align:center;}
-.loginbox0{width:810px;margin-top:0px;height:252px;}
-.loginlist{width:810px; overflow:hidden;}
-.loginlist{margin-top:110px;}
-.loginlist li{float:left; margin-left:3px; margin-right:3px;}
-.loginlist li a{ display:block;width:196px; height:252px; background:url(../images/lbg.png) no-repeat; text-align:center; padding-top:25px; cursor:pointer;}
-.loginlist li a:hover{background:url(../images/lbg1.png) no-repeat;}
-.loginlist li a p{font-size:16px; color:#fff; padding-top:10px;}
+@charset "utf-8"; /* 指定字符编码为 UTF-8 */
 
+/* 通用样式 */
+* {
+  font-size: 9pt; /* 设置所有元素的字体大小为9pt */
+  border: 0; /* 去掉所有元素的边框 */
+  margin: 0; /* 去掉所有元素的外边距 */
+  padding: 0; /* 去掉所有元素的内边距 */
+}
+
+body {
+  font-family: '微软雅黑'; /* 设置body的字体为微软雅黑 */
+  margin: 0 auto; /* 将body的外边距设置为自动，从而实现水平居中 */
+  min-width: 980px; /* 设置body的最小宽度为980px */
+}
+
+ul {
+  display: block; /* 将ul设置为块级元素 */
+  margin: 0; /* 去掉ul的外边距 */
+  padding: 0; /* 去掉ul的内边距 */
+  list-style: none; /* 去掉ul的默认列表样式（无点的列表） */
+}
+
+li {
+  display: block; /* 将li设置为块级元素 */
+  margin: 0; /* 去掉li的外边距 */
+  padding: 0; /* 去掉li的内边距 */
+  list-style: none; /* 去掉li的默认列表样式 */
+}
+
+img {
+  border: 0; /* 去掉图片的边框 */
+}
+
+dl, dt, dd, span {
+  margin: 0; /* 去掉dl, dt, dd, span的外边距 */
+  padding: 0; /* 去掉dl, dt, dd, span的内边距 */
+  display: block; /* 将这些元素设置为块级元素 */
+}
+
+a, a:focus {
+  text-decoration: none; /* 去掉链接的下划线 */
+  color: #000; /* 设置链接的文字颜色为黑色 */
+  outline: none; /* 去掉链接的聚焦时轮廓 */
+  blr: expression(this.onFocus=this.blur()); /* 兼容IE去掉聚焦时的蓝色框（已废弃，建议不再使用） */
+}
+
+a:hover {
+  color: #00a4ac; /* 设置鼠标悬停时，链接的文字颜色为 #00a4ac（浅蓝色） */
+  text-decoration: none; /* 鼠标悬停时去掉链接的下划线 */
+}
+
+table {
+  border-collapse: collapse; /* 设置表格的边框合并为一个单一的边框 */
+  border-spacing: 0; /* 去掉表格单元格之间的间距 */
+}
+
+cite {
+  font-style: normal; /* 取消cite标签的斜体样式 */
+}
+
+h2 {
+  font-weight: normal; /* 设置h2标题的字体粗细为正常 */
+}
+
+/* 背景云朵部分样式 */
+#mainBody {
+  width: 100%; /* 设置#mainBody的宽度为100% */
+  height: 100%; /* 设置#mainBody的高度为100% */
+  position: absolute; /* 设置#mainBody为绝对定位 */
+  z-index: -1; /* 设置#mainBody的z-index为-1，确保它在页面其他内容的下面 */
+}
+
+.cloud {
+  position: absolute; /* 设置.cloud为绝对定位 */
+  top: 0px; /* 设置.cloud的顶部距离为0 */
+  left: 0px; /* 设置.cloud的左侧距离为0 */
+  width: 100%; /* 设置.cloud的宽度为100% */
+  height: 100%; /* 设置.cloud的高度为100% */
+  background: url(../images/cloud.png) no-repeat; /* 设置背景图为云朵图片，不重复显示 */
+  z-index: 1; /* 设置.cloud的z-index为1，确保它在#mainBody之上 */
+  opacity: 0.5; /* 设置.cloud的透明度为0.5 */
+}
+
+#cloud2 {
+  z-index: 2; /* 设置#cloud2的z-index为2，确保它在.cloud元素之上 */
+}
+
+
+/* 顶部登录栏 */
+.logintop {
+    height: 47px; /* 设置顶部条的高度为47px */
+    position: absolute; /* 使用绝对定位 */
+    top: 0; /* 距离顶部为0，固定在页面顶端 */
+    background: url(../images/loginbg1.png) repeat-x; /* 背景图片，横向平铺 */
+    z-index: 100; /* 层级较高，确保其位于其他内容上面 */
+    width: 100%; /* 宽度为100%，覆盖整个页面宽度 */
+}
+
+/* 登录栏中的文字样式 */
+.logintop span {
+    color: #fff; /* 文字颜色为白色 */
+    line-height: 47px; /* 行高为47px，使文字垂直居中 */
+    background: url(../images/loginsj.png) no-repeat 21px 18px; /* 设置背景图片，调整位置 */
+    text-indent: 44px; /* 文字缩进，避免文字与图片重叠 */
+    color: #afc5d2; /* 文字颜色 */
+    float: left; /* 向左浮动 */
+}
+
+/* 登录栏右侧的导航链接样式 */
+.logintop ul {
+    float: right; /* 向右浮动 */
+    padding-right: 30px; /* 右侧内边距 */
+}
+
+/* 导航链接列表项的样式 */
+.logintop ul li {
+    float: left; /* 向左浮动 */
+    margin-left: 20px; /* 左侧间距 */
+    line-height: 47px; /* 行高为47px，确保与顶部对齐 */
+}
+
+/* 导航链接的样式 */
+.logintop ul li a {
+    color: #afc5d2; /* 设置链接文字颜色 */
+}
+
+/* 导航链接鼠标悬停时的样式 */
+.logintop ul li a:hover {
+    color: #fff; /* 悬停时文字颜色变为白色 */
+}
+
+/* 登录页面主体样式 */
+.loginbody {
+    background: url(../images/loginbg3.png) no-repeat center center; /* 设置背景图片，并且居中显示 */
+    width: 100%; /* 宽度为100% */
+    height: 585px; /* 高度为585px */
+    overflow: hidden; /* 隐藏超出的内容 */
+    position: absolute; /* 使用绝对定位 */
+    top: 47px; /* 距离顶部47px，避免与顶部导航栏重叠 */
+}
+
+/* 系统logo的样式 */
+.systemlogo {
+    background: url(../images/loginlogo.png) no-repeat center; /* 设置logo背景，居中显示 */
+    width: 100%; /* 宽度为100% */
+    height: 71px; /* 高度为71px */
+    margin-top: 75px; /* 上边距为75px，调整位置 */
+}
+
+/* 登录框的基本样式 */
+.loginbox {
+    width: 692px; /* 宽度为692px */
+    height: 336px; /* 高度为336px */
+    background: url(../images/logininfo.png) no-repeat; /* 设置背景图片 */
+    margin-top: 30px; /* 上边距为30px */
+}
+
+/* 登录框内表单内容的样式 */
+.loginbox ul {
+    margin-top: 88px; /* 上边距为88px */
+    margin-left: 285px; /* 左边距为285px */
+}
+
+/* 表单项的样式 */
+.loginbox ul li {
+    margin-bottom: 25px; /* 每个表单项之间的底部间距 */
+}
+
+/* 表单项标签的样式 */
+.loginbox ul li label {
+    color: #687f92; /* 标签文字颜色 */
+    padding-left: 25px; /* 左内边距25px */
+}
+
+/* 标签链接的样式 */
+.loginbox ul li label a {
+    color: #687f92; /* 设置链接文字颜色 */
+}
+
+/* 标签链接的悬停样式 */
+.loginbox ul li label a:hover {
+    color: #3d96c9; /* 悬停时文字颜色变为蓝色 */
+}
+
+/* 输入框的样式 */
+.loginbox ul li label input {
+    margin-right: 5px; /* 输入框右侧的间距 */
+}
+
+/* 其他登录框的样式（不同背景图片） */
+.loginbox,.loginbox1,.loginbox2,.loginbox3,.loginbox4 {
+    width: 692px; /* 宽度为692px */
+    height: 373px; /* 高度为373px */
+    margin-top: 30px; /* 上边距为30px */
+}
+
+/* 用户名输入框的样式 */
+.loginuser {
+    width: 299px; /* 宽度为299px */
+    height: 48px; /* 高度为48px */
+    background: url(../images/loginuser.png) no-repeat; /* 背景图 */
+    border: none; /* 无边框 */
+    line-height: 48px; /* 行高与高度相同，保证文字垂直居中 */
+    padding-left: 44px; /* 左内边距44px */
+    font-size: 14px; /* 字体大小为14px */
+    font-weight: bold; /* 字体加粗 */
+}
+
+/* 密码输入框的样式 */
+.loginpwd {
+    width: 299px; /* 宽度为299px */
+    height: 48px; /* 高度为48px */
+    background: url(../images/loginpassword.png) no-repeat; /* 背景图 */
+    border: none; /* 无边框 */
+    line-height: 48px; /* 行高与高度相同，保证文字垂直居中 */
+    padding-left: 44px; /* 左内边距44px */
+    font-size: 14px; /* 字体大小为14px */
+    color: #90a2bc; /* 字体颜色 */
+}
+
+/* 登录按钮的样式 */
+.loginbtn {
+    width: 111px; /* 宽度为111px */
+    height: 35px; /* 高度为35px */
+    background: url(../images/buttonbg.png) repeat-x; /* 按钮背景图横向平铺 */
+    font-size: 14px; /* 字体大小为14px */
+    font-weight: bold; /* 字体加粗 */
+    color: #fff; /* 字体颜色为白色 */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+    line-height: 35px; /* 行高与高度相同，确保文字垂直居中 */
+}
+
+/* 底部版权栏的样式 */
+.loginbm {
+    height: 50px; /* 高度为50px */
+    line-height: 50px; /* 行高为50px，确保文字垂直居中 */
+    text-align: center; /* 文本居中对齐 */
+    background: url(../images/loginbg2.png) repeat-x; /* 底部背景图横向平铺 */
+    position: absolute; /* 使用绝对定位 */
+    bottom: 0; /* 固定在底部 */
+    width: 100%; /* 宽度为100% */
+    color: #0b3a58; /* 文字颜色 */
+}
+
+/* 底部链接的样式 */
+.loginbm a {
+    font-weight: bold; /* 字体加粗 */
+    color: #0b3a58; /* 链接颜色 */
+}
+
+/* 底部链接的悬停样式 */
+.loginbm a:hover {
+    color: #fff; /* 悬停时链接颜色变为白色 */
+}
+
+/* 其他登录框（不同背景） */
+.loginbox1 {
+    background: url(../images/logininfo1.png) no-repeat; /* 背景图 */
+}
+
+.loginbox1 ul li {
+    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
+}
+
+.loginbox2 {
+    background: url(../images/logininfo2.png) no-repeat; /* 背景图 */
+}
+
+.loginbox2 ul li {
+    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
+}
+
+.loginbox3 {
+    background: url(../images/logininfo3.png) no-repeat; /* 背景图 */
+}
+
+.loginbox3 ul li {
+    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
+}
+
+/* 验证码输入框的样式 */
+.yzm {
+    width: 341px; /* 宽度为341px */
+    height: 46px; /* 高度为46px */
+    background: url(../images/yzmbg.png) no-repeat; /* 背景图 */
+    padding-bottom: 5px; /* 底部内边距5px */
+}
+
+/* 验证码输入框的文本框样式 */
+.yzm span {
+    display: block; /* 块级元素 */
+    float: left; /* 向左浮动 */
+    width: 227px; /* 宽度为227px */
+    height: 46px; /* 高度为46px */
+}
+
+/* 验证码输入框的文本框输入样式 */
+.yzm span input {
+    background: none; /* 背景为透明 */
+    border: none; /* 无边框 */
+    width: 227px; /* 宽度为227px */
+    height: 46px; /* 高度为46px */
+    line-height: 46px; /* 行高与高度相同，确保文字垂直居中 */
+    font-size: 16px; /* 字体大小为16px */
+    color: #afc5d2; /* 文字颜色 */
+    padding-left: 10px; /* 左内边距10px */
+}
+
+/* 验证码图像的样式 */
+.yzm img {
+    float: left; /* 图像向左浮动 */
+    margin-left: 10px; /* 左侧间距10px */
+    width: 85px; /* 图像宽度为85px */
+    height: 46px; /* 图像高度为46px */
+}
+
+/* 验证码刷新按钮的样式 */
+.yzm a {
+    display: block; /* 设置为块级元素 */
+    width: 85px; /* 宽度为85px */
+    height: 46px; /* 高度为46px */
+    background: url(../images/yzmrefresh.png) no-repeat center; /* 背景图居中 */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+}
+
+/* 提交按钮的样式 */
+.submitbtn {
+    width: 300px; /* 宽度为300px */
+    height: 40px; /* 高度为40px */
+    background: #3d96c9; /* 背景色为蓝色 */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 16px; /* 字体大小为16px */
+    font-weight: bold; /* 字体加粗 */
+    text-align: center; /* 文字居中对齐 */
+    line-height: 40px; /* 行高为40px，确保文字垂直居中 */
+    border: none; /* 无边框 */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+}
+
+/* 提交按钮的悬停效果 */
+.submitbtn:hover {
+    background: #2a7da6; /* 悬停时背景色变为更深的蓝色 */
+}
+
+/* 错误提示消息的样式 */
+.error-msg {
+    color: #e74c3c; /* 错误信息颜色为红色 */
+    font-size: 14px; /* 字体大小为14px */
+    margin-top: 10px; /* 上边距为10px */
+    text-align: center; /* 文本居中对齐 */
+}
+
+/* 成功提示消息的样式 */
+.success-msg {
+    color: #2ecc71; /* 成功信息颜色为绿色 */
+    font-size: 14px; /* 字体大小为14px */
+    margin-top: 10px; /* 上边距为10px */
+    text-align: center; /* 文本居中对齐 */
+}
+
+/* 错误信息框的样式 */
+.error-box {
+    background: url(../images/errorbox.png) no-repeat; /* 背景为错误框的图像 */
+    width: 350px; /* 宽度为350px */
+    height: 120px; /* 高度为120px */
+    margin: 20px auto; /* 上下边距为20px，水平居中 */
+    padding: 15px; /* 内边距为15px */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 14px; /* 字体大小为14px */
+}
+
+/* 错误框内的关闭按钮样式 */
+.error-box .close-btn {
+    float: right; /* 右浮动 */
+    background: url(../images/close.png) no-repeat center; /* 关闭按钮的背景图 */
+    width: 20px; /* 宽度为20px */
+    height: 20px; /* 高度为20px */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+}
+
+/* 错误框内的错误信息样式 */
+.error-box .error-info {
+    margin-top: 10px; /* 上边距为10px */
+    font-size: 16px; /* 字体大小为16px */
+    color: #ff0000; /* 错误信息为红色 */
+}
+
+/* 成功框的样式 */
+.success-box {
+    background: url(../images/successbox.png) no-repeat; /* 背景为成功框的图像 */
+    width: 350px; /* 宽度为350px */
+    height: 120px; /* 高度为120px */
+    margin: 20px auto; /* 上下边距为20px，水平居中 */
+    padding: 15px; /* 内边距为15px */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 14px; /* 字体大小为14px */
+}
+
+/* 成功框内的成功信息样式 */
+.success-box .success-info {
+    margin-top: 10px; /* 上边距为10px */
+    font-size: 16px; /* 字体大小为16px */
+    color: #2ecc71; /* 成功信息为绿色 */
+}
+
+/* 取消按钮的样式 */
+.cancel-btn {
+    width: 300px; /* 宽度为300px */
+    height: 40px; /* 高度为40px */
+    background: #e74c3c; /* 背景色为红色 */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 16px; /* 字体大小为16px */
+    font-weight: bold; /* 字体加粗 */
+    text-align: center; /* 文字居中对齐 */
+    line-height: 40px; /* 行高为40px，确保文字垂直居中 */
+    border: none; /* 无边框 */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+}
+
+/* 取消按钮的悬停效果 */
+.cancel-btn:hover {
+    background: #c0392b; /* 悬停时背景色变为更深的红色 */
+}
+
+/* 隐藏的表单项 */
+.hidden {
+    display: none; /* 隐藏该元素 */
+}
+
+/* 表单项的标签样式 */
+label {
+    font-size: 14px; /* 字体大小为14px */
+    color: #687f92; /* 标签文字颜色 */
+}
+
+/* 链接的样式 */
+a {
+    text-decoration: none; /* 去掉链接下划线 */
+    color: #3d96c9; /* 链接颜色 */
+}
+
+/* 链接悬停时的样式 */
+a:hover {
+    color: #2a7da6; /* 悬停时链接颜色变为深蓝色 */
+}
+
+/* 警告框的样式 */
+.alert-box {
+    background: #f39c12; /* 背景色为橙色 */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 14px; /* 字体大小为14px */
+    padding: 15px; /* 内边距为15px */
+    margin: 20px 0; /* 上下边距为20px */
+    border-radius: 5px; /* 圆角边框 */
+}
+
+/* 提示框的样式 */
+.tip-box {
+    background: #f1c40f; /* 背景色为黄色 */
+    color: #fff; /* 文字颜色为白色 */
+    font-size: 14px; /* 字体大小为14px */
+    padding: 15px; /* 内边距为15px */
+    margin: 20px 0; /* 上下边距为20px */
+    border-radius: 5px; /* 圆角边框 */
+}
diff --git a/web/css/pg_btn.css b/web/css/pg_btn.css
index a267f8f..cf5322f 100644
--- a/web/css/pg_btn.css
+++ b/web/css/pg_btn.css
@@ -1,54 +1,72 @@
-/*分页按钮样式*/
-.page-go-form{
-    float: right;
-    margin-right: 40px;
-    width: 200px;
-}
-
-.page-bar{
-    width: 600px;
-    height: 30px;
-    float: right;
-}
-.page-num-ul{
-    width: 250px;
-    height: 30px;
-    padding-left: 100px;
-    float: left;
-    font-size: 14px;
-}
-.pg_a{
-    margin: 0 5px;
-}
-.pg_a:hover{
-    color: #00a4ac;
-    margin: 0 5px;
-}
-#inputPage{
-    width: 50px;
-}
-.page-btn{
-    margin: 0 3px;
-    width: 50px;
-    cursor: pointer;
-    color: #ffffff;
-    background-color: #009688;
-}
-.page-btn:hover{
-    opacity: 0.7;
-    cursor: pointer;
-    background-color: #009688;
-}
-
-#f_auto{
-    margin: 0 auto;
-    margin-top: 40px;
-    width: 400px;
-}
-#btn_on{
-    width: 260px;
-    margin-left: 45px;
-}
-.f_sp{
-    letter-spacing: 16px;
+/* 分页按钮容器的样式 */
+.page-go-form {
+    float: right; /* 右浮动，使容器靠右显示 */
+    margin-right: 40px; /* 右边距为40px */
+    width: 200px; /* 宽度为200px */
+}
+
+/* 分页栏的容器样式 */
+.page-bar {
+    width: 600px; /* 宽度为600px */
+    height: 30px; /* 高度为30px */
+    float: right; /* 右浮动，使分页栏靠右显示 */
+}
+
+/* 分页数字的容器样式 */
+.page-num-ul {
+    width: 250px; /* 宽度为250px */
+    height: 30px; /* 高度为30px */
+    padding-left: 100px; /* 左边距为100px，用于调整位置 */
+    float: left; /* 左浮动，使其在分页栏中靠左显示 */
+    font-size: 14px; /* 字体大小为14px */
+}
+
+/* 分页链接（数字）的样式 */
+.pg_a {
+    margin: 0 5px; /* 设置左右边距为5px，避免元素之间重叠 */
+}
+
+/* 分页链接（数字）鼠标悬停时的样式 */
+.pg_a:hover {
+    color: #00a4ac; /* 鼠标悬停时，文字颜色变为蓝绿色 */
+    margin: 0 5px; /* 鼠标悬停时，保持左右边距为5px */
+}
+
+/* 输入框的样式，用于直接输入页码 */
+#inputPage {
+    width: 50px; /* 宽度为50px */
+}
+
+/* 分页按钮的样式 */
+.page-btn {
+    margin: 0 3px; /* 左右边距为3px，避免按钮之间太紧 */
+    width: 50px; /* 宽度为50px */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+    color: #ffffff; /* 文字颜色为白色 */
+    background-color: #009688; /* 背景颜色为深青色 */
+}
+
+/* 分页按钮鼠标悬停时的样式 */
+.page-btn:hover {
+    opacity: 0.7; /* 鼠标悬停时，按钮的透明度降低至0.7 */
+    cursor: pointer; /* 鼠标指针变为点击状态 */
+    background-color: #009688; /* 背景颜色保持不变 */
+}
+
+/* 自动分页按钮的容器样式 */
+#f_auto {
+    margin: 0 auto; /* 水平居中 */
+    margin-top: 40px; /* 上边距为40px */
+    width: 400px; /* 宽度为400px */
+}
+
+/* "立即跳转"按钮的样式 */
+#btn_on {
+    width: 260px; /* 宽度为260px */
+    margin-left: 45px; /* 左边距为45px */
+}
+
+/* 设置特定文本的字母间距 */
+.f_sp {
+    letter-spacing: 16px; /* 设置字母间距为16px */
 }
diff --git a/web/css/usersLogin.css b/web/css/usersLogin.css
index 4531bf6..178fae8 100644
--- a/web/css/usersLogin.css
+++ b/web/css/usersLogin.css
@@ -1,118 +1,136 @@
-
+/* 全局样式：去除所有元素的外边距和内边距 */
 *{
-    margin: 0;
-    padding: 0;
+    margin: 0; /* 去除外边距 */
+    padding: 0; /* 去除内边距 */
 }
 
+/* .header样式：设置页头背景图、宽度和高度 */
 .header{
-    background: url("../images/bti.jpg")no-repeat;
-    width: 100%;
-    height: 200px;
+    background: url("../images/bti.jpg") no-repeat; /* 背景图，且不重复 */
+    width: 100%; /* 宽度为100% */
+    height: 200px; /* 高度为200px */
 }
 
+/* .body样式：设置页面主体背景图，宽度、高度和上边距 */
 .body{
-    background: url("../images/timg-1.jpg");
-    width: 100%;
-    height: 650px;
-    margin-top: -100px;
+    background: url("../images/timg-1.jpg"); /* 背景图 */
+    width: 100%; /* 宽度为100% */
+    height: 650px; /* 高度为650px */
+    margin-top: -100px; /* 设置上边距为负值，向上偏移100px */
 }
 
+/* .panel样式：设置面板的宽度、高度、位置、背景和边框 */
 .panel{
-    width: 350px;
-    height: 420px;
-    position: relative;
-    left: 800px;
-    top: 60px;
-    background-color: #FFFFFF;
-    border: 1px solid #dff0d8;
+    width: 350px; /* 宽度为350px */
+    height: 420px; /* 高度为420px */
+    position: relative; /* 相对定位，用于后续定位子元素 */
+    left: 800px; /* 左边距为800px，将面板向右移动 */
+    top: 60px; /* 上边距为60px，将面板向下移动 */
+    background-color: #FFFFFF; /* 背景色为白色 */
+    border: 1px solid #dff0d8; /* 边框为1px实线，颜色为淡绿色 */
 }
 
+/* .top样式：设置面板顶部部分的高度和边框 */
 .top{
-    height:60px;
-    border-bottom:1px solid #dff0d8;
+    height: 60px; /* 高度为60px */
+    border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线，颜色为淡绿色 */
 }
 
+/* .top p样式：设置标题文本的对齐方式、字体大小、颜色和内边距 */
 .top>p{
-    text-align: center;
-    padding-top: 15px;
-    /*margin: 20px 0;*/
-    font-size: 25px;
-    color: #f57421;
+    text-align: center; /* 文本居中对齐 */
+    padding-top: 15px; /* 顶部内边距为15px */
+    /*margin: 20px 0;*/ /* 注释掉的代码，可能用于调整上下边距 */
+    font-size: 25px; /* 字体大小为25px */
+    color: #f57421; /* 字体颜色为橙色 */
 }
 
+/* .middle样式：设置面板中间部分的高度、边距和底部边框 */
 .middle{
-    position: relative;
-    height: 290px;
-    margin: 10px 0;
-    /*background-color: red;*/
-    border-bottom:1px solid #dff0d8;
+    position: relative; /* 相对定位，用于定位子元素 */
+    height: 290px; /* 高度为290px */
+    margin: 10px 0; /* 上下边距为10px */
+    /*background-color: red;*/ /* 注释掉的代码，可能用于调试背景色 */
+    border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线，颜色为淡绿色 */
 }
 
+/* .middle > form > input样式：设置输入框的高度、宽度、边距和边框 */
 .middle>form>input{
-    height: 40px;
-    width: 290px;
-    margin: 20px 30px;
-    border: 1px solid #e0e0e0;
+    height: 40px; /* 高度为40px */
+    width: 290px; /* 宽度为290px */
+    margin: 20px 30px; /* 上下边距为20px，左右边距为30px */
+    border: 1px solid #e0e0e0; /* 边框为1px实线，颜色为浅灰色 */
 }
 
+/* .middle > form > input:last-child样式：设置最后一个输入框的背景色、字体大小和字体颜色 */
 .middle>form>input:last-child{
-    background-color: #f57421;
-    font-size: 18px;
-    color: #FFFFFF;
+    background-color: #f57421; /* 背景色为橙色 */
+    font-size: 18px; /* 字体大小为18px */
+    color: #FFFFFF; /* 字体颜色为白色 */
 }
 
+/* .middle > form > input:last-child:hover样式：设置最后一个输入框鼠标悬停时的效果 */
 .middle>form>input:last-child:hover{
-    background-color: #f57421;
-    opacity: 0.7;
-    cursor: pointer;
-    font-size: 18px;
+    background-color: #f57421; /* 背景色保持为橙色 */
+    opacity: 0.7; /* 透明度为0.7 */
+    cursor: pointer; /* 鼠标指针变为手型 */
+    font-size: 18px; /* 字体大小保持为18px */
 }
 
+/* .middle > form > .s1样式：设置第一个图标的大小、位置和背景图 */
 .middle>form>.s1{
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    left: 35px;
-    top: 40px;
-    background: url("../images/J1.PNG") no-repeat;
+    height: 40px; /* 高度为40px */
+    width: 40px; /* 宽度为40px */
+    position: absolute; /* 绝对定位 */
+    left: 35px; /* 距离左侧35px */
+    top: 40px; /* 距离顶部40px */
+    background: url("../images/J1.PNG") no-repeat; /* 背景图 */
 }
 
+/* .middle > form > .s2样式：设置第二个图标的大小、位置和背景图 */
 .middle>form>.s2{
-    height: 40px;
-    width: 40px;
-    position: absolute;
-    left: 35px;
-    top: 120px;
-    background: url("../images/J2.PNG") no-repeat;
+    height: 40px; /* 高度为40px */
+    width: 40px; /* 宽度为40px */
+    position: absolute; /* 绝对定位 */
+    left: 35px; /* 距离左侧35px */
+    top: 120px; /* 距离顶部120px */
+    background: url("../images/J2.PNG") no-repeat; /* 背景图 */
 }
 
+/* .middle > form > .erro样式：设置错误提示文本的颜色、字体大小和左边距 */
 .middle>form>.erro{
-    color: red;
-    font-size: 14px;
-    margin-left:10px;
+    color: red; /* 文本颜色为红色 */
+    font-size: 14px; /* 字体大小为14px */
+    margin-left: 10px; /* 左边距为10px */
 }
 
+/* .tail > a样式：设置尾部链接的浮动、字体大小、内边距和颜色 */
 .tail>a{
-    float: right;
-    font-size: 12px;
-    padding: 10px;
-    text-decoration:none;
-    color: black;
+    float: right; /* 右浮动，使链接靠右显示 */
+    font-size: 12px; /* 字体大小为12px */
+    padding: 10px; /* 内边距为10px */
+    text-decoration: none; /* 去除文本装饰 */
+    color: black; /* 字体颜色为黑色 */
 }
 
+/* .tail > a:hover样式：设置链接鼠标悬停时的颜色变化 */
 .tail>a:hover{
-    color: red;
+    color: red; /* 鼠标悬停时，字体颜色变为红色 */
 }
 
+/* .middle > form > .iputs:hover样式：设置输入框悬停时的边框颜色变化 */
 .middle>form>.iputs:hover{
-    border:1px solid red;
+    border: 1px solid red; /* 鼠标悬停时，输入框边框颜色变为红色 */
 }
 
+/* .footer样式：设置页脚的上边距 */
 .footer{
-    margin-top: 20px;
+    margin-top: 20px; /* 上边距为20px */
 }
+
+/* .footer > span样式：设置页脚文本的字体大小、位置和左边距 */
 .footer>span{
-    font-size: 15px;
-    position: relative;
-    left: 45%;
-}
\ No newline at end of file
+    font-size: 15px; /* 字体大小为15px */
+    position: relative; /* 相对定位，用于精确调整位置 */
+    left: 45%; /* 左边距为45%，使其水平居中 */
+}
diff --git a/web/css/xadmin.css b/web/css/xadmin.css
index d6dc2f3..3f09316 100644
--- a/web/css/xadmin.css
+++ b/web/css/xadmin.css
@@ -1,433 +1,811 @@
+/* 定义字符集为UTF-8 */
 @charset "utf-8";
+/* 引入 layui CSS 库 */
 @import url(../lib/layui/css/layui.css);
-*{
-    margin: 0px;
-    padding: 0px;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-a{
-    text-decoration: none;
+
+/* 全局通用样式：去除所有元素的外边距和内边距，并设置字体 */
+* {
+    margin: 0px; /* 去除所有元素的外边距 */
+    padding: 0px; /* 去除所有元素的内边距 */
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 设置默认字体为 Helvetica Neue */
 }
-html{
-    width: 100%;
-    height: 100%;
-    overflow-x:hidden; 
-    overflow-y:auto;
+
+/* 链接样式：去除链接的下划线 */
+a {
+    text-decoration: none; /* 去除链接的默认下划线 */
 }
-body{
-    width: 100%;
-    min-height: 100%;
+
+/* 设置HTML元素的宽度、高度，并禁止水平滚动条显示 */
+html {
+    width: 100%; /* 设置页面宽度为100% */
+    height: 100%; /* 设置页面高度为100% */
+    overflow-x: hidden; /* 禁止水平滚动 */
+    overflow-y: auto; /* 允许垂直滚动 */
 }
 
+/* 设置body的宽度和最小高度 */
+body {
+    width: 100%; /* 设置body宽度为100% */
+    min-height: 100%; /* 设置body最小高度为100% */
+}
 
-.x-body{
-    padding: 20px;
+/* .x-body类样式：添加内边距 */
+.x-body {
+    padding: 20px; /* 添加20px的内边距 */
 }
-.x-nav{
-    padding: 0 20px;
-    position: relative;
-    z-index: 99;
-    border-bottom: 1px solid #e5e5e5;
-    line-height: 39px;
-    height: 39px;
-    overflow: hidden;
+
+/* .x-nav类样式：设置导航条的内边距、位置、背景、边框等 */
+.x-nav {
+    padding: 0 20px; /* 设置左右内边距为20px */
+    position: relative; /* 设置为相对定位 */
+    z-index: 99; /* 设置层级为99 */
+    border-bottom: 1px solid #e5e5e5; /* 设置底部边框为1px实线，颜色为灰色 */
+    line-height: 39px; /* 设置行高为39px，使文本垂直居中 */
+    height: 39px; /* 设置导航栏的高度为39px */
+    overflow: hidden; /* 隐藏溢出的内容 */
 }
-xblock{
-    display: block;
-    margin-bottom: 10px;
-    padding: 5px;
-    line-height: 22px;
-    /* border-left: 5px solid #009688; */
-    border-radius: 0 2px 2px 0;
-    background-color: #f2f2f2;
+
+/* .xblock类样式：设置块级元素的样式 */
+xblock {
+    display: block; /* 设置为块级元素 */
+    margin-bottom: 10px; /* 设置下边距为10px */
+    padding: 5px; /* 设置内边距为5px */
+    line-height: 22px; /* 设置行高为22px */
+    /* border-left: 5px solid #009688; */ /* 注释掉的代码，可能用于左边框的样式 */
+    border-radius: 0 2px 2px 0; /* 设置右上、右下圆角 */
+    background-color: #f2f2f2; /* 设置背景色为浅灰色 */
 }
-.x-right{
-  float: right;
+
+/* .x-right类样式：设置右浮动 */
+.x-right {
+    float: right; /* 设置元素浮动到右侧 */
 }
-.x-so{
-    /*text-align: center;*/
-    /*background: #f2f2f2 url() 0 0 no-repeat;*/
-    margin-bottom: 20px;
+
+/* .x-so类样式：可能用于搜索框或表单 */
+.x-so {
+    /*text-align: center;*/ /* 注释掉的代码，可能是用于文本居中 */
+    /*background: #f2f2f2 url() 0 0 no-repeat;*/ /* 注释掉的代码，背景图样式 */
+    margin-bottom: 20px; /* 设置下边距为20px */
 }
-.x-so input.layui-input{
-    width: 150px;
-    padding-left: 25px;
+
+/* .x-so input.layui-input样式：设置输入框的宽度和内边距 */
+.x-so input.layui-input {
+    width: 150px; /* 设置输入框的宽度为150px */
+    padding-left: 25px; /* 设置左内边距为25px */
 }
-.x-so .layui-form-label{
-    display: inline-block;
+
+/* .x-so .layui-form-label样式：设置标签为行内元素 */
+.x-so .layui-form-label {
+    display: inline-block; /* 设置标签为行内块元素 */
 }
-.x-so input.layui-input,.x-so input.layui-btn{
-    display: inline-block;
+
+/* .x-so input.layui-input和.x-so input.layui-btn样式：设置输入框和按钮为行内块元素 */
+.x-so input.layui-input, .x-so input.layui-btn {
+    display: inline-block; /* 设置输入框和按钮为行内块元素 */
 }
-.x-red{
-    color: red;
+
+/* .x-red类样式：设置文字颜色为红色 */
+.x-red {
+    color: red; /* 设置文字颜色为红色 */
 }
-.x-a{
-    color: #1AA093;
+
+/* .x-a类样式：设置链接颜色为特定的绿色 */
+.x-a {
+    color: #1AA093; /* 设置链接文字颜色为绿色 */
 }
-.x-a:hover{
-    color: #127F74;
+
+/* .x-a:hover类样式：设置鼠标悬停时链接颜色变化 */
+.x-a:hover {
+    color: #127F74; /* 鼠标悬停时，链接文字颜色变为深绿色 */
 }
-.x-sort{
-    height: 30px;
+
+/* .x-sort类样式：设置排序相关元素的高度 */
+.x-sort {
+    height: 30px; /* 设置元素高度为30px */
 }
-.x-show{
-    cursor: pointer;
+
+/* .x-show类样式：设置可点击的元素 */
+.x-show {
+    cursor: pointer; /* 设置鼠标悬停时显示为手型指针 */
 }
-.layui-form-switch{
-    margin-top: 0px;
+
+/* .layui-form-switch类样式：设置开关按钮的上边距 */
+.layui-form-switch {
+    margin-top: 0px; /* 设置上边距为0px */
 }
+
+/* .layui-input:focus和.layui-textarea:focus样式：设置输入框和文本框聚焦时的边框颜色 */
 .layui-input:focus, .layui-textarea:focus {
-    border-color: #189f92!important;
+    border-color: #189f92 !important; /* 设置聚焦时的边框颜色为绿色 */
 }
 
-.page{
-    margin-top: 20px;
-    text-align: center;
 
+/* 分页样式 */
+.page{
+    margin-top: 20px;  /* 设置分页容器的上边距 */
+    text-align: center; /* 设置分页容器的文本居中对齐 */
 }
 .page a{
-    display: inline-block;
-    background: #fff url(#) 0 0 no-repeat;
-    color: #888;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #E2E2E2;
-
+    display: inline-block; /* 将分页链接显示为行内块级元素 */
+    background: #fff url(#) 0 0 no-repeat; /* 设置背景颜色和背景图片 */
+    color: #888; /* 设置文字颜色为灰色 */
+    padding: 10px; /* 设置内边距 */
+    min-width: 15px; /* 设置最小宽度 */
+    border: 1px solid #E2E2E2; /* 设置边框 */
 }
 .page span{
-    display: inline-block;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #E2E2E2;
+    display: inline-block; /* 将span显示为行内块级元素 */
+    padding: 10px; /* 设置内边距 */
+    min-width: 15px; /* 设置最小宽度 */
+    border: 1px solid #E2E2E2; /* 设置边框 */
 }
 .page span.current{
-    display: inline-block;
-    background: #009688 url(#) 0 0 no-repeat;
-    color: #fff;
-    padding: 10px;
-    min-width: 15px;
-    border: 1px solid #009688;
+    display: inline-block; /* 将当前页span显示为行内块级元素 */
+    background: #009688 url(#) 0 0 no-repeat; /* 设置当前页的背景颜色 */
+    color: #fff; /* 设置文字颜色为白色 */
+    padding: 10px; /* 设置内边距 */
+    min-width: 15px; /* 设置最小宽度 */
+    border: 1px solid #009688; /* 设置边框 */
 }
 .page .pagination li{
-    display: inline-block;
-    margin-right: 5px;
-    text-align: center;
+    display: inline-block; /* 将列表项显示为行内块级元素 */
+    margin-right: 5px; /* 设置右边距 */
+    text-align: center; /* 设置文本居中对齐 */
 }
 .page .pagination li.active span{
-    background: #009688 url(#) 0 0 no-repeat;
-    color: #fff;
-    border: 1px solid #009688;
-
+    background: #009688 url(#) 0 0 no-repeat; /* 设置活动页的背景 */
+    color: #fff; /* 设置文字颜色为白色 */
+    border: 1px solid #009688; /* 设置边框 */
 }
 
-/*登录样式*/
-/*头部*/
+/* 登录页面头部样式 */
 .container{
-    width: 100%;
-    height: 45px;
-    background-color: #222;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    width: 100%; /* 设置容器的宽度为100% */
+    height: 45px; /* 设置容器的高度 */
+    background-color: #222; /* 设置背景颜色为深灰色 */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 设置底部边框 */
 }
 .container .logo a{
-    float: left;
-    color: #fff;
-    font-size: 18px;
-    padding-left: 20px;
-    line-height: 45px;
-    width: 200px;
+    float: left; /* 将logo链接向左浮动 */
+    color: #fff; /* 设置文字颜色为白色 */
+    font-size: 18px; /* 设置字体大小 */
+    padding-left: 20px; /* 设置左内边距 */
+    line-height: 45px; /* 设置行高，使文字垂直居中 */
+    width: 200px; /* 设置logo的宽度 */
 }
 .container .right{
-    background-color:rgba(0,0,0,0);
-    float: right;
-
+    background-color:rgba(0,0,0,0); /* 设置背景为透明 */
+    float: right; /* 将右侧容器向右浮动 */
 }
 .container .left_open{
-    height: 45px;
-    float: left;
+    height: 45px; /* 设置左侧容器的高度 */
+    float: left; /* 将左侧容器向左浮动 */
 }
 .container .left_open i{
-    display: block;
-    background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat;
-    color: #fff;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-    border-radius: 3px;
-    text-align: center;
-    margin-top: 7px;
-    cursor: pointer;
+    display: block; /* 将图标显示为块级元素 */
+    background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 设置图标背景 */
+    color: #fff; /* 设置图标的颜色为白色 */
+    width: 32px; /* 设置图标的宽度 */
+    height: 32px; /* 设置图标的高度 */
+    line-height: 32px; /* 设置行高，使图标垂直居中 */
+    border-radius: 3px; /* 设置圆角 */
+    text-align: center; /* 设置文本居中对齐 */
+    margin-top: 7px; /* 设置图标的上边距 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
 .container .left_open i:hover{
-    background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat;
+    background: rgba(255,255,255,0.3) url(#) 0 0 no-repeat; /* 设置鼠标悬停时的背景 */
 }
 
 .container .left{
-    background-color:rgba(0,0,0,0);
-    float: left;
-
+    background-color:rgba(0,0,0,0); /* 设置背景为透明 */
+    float: left; /* 将左侧容器向左浮动 */
 }
 .container .layui-nav-item{
-    line-height: 45px;
+    line-height: 45px; /* 设置导航项的行高，使文字垂直居中 */
 }
 .container .layui-nav-more{
-    top: 20px;
+    top: 20px; /* 设置更多菜单的顶部位置 */
 }
 .container .layui-nav-child{
-    top: 50px;
+    top: 50px; /* 设置子菜单的顶部位置 */
 }
 .container .layui-nav-child i{
-    margin-right: 10px;
+    margin-right: 10px; /* 设置图标的右边距 */
 }
 .layui-nav .layui-nav-item a{
-    color: #fff;
-    cursor: pointer;
+    color: #fff; /* 设置导航链接的文字颜色为白色 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
 .layui-nav .layui-nav-child a{
-    color: #333;
-    cursor: pointer;
+    color: #333; /* 设置子菜单链接的文字颜色为深灰色 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
+
+/* 左侧导航样式 */
 .left-nav{
-    position: absolute;
-    top: 46px;
-    bottom: 42px;
-    left: 0;
-    z-index: 2;
-    padding-top: 10px;
-    background-color: #EEEEEE;
-    width: 220px;
-    max-width: 220px;
-    overflow: auto;
-    overflow-x:hidden;
-    border-right: 1px solid #e5e5e5;
-
-    /*width: 0px;*/
+    position: absolute; /* 设置绝对定位 */
+    top: 46px; /* 设置导航的顶部位置 */
+    bottom: 42px; /* 设置导航的底部位置 */
+    left: 0; /* 设置导航的左边位置 */
+    z-index: 2; /* 设置层级 */
+    padding-top: 10px; /* 设置顶部内边距 */
+    background-color: #EEEEEE; /* 设置背景颜色为浅灰色 */
+    width: 220px; /* 设置导航的宽度 */
+    max-width: 220px; /* 设置最大宽度 */
+    overflow: auto; /* 允许内容溢出时滚动 */
+    overflow-x:hidden; /* 禁止水平滚动 */
+    border-right: 1px solid #e5e5e5; /* 设置右边框 */
 }
 .left-nav #nav li{
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #e5e5e5; /* 设置导航列表项的底部边框 */
 }
 .left-nav #nav li:hover > a{
-    /*color: blue;*/
+    /* 设置鼠标悬停时的样式，可以自定义 */
 }
 .left-nav #nav .current{
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.3); /* 设置当前菜单项的背景颜色 */
 }
 .left-nav #nav li a{
-    font-size: 14px;
-    padding: 10px 15px 10px 20px;
-    display: block;
-    cursor: pointer;
+    font-size: 14px; /* 设置链接文字的字体大小 */
+    padding: 10px 15px 10px 20px; /* 设置内边距 */
+    display: block; /* 将链接显示为块级元素 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
 .left-nav #nav li a cite{
-    font-size: 14px;
+    font-size: 14px; /* 设置引用文字的字体大小 */
 }
 
+/* 左侧导航子菜单样式 */
 .left-nav #nav li .sub-menu{
-    display: none;
+    display: none; /* 隐藏子菜单 */
 }
 .left-nav #nav li .opened{
-    display: block;
+    display: block; /* 显示子菜单 */
 }
 .left-nav #nav li .opened:hover{
-    /*background: #fff url() 0 0 no-repeat;*/
-}
-.left-nav #nav li .opened .current{
-    
+    /* 设置子菜单悬停时的样式 */
 }
 .left-nav #nav li .sub-menu li:hover{
-    /*color: blue;*/
-     /*background: #fff url() 0 0 no-repeat;*/
+    /* 设置子菜单项悬停时的样式 */
 }
 .left-nav #nav li .sub-menu li a{
-    padding: 12px 15px 12px 30px;
-    font-size: 14px;
-    cursor: pointer;
+    padding: 12px 15px 12px 30px; /* 设置子菜单项的内边距 */
+    font-size: 14px; /* 设置子菜单项的字体大小 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
 .left-nav #nav li .sub-menu li .sub-menu li a{
-    padding-left: 45px;
+    padding-left: 45px; /* 设置多级子菜单项的内边距 */
 }
 .left-nav #nav li .sub-menu li a:hover{
-    color: #148cf1;
+    color: #148cf1; /* 设置悬停时子菜单项的文字颜色 */
 }
 .left-nav #nav li .sub-menu li a i{
-    font-size: 12px;
+    font-size: 12px; /* 设置子菜单项图标的字体大小 */
 }
 .left-nav #nav li a i{
-    padding-right: 10px;
-    line-height: 14px;
+    padding-right: 10px; /* 设置图标的右边距 */
+    line-height: 14px; /* 设置图标的行高 */
 }
 .left-nav #nav li .nav_right{
-    float: right;
-    font-size: 16px;
+    float: right; /* 将右侧图标浮动到右侧 */
+    font-size: 16px; /* 设置右侧图标的字体大小 */
 }
+
+/* 左侧滑动按钮样式 */
 .x-slide_left {
-    width: 17px;
-    height: 61px;
-    background: url(#) 0 0 no-repeat;
-    position: absolute;
-    top: 200px;
-    left: 221px;
-    cursor: pointer;
-    z-index: 3;
+    width: 17px; /* 设置滑动按钮的宽度 */
+    height: 61px; /* 设置滑动按钮的高度 */
+    background: url(#) 0 0 no-repeat; /* 设置滑动按钮的背景 */
+    position: absolute; /* 设置绝对定位 */
+    top: 200px; /* 设置滑动按钮的顶部位置 */
+    left: 221px; /* 设置滑动按钮的左边位置 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
+}
+.x-slide_left:hover{
+    background: url(#) 0 0 no-repeat; /* 设置滑动按钮悬停时的背景 */
+}
+.x-slide_left .slide_icon{
+    width: 17px; /* 设置滑动按钮图标的宽度 */
+    height: 30px; /* 设置滑动按钮图标的高度 */
+    background: url(#) no-repeat center center; /* 设置图标的背景 */
+    position: absolute; /* 设置绝对定位 */
+    top: 50%; /* 设置图标的位置为垂直居中 */
+    left: 0; /* 设置图标的左边位置 */
+    margin-top: -15px; /* 设置图标的上外边距，使其垂直居中 */
+}
+
+/* 右侧内容区域样式 */
+.right-content {
+    padding: 20px; /* 设置内容区域的内边距 */
+    margin-left: 240px; /* 设置左侧导航的右边距，使右侧内容不与左侧导航重叠 */
+    background-color: #f4f4f4; /* 设置内容区域的背景颜色 */
+    min-height: 100vh; /* 设置内容区域的最小高度为100vh，确保填满屏幕 */
+}
+
+/* 输入框样式 */
+.input-container input {
+    width: 100%; /* 设置输入框的宽度为100% */
+    padding: 10px; /* 设置内边距 */
+    margin: 5px 0; /* 设置上下外边距 */
+    border: 1px solid #ccc; /* 设置边框颜色 */
+    border-radius: 5px; /* 设置圆角边框 */
+    font-size: 14px; /* 设置字体大小 */
+}
+
+/* 按钮样式 */
+.button {
+    display: inline-block; /* 将按钮显示为行内块级元素 */
+    padding: 10px 20px; /* 设置按钮的内边距 */
+    background-color: #009688; /* 设置按钮的背景颜色 */
+    color: #fff; /* 设置按钮的文字颜色 */
+    font-size: 14px; /* 设置字体大小 */
+    border-radius: 5px; /* 设置按钮的圆角 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
+    text-align: center; /* 设置文字居中对齐 */
+}
+.button:hover {
+    background-color: #00796b; /* 设置鼠标悬停时按钮的背景颜色 */
+}
+
+/* 弹出框样式 */
+.modal {
+    display: none; /* 隐藏弹出框 */
+    position: fixed; /* 设置固定定位 */
+    top: 0; /* 设置弹出框的顶部位置 */
+    left: 0; /* 设置弹出框的左边位置 */
+    width: 100%; /* 设置弹出框的宽度为100% */
+    height: 100%; /* 设置弹出框的高度为100% */
+    background-color: rgba(0, 0, 0, 0.5); /* 设置半透明的背景颜色 */
+    z-index: 1000; /* 设置层级 */
+    justify-content: center; /* 设置弹出框内容居中对齐 */
+    align-items: center; /* 设置弹出框内容垂直居中 */
+}
+
+.modal .modal-content {
+    background-color: #fff; /* 设置弹出框内容的背景颜色 */
+    padding: 20px; /* 设置弹出框内容的内边距 */
+    border-radius: 5px; /* 设置圆角边框 */
+    width: 50%; /* 设置弹出框内容的宽度 */
+    max-width: 600px; /* 设置弹出框内容的最大宽度 */
+}
+
+/* 关闭按钮样式 */
+.close-btn {
+    position: absolute; /* 设置绝对定位 */
+    top: 10px; /* 设置关闭按钮的顶部位置 */
+    right: 10px; /* 设置关闭按钮的右边位置 */
+    font-size: 20px; /* 设置字体大小 */
+    color: #333; /* 设置文字颜色 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
+}
+.close-btn:hover {
+    color: #ff0000; /* 设置关闭按钮悬停时的文字颜色 */
+}
+
+/* 提示信息样式 */
+.tip-message {
+    padding: 10px 20px; /* 设置提示信息的内边距 */
+    margin: 10px 0; /* 设置上下外边距 */
+    border: 1px solid #ccc; /* 设置边框颜色 */
+    border-radius: 5px; /* 设置圆角边框 */
+    background-color: #f9f9f9; /* 设置背景颜色 */
+    font-size: 14px; /* 设置字体大小 */
+    color: #333; /* 设置文字颜色 */
+}
+.tip-message.success {
+    border-color: #4caf50; /* 设置成功提示的边框颜色 */
+    background-color: #dff0d8; /* 设置成功提示的背景颜色 */
+    color: #4caf50; /* 设置成功提示的文字颜色 */
+}
+.tip-message.error {
+    border-color: #f44336; /* 设置错误提示的边框颜色 */
+    background-color: #f2dede; /* 设置错误提示的背景颜色 */
+    color: #f44336; /* 设置错误提示的文字颜色 */
+}
+
+/* 侧边栏样式 */
+.sidebar {
+    position: fixed; /* 设置固定定位 */
+    top: 0; /* 设置顶部位置 */
+    right: 0; /* 设置右侧位置 */
+    width: 250px; /* 设置宽度 */
+    height: 100vh; /* 设置高度为100vh，确保填满屏幕 */
+    background-color: #2c3e50; /* 设置背景颜色为深色 */
+    color: #fff; /* 设置文字颜色为白色 */
+    display: flex; /* 使用flex布局 */
+    flex-direction: column; /* 设置垂直布局 */
+    justify-content: space-between; /* 设置内容间距 */
+}
+
+.sidebar .sidebar-header {
+    padding: 20px; /* 设置头部的内边距 */
+    font-size: 20px; /* 设置字体大小 */
+    font-weight: bold; /* 设置字体加粗 */
+}
+
+.sidebar .sidebar-menu {
+    list-style: none; /* 去除默认的列表样式 */
+    padding: 0; /* 去除内边距 */
+    margin: 0; /* 去除外边距 */
+}
+
+.sidebar .sidebar-menu li {
+    padding: 15px 20px; /* 设置列表项的内边距 */
+    cursor: pointer; /* 设置鼠标样式为手指 */
 }
+
+.sidebar .sidebar-menu li:hover {
+    background-color: #34495e; /* 设置悬停时的背景颜色 */
+}
+
+.sidebar .sidebar-footer {
+    padding: 20px; /* 设置底部的内边距 */
+    font-size: 14px; /* 设置字体大小 */
+    text-align: center; /* 设置文本居中对齐 */
+}
+/* 页面内容的样式 */
 .page-content{
-    position: absolute;
-    top: 46px;
-    right: 0;
-    bottom: 42px;
-    left: 221px;
-    overflow: hidden;
-    z-index: 1;
+    position: absolute; /* 设置绝对定位 */
+    top: 46px; /* 页面内容距离顶部46px */
+    right: 0; /* 页面内容右边对齐 */
+    bottom: 42px; /* 页面内容底部距离42px */
+    left: 221px; /* 页面内容左边距离221px */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    z-index: 1; /* 设置堆叠顺序，保证页面内容处于最前面 */
 }
+
+/* 页面背景样式 */
 .page-content-bg{
-    position: absolute;
-    top: 46px;
-    right: 0;
-    bottom: 42px;
-    left: 221px;
-    background: rgba(0,0,0,0.5); url() 0 0 no-repeat;
-    overflow: hidden;
-    z-index: 100;
-    display: none;
+    position: absolute; /* 设置绝对定位 */
+    top: 46px; /* 背景距离顶部46px */
+    right: 0; /* 背景右边对齐 */
+    bottom: 42px; /* 背景底部距离42px */
+    left: 221px; /* 背景左边距离221px */
+    background: rgba(0,0,0,0.5); /* 半透明黑色背景 */
+    url() 0 0 no-repeat; /* 默认没有背景图片 */
+    overflow: hidden; /* 隐藏溢出的内容 */
+    z-index: 100; /* 设置堆叠顺序，背景位于最上层 */
+    display: none; /* 默认不显示背景 */
 }
 
+/* 标签页容器样式 */
 .page-content .tab{
-    height: 100%;
-    width: 100%;
-    background: #EFEEF0 url(#) 0 0 no-repeat;
-    margin: 0px;
+    height: 100%; /* 高度占满父容器 */
+    width: 100%; /* 宽度占满父容器 */
+    background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景色和背景图片 */
+    margin: 0px; /* 去除默认外边距 */
 }
+
+/* 标签页标题样式 */
 .page-content .layui-tab-title{
-    /*padding-top: 5px;*/
-    height: 35px;
-    background: #EFEEF0 url(#) 0 0 no-repeat;
-    position: relative;
-    z-index: 100;
+    /*padding-top: 5px;*/ /* 被注释掉的内边距设置 */
+    height: 35px; /* 设置高度为35px */
+    background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景色和背景图片 */
+    position: relative; /* 设置相对定位 */
+    z-index: 100; /* 使标签标题位于内容上层 */
 }
+
+/* 标签页标题项中的 "首页" 样式 */
 .page-content .layui-tab-title li.home i{
-    padding-right: 5px;
+    padding-right: 5px; /* 给图标增加右内边距 */
 }
+
+/* 隐藏标签页标题项的关闭按钮 */
 .page-content .layui-tab-title li.home .layui-tab-close{
-    display: none;
+    display: none; /* 关闭按钮默认隐藏 */
 }
+
+/* 标签页标题项的高度和行高 */
 .page-content .layui-tab-title li{
-    line-height: 35px;
+    line-height: 35px; /* 设置行高，使内容垂直居中 */
 }
+
+/* 设置激活标签页的样式 */
 .page-content .layui-tab-title .layui-this:after{
-    height: 36px;
+    height: 36px; /* 激活状态下标签项下方的伪元素高度 */
 }
+
+/* 标签页标题项的关闭按钮圆角设置 */
 .page-content .layui-tab-title li .layui-tab-close{
-    border-radius: 50%;
+    border-radius: 50%; /* 设置关闭按钮为圆形 */
 }
+
+/* 激活标签页项的背景样式 */
 .page-content .layui-tab-title .layui-this{
-    background: #fff url(#) 0 0 no-repeat;
+    background: #fff url(#) 0 0 no-repeat; /* 激活项的背景色 */
 }
+
+/* 标签栏容器的高度和行高 */
 .page-content .layui-tab-bar{
-    height:34px;
-    line-height: 35px;
+    height:34px; /* 标签栏的高度为34px */
+    line-height: 35px; /* 标签栏内容垂直居中 */
 }
+
+/* 标签内容容器 */
 .page-content .layui-tab-content{
-    position: absolute;
-    top: 36px;
-    bottom: 0px;
-    width: 100%;
-    background: #fff url(#) 0 0 no-repeat;
-    padding: 0px;
-    overflow: hidden;
+    position: absolute; /* 设置绝对定位 */
+    top: 36px; /* 内容距离顶部36px */
+    bottom: 0px; /* 内容底部对齐 */
+    width: 100%; /* 宽度占满父容器 */
+    background: #fff url(#) 0 0 no-repeat; /* 背景色和背景图片 */
+    padding: 0px; /* 去除内边距 */
+    overflow: hidden; /* 隐藏溢出的内容 */
 }
-.page-content .layui-tab-content .layui-tab-item{
-    width: 100%;
-    height: 100%;
 
+/* 标签页内容项样式 */
+.page-content .layui-tab-content .layui-tab-item{
+    width: 100%; /* 宽度占满父容器 */
+    height: 100%; /* 高度占满父容器 */
 }
-.page-content .layui-tab-content .layui-tab-item iframe{
-    width: 100%;
-    height: 100%;
 
+/* 标签页内容项中的 iframe 样式 */
+.page-content .layui-tab-content .layui-tab-item iframe{
+    width: 100%; /* iframe 宽度占满父容器 */
+    height: 100%; /* iframe 高度占满父容器 */
 }
-.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* {
-    background-color:#fff
+
+/* 轮播图的背景色 */
+.x-admin-carousel, .layui-carousel, .x-admin-carousel>[carousel-item]>* {
+    background-color: #fff; /* 设置轮播图的背景色为白色 */
 }
 
+/* 待办事项样式 */
 .x-admin-backlog .x-admin-backlog-body {
-    display:block;
-    padding:10px 15px;
-    background-color:#f8f8f8;
-    color:#999;
-    border-radius:2px;
-    transition:all .3s;
-    -webkit-transition:all .3s
+    display: block; /* 设置为块级元素 */
+    padding: 10px 15px; /* 内边距设置 */
+    background-color: #f8f8f8; /* 背景色 */
+    color: #999; /* 字体颜色 */
+    border-radius: 2px; /* 边角圆润 */
+    transition: all .3s; /* 添加过渡效果 */
+    -webkit-transition: all .3s; /* 为 Webkit 浏览器添加过渡效果 */
 }
+
+/* 待办事项标题样式 */
 .x-admin-backlog-body h3 {
-    padding-bottom:10px;
-    font-size:12px
+    padding-bottom: 10px; /* 标题底部内边距 */
+    font-size: 12px; /* 标题字体大小 */
 }
+
+/* 待办事项数字样式 */
 .x-admin-backlog-body p cite {
-    font-style:normal;
-    font-size:30px;
-    font-weight:300;
-    color:#009688
+    font-style: normal; /* 去除斜体 */
+    font-size: 30px; /* 设置数字字体大小 */
+    font-weight: 300; /* 设置字体为轻薄 */
+    color: #009688; /* 字体颜色为绿色 */
 }
+
+/* 鼠标悬浮在待办事项上时的效果 */
 .x-admin-backlog-body:hover {
-    background-color:#CFCFCF;
-    color:#888
+    background-color: #CFCFCF; /* 背景色变为灰色 */
+    color: #888; /* 字体颜色变为灰色 */
 }
 
-.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;}
-body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;}
-.welcome-footer a{padding: 0 5px;}
+/* 页面底部样式 */
+.welcome-footer {
+    padding: 30px 0; /* 上下内边距为30px */
+    line-height: 30px; /* 行高 */
+    text-align: center; /* 文本居中 */
+    background-color: #eee; /* 背景色为灰色 */
+    color: #666; /* 字体颜色 */
+    font-weight: 300; /* 字体轻薄 */
+}
 
-table th, table td {
-    word-break: break-all;
+/* 页脚样式 */
+body .layui-layout-admin .footer-demo{
+    height: auto; /* 高度自动 */
+    padding: 15px 0; /* 上下内边距为15px */
+    line-height: 26px; /* 行高 */
 }
 
-.footer{
-    position: fixed;
-    bottom: 0px;
-    width: 100%;
-    background-color: #222;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    line-height: 41px;
-    color: #fff;
-    /*padding-left: 10px;*/
+/* 页脚链接样式 */
+.welcome-footer a {
+    padding: 0 5px; /* 链接左右内边距 */
 }
-.footer .copyright{
-    margin-left: 10px;
+
+/* 表格单元格中的文本换行 */
+table th, table td {
+    word-break: break-all; /* 强制单词换行 */
+}
+
+/* 固定底部的页脚 */
+.footer {
+    position: fixed; /* 固定定位 */
+    bottom: 0px; /* 底部对齐 */
+    width: 100%; /* 宽度占满屏幕 */
+    background-color: #222; /* 背景色为深灰色 */
+    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 上边框 */
+    line-height: 41px; /* 行高 */
+    color: #fff; /* 字体颜色为白色 */
 }
 
+/* 页脚中的版权信息样式 */
+.footer .copyright {
+    margin-left: 10px; /* 左边距为10px */
+}
 
+/* 响应式设计，适配屏幕宽度小于768px时的样式 */
 @media screen and (max-width: 768px){
+    /* 快速添加按钮隐藏 */
     .fast-add{
         display: none;
     }
+
+    /* “回到首页”菜单项隐藏 */
     .layui-nav .to-index{
         display: none;
     }
+
+    /* logo 的宽度设置 */
     .container .logo a{
-        width: 140px;
+        width: 140px; /* 设置 logo 宽度为140px */
     }
+
+    /* 左侧菜单按钮隐藏 */
     .container .left_open {
-        /*float: right;*/
+        /*float: right;*/ /* 注释掉浮动设置 */
     }
+
+    /* 左侧导航栏隐藏 */
     .left-nav{
-        left: -221px;
+        left: -221px; /* 隐藏左侧导航栏 */
     }
+
+    /* 页面内容的左边距为0 */
     .page-content{
         left: 0px;
     }
+
+    /* 标签页内容项支持触控滚动 */
     .page-content .layui-tab-content .layui-tab-item{
-        -webkit-overflow-scrolling: touch; 
-        overflow-y: scroll; 
+        -webkit-overflow-scrolling: touch; /* 支持触控滚动 */
+        overflow-y: scroll; /* 垂直滚动 */
+    }
+
+        /* 搜索框宽度调整 */
+        .x-so input.layui-input{
+            width: 100%; /* 搜索框宽度调整为占满父容器 */
+            padding: 10px; /* 增加内边距，使输入框更大 */
+            box-sizing: border-box; /* 确保内边距不影响宽度 */
+        }
+
+    /* 调整顶部导航栏样式 */
+    .layui-header .layui-logo {
+        padding-left: 10px; /* 给 logo 左边加点内边距 */
+    }
+
+    /* 调整顶部导航菜单项 */
+    .layui-nav {
+        text-align: center; /* 菜单项居中 */
+    }
+
+    /* 隐藏右上角的用户头像和相关菜单 */
+    .layui-header .layui-nav .user-avatar {
+        display: none; /* 隐藏用户头像 */
+    }
+
+    /* 调整左侧导航栏菜单 */
+    .layui-nav-tree {
+        padding-left: 10px; /* 增加左侧的内边距 */
+    }
+
+    /* 调整左侧导航栏菜单项 */
+    .layui-nav-tree li a {
+        font-size: 14px; /* 调整菜单项字体大小 */
+        padding: 12px 15px; /* 增加内边距 */
     }
-    .x-so input.layui-input{
-        width: 100%;
-        margin: 10px;
+
+    /* 隐藏左侧导航栏的“展开”按钮 */
+    .layui-nav-item > a:after {
+        display: none; /* 隐藏展开按钮 */
     }
 
-    .layui-input{
-        margin-left: 20px;
+    /* 左侧导航栏激活项的背景色 */
+    .layui-nav-item.layui-this > a {
+        background-color: #009688; /* 激活项背景色 */
+        color: #fff; /* 激活项文字颜色为白色 */
     }
 
+    /* 调整右侧操作按钮 */
+    .layui-btn.layui-btn-sm {
+        padding: 6px 12px; /* 缩小按钮内边距 */
+    }
 
+    /* 页面内容容器，增加响应式设计 */
+    .page-content {
+        padding: 10px; /* 增加内边距，避免内容紧贴边缘 */
+    }
+
+    /* 隐藏顶部导航栏 */
+    .top-nav {
+        display: none; /* 隐藏顶部导航栏 */
+    }
+
+    /* 调整页脚的样式 */
+    .footer {
+        text-align: center; /* 页脚内容居中 */
+        padding: 15px 0; /* 增加上下内边距 */
+        font-size: 14px; /* 设置字体大小 */
+    }
+}
+
+/* 响应式设计，适配屏幕宽度小于480px时的样式 */
+@media screen and (max-width: 480px){
+    /* 调整搜索框的字体和内边距 */
+    .x-so input.layui-input {
+        padding: 8px; /* 缩小内边距 */
+        font-size: 14px; /* 缩小字体 */
+    }
+
+    /* 调整顶部导航栏的样式 */
+    .layui-header {
+        padding: 10px 0; /* 上下内边距为10px */
+    }
+
+    /* 修改左侧菜单为垂直布局 */
+    .layui-nav-tree {
+        display: block; /* 设置为块级元素，垂直显示 */
+    }
+
+    /* 左侧导航栏菜单项的宽度和字体 */
+    .layui-nav-tree li a {
+        padding: 10px 15px; /* 增加内边距 */
+        font-size: 16px; /* 增大字体大小 */
+    }
+
+    /* 隐藏其他不必要的页面元素 */
+    .layui-footer {
+        display: none; /* 隐藏页脚 */
+    }
+
+    /* 调整页面内容区域 */
+    .page-content {
+        margin-left: 0; /* 取消左侧空隙 */
+        margin-right: 0; /* 取消右侧空隙 */
+        padding: 5px; /* 减少内边距 */
+    }
+
+    /* 调整页面标题栏 */
+    .page-content .layui-tab-title {
+        font-size: 14px; /* 缩小字体大小 */
+        height: 30px; /* 减小标题栏高度 */
+    }
+
+    /* 调整标签页内容区域 */
+    .page-content .layui-tab-content {
+        padding: 0 5px; /* 缩小内边距 */
+    }
+
+    /* 标签内容区域的 iframe */
+    .page-content .layui-tab-content iframe {
+        height: 100vh; /* 设置 iframe 高度为屏幕高度 */
+    }
+
+    /* 修复滚动条样式 */
+    .page-content .layui-tab-content .layui-tab-item {
+        overflow-y: auto; /* 允许纵向滚动 */
+    }
+
+    /* 调整快速操作按钮 */
+    .x-admin-carousel .carousel-item {
+        padding: 0 5px; /* 缩小内边距 */
+    }
+}
+
+/* 调整弹出层样式 */
+.layui-layer {
+    max-width: 80%; /* 限制弹出层的最大宽度 */
+    width: 400px; /* 设置弹出层的固定宽度 */
+}
+
+/* 调整按钮样式 */
+.layui-btn {
+    font-size: 14px; /* 设置按钮字体大小 */
+    padding: 6px 12px; /* 调整按钮内边距 */
 }
 
+/* 禁用按钮样式 */
+.layui-btn-disabled {
+    background-color: #ccc; /* 禁用按钮背景色 */
+    cursor: not-allowed; /* 禁用按钮时改变光标 */
+}