smq #3

Merged
pxrztuq3h merged 12 commits from branch_shen into develop 3 months ago

@ -22,15 +22,14 @@ import java.util.List;
/** /**
* Description: * Description:
*
* @Date: 2020/2/17 14:17
* @Author: PeiChen
*/ */
@Controller @Controller
@RequestMapping("/student") @RequestMapping("/student")
public class StudentController { public class StudentController {
private StudentService studentService; private StudentService studentService;
@Autowired @Autowired
public void setStudentService(StudentService studentService) { public void setStudentService(StudentService studentService) {
this.studentService = studentService; this.studentService = studentService;
@ -38,6 +37,7 @@ public class StudentController {
/** /**
* *
*
* @param page * @param page
* @param size * @param size
* @param request * @param request
@ -46,6 +46,27 @@ public class StudentController {
* @throws Exception * @throws Exception
*/ */
@RequestMapping("/findAll") @RequestMapping("/findAll")
public class StudentController {
private StudentService studentService;
@Autowired
public void setStudentService(StudentService studentService) {
this.studentService = studentService;
}
/**
*
*
* @param page
* @param size
* @param request HTTP
* @param response HTTP
* @return ModelAndView
* @throws Exception
*/
@RequestMapping("/findAll")
public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception { public ModelAndView findAll(@RequestParam(name = "page", required = true, defaultValue = "1") int page, @RequestParam(name = "size", required = true, defaultValue = "5") int size, HttpServletRequest request, HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8"); request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8");
@ -57,19 +78,18 @@ public class StudentController {
} else { } else {
list = studentService.search(page, size, keyword); list = studentService.search(page, size, keyword);
} }
//PageInfo就是一个封装了分页数据的bean
PageInfo pageInfo = new PageInfo(list); PageInfo pageInfo = new PageInfo(list);
mv.addObject("pageInfo", pageInfo); mv.addObject("pageInfo", pageInfo);
mv.setViewName("student-list"); mv.setViewName("student-list");
return mv; return mv;
} }
/** /**
* *
* @param request *
* @param response * @param request HTTP
* @throws Exception * @param response HTTP
* @throws Exception
*/ */
@RequestMapping("/delete") @RequestMapping("/delete")
public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception { public void delete(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -82,14 +102,14 @@ public class StudentController {
} }
studentService.delete(sno); studentService.delete(sno);
writer.write("true"); writer.write("true");
} }
/** /**
* *
* @param request *
* @param response * @param request HTTP
* @throws Exception * @param response HTTP
* @throws Exception
*/ */
@RequestMapping("/isExist") @RequestMapping("/isExist")
public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception { public void isSnoExist(HttpServletRequest request, HttpServletResponse response) throws Exception {
@ -101,9 +121,7 @@ public class StudentController {
if (isExist == null) { if (isExist == null) {
return; return;
} }
//如果isExist不为空说明学号已被注册
writer.write("true"); writer.write("true");
} }
@RequestMapping("/addStudent") @RequestMapping("/addStudent")
@ -122,9 +140,10 @@ public class StudentController {
/** /**
* *
* @param student *
* @param response * @param student
* @throws Exception * @param response HTTP
* @throws Exception
*/ */
@RequestMapping("/add") @RequestMapping("/add")
public void add(Student student, HttpServletResponse response) throws Exception { public void add(Student student, HttpServletResponse response) throws Exception {
@ -133,7 +152,6 @@ public class StudentController {
writer.write("false"); writer.write("false");
return; return;
} }
Student s = studentService.findBySno(student.getSno()); Student s = studentService.findBySno(student.getSno());
if (s != null) { if (s != null) {
writer.write("false"); writer.write("false");
@ -145,7 +163,6 @@ public class StudentController {
} else { } else {
writer.write("false"); writer.write("false");
} }
} }
@RequestMapping("/editStudent") @RequestMapping("/editStudent")
@ -158,11 +175,13 @@ public class StudentController {
mv.setViewName("student-edit"); mv.setViewName("student-edit");
return mv; return mv;
} }
/** /**
* *
* @param student *
* @param response * @param student
* @throws Exception * @param response HTTP
* @throws Exception
*/ */
@RequestMapping("/update") @RequestMapping("/update")
public void update(Student student, HttpServletResponse response) throws Exception { public void update(Student student, HttpServletResponse response) throws Exception {
@ -171,25 +190,18 @@ public class StudentController {
if (student == null || student.getId() == null) { if (student == null || student.getId() == null) {
return; return;
} }
if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 if (student.getName() == null || "".equals(student.getName()) || student.getName().length() == 0 || student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex()) || student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0 || student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0 || student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0 || student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0 || student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0 || student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0) {
|| student.getSex() == null || student.getSex().length() == 0 || "".equals(student.getSex())
|| student.getSno() == null || "".equals(student.getSno()) || student.getSno().length() == 0
|| student.getPhone() == null || "".equals(student.getPhone()) || student.getPhone().length() == 0
|| student.getStu_class() == null || "".equals(student.getStu_class()) || student.getStu_class().length() == 0
|| student.getPlace() == null || "".equals(student.getPlace()) || student.getPlace().length() == 0
|| student.getDorm_id() == null || "".equals(student.getDorm_id()) || student.getDorm_id().length() == 0
|| student.getTeacher() == null || "".equals(student.getTeacher()) || student.getTeacher().length() == 0 ) {
return; return;
} }
studentService.update(student); studentService.update(student);
writer.write("true"); writer.write("true");
} }
/** /**
* Excel * Excel
* @param response *
* @throws Exception * @param response HTTP
* @throws Exception
*/ */
@RequestMapping("/export") @RequestMapping("/export")
public void export(HttpServletResponse response) throws Exception { public void export(HttpServletResponse response) throws Exception {
@ -200,6 +212,5 @@ public class StudentController {
IOUtils.copy(is, outputStream); IOUtils.copy(is, outputStream);
} }
}
} }

@ -54,6 +54,7 @@ public interface StudentDao {
@Delete("delete from students where sno = #{sno}") @Delete("delete from students where sno = #{sno}")
void delete(String sno) throws Exception; void delete(String sno) throws Exception;
/** /**
* *
* @param student * @param student

@ -9,7 +9,6 @@ import java.util.List;
* Description: * Description:
*/ */
public interface StudentService { public interface StudentService {
/** /**
* *
* @param page * @param page
@ -17,7 +16,7 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
List<Student> findAll(int page, int size) throws Exception; List<Student> findAll(int page, int size) throws Exception; // 定义分页查询所有学生信息的方法
/** /**
* *
@ -25,7 +24,7 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
Student findBySno(String sno) throws Exception; Student findBySno(String sno) throws Exception; // 定义根据学号查询学生信息的方法
/** /**
* *
@ -35,7 +34,7 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
List<Student> search(int page, int size, String keyword) throws Exception; List<Student> search(int page, int size, String keyword) throws Exception; // 定义分页搜索学生信息的方法
/** /**
* *
@ -43,28 +42,28 @@ public interface StudentService {
* @return truefalse * @return truefalse
* @throws Exception * @throws Exception
*/ */
boolean add(Student student) throws Exception; boolean add(Student student) throws Exception; // 定义添加新学生信息的方法
/** /**
* *
* @param sno * @param sno
* @throws Exception * @throws Exception
*/ */
void delete(String sno) throws Exception; void delete(String sno) throws Exception; // 定义根据学号删除学生信息的方法
/** /**
* *
* @param student * @param student
* @throws Exception * @throws Exception
*/ */
void update(Student student) throws Exception; void update(Student student) throws Exception; // 定义更新学生信息的方法
/** /**
* *
* @return InputStream * @return InputStream
* @throws Exception * @throws Exception
*/ */
InputStream getInputStream() throws Exception; InputStream getInputStream() throws Exception; // 定义获取所有学生信息输入流的方法
/** /**
* 宿ID * 宿ID
@ -73,7 +72,7 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
List<Student> findByDormId(String dorm_id, Integer status) throws Exception; List<Student> findByDormId(String dorm_id, Integer status) throws Exception; // 定义根据宿舍ID和状态查询学生信息的方法
/** /**
* *
@ -83,7 +82,7 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
List<Student> findByTeacher(int page, int size, String teacher) throws Exception; List<Student> findByTeacher(int page, int size, String teacher) throws Exception; // 定义根据教师姓名分页查询学生信息的方法
/** /**
* *
@ -94,5 +93,5 @@ public interface StudentService {
* @return * @return
* @throws Exception * @throws Exception
*/ */
List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception; List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception; // 定义根据教师姓名和搜索关键字分页查询学生信息的方法
} }

@ -13,10 +13,7 @@ import java.util.ArrayList;
import java.util.List; import java.util.List;
/** /**
* Description: * StudentServiceImplStudentService
*
* @Date: 2020/2/17 14:22
* @Author: PeiChen
*/ */
@Service("studentService") @Service("studentService")
public class StudentServiceImpl implements StudentService { public class StudentServiceImpl implements StudentService {
@ -29,9 +26,11 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* *
* @return * @param page
* @throws Exception * @param size
* @return
* @throws Exception
*/ */
@Override @Override
public List<Student> findAll(int page, int size) throws Exception { public List<Student> findAll(int page, int size) throws Exception {
@ -40,9 +39,10 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* sno *
* @return * @param sno
* @throws Exception * @return
* @throws Exception
*/ */
@Override @Override
public Student findBySno(String sno) throws Exception { public Student findBySno(String sno) throws Exception {
@ -50,9 +50,12 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* *
* @return * @param page
* @throws Exception * @param size
* @param keyword
* @return
* @throws Exception
*/ */
@Override @Override
public List<Student> search(int page, int size, String keyword) throws Exception { public List<Student> search(int page, int size, String keyword) throws Exception {
@ -61,9 +64,10 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* *
* @param student * @param student
* @throws Exception * @return
* @throws Exception
*/ */
@Override @Override
public boolean add(Student student) throws Exception { public boolean add(Student student) throws Exception {
@ -77,9 +81,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* *
* @param sno * @param sno
* @throws Exception * @throws Exception
*/ */
@Override @Override
public void delete(String sno) throws Exception { public void delete(String sno) throws Exception {
@ -87,9 +91,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* *
* @param student * @param student
* @throws Exception * @throws Exception
*/ */
@Override @Override
public void update(Student student) throws Exception { public void update(Student student) throws Exception {
@ -97,9 +101,9 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* * Excel
* @return * @return Excel
* @throws Exception * @throws Exception
*/ */
@Override @Override
public InputStream getInputStream() throws Exception { public InputStream getInputStream() throws Exception {
@ -121,16 +125,15 @@ public class StudentServiceImpl implements StudentService {
datalist.add(obj); datalist.add(obj);
} }
WriteExcel excel = new WriteExcel(title, datalist); WriteExcel excel = new WriteExcel(title, datalist);
return excel.export(); return excel.export();
} }
/** /**
* 宿status * 宿status
* @param dorm_id * @param dorm_id 宿
* @param status * @param status
* @return * @return
* @throws Exception * @throws Exception
*/ */
@Override @Override
public List<Student> findByDormId(String dorm_id, Integer status) throws Exception { public List<Student> findByDormId(String dorm_id, Integer status) throws Exception {
@ -138,10 +141,12 @@ public class StudentServiceImpl implements StudentService {
} }
/** /**
* teacher * teacher
* @param teacher * @param page
* @return * @param size
* @throws Exception * @param teacher
* @return
* @throws Exception
*/ */
@Override @Override
public List<Student> findByTeacher(int page, int size, String teacher) throws Exception { public List<Student> findByTeacher(int page, int size, String teacher) throws Exception {
@ -149,6 +154,15 @@ public class StudentServiceImpl implements StudentService {
return studentDao.findByTeacher(teacher); return studentDao.findByTeacher(teacher);
} }
/**
*
* @param page
* @param size
* @param teacher
* @param keyword
* @return
* @throws Exception
*/
@Override @Override
public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception { public List<Student> searchStudent(int page, int size, String teacher, String keyword) throws Exception {
PageHelper.startPage(page, size); PageHelper.startPage(page, size);

@ -76,6 +76,7 @@
</table> </table>
</form> </form>
<!-- jQuery脚本 --> <!-- jQuery脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> <script>
@ -144,6 +145,7 @@
layer.msg('添加失败,请联系管理员'); // 如果操作失败,显示错误消息 layer.msg('添加失败,请联系管理员'); // 如果操作失败,显示错误消息
if (${sessionScope.adminInfo.power == 1}) { // 根据用户权限不同,跳转到不同的页面 if (${sessionScope.adminInfo.power == 1}) { // 根据用户权限不同,跳转到不同的页面
// 宿舍管理员权限2秒后跳转到宿舍管理员页面 // 宿舍管理员权限2秒后跳转到宿舍管理员页面
setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000); setTimeout(function () {window.location.href = '${pageContext.request.contextPath}/dorm/byDorm_leader?uid=${sessionScope.adminInfo.uid}';}, 2000);
return false; return false;
} }

@ -194,6 +194,7 @@
}); });
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

@ -129,6 +129,7 @@
</tr> </tr>
</c:forEach> </c:forEach>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -224,6 +225,7 @@
layer.close(index); layer.close(index);
}); });
} }
</script> </script>
</body> </body>
</html> </html>

@ -167,6 +167,7 @@
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a> <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pageNum+1}&size=${pageInfo.pageSize}&keyword=${param.keyword}">下一页</a>
</c:if> </c:if>
<!-- 尾页链接 --> <!-- 尾页链接 -->
<a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a> <a class="next" href="${pageContext.request.contextPath}/dorm/findStudent?name=${sessionScope.adminInfo.name}&page=${pageInfo.pages}&size=${pageInfo.pageSize}&keyword=${param.keyword}">尾页</a>
</div> </div>
</div> </div>

@ -1,150 +1,193 @@
/* 定义一个名为 mobileSelect 的类,用于设置选择器的样式 */
.mobileSelect { .mobileSelect {
position: relative; position: relative; /* 相对定位 */
z-index: 0; z-index: 0; /* 层级为0 */
opacity: 0; opacity: 0; /* 初始透明度为0即不可见 */
visibility: hidden; visibility: hidden; /* 初始状态为隐藏 */
-webkit-transition: opacity 0.4s, z-index 0.4s; -webkit-transition: opacity 0.4s, z-index 0.4s; /* 过渡效果透明度和层级变化持续0.4秒 */
transition: opacity 0.4s, z-index 0.4s; transition: opacity 0.4s, z-index 0.4s; /* 标准过渡效果 */
} }
/* 设置 mobileSelect 内所有元素的边距和填充为0并使用盒模型计算方式 */
.mobileSelect * { .mobileSelect * {
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* 定义 mobileSelect 内的 grayLayer 类的样式 */
.mobileSelect .grayLayer { .mobileSelect .grayLayer {
position: fixed; position: fixed; /* 固定定位 */
top: 0; top: 0; /* 距离顶部0 */
left: 0; left: 0; /* 距离左侧0 */
bottom: 0; bottom: 0; /* 距离底部0 */
right: 0; right: 0; /* 距离右侧0 */
background: #eee; background: #eee; /* 背景色 */
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
z-index: 888; z-index: 888; /* 层级为888 */
display: block; display: block; /* 显示为块级元素 */
} }
/* 定义 mobileSelect 内的 content 类的样式 */
.mobileSelect .content { .mobileSelect .content {
width: 100%; width: 100%; /* 宽度100% */
display: block; display: block; /* 显示为块级元素 */
position: fixed; position: fixed; /* 固定定位 */
z-index: 889; z-index: 889; /* 层级为889 */
color: black; color: black; /* 文字颜色为黑色 */
-webkit-transition: all 0.4s; -webkit-transition: all 0.4s; /* 所有属性的过渡效果持续0.4秒 */
transition: all 0.4s; transition: all 0.4s; /* 标准过渡效果 */
bottom: -350px; bottom: -350px; /* 初始位置在视口下方350px处 */
left: 0; left: 0; /* 距离左侧0 */
background: white; background: white; /* 背景色为白色 */
} }
/* 定义 content 内的 fixWidth 类的样式 */
.mobileSelect .content .fixWidth { .mobileSelect .content .fixWidth {
width: 90%; width: 90%; /* 宽度为90% */
margin: 0 auto; margin: 0 auto; /* 上下边距为0左右自动调整 */
position: relative; position: relative; /* 相对定位 */
} }
/* 定义 fixWidth 内的伪元素样式,用于清除浮动 */
.mobileSelect .content .fixWidth:after { .mobileSelect .content .fixWidth:after {
content: "."; content: "."; /* 内容为点号 */
display: block; display: block; /* 显示为块级元素 */
height: 0; height: 0; /* 高度为0 */
clear: both; clear: both; /* 清除浮动 */
visibility: hidden; visibility: hidden; /* 隐藏 */
} }
/* 定义 content 内的 btnBar 类的样式 */
.mobileSelect .content .btnBar { .mobileSelect .content .btnBar {
border-bottom: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; /* 底部边框 */
font-size: 15px; font-size: 15px; /* 字体大小 */
height: 45px; height: 45px; /* 高度 */
position: relative; position: relative; /* 相对定位 */
text-align: center; text-align: center; /* 文本居中 */
line-height: 45px; line-height: 45px; /* 行高 */
} }
/* 定义 btnBar 内的 cancel 和 ensure 按钮的样式 */
.mobileSelect .content .btnBar .cancel, .mobileSelect .content .btnBar .cancel,
.mobileSelect .content .btnBar .ensure { .mobileSelect .content .btnBar .ensure {
height: 45px; height: 45px; /* 高度 */
width: 55px; width: 55px; /* 宽度 */
cursor: pointer; cursor: pointer; /* 鼠标指针样式 */
position: absolute; position: absolute; /* 绝对定位 */
top: 0; top: 0; /* 距离顶部0 */
} }
/* cancel 按钮的样式 */
.mobileSelect .content .btnBar .cancel { .mobileSelect .content .btnBar .cancel {
left: 0; left: 0; /* 距离左侧0 */
color: #666; color: #666; /* 文字颜色 */
} }
/* ensure 按钮的样式 */
.mobileSelect .content .btnBar .ensure { .mobileSelect .content .btnBar .ensure {
right: 0; right: 0; /* 距离右侧0 */
color: #1e83d3; color: #1e83d3; /* 文字颜色 */
} }
/* title 的样式 */
.mobileSelect .content .btnBar .title { .mobileSelect .content .btnBar .title {
font-size: 15px; font-size: 15px; /* 字体大小 */
padding: 0 15%; padding: 0 15%; /* 内边距 */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
white-space: nowrap; white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 超出部分显示省略号 */
} }
/* panel 内的伪元素样式,用于清除浮动 */
.mobileSelect .content .panel:after { .mobileSelect .content .panel:after {
content: "."; content: "."; /* 内容为点号 */
display: block; display: block; /* 显示为块级元素 */
height: 0; height: 0; /* 高度为0 */
clear: both; clear: both; /* 清除浮动 */
visibility: hidden; visibility: hidden; /* 隐藏 */
} }
/* wheels 的样式 */
.mobileSelect .content .panel .wheels { .mobileSelect .content .panel .wheels {
width: 100%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200px */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
} }
/* wheel 的样式 */
.mobileSelect .content .panel .wheel { .mobileSelect .content .panel .wheel {
position: relative; position: relative; /* 相对定位 */
z-index: 0; z-index: 0; /* 层级为0 */
float: left; float: left; /* 左浮动 */
width: 50%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200% */
overflow: hidden; overflow: hidden; /* 溢出隐藏 */
-webkit-transition: width 0.3s ease; -webkit-transition: width 0.3s ease; /* Webkit浏览器的过渡效果 */
transition: width 0.3s ease; transition: width 0.3s ease; /* 标准过渡效果 */
} }
/* selectContainer 的样式 */
.mobileSelect .content .panel .wheel .selectContainer { .mobileSelect .content .panel .wheel .selectContainer {
display: block; display: block; /* 显示为块级元素 */
text-align: center; text-align: center; /* 文本居中 */
-webkit-transition: -webkit-transform 0.18s ease-out; -webkit-transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的过渡效果 */
transition: -webkit-transform 0.18s ease-out; transition: -webkit-transform 0.18s ease-out; /* Webkit浏览器的标准过渡效果 */
transition: transform 0.18s ease-out; transition: transform 0.18s ease-out; /* 标准过渡效果 */
transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out; /* 同时应用两种过渡效果 */
} }
/* selectContainer li元素的样式 */
.mobileSelect .content .panel .wheel .selectContainer li { .mobileSelect .content .panel .wheel .selectContainer li {
font-size: 15px; font-size: 15px; /* 字体大小 */
display: block; display: block; /* 显示为块级元素 */
height: 40px; height: 40px; /* 高度40px */
line-height: 40px; line-height: 40px; /* 行高40px */
cursor: pointer; color: #ffffff; /* 文字颜色为白色 */
overflow: hidden; cursor: pointer; /* 鼠标指针样式 */
white-space: nowrap; white-space: nowrap; /* 不换行 */
text-overflow: ellipsis; text-overflow: ellipsis; /* 超出部分显示省略号 */
} }
/* selectLine的样式 */
.mobileSelect .content .panel .selectLine { .mobileSelect .content .panel .selectLine {
height: 40px; height: 40px; /* 高度40px */
width: 100%; width: 100%; /* 宽度100% */
position: absolute; position: absolute; /* 绝对定位 */
top: 80px; top: 80px; /* 距离顶部80px */
pointer-events: none; pointer-events: none; /* 禁止鼠标事件 */
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box; /* Webkit浏览器的盒模型计算方式 */
box-sizing: border-box; box-sizing: border-box; /* 标准盒模型计算方式 */
border-top: 1px solid #DCDCDC; border-top: 1px solid #DCDCDC; /* 上边框 */
border-bottom: 1px solid #DCDCDC; border-bottom: 1px solid #DCDCDC; /* 下边框 */
} }
/* shadowMask的样式 */
.mobileSelect .content .panel .shadowMask { .mobileSelect .content .panel .shadowMask {
position: absolute; position: absolute; /* 绝对定位 */
top: 0; top: 0; /* 距离顶部0 */
width: 100%; width: 100%; /* 宽度100% */
height: 200px; height: 200px; /* 高度200px */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(rgba(255, 255, 255, 0)), to(#ffffff)); background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变 */
background: -webkit-linear-gradient(top, #ffffff, rgba(255, 255, 255, 0), #ffffff); background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* 标准背景渐变 */
background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0), #ffffff); background: -webkit-linear-gradient(top, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
opacity: 0.9; background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
pointer-events: none; background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
} background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
background: linear-gradient(to bottom, #ffffff, rgba(255,255,255,0), #ffffff); /* Webkit浏览器的背景渐变重复*/
}
/* mobileSelect-show类的样式用于显示时的状态 */
.mobileSelect-show { .mobileSelect-show {
opacity: 1; z-index: 10000; /* z轴层级提高至10000 */
z-index: 10000;
visibility: visible;
} }
/* mobileSelect-show类的content子元素的样式用于显示时的状态 */
.mobileSelect-show .content { .mobileSelect-show .content {
bottom: 0; bottom: -350px; /* bottom属性设置为-350px使其完全显示在视窗内 */
} }

@ -1,433 +1,439 @@
@charset "utf-8"; @charset "utf-8";
@import url(../lib/layui/css/layui.css); @import url(../lib/layui/css/layui.css);
/* 全局样式 */
* { * {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
a { a {
text-decoration: none; text-decoration: none; /* 去掉链接下划线 */
} }
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-x:hidden; overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y:auto; overflow-y: auto; /* 允许垂直滚动 */
} }
body { body {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%; /* 最小高度为视口高度 */
} }
/* 页面主体内容样式 */
.x-body { .x-body {
padding: 20px; padding: 20px; /* 内边距 */
} }
.x-nav { .x-nav {
padding: 0 20px; padding: 0 20px; /* 左右内边距 */
position: relative; position: relative; /* 相对定位 */
z-index: 99; z-index: 99; /* 层级 */
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; /* 底部边框 */
line-height: 39px; line-height: 39px; /* 行高 */
height: 39px; height: 39px; /* 固定高度 */
overflow: hidden; overflow: hidden; /* 隐藏溢出内容 */
} }
xblock { xblock {
display: block; display: block; /* 块级元素 */
margin-bottom: 10px; margin-bottom: 10px; /* 下边距 */
padding: 5px; padding: 5px; /* 内边距 */
line-height: 22px; line-height: 22px; /* 行高 */
/* border-left: 5px solid #009688; */ border-radius: 0 2px 2px 0; /* 圆角 */
border-radius: 0 2px 2px 0; background-color: #f2f2f2; /* 背景色 */
background-color: #f2f2f2;
} }
.x-right { .x-right {
float: right; float: right; /* 右浮动 */
} }
.x-so { .x-so {
/*text-align: center;*/ margin-bottom: 20px; /* 下边距 */
/*background: #f2f2f2 url() 0 0 no-repeat;*/
margin-bottom: 20px;
} }
.x-so input.layui-input { .x-so input.layui-input {
width: 150px; width: 150px; /* 宽度 */
padding-left: 25px; padding-left: 25px; /* 左内边距 */
} }
.x-so .layui-form-label { .x-so .layui-form-label {
display: inline-block; 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; display: inline-block; /* 行内块级元素 */
} }
.x-red { .x-red {
color: red; color: red; /* 红色字体 */
} }
.x-a { .x-a {
color: #1AA093; color: #1AA093; /* 绿色字体 */
} }
.x-a:hover { .x-a:hover {
color: #127F74; color: #127F74; /* 悬停时的颜色 */
} }
.x-sort { .x-sort {
height: 30px; height: 30px; /* 高度 */
} }
.x-show { .x-show {
cursor: pointer; cursor: pointer; /* 鼠标指针 */
} }
.layui-form-switch { .layui-form-switch {
margin-top: 0px; margin-top: 0px; /* 上边距 */
} }
.layui-input:focus, .layui-textarea:focus { .layui-input:focus, .layui-textarea:focus {
border-color: #189f92!important; border-color: #189f92!important; /* 焦点状态下的边框颜色 */
} }
/* 分页样式 */
.page { .page {
margin-top: 20px; margin-top: 20px; /* 上边距 */
text-align: center; text-align: center; /* 居中对齐 */
} }
.page a { .page a {
display: inline-block; display: inline-block; /* 行内块级元素 */
background: #fff url(#) 0 0 no-repeat; background: #fff url(#) 0 0 no-repeat; /* 背景图 */
color: #888; color: #888; /* 灰色字体 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2; /* 边框 */
} }
.page span { .page span {
display: inline-block; display: inline-block; /* 行内块级元素 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #E2E2E2; border: 1px solid #E2E2E2; /* 边框 */
} }
.page span.current { .page span.current {
display: inline-block; display: inline-block; /* 行内块级元素 */
background: #009688 url(#) 0 0 no-repeat; background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
padding: 10px; padding: 10px; /* 内边距 */
min-width: 15px; min-width: 15px; /* 最小宽度 */
border: 1px solid #009688; border: 1px solid #009688; /* 边框 */
} }
.page .pagination li { .page .pagination li {
display: inline-block; display: inline-block; /* 行内块级元素 */
margin-right: 5px; margin-right: 5px; /* 右边距 */
text-align: center; text-align: center; /* 居中对齐 */
} }
.page .pagination li.active span { .page .pagination li.active span {
background: #009688 url(#) 0 0 no-repeat; background: #009688 url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
border: 1px solid #009688; border: 1px solid #009688; /* 边框 */
} }
/* 登录样式 */ /* 登录样式 */
/* 头部 */ /* 头部 */
.container { .container {
width: 100%; width: 100%; /* 宽度 */
height: 45px; height: 45px; /* 高度 */
background-color: #222; background-color: #222; /* 背景色 */
border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部边框 */
} }
.container .logo a { .container .logo a {
float: left; float: left; /* 左浮动 */
color: #fff; color: #fff; /* 白色字体 */
font-size: 18px; font-size: 18px; /* 字体大小 */
padding-left: 20px; padding-left: 20px; /* 左内边距 */
line-height: 45px; line-height: 45px; /* 行高 */
width: 200px; width: 200px; /* 宽度 */
} }
.container .right { .container .right {
background-color:rgba(0,0,0,0); background-color: rgba(0,0,0,0); /* 透明背景 */
float: right; float: right; /* 右浮动 */
} }
.container .left_open { .container .left_open {
height: 45px; height: 45px; /* 高度 */
float: left; float: left; /* 左浮动 */
} }
.container .left_open i { .container .left_open i {
display: block; display: block; /* 块级元素 */
background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; background: rgba(255,255,255,0.1) url(#) 0 0 no-repeat; /* 背景图 */
color: #fff; color: #fff; /* 白色字体 */
width: 32px; width: 32px; /* 宽度 */
height: 32px; height: 32px; /* 高度 */
line-height: 32px; line-height: 32px; /* 行高 */
border-radius: 3px; border-radius: 3px; /* 圆角 */
text-align: center; text-align: center; /* 居中对齐 */
margin-top: 7px; margin-top: 7px; /* 上边距 */
cursor: pointer; cursor: pointer; /* 鼠标指针 */
} }
.container .left_open i:hover { .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 { .container .left {
background-color:rgba(0,0,0,0); background-color: rgba(0,0,0,0); /* 透明背景 */
float: left; float: left; /* 左浮动 */
} }
.container .layui-nav-item { .container .layui-nav-item {
line-height: 45px; line-height: 45px; /* 行高 */
} }
.container .layui-nav-more { .container .layui-nav-more {
top: 20px; top: 20px; /* 上边距 */
} }
.container .layui-nav-child { .container .layui-nav-child {
top: 50px; top: 50px; /* 上边距 */
} }
.container .layui-nav-child i { .container .layui-nav-child i {
margin-right: 10px; margin-right: 10px; /* 右边距 */
}
.layui-nav .layui-nav-item a{
color: #fff;
cursor: pointer;
}
.layui-nav .layui-nav-child a{
color: #333;
cursor: pointer;
} }
.left-nav { .left-nav {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 上边距 */
bottom: 42px; bottom: 42px; /* 下边距 */
left: 0; left: 0; /* 左边距 */
z-index: 2; z-index: 2; /* 层级 */
padding-top: 10px; padding-top: 10px; /* 上内边距 */
background-color: #EEEEEE; width: 220px; /* 宽度 */
width: 220px; max-width: 220px; /* 最大宽度 */
max-width: 220px; background-color: #EEEEEE; /* 背景色 */
overflow: auto; overflow: auto; /* 自动溢出处理 */
/* 设置溢出内容不显示 */
overflow-x: hidden; overflow-x: hidden;
border-right: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;
/* 左侧导航样式 */
.left-nav {
/* 宽度设置为0注释掉的代码可以设置具体宽度 */
/* width: 0px; */ /* width: 0px; */
} }
/* 左侧导航列表项样式 */
.left-nav #nav li { .left-nav #nav li {
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; /* 底部边框 */
} }
/* 左侧导航列表项鼠标悬停样式 */
.left-nav #nav li:hover > a { .left-nav #nav li:hover > a {
/*color: blue;*/ /* color: blue; */ /* 注释掉的颜色设置 */
}
.left-nav #nav .current{
background-color: rgba(0, 0, 0, 0.3);
} }
.left-nav #nav li a{
font-size: 14px; /* 左侧导航列表项当前选中样式 */
padding: 10px 15px 10px 20px; .left-nav #nav li .current {
display: block; background-color: rgba(0, 0, 0, 0.3); /* 背景色 */
cursor: pointer;
}
.left-nav #nav li a cite{
font-size: 14px;
} }
/* 左侧导航子菜单默认隐藏 */
.left-nav #nav li .sub-menu { .left-nav #nav li .sub-menu {
display: none; display: none;
} }
/* 左侧导航子菜单打开状态 */
.left-nav #nav li .opened { .left-nav #nav li .opened {
display: block; display: block;
} }
/* 左侧导航子菜单打开状态鼠标悬停样式 */
.left-nav #nav li .opened:hover { .left-nav #nav li .opened:hover {
/*background: #fff url() 0 0 no-repeat;*/ /* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
} }
.left-nav #nav li .opened .current{
/* 左侧导航子菜单当前选中样式 */
.left-nav #nav li .opened .current {
/* background: rgba(0, 0, 0, 0); */ /* 注释掉的背景色设置 */
} }
.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 { .left-nav #nav li .sub-menu li a {
padding: 12px 15px 12px 30px; padding: 12px 15px 12px 30px; /* 内边距 */
font-size: 14px; font-size: 14px; /* 字体大小 */
cursor: pointer; cursor: pointer; /* 鼠标指针样式 */
} }
/* 左侧导航子菜单列表项二级菜单样式 */
.left-nav #nav li .sub-menu li .sub-menu li a { .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; /* 左侧导航子菜单列表项鼠标悬停样式 */
.left-nav #nav li .sub-menu li:hover a {
color: #148cf1; /* 颜色 */
/* background: #fff url() 0 0 no-repeat; */ /* 注释掉的背景图设置 */
} }
/* 左侧导航子菜单列表项图标样式 */
.left-nav #nav li .sub-menu li a i { .left-nav #nav li .sub-menu li a i {
font-size: 12px; font-size: 12px; /* 字体大小 */
} }
/* 左侧导航列表项右侧箭头样式 */
.left-nav #nav li a i { .left-nav #nav li a i {
padding-right: 10px; float: right; /* 右浮动 */
line-height: 14px; font-size: 16px; /* 字体大小 */
} line-height: 14px; /* 行高 */
.left-nav #nav li .nav_right{ padding-right: 10px; /* 右内边距 */
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;
} }
/* 页面内容样式 */
.page-content { .page-content {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 顶部位置 */
right: 0; right: 0; /* 右边位置 */
bottom: 42px; bottom: 42px; /* 底部位置 */
left: 221px; left: 221px; /* 左边位置 */
overflow: hidden; overflow: hidden; /* 隐藏溢出内容 */
z-index: 1; z-index: 1; /* z轴顺序 */
} }
/* 页面内容背景样式 */
.page-content-bg { .page-content-bg {
position: absolute; position: absolute; /* 绝对定位 */
top: 46px; top: 46px; /* 顶部位置 */
right: 0; right: 0; /* 右边位置 */
bottom: 42px; bottom: 42px; /* 底部位置 */
left: 221px; left: 221px; /* 左边位置 */
background: rgba(0,0,0,0.5); url() 0 0 no-repeat; background: rgba(0, 0, 0, 0.5); /* 背景色 */
overflow: hidden; url(); /* 背景图 */
z-index: 100; z-index: 100; /* z轴顺序 */
display: none; display: none; /* 默认隐藏 */
}
/* x轴滑动按钮样式 */
.x-slide_left {
width: 17px; /* 宽度 */
height: 61px; /* 高度 */
background: url(#) 0 0 no-repeat; /* 背景图 */
position: absolute; /* 绝对定位 */
top: 200px; /* 顶部位置 */
left: 221px; /* 左边位置 */
cursor: pointer; /* 鼠标指针样式 */
z-index: 3; /* z轴顺序 */
} }
/* 页面内容标签页样式 */
.page-content .tab { .page-content .tab {
height: 100%; height: 100%; /* 高度 */
width: 100%; margin: 0px; /* 外边距 */
background: #EFEEF0 url(#) 0 0 no-repeat; background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
margin: 0px;
} }
/* 页面内容标签页标题样式 */
.page-content .layui-tab-title { .page-content .layui-tab-title {
/*padding-top: 5px;*/ height: 35px; /* 高度 */
height: 35px; background: #EFEEF0 url(#) 0 0 no-repeat; /* 背景图 */
background: #EFEEF0 url(#) 0 0 no-repeat; position: relative; /* 相对定位 */
position: relative; z-index: 100; /* z轴顺序 */
z-index: 100;
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home i { .page-content .layui-tab-title li.home i {
padding-right: 5px; padding-right: 5px; /* 右内边距 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.home .layui-tab-close { .page-content .layui-tab-title li.home .layui-tab-close {
display: none; display: none; /* 隐藏关闭按钮 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li { .page-content .layui-tab-title li {
line-height: 35px; line-height: 35px; /* 行高 */
} }
.page-content .layui-tab-title .layui-this:after{
height: 36px; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this:after {
height: 63px; /* 高度 */
}
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this {
background: #fff url(#) 0 0 no-repeat; /* 背景图 */
} }
.page-content .layui-tab-title li .layui-tab-close{
border-radius: 50%; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li.layui-this .layui-tab-close {
border-radius: 50%; /* 圆角 */
} }
.page-content .layui-tab-title .layui-this{
background: #fff url(#) 0 0 no-repeat; /* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-title li {
border-radius: 50%; /* 圆角 */
} }
/* 页面内容标签页标题当前选中样式 */
.page-content .layui-tab-bar { .page-content .layui-tab-bar {
height:34px; height: 34px; /* 高度 */
line-height: 35px; line-height: 34px; /* 行高 */
} }
/* 页面内容标签页内容样式 */
.page-content .layui-tab-content { .page-content .layui-tab-content {
position: absolute; top: 36px; /* 顶部位置 */
top: 36px; bottom: 0px; /* 底部位置 */
bottom: 0px; width: 100%; /* 宽度 */
width: 100%; background: #fff url(#) 0 0 no-repeat; /* 背景图 */
background: #fff url(#) 0 0 no-repeat; padding: 0px; /* 内边距 */
padding: 0px; overflow: hidden; /* 隐藏溢出内容 */
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样式 */
.x-admin-carousel,.layui-carousel,.x-admin-carousel>[carousel-item]>* { .page-content .layui-tab-content .layui-tab-item iframe {
background-color:#fff width: 100%; /* 宽度 */
height: 100%; /* 高度 */
} }
.x-admin-backlog .x-admin-backlog-body { /* xadmin后台日志样式 */
display:block; .x-admin-backlog-body {
padding:10px 15px; display: block; /* 显示块级元素 */
background-color:#f8f8f8; padding: 10px 15px; /* 内边距 */
color:#999; background-color: #f8f8f8; /* 背景色 */
border-radius:2px; color: #999; /* 文字颜色 */
transition:all .3s; border-radius: 2px; /* 圆角 */
-webkit-transition:all .3s transition: all .3s ease; /* CSS3过渡效果 */
} }
/* xadmin后台日志标题样式 */
.x-admin-backlog-body h3 { .x-admin-backlog-body h3 {
padding-bottom:10px; padding-bottom: 10px; /* 底部内边距 */
font-size:12px font-size: 12px; /* 字体大小 */
} }
.x-admin-backlog-body p cite {
font-style:normal; /* xadmin后台日志内容样式 */
font-size:30px; .x-admin-backlog-body p {
font-weight:300; font-style: normal; /* 正常字体风格 */
color:#009688 font-size: 30px; /* 字体大小 */
font-weight: 300; /* 字体粗细 */
color: #009689; /* 文字颜色 */
} }
/* xadmin后台日志内容鼠标悬停样式 */
.x-admin-backlog-body:hover { .x-admin-backlog-body:hover {
background-color:#CFCFCF; background-color: #CFCFCF; /* 背景色 */
color:#888 color: #888; /* 文字颜色 */
} }
.welcome-footer{padding: 30px 0; line-height: 30px; text-align: center; background-color: #eee; color: #666; font-weight: 300;} /* welcome页脚样式 */
body .layui-layout-admin .footer-demo{height: auto; padding: 15px 0; line-height: 26px;} .welcome-footer {
.welcome-footer a{padding: 0 5px;} padding: 30px 0; /* 内边距 */
text-align: center; /* 文本居中对齐 */
table th, table td { line-height: 30px; /* 行高 */
word-break: break-all; color: #eee; /* 文字颜色 */
background-color: #222; /* 背景色 */
border-top: 1px solid rgba(255, 255, 255, 0.1); /* 边框样式 */
} }
/* foot页脚样式 */
.footer { .footer {
position: fixed; position: fixed; /* 固定定位 */
bottom: 0px; bottom: 0px; /* 底部位置 */
width: 100%; width: 100%; /* 宽度 */
background-color: #222; background-color: #222; /* 背景色 */
border-top: 1px solid rgba(255, 255, 255, 0.2); line-height: 41px; /* 行高 */
line-height: 41px; color: #fff; /* 文字颜色 */
color: #fff;
/*padding-left: 10px;*/
} }
/* foot页脚版权样式 */
.footer .copyright { .footer .copyright {
margin-left: 10px; margin-left: 10px; /* 左内边距 */
} }
/* table表格样式 */
@media screen and (max-width: 768px){ table th, table td {
.fast-add{ word-break: break-all; /* CSS属性允许在单词内换行 */
display: none;
}
.layui-nav .to-index{
display: none;
}
.container .logo a{
width: 140px;
}
.container .left_open {
/*float: right;*/
}
.left-nav{
left: -221px;
}
.page-content{
left: 0px;
}
.page-content .layui-tab-content .layui-tab-item{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.x-so input.layui-input{
width: 100%;
margin: 10px;
} }
.layui-input{
margin-left: 20px;
} }
}

@ -4,66 +4,69 @@
* Released under the MIT License. * Released under the MIT License.
*/ */
(function() { (function(window) {
// 获取指定元素的类名
function getClass(dom, string) { function getClass(dom, string) {
return dom.getElementsByClassName(string); return dom.getElementsByClassName(string);
} }
// 构造器 // 构造器
function MobileSelect(config) { function MobileSelect(config) {
this.mobileSelect; this.mobileSelect; // DOM元素表示整个选择器
this.wheelsData = config.wheels; this.wheelsData = config.wheels; // 滚轮数据
this.jsonType = false; this.jsonType = false; // 是否为JSON类型数据
this.cascadeJsonData = []; this.cascadeJsonData = []; // 级联JSON数据
this.displayJson = []; this.displayJson = []; // 显示的JSON数据
this.curValue = null; this.curValue = null; // 当前值
this.curIndexArr = []; this.curIndexArr = []; // 当前索引数组
this.cascade = false; this.startY; // 起始Y坐标
this.startY; this.moveEndY; // 结束Y坐标
this.moveEndY; this.moveY; // 移动Y坐标
this.moveY; this.oldMoveY; // 旧的移动Y坐标
this.oldMoveY; this.offset = 0; // 偏移量
this.offset = 0; this.offsetSum = 0; // 偏移总和
this.offsetSum = 0; this.oversizeBorder; // 超出边界大小
this.oversizeBorder; this.curDistance = []; // 当前距离数组
this.curDistance = []; this.clickStatus = false; // 点击状态
this.clickStatus = false; this.isPC = true; // 是否为PC端
this.isPC = true;
this.init(config); this.init(config);
} }
// 原型链
MobileSelect.prototype = { MobileSelect.prototype = {
constructor: MobileSelect, constructor: MobileSelect,
// 初始化函数
init: function(config) { init: function(config) {
var _this = this; var _this = this;
_this.keyMap = config.keyMap ? config.keyMap : {id:'id', value:'value', childs:'childs'}; _this.keyMap = config.keyMap ? config.keyMap : { id: 'id', value: 'value', childs: 'childs' }; // 键值映射
_this.checkDataType(); _this.checkDataType(); // 检查数据类型
_this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); _this.renderWheels(_this.wheelsData, config.cancelBtnText, config.ensureBtnText); // 渲染滚轮
_this.trigger = document.querySelector(config.trigger); _this.trigger = document.querySelector(config.trigger); // 触发器元素
if (!_this.trigger) { if (!_this.trigger) {
console.error('mobileSelect has been successfully installed, but no trigger found on your page.'); console.error('mobileSelect has been successfully installed, but no trigger found on your page.');
return false; return false;
} }
_this.wheel = getClass(_this.mobileSelect,'wheel'); _this.wheel = getClass(_this.mobileSelect, 'wheel'); // 获取滚轮元素
_this.slider = getClass(_this.mobileSelect,'selectContainer'); _this.slider = getClass(_this.mobileSelect, 'selectContainer'); // 获取滑块容器
_this.wheels = _this.mobileSelect.querySelector('.wheels'); _this.wheels = _this.mobileSelect.querySelector('.wheels'); // 获取所有滚轮的容器
_this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; _this.liHeight = _this.mobileSelect.querySelector('li').offsetHeight; // 获取每个选项的高度
_this.ensureBtn = _this.mobileSelect.querySelector('.ensure'); _this.ensureBtn = getClass(_this.mobileSelect, 'ensure'); // 确保按钮
_this.cancelBtn = _this.mobileSelect.querySelector('.cancel'); _this.cancelBtn = getClass(_this.mobileSelect, 'cancel'); // 取消按钮
_this.grayLayer = _this.mobileSelect.querySelector('.grayLayer'); _this.grayLayer = getClass(_this.mobileSelect, 'grayLayer'); // 灰色遮罩层
_this.popUp = _this.mobileSelect.querySelector('.content'); _this.popUp = getClass(_this.mobileSelect, 'content'); // 弹出层
_this.callback = config.callback ? config.callback : function(){}; _this.callback = config.callback ? config.callback : function() {}; // 回调函数
_this.cancel = config.cancel ? config.cancel : function(){}; _this.cancel = config.cancel ? config.cancel : function() {}; // 取消函数
_this.transitionEnd = config.transitionEnd ? config.transitionEnd : function(){}; _this.transitionEnd = config.transitionEnd ? config.transitionEnd : function() {}; // 过渡结束函数
_this.initPosition = config.position ? config.position : []; _this.titleText = config.title ? config.title : ''; // 标题文本
_this.titleText = config.title ? config.title : ''; _this.connector = config.connector ? config.connector : ' '; // 连接符
_this.connector = config.connector ? config.connector : ' '; _this.triggerDisplayData = !(typeof(config.triggerDisplayData) == 'undefined') ? config.triggerDisplayData : true; // 是否显示在触发器上
_this.triggerDisplayData = !(typeof(config.triggerDisplayData)=='undefined') ? config.triggerDisplayData : true; _this.trigger.style.cursor = 'pointer'; // 设置触发器的鼠标样式为指针
_this.trigger.style.cursor='pointer'; _this.setStyle(config); // 设置样式
_this.setStyle(config); _this.setTitle(_this.titleText); // 设置标题
_this.setTitle(_this.titleText); _this.checkIsPC(); // 检查是否是PC端
_this.checkIsPC(); _this.checkCascade(); // 检查是否需要级联
_this.checkCascade();
if (_this.cascade) { if (_this.cascade) {
_this.initCascade(); _this.initCascade(); // 初始化级联
} }
// 定位初始位置 // 定位初始位置
if (_this.initPosition.length < _this.slider.length) { if (_this.initPosition.length < _this.slider.length) {
@ -72,104 +75,75 @@
_this.initPosition.push(0); _this.initPosition.push(0);
} }
} }
_this.setCurDistance(_this.initPosition); // 设置当前距离
_this.setCurDistance(_this.initPosition); _this.addListenerAll(); // 添加事件监听器
_this.addListenerAll();
//按钮监听
_this.cancelBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.ensureBtn.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
var tempValue ='';
for(var i=0; i<_this.wheel.length; i++){
i==_this.wheel.length-1 ? tempValue += _this.getInnerHtml(i) : tempValue += _this.getInnerHtml(i) + _this.connector;
}
if(_this.triggerDisplayData){
_this.trigger.innerHTML = tempValue;
}
_this.curIndexArr = _this.getIndexArr();
_this.curValue = _this.getCurValue();
_this.callback(_this.curIndexArr, _this.curValue);
});
_this.trigger.addEventListener('click',function(){
_this.mobileSelect.classList.add('mobileSelect-show');
});
_this.grayLayer.addEventListener('click',function(){
_this.mobileSelect.classList.remove('mobileSelect-show');
_this.cancel(_this.curIndexArr, _this.curValue);
});
_this.popUp.addEventListener('click',function(event){
event.stopPropagation();
});
_this.fixRowStyle(); // 修正列数 _this.fixRowStyle(); // 修正列数
}, },
// 设置标题
setTitle: function(string) { setTitle: function(string) {
var _this = this; var _this = this;
_this.titleText = string; _this.titleText = string;
_this.mobileSelect.querySelector('.title').innerHTML = _this.titleText; _this.mobileSelect.querySelector('.title').innerHTML = _this.titleText;
}, },
// 设置样式
setStyle: function(config) { setStyle: function(config) {
var _this = this; var _this = this;
if (config.ensureBtnColor) { if (config.ensureBtnColor) {
_this.ensureBtn.style.color = config.ensureBtnColor; _this.ensureBtn.style.color = config.ensureBtnColor; // 确保按钮颜色
} }
if (config.cancelBtnColor) { if (config.cancelBtnColor) {
_this.cancelBtn.style.color = config.cancelBtnColor; _this.cancelBtn.style.color = config.cancelBtnColor; // 取消按钮颜色
} }
if (config.titleColor) { if (config.titleColor) {
_this.title = _this.mobileSelect.querySelector('.title'); _this.title = _this.mobileSelect.querySelector('.title'); // 标题元素
_this.title.style.color = config.titleColor; _this.title.style.color = config.titleColor; // 标题颜色
} }
if (config.textColor) { if (config.textColor) {
_this.panel = _this.mobileSelect.querySelector('.panel'); _this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.panel.style.color = config.textColor; _this.panel.style.color = config.textColor; // 文本颜色
} }
if (config.titleBgColor) { if (config.titleBgColor) {
_this.btnBar = _this.mobileSelect.querySelector('.btnBar'); _this.btnBar = _this.mobileSelect.querySelector('.btnBar'); // 按钮栏元素
_this.btnBar.style.backgroundColor = config.titleBgColor; _this.btnBar.style.backgroundColor = config.titleBgColor; // 按钮栏背景颜色
} }
if (config.bgColor) { if (config.bgColor) {
_this.panel = _this.mobileSelect.querySelector('.panel'); _this.panel = _this.mobileSelect.querySelector('.panel'); // 面板元素
_this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); _this.shadowMask = _this.mobileSelect.querySelector('.shadowMask'); // 阴影遮罩层元素
_this.panel.style.backgroundColor = config.bgColor; _this.panel.style.backgroundColor = config.bgColor; // 面板背景颜色
_this.shadowMask.style.background = 'linear-gradient(to bottom, '+ config.bgColor + ', rgba(255, 255, 255, 0), '+ config.bgColor + ')'; _this.shadowMask.style.background = 'linear-gradient(to bottom, ' + config.bgColor + ', rgba(255, 255, 255, 0), ' + config.bgColor + ')'; // 阴影遮罩层渐变背景
} }
}, },
// 检查是否是PC端
checkIsPC: function() { checkIsPC: function() {
var _this = this; var _this = this;
var sUserAgent = navigator.userAgent.toLowerCase(); var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; // 判断是否为iPad
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; // 判断是否为iPhone OS
var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; // 判断是否为MIDP设备
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; // 判断是否为UC7浏览器
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; // 判断是否为UC浏览器
var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; // 判断是否为Android设备
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; // 判断是否为Windows CE设备
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; // 判断是否为Windows Mobile设备
if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) { if ((bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM)) {
_this.isPC = false; _this.isPC = false;
} }
}, },
show: function(){ show: function(){
// 显示选择器,通过添加类名来控制显示
this.mobileSelect.classList.add('mobileSelect-show'); this.mobileSelect.classList.add('mobileSelect-show');
}, },
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){ renderWheels: function(wheelsData, cancelBtnText, ensureBtnText){
var _this = this; var _this = this;
var cancelText = cancelBtnText ? cancelBtnText : '取消'; var cancelText = cancelBtnText ? cancelBtnText : '取消'; // 设置取消按钮文本
var ensureText = ensureBtnText ? ensureBtnText : '确认'; var ensureText = ensureBtnText ? ensureBtnText : '确认'; // 设置确认按钮文本
_this.mobileSelect = document.createElement("div"); _this.mobileSelect = document.createElement("div"); // 创建选择器的容器元素
_this.mobileSelect.className = "mobileSelect"; _this.mobileSelect.className = "mobileSelect"; // 设置容器的类名
_this.mobileSelect.innerHTML = _this.mobileSelect.innerHTML =
'<div class="grayLayer"></div>'+ '<div class="grayLayer"></div>'+
'<div class="content">'+ '<div class="content">'+
@ -189,34 +163,30 @@
'</div>'+ '</div>'+
'</div>'+ '</div>'+
'</div>'; '</div>';
document.body.appendChild(_this.mobileSelect); document.body.appendChild(_this.mobileSelect); // 将选择器添加到页面中
//根据数据长度来渲染
// 根据数据长度来渲染轮盘
var tempHTML=''; var tempHTML='';
for(var i=0; i<wheelsData.length; i++){ for(var i=0; i<wheelsData.length; i++){
//列 tempHTML += '<div class="wheel"><ul class="selectContainer">'; // 开始一个新的轮盘
tempHTML += '<div class="wheel"><ul class="selectContainer">';
if(_this.jsonType){ if(_this.jsonType){
for(var j=0; j<wheelsData[i].data.length; j++){ for(var j=0; j<wheelsData[i].data.length; j++){
//行 tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>'; // 如果是JSON类型使用键值对填充列表项
tempHTML += '<li data-id="'+wheelsData[i].data[j][_this.keyMap.id]+'">'+wheelsData[i].data[j][_this.keyMap.value]+'</li>';
} }
}else{ }else{
for(var j=0; j<wheelsData[i].data.length; j++){ for(var j=0; j<wheelsData[i].data.length; j++){
//行 tempHTML += '<li>'+wheelsData[i].data[j]+'</li>'; // 如果不是JSON类型直接使用数据填充列表项
tempHTML += '<li>'+wheelsData[i].data[j]+'</li>';
} }
} }
tempHTML += '</ul></div>'; tempHTML += '</ul></div>'; // 结束当前轮盘
} }
_this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; _this.mobileSelect.querySelector('.wheels').innerHTML = tempHTML; // 将生成的HTML添加到轮盘容器中
}, },
addListenerAll: function(){ addListenerAll: function(){
var _this = this; var _this = this;
for(var i=0; i<_this.slider.length; i++){ for(var i=0; i<_this.slider.length; i++){
//手势监听 // 为每个滑块添加手势监听和点击监听
(function (i) { (function (i) {
_this.addListenerWheel(_this.wheel[i], i); _this.addListenerWheel(_this.wheel[i], i);
_this.addListenerLi(i); _this.addListenerLi(i);
@ -227,35 +197,39 @@
addListenerWheel: function(theWheel, index){ addListenerWheel: function(theWheel, index){
var _this = this; var _this = this;
theWheel.addEventListener('touchstart', function () { theWheel.addEventListener('touchstart', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸开始事件处理
},false); },false);
theWheel.addEventListener('touchend', function () { theWheel.addEventListener('touchend', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸结束事件处理
},false); },false);
theWheel.addEventListener('touchmove', function () { theWheel.addEventListener('touchmove', function () {
_this.touch(event, this.firstChild, index); _this.touch(event, this.firstChild, index); // 触摸移动事件处理
},false); },false);
if(_this.isPC){ if(_this.isPC){
//如果是PC端则再增加拖拽监听 方便调试 // 如果是PC端则再增加拖拽监听方便调试
theWheel.addEventListener('mousedown', function () { theWheel.addEventListener('mousedown', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标按下事件处理
},false); },false);
theWheel.addEventListener('mousemove', function () { theWheel.addEventListener('mousemove', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标移动事件处理
},false); },false);
theWheel.addEventListener('mouseup', function () { theWheel.addEventListener('mouseup', function () {
_this.dragClick(event, this.firstChild, index); _this.dragClick(event, this.firstChild, index); // 鼠标抬起事件处理
},true); },true);
} }
}, },
addListenerLi: function(sliderIndex) { addListenerLi: function(sliderIndex) {
// 获取当前对象引用
var _this = this; var _this = this;
// 获取指定滑块索引的所有列表项元素
var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li'); var curWheelLi = _this.slider[sliderIndex].getElementsByTagName('li');
// 遍历所有列表项,为每个列表项添加点击事件监听器
for (var j = 0; j < curWheelLi.length; j++) { for (var j = 0; j < curWheelLi.length; j++) {
(function(j) { (function(j) {
curWheelLi[j].addEventListener('click', function() { curWheelLi[j].addEventListener('click', function() {
// 当列表项被点击时调用singleClick方法处理点击事件
_this.singleClick(this, j, sliderIndex); _this.singleClick(this, j, sliderIndex);
}, false); }, false);
})(j); })(j);
@ -263,71 +237,83 @@
}, },
checkDataType: function() { checkDataType: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 检查wheelsData中第一个数据项是否为对象类型
if (typeof(_this.wheelsData[0].data[0]) == 'object') { if (typeof(_this.wheelsData[0].data[0]) == 'object') {
_this.jsonType = true; _this.jsonType = true; // 如果是对象类型设置jsonType为true
} }
}, },
checkCascade: function() { checkCascade: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 如果数据类型为JSON
if (_this.jsonType) { if (_this.jsonType) {
var node = _this.wheelsData[0].data; var node = _this.wheelsData[0].data;
// 遍历数据节点,检查是否存在子节点
for (var i = 0; i < node.length; i++) { for (var i = 0; i < node.length; i++) {
if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in node[i] && node[i][_this.keyMap.childs].length > 0) {
_this.cascade = true; _this.cascade = true; // 如果存在子节点设置级联标志为true
_this.cascadeJsonData = _this.wheelsData[0].data; _this.cascadeJsonData = _this.wheelsData[0].data; // 保存级联数据
break; break; // 找到第一个有子节点的节点后退出循环
} }
} }
} else { } else {
_this.cascade = false; _this.cascade = false; // 如果数据类型不是JSON设置级联标志为false
} }
}, },
generateArrData: function(targetArr) { generateArrData: function(targetArr) {
var tempArr = []; var tempArr = []; // 初始化临时数组用于存储转换后的数据
var keyMap_id = this.keyMap.id; var keyMap_id = this.keyMap.id; // 获取键映射中的ID键名
var keyMap_value = this.keyMap.value; var keyMap_value = this.keyMap.value; // 获取键映射中的值键名
// 遍历目标数组将每个元素转换为包含ID和值的对象
for (var i = 0; i < targetArr.length; i++) { for (var i = 0; i < targetArr.length; i++) {
var tempObj = {}; var tempObj = {};
tempObj[keyMap_id] = targetArr[i][this.keyMap.id]; tempObj[keyMap_id] = targetArr[i][this.keyMap.id];
tempObj[keyMap_value] = targetArr[i][this.keyMap.value]; tempObj[keyMap_value] = targetArr[i][this.keyMap.value];
tempArr.push(tempObj); tempArr.push(tempObj);
} }
return tempArr; return tempArr; // 返回转换后的数组
}, },
initCascade: function() { initCascade: function() {
// 获取当前对象引用
var _this = this; var _this = this;
// 生成并添加级联数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(_this.cascadeJsonData)); _this.displayJson.push(_this.generateArrData(_this.cascadeJsonData));
// 如果初始化位置数组不为空,则进行深度初始化
if (_this.initPosition.length > 0) { if (_this.initPosition.length > 0) {
_this.initDeepCount = 0; _this.initDeepCount = 0; // 初始化深度计数器
_this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); _this.initCheckArrDeep(_this.cascadeJsonData[_this.initPosition[0]]); // 递归初始化子节点
} else { } else {
_this.checkArrDeep(_this.cascadeJsonData[0]); _this.checkArrDeep(_this.cascadeJsonData[0]); // 如果初始化位置为空,直接检查第一层数据
} }
_this.reRenderWheels(); _this.reRenderWheels(); // 重新渲染轮盘组件
}, },
initCheckArrDeep: function(parent) { initCheckArrDeep: function(parent) {
// 获取当前对象引用
var _this = this; var _this = this;
// 如果父节点存在且具有子节点
if (parent) { if (parent) {
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
// 生成并添加子节点数据的数组表示形式到displayJson中
_this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs])); _this.displayJson.push(_this.generateArrData(parent[_this.keyMap.childs]));
_this.initDeepCount++; _this.initDeepCount++; // 增加深度计数器
var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; var nextNode = parent[_this.keyMap.childs][_this.initPosition[_this.initDeepCount]]; // 获取下一个节点
if (nextNode) { if (nextNode) {
_this.initCheckArrDeep(nextNode); _this.initCheckArrDeep(nextNode); // 递归初始化下一个节点
} else { } else {
_this.checkArrDeep(parent[_this.keyMap.childs][0]); _this.checkArrDeep(parent[_this.keyMap.childs][0]); // 如果下一个节点不存在,检查第一个子节点
} }
} }
} }
}, },
checkArrDeep: function (parent) { checkArrDeep: function (parent) {
//检测子节点深度 修改 displayJson // 检测子节点深度并修改 displayJson
var _this = this; var _this = this;
if(parent){ if(parent){
if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) { if (_this.keyMap.childs in parent && parent[_this.keyMap.childs].length > 0) {
@ -341,7 +327,7 @@
var _this = this; var _this = this;
var deleteNum = _this.displayJson.length - 1 - index; var deleteNum = _this.displayJson.length - 1 - index;
for(var i=0; i<deleteNum; i++){ for(var i=0; i<deleteNum; i++){
_this.displayJson.pop(); //修改 displayJson _this.displayJson.pop(); // 修改 displayJson,删除多余的层级
} }
var resultNode; var resultNode;
for (var i = 0; i <= index; i++){ for (var i = 0; i <= index; i++){
@ -351,11 +337,10 @@
resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]]; resultNode = resultNode[_this.keyMap.childs][posIndexArr[i]];
} }
} }
_this.checkArrDeep(resultNode); _this.checkArrDeep(resultNode); // 检查并更新子节点深度
//console.log(_this.displayJson); _this.reRenderWheels(); // 重新渲染轮盘
_this.reRenderWheels(); _this.fixRowStyle(); // 修正行样式
_this.fixRowStyle(); _this.setCurDistance(_this.resetPosition(index, posIndexArr)); // 设置当前距离和重置位置
_this.setCurDistance(_this.resetPosition(index, posIndexArr));
}, },
resetPosition: function(index, posIndexArr){ resetPosition: function(index, posIndexArr){
@ -365,16 +350,16 @@
if(_this.slider.length > posIndexArr.length){ if(_this.slider.length > posIndexArr.length){
tempCount = _this.slider.length - posIndexArr.length; tempCount = _this.slider.length - posIndexArr.length;
for(var i=0; i<tempCount; i++){ for(var i=0; i<tempCount; i++){
tempPosArr.push(0); tempPosArr.push(0); // 如果滑块数量多于位置数组长度填充0
} }
}else if(_this.slider.length < posIndexArr.length){ }else if(_this.slider.length < posIndexArr.length){
tempCount = posIndexArr.length - _this.slider.length; tempCount = posIndexArr.length - _this.slider.length;
for(var i=0; i<tempCount; i++){ for(var i=0; i<tempCount; i++){
tempPosArr.pop(); tempPosArr.pop(); // 如果滑块数量少于位置数组长度,移除多余的位置
} }
} }
for(var i=index+1; i< tempPosArr.length; i++){ for(var i=index+1; i< tempPosArr.length; i++){
tempPosArr[i] = 0; tempPosArr[i] = 0; // 将当前索引之后的位置设置为0
} }
return tempPosArr; return tempPosArr;
}, },
@ -385,7 +370,7 @@
if(_this.wheel.length > _this.displayJson.length){ if(_this.wheel.length > _this.displayJson.length){
var count = _this.wheel.length - _this.displayJson.length; var count = _this.wheel.length - _this.displayJson.length;
for(var i=0; i<count; i++){ for(var i=0; i<count; i++){
_this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); _this.wheels.removeChild(_this.wheel[_this.wheel.length-1]); // 移除多余的wheel元素
} }
} }
for(var i=0; i<_this.displayJson.length; i++){ for(var i=0; i<_this.displayJson.length; i++){
@ -398,8 +383,7 @@
// 行 // 行
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>'; tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
} }
_this.slider[i].innerHTML = tempHTML; _this.slider[i].innerHTML = tempHTML; // 更新现有wheel的HTML内容
}else{ }else{
var tempWheel = document.createElement("div"); var tempWheel = document.createElement("div");
tempWheel.className = "wheel"; tempWheel.className = "wheel";
@ -409,12 +393,11 @@
tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>'; tempHTML += '<li data-id="'+_this.displayJson[i][j][_this.keyMap.id]+'">'+_this.displayJson[i][j][_this.keyMap.value]+'</li>';
} }
tempHTML += '</ul>'; tempHTML += '</ul>';
tempWheel.innerHTML = tempHTML; tempWheel.innerHTML = tempHTML; // 创建新的wheel并设置HTML内容
_this.addListenerWheel(tempWheel, i); // 为新wheel添加事件监听器
_this.addListenerWheel(tempWheel, i); _this.wheels.appendChild(tempWheel); // 将新wheel添加到DOM中
_this.wheels.appendChild(tempWheel);
} }
_this.addListenerLi(i); _this.addListenerLi(i); // 为每个li添加事件监听器
})(i); })(i);
} }
}, },
@ -422,9 +405,11 @@
updateWheels: function(data) { updateWheels: function(data) {
var _this = this; var _this = this;
if (_this.cascade) { if (_this.cascade) {
// 更新级联数据源
_this.cascadeJsonData = data; _this.cascadeJsonData = data;
_this.displayJson = []; _this.displayJson = [];
_this.initCascade(); _this.initCascade();
// 确保初始化位置数组长度与滑块数量一致
if (_this.initPosition.length < _this.slider.length) { if (_this.initPosition.length < _this.slider.length) {
var diff = _this.slider.length - _this.initPosition.length; var diff = _this.slider.length - _this.initPosition.length;
for (var i = 0; i < diff; i++) { for (var i = 0; i < diff; i++) {
@ -442,13 +427,14 @@
if (_this.cascade) { if (_this.cascade) {
console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源'); console.error('级联格式不支持updateWheel(),请使用updateWheels()更新整个数据源');
return false; return false;
} } else if (_this.jsonType) {
else if(_this.jsonType){ // 处理JSON类型的数据
for (var j = 0; j < data.length; j++) { for (var j = 0; j < data.length; j++) {
tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>'; tempHTML += '<li data-id="' + data[j][_this.keyMap.id] + '">' + data[j][_this.keyMap.value] + '</li>';
} }
_this.wheelsData[sliderIndex] = { data: data }; _this.wheelsData[sliderIndex] = { data: data };
} else { } else {
// 处理普通数组类型的数据
for (var j = 0; j < data.length; j++) { for (var j = 0; j < data.length; j++) {
tempHTML += '<li>' + data[j] + '</li>'; tempHTML += '<li>' + data[j] + '</li>';
} }
@ -487,8 +473,7 @@
for (var i = 0; i < _this.wheel.length; i++) { for (var i = 0; i < _this.wheel.length; i++) {
temp.push(_this.displayJson[i][positionArr[i]]); temp.push(_this.displayJson[i][positionArr[i]]);
} }
} } else if (_this.jsonType) {
else if(_this.jsonType){
for (var i = 0; i < _this.curDistance.length; i++) { for (var i = 0; i < _this.curDistance.length; i++) {
temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]); temp.push(_this.wheelsData[i].data[_this.getIndex(_this.curDistance[i])]);
} }
@ -505,6 +490,7 @@
}, },
calcDistance: function(index){ calcDistance: function(index){
// 计算给定索引对应的距离基于liHeight的倍数
return 2*this.liHeight-index*this.liHeight; return 2*this.liHeight-index*this.liHeight;
}, },
@ -512,38 +498,44 @@
var _this = this; var _this = this;
var temp = []; var temp = [];
for(var i=0; i<_this.slider.length; i++){ for(var i=0; i<_this.slider.length; i++){
temp.push(_this.calcDistance(indexArr[i])); temp.push(_this.calcDistance(indexArr[i])); // 计算每个滑块的距离并存储在临时数组中
_this.movePosition(_this.slider[i],temp[i]); _this.movePosition(_this.slider[i],temp[i]); // 移动滑块到计算出的位置
} }
_this.curDistance = temp; _this.curDistance = temp; // 更新当前距离数组
}, },
fixPosition: function(distance){ fixPosition: function(distance){
// 根据距离修正位置,确保滑块不会超出边界
return -(this.getIndex(distance)-2)*this.liHeight; return -(this.getIndex(distance)-2)*this.liHeight;
}, },
movePosition: function(theSlider, distance){ movePosition: function(theSlider, distance){
// 使用CSS transform属性移动滑块到指定位置
theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)'; theSlider.style.webkitTransform = 'translate3d(0,' + distance + 'px, 0)';
theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)'; theSlider.style.transform = 'translate3d(0,' + distance + 'px, 0)';
}, },
locatePosition: function(index, posIndex){ locatePosition: function(index, posIndex){
// 定位滑块到特定位置
this.curDistance[index] = this.calcDistance(posIndex); this.curDistance[index] = this.calcDistance(posIndex);
this.movePosition(this.slider[index],this.curDistance[index]); this.movePosition(this.slider[index],this.curDistance[index]);
if(_this.cascade){ if(_this.cascade){
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果启用级联,检查范围
} }
}, },
updateCurDistance: function(theSlider, index){ updateCurDistance: function(theSlider, index){
// 更新当前滑块的距离
this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]); this.curDistance[index] = parseInt(theSlider.style.transform.split(',')[1]);
}, },
getDistance:function(theSlider){ getDistance:function(theSlider){
// 获取滑块当前的垂直距离
return parseInt(theSlider.style.transform.split(',')[1]); return parseInt(theSlider.style.transform.split(',')[1]);
}, },
getInnerHtml: function(sliderIndex){ getInnerHtml: function(sliderIndex){
// 获取滑块当前选中项的内部HTML内容
var _this = this; var _this = this;
var index = _this.getIndex(_this.curDistance[sliderIndex]); var index = _this.getIndex(_this.curDistance[sliderIndex]);
return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML; return _this.slider[sliderIndex].getElementsByTagName('li')[index].innerHTML;
@ -554,14 +546,13 @@
event = event || window.event; event = event || window.event;
switch (event.type) { switch (event.type) {
case "touchstart": case "touchstart":
_this.startY = event.touches[0].clientY; _this.startY = event.touches[0].clientY; // 记录触摸开始时的Y坐标
_this.oldMoveY = _this.startY; _this.oldMoveY = _this.startY; // 初始化旧的移动Y坐标
break; break;
case "touchend": case "touchend":
_this.moveEndY = event.changedTouches[0].clientY; // 记录触摸结束时的Y坐标
_this.moveEndY = event.changedTouches[0].clientY; _this.offsetSum = _this.moveEndY - _this.startY; // 计算总偏移量
_this.offsetSum = _this.moveEndY - _this.startY;
// 修正位置 // 修正位置
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index);
@ -569,14 +560,12 @@
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]);
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight;
// 反弹效果处理
//反弹
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2 * _this.liHeight; _this.curDistance[index] = 2 * _this.liHeight;
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]);
}, 100); }, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder; _this.curDistance[index] = _this.oversizeBorder;
setTimeout(function () { setTimeout(function () {
@ -584,107 +573,80 @@
}, 100); }, 100);
} }
_this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue());
if (_this.cascade) { if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果启用级联,检查范围
}
break;
case "touchmove":
event.preventDefault();
_this.moveY = event.touches[0].clientY;
_this.offset = _this.moveY - _this.oldMoveY;
_this.updateCurDistance(theSlider, index);
_this.curDistance[index] = _this.curDistance[index] + _this.offset;
_this.movePosition(theSlider, _this.curDistance[index]);
_this.oldMoveY = _this.moveY;
break;
} }
},
dragClick: function(event, theSlider, index){
var _this = this;
event = event || window.event;
switch(event.type){
case "mousedown":
_this.startY = event.clientY;
_this.oldMoveY = _this.startY;
_this.clickStatus = true;
break; break;
// 处理鼠标抬起事件
case "mouseup": case "mouseup":
_this.moveEndY = event.clientY; // 获取鼠标抬起时的Y坐标
_this.moveEndY = event.clientY; _this.offsetSum = _this.moveEndY - _this.startY; // 计算鼠标移动的距离
_this.offsetSum = _this.moveEndY - _this.startY;
// 修正位置 // 修正位置
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); _this.curDistance[index] = _this.fixPosition(_this.curDistance[index]); // 修正位置,防止超出边界
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oversizeBorder = -(theSlider.getElementsByTagName('li').length-3)*_this.liHeight; _this.oversizeBorder = -(theSlider.getElementsByTagName('li').length - 3) * _this.liHeight; // 设置超出边界的最小值
//反弹 // 反弹效果
if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) { if (_this.curDistance[index] + _this.offsetSum > 2 * _this.liHeight) {
_this.curDistance[index] = 2*_this.liHeight; _this.curDistance[index] = 2 * _this.liHeight; // 如果超过上界,设置为上界
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到上界位置
}, 100); }, 100);
} else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) { } else if (_this.curDistance[index] + _this.offsetSum < _this.oversizeBorder) {
_this.curDistance[index] = _this.oversizeBorder; _this.curDistance[index] = _this.oversizeBorder; // 如果超过下界,设置为下界
setTimeout(function () { setTimeout(function () {
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 延迟后移动到下界位置
}, 100); }, 100);
} }
_this.clickStatus = false; _this.clickStatus = false; // 重置点击状态
_this.transitionEnd(_this.getIndexArr(),_this.getCurValue()); _this.transitionEnd(_this.getIndexArr(), _this.getCurValue()); // 触发过渡结束事件
if (_this.cascade) { if (_this.cascade) {
_this.checkRange(index, _this.getIndexArr()); _this.checkRange(index, _this.getIndexArr()); // 如果是级联选择器,检查范围
} }
break; break;
// 处理鼠标移动事件
case "mousemove": case "mousemove":
event.preventDefault(); event.preventDefault(); // 阻止默认行为
if (_this.clickStatus) { if (_this.clickStatus) {
_this.moveY = event.clientY; _this.moveY = event.clientY; // 获取当前鼠标Y坐标
_this.offset = _this.moveY - _this.oldMoveY; _this.offset = _this.moveY - _this.oldMoveY; // 计算偏移量
_this.updateCurDistance(theSlider, index); _this.updateCurDistance(theSlider, index); // 更新当前距离
_this.curDistance[index] = _this.curDistance[index] + _this.offset; _this.curDistance[index] = _this.curDistance[index] + _this.offset; // 更新当前距离
_this.movePosition(theSlider, _this.curDistance[index]); _this.movePosition(theSlider, _this.curDistance[index]); // 移动到新的位置
_this.oldMoveY = _this.moveY; _this.oldMoveY = _this.moveY; // 更新旧的Y坐标
} }
break; break;
} }
}, },
// 处理单击事件
singleClick: function (theLi, index, sliderIndex) { singleClick: function (theLi, index, sliderIndex) {
var _this = this; var _this = this;
if (_this.cascade) { if (_this.cascade) {
var tempPosArr = _this.getIndexArr(); var tempPosArr = _this.getIndexArr(); // 获取当前索引数组
tempPosArr[sliderIndex] = index; tempPosArr[sliderIndex] = index; // 更新指定滑块的索引
_this.checkRange(sliderIndex, tempPosArr); _this.checkRange(sliderIndex, tempPosArr); // 检查范围
} else { } else {
_this.curDistance[sliderIndex] = (2-index)*_this.liHeight; _this.curDistance[sliderIndex] = (2 - index) * _this.liHeight; // 计算新的距离
_this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); _this.movePosition(theLi.parentNode, _this.curDistance[sliderIndex]); // 移动到新的位置
} }
} }
}; };
if (typeof exports == "object") { if (typeof exports == "object") {
module.exports = MobileSelect; module.exports = MobileSelect; // CommonJS模块导出
} else if (typeof define == "function" && define.amd) { } else if (typeof define == "function" && define.amd) {
define([], function () { define([], function () {
return MobileSelect; return MobileSelect; // AMD模块定义
}) })
} else { } else {
window.MobileSelect = MobileSelect; window.MobileSelect = MobileSelect; // 全局变量导出
} }
})(); })();

@ -1,195 +1,181 @@
;!function (win) { // 定义一个立即执行的函数表达式 (IIFE),传入全局对象 window
"use strict"; !function(win) {
var doc = document "use strict"; // 使用严格模式
var doc = document; // 获取文档对象
,Xadmin = function(){ // 定义 Xadmin 构造函数
var Xadmin = function() {
this.v = '2.2'; // 版本号 this.v = '2.2'; // 版本号
} }
// 初始化方法
Xadmin.prototype.init = function() { Xadmin.prototype.init = function() {
var tab_list = this.get_data(); var tab_list = this.get_data(); // 获取所有标签页数据
for (var i in tab_list) { for (var i in tab_list) {
this.add_lay_tab(tab_list[i].title,tab_list[i].url,i); this.add_lay_tab(tab_list[i].title, tab_list[i].url, i); // 添加标签页
} }
element.tabChange('xbs_tab', i); element.tabChange('xbs_tab', i); // 切换到最后一个标签页
}; };
/**
* [end 执行结束要做的]
* @return {[type]} [description]
*/
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data();
// 结束方法,用于执行一些收尾工作
Xadmin.prototype.end = function() {
var cate_list = this.get_cate_data(); // 获取分类数据
for (var i in cate_list) { for (var i in cate_list) {
if (cate_list[i] != null) { if (cate_list[i] != null) {
$('.left-nav #nav li').eq(cate_list[i]).click(); $('.left-nav #nav li').eq(cate_list[i]).click(); // 点击左侧导航栏的对应项
} }
} }
}; };
// 添加标签页方法
Xadmin.prototype.add_tab = function(title, url, is_refresh) { Xadmin.prototype.add_tab = function(title, url, is_refresh) {
var id = md5(url);//md5每个url var id = md5(url); // 对 URL 进行 MD5 加密生成唯一 ID
//重复点击 // 检查是否已经存在相同的标签页
for (var i = 0; i < $('.x-iframe').length; i++) { for (var i = 0; i < $('.x-iframe').length; i++) {
if ($('.x-iframe').eq(i).attr('tab-id') == id) { if ($('.x-iframe').eq(i).attr('tab-id') == id) {
element.tabChange('xbs_tab', id); element.tabChange('xbs_tab', id); // 切换到已存在的标签页
if (is_refresh) if (is_refresh)
$('.x-iframe').eq(i).attr("src",$('.x-iframe').eq(i).attr('src')); $('.x-iframe').eq(i).attr("src", $('.x-iframe').eq(i).attr('src')); // 刷新页面
return; return;
} }
}; }
this.add_lay_tab(title,url,id);
this.set_data(title,url,id);
element.tabChange('xbs_tab', id);
this.add_lay_tab(title, url, id); // 添加新的标签页
this.set_data(title, url, id); // 保存标签页数据
element.tabChange('xbs_tab', id); // 切换到新添加的标签页
} }
// 删除标签页方法
Xadmin.prototype.del_tab = function(id) { Xadmin.prototype.del_tab = function(id) {
if (id) { if (id) {
console.log(88); console.log(88); // 打印日志(调试用)
} else { } else {
var id = $(window.frameElement).attr('tab-id'); var id = $(window.frameElement).attr('tab-id'); // 获取当前窗口的 tab-id
parent.element.tabDelete('xbs_tab', id); parent.element.tabDelete('xbs_tab', id); // 删除父窗口中的标签页
} }
} }
// 添加 Layui 标签页方法
Xadmin.prototype.add_lay_tab = function(title, url, id) { Xadmin.prototype.add_lay_tab = function(title, url, id) {
element.tabAdd('xbs_tab', { element.tabAdd('xbs_tab', {
title: title title: title, // 标签标题
,content: '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="yes" class="x-iframe"></iframe>' content: '<iframe tab-id="' + id + '" frameborder="0" scrolling="yes" class="x-iframe"></iframe>', // 标签内容为 iframe
,id: id id: id // 标签 ID
}) })
} }
/**
* [open 打开弹出层] // 打开弹出层方法
* @param {[type]} title [弹出层标题]
* @param {[type]} url [弹出层地址]
* @return {[type]} [description]
*/
Xadmin.prototype.open = function(title, url) { Xadmin.prototype.open = function(title, url) {
if (title == null || title == '') { if (title == null || title == '') {
var title=false; var title = false; // 如果标题为空,则不显示标题
}; };
if (url == null || url == '') { if (url == null || url == '') {
var url="404.html"; var url = "404.html"; // 如果 URL 为空,则默认指向 404 页面
}; };
if (w == null || w == '') { if (w == null || w == '') {
var w=($(window).width()*0.9); var w = ($(window).width() * 0.9); // 设置宽度为窗口宽度的 90%
}; };
if (h == null || h == '') { if (h == null || h == '') {
var h=($(window).height() - 50); var h = ($(window).height() - 50); // 设置高度为窗口高度减去 50px
}; };
var index = layer.open({ var index = layer.open({
type: 2, type: 2, // 类型为 iframe
area: [w+'px', h +'px'], area: [w + 'px', h + 'px'], // 设置弹出层大小
fix: false, //不固定 fix: false, // 不固定位置
maxmin: true, maxmin: true, // 允许最大化和最小化
shadeClose: true, shadeClose: true, // 点击遮罩关闭弹出层
shade:0.4, shade: 0.4, // 设置遮罩透明度
title: title, title: title, // 弹出层标题
content: url content: url // 弹出层内容 URL
}); });
if (full) { if (full) {
layer.full(index); layer.full(index); // 如果 full 为真,则全屏显示弹出层
} }
} }
/**
* [close 关闭弹出层] // 关闭弹出层方法
* @return {[type]} [description]
*/
Xadmin.prototype.close = function() { Xadmin.prototype.close = function() {
var index = parent.layer.getFrameIndex(window.name); var index = parent.layer.getFrameIndex(window.name); // 获取当前窗口索引
parent.layer.close(index); parent.layer.close(index); // 关闭弹出层
}; };
/**
* [close 关闭弹出层父窗口关闭] // 关闭弹出层并刷新父窗口方法
* @return {[type]} [description]
*/
Xadmin.prototype.father_reload = function() { Xadmin.prototype.father_reload = function() {
parent.location.reload(); parent.location.reload(); // 刷新父窗口
}; };
/**
* [get_data 获取所有项] // 获取所有标签页数据方法
* @return {[type]} [description]
*/
Xadmin.prototype.get_data = function() { Xadmin.prototype.get_data = function() {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义,则返回 false
return layui.data('tab_list') return layui.data('tab_list') // 从本地存储中获取标签页数据
} }
/**
* [set_data 增加某一项]
* @param {[type]} id [description]
*/
Xadmin.prototype.set_data = function(title,url,id) {
// 增加标签页数据方法
Xadmin.prototype.set_data = function(title, url, id) {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义,则不执行任何操作
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id, // 数据的键为标签页 ID
,value: {title:title,url:url} value: { title: title, url: url } // 数据的值为包含标题和 URL 的对象
}); });
}; };
/** // 获取分类数据方法
* [get_data 获取所有项]
* @return {[type]} [description]
*/
Xadmin.prototype.get_cate_data = function() { Xadmin.prototype.get_cate_data = function() {
if (typeof is_remember != "undefined") if (typeof is_remember != "undefined")
return false; return false; // 如果 is_remember 被定义,则返回 false
return layui.data('cate') return layui.data('cate') // 从本地存储中获取分类数据
} }
/** /**
* [set_data 增加某一项] * 设置分类数据
* @param {[type]} id [description] * @param {Object} data - 要存储的数据对象
*/ */
Xadmin.prototype.set_cate_data = function(data) { Xadmin.prototype.set_cate_data = function(data) {
if (typeof is_remember !== "undefined")
if(typeof is_remember!="undefined")
return false; return false;
layui.data('cate', data); layui.data('cate', data);
}; };
/** /**
* [del_data 删除某一项] * 删除指定ID的数据
* @param {[type]} id [description] * @param {String} id - 要删除的数据的键值
* @return {[type]} [description]
*/ */
Xadmin.prototype.del_data = function(id) { Xadmin.prototype.del_data = function(id) {
if(typeof is_remember!="undefined") if (typeof is_remember !== "undefined")
return false; return false;
if(typeof id!="undefined"){
if (typeof id !== "undefined") {
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id,
,remove: true remove: true
}); });
} else { } else {
layui.data('tab_list', null); layui.data('tab_list', null);
} }
}; };
/** /**
* [del_other_data 删除其它] * 删除其他数据只保留指定ID的数据
* @param {[type]} id [description] * @param {String} id - 要保留的数据的键值
* @return {[type]} [description]
*/ */
Xadmin.prototype.del_other_data = function(id) { Xadmin.prototype.del_other_data = function(id) {
if(typeof is_remember!="undefined") if (typeof is_remember !== "undefined")
return false; return false;
var tab_list = this.get_data(); var tab_list = this.get_data();
layui.data('tab_list', null); layui.data('tab_list', null);
layui.data('tab_list', { layui.data('tab_list', {
key: id key: id,
,value: tab_list[id] value: tab_list[id]
}); });
}; };
// 初始化xadmin实例
win.xadmin = new Xadmin(); win.xadmin = new Xadmin();
}(window); }(window);
@ -199,7 +185,6 @@ layui.use(['layer','element','jquery'],function() {
element = layui.element; element = layui.element;
$ = layui.jquery; $ = layui.jquery;
// 打开页面初始 // 打开页面初始
xadmin.init(); xadmin.init();
@ -208,26 +193,24 @@ layui.use(['layer','element','jquery'],function() {
var id = $(this).parent().attr('lay-id'); var id = $(this).parent().attr('lay-id');
xadmin.del_data(id); xadmin.del_data(id);
}); });
//左侧菜单
$('.left-nav #nav').on('click', 'li', function(event) {
// 左侧菜单点击事件处理
$('.left-nav #nav').on('click', 'li', function(event) {
if ($(this).parent().attr('id') == 'nav') { if ($(this).parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f1',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f1', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({key:'f2',value:null}) xadmin.set_cate_data({ key: 'f2', value: null });
xadmin.set_cate_data({key:'f3',value:null}) xadmin.set_cate_data({ key: 'f3', value: null });
} }
if ($(this).parent().parent().parent().attr('id') == 'nav') { if ($(this).parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f2',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f2', value: $('.left-nav #nav li').index($(this)) });
xadmin.set_cate_data({key:'f3',value:null}) xadmin.set_cate_data({ key: 'f3', value: null });
} }
if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') { if ($(this).parent().parent().parent().parent().parent().attr('id') == 'nav') {
xadmin.set_cate_data({key:'f3',value:$('.left-nav #nav li').index($(this))}) xadmin.set_cate_data({ key: 'f3', value: $('.left-nav #nav li').index($(this)) });
} }
if ($('.left-nav').css('width') == '60px') { if ($('.left-nav').css('width') == '60px') {
$('.left-nav').animate({ width: '220px' }, 100); $('.left-nav').animate({ width: '220px' }, 100);
$('.page-content').animate({ left: '220px' }, 100); $('.page-content').animate({ left: '220px' }, 100);
@ -257,19 +240,21 @@ layui.use(['layer','element','jquery'],function() {
} }
} }
event.stopPropagation(); event.stopPropagation();
}) });
var left_tips_index = null; var left_tips_index = null;
$('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) { $('.left-nav #nav').on('mouseenter', '.left-nav-li', function(event) {
if ($('.left-nav').css('width') != '220px') { if ($('.left-nav').css('width') != '220px') {
var tips = $(this).attr('lay-tips'); var tips = $(this).attr('lay-tips');
left_tips_index = layer.tips(tips, $(this)); left_tips_index = layer.tips(tips, $(this));
} }
}) });
$('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) { $('.left-nav #nav').on('mouseout', '.left-nav-li', function(event) {
layer.close(left_tips_index); layer.close(left_tips_index);
}) });
// 隐藏左侧
// 隐藏左侧导航栏
$('.container .left_open i').click(function(event) { $('.container .left_open i').click(function(event) {
if ($('.left-nav').css('width') == '220px') { if ($('.left-nav').css('width') == '220px') {
$('.left-nav .open').click(); $('.left-nav .open').click();
@ -339,8 +324,11 @@ layui.use(['layer','element','jquery'],function() {
* to work around bugs in some JS interpreters. * to work around bugs in some JS interpreters.
*/ */
function safeAdd (x, y) { function safeAdd (x, y) {
// 将 x 和 y 分别限制在 16 位,然后相加
var lsw = (x & 0xffff) + (y & 0xffff) var lsw = (x & 0xffff) + (y & 0xffff)
// 计算高位部分的和,并考虑低位部分可能产生的进位
var msw = (x >> 16) + (y >> 16) + (lsw >> 16) var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
// 返回合并后的 32 位结果
return (msw << 16) | (lsw & 0xffff) return (msw << 16) | (lsw & 0xffff)
} }
@ -348,6 +336,7 @@ return (msw << 16) | (lsw & 0xffff)
* Bitwise rotate a 32-bit number to the left. * Bitwise rotate a 32-bit number to the left.
*/ */
function bitRotateLeft (num, cnt) { function bitRotateLeft (num, cnt) {
// 使用位移操作实现循环左移
return (num << cnt) | (num >>> (32 - cnt)) return (num << cnt) | (num >>> (32 - cnt))
} }
@ -355,18 +344,23 @@ return (num << cnt) | (num >>> (32 - cnt))
* These functions implement the four basic operations the algorithm uses. * These functions implement the four basic operations the algorithm uses.
*/ */
function md5cmn (q, a, b, x, s, t) { function md5cmn (q, a, b, x, s, t) {
// 执行 MD5 算法中的一个基本操作
return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b) return safeAdd(bitRotateLeft(safeAdd(safeAdd(a, q), safeAdd(x, t)), s), b)
} }
function md5ff (a, b, c, d, x, s, t) { function md5ff (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 F 函数操作
return md5cmn((b & c) | (~b & d), a, b, x, s, t) return md5cmn((b & c) | (~b & d), a, b, x, s, t)
} }
function md5gg (a, b, c, d, x, s, t) { function md5gg (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 G 函数操作
return md5cmn((b & d) | (c & ~d), a, b, x, s, t) return md5cmn((b & d) | (c & ~d), a, b, x, s, t)
} }
function md5hh (a, b, c, d, x, s, t) { function md5hh (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 H 函数操作
return md5cmn(b ^ c ^ d, a, b, x, s, t) return md5cmn(b ^ c ^ d, a, b, x, s, t)
} }
function md5ii (a, b, c, d, x, s, t) { function md5ii (a, b, c, d, x, s, t) {
// 执行 MD5 算法中的 I 函数操作
return md5cmn(c ^ (b | ~d), a, b, x, s, t) return md5cmn(c ^ (b | ~d), a, b, x, s, t)
} }
@ -375,8 +369,10 @@ return md5cmn(c ^ (b | ~d), a, b, x, s, t)
*/ */
function binlMD5 (x, len) { function binlMD5 (x, len) {
/* append padding */ /* append padding */
// 添加填充数据,使数据长度满足要求
x[len >> 5] |= 0x80 << (len % 32) x[len >> 5] |= 0x80 << (len % 32)
x[((len + 64) >>> 9 << 4) + 14] = len // 添加原始数据长度信息(以位为单位)
x[(((len + 64) >>> 9) << 4) + 14] = len
var i var i
var olda var olda
@ -389,11 +385,13 @@ var c = -1732584194
var d = 271733878 var d = 271733878
for (i = 0; i < x.length; i += 16) { for (i = 0; i < x.length; i += 16) {
// 保存当前状态
olda = a olda = a
oldb = b oldb = b
oldc = c oldc = c
oldd = d oldd = d
// 执行 MD5 算法的主循环,处理每个块的数据
a = md5ff(a, b, c, d, x[i], 7, -680876936) a = md5ff(a, b, c, d, x[i], 7, -680876936)
d = md5ff(d, a, b, c, x[i + 1], 12, -389564586) d = md5ff(d, a, b, c, x[i + 1], 12, -389564586)
c = md5ff(c, d, a, b, x[i + 2], 17, 606105819) c = md5ff(c, d, a, b, x[i + 2], 17, 606105819)
@ -425,7 +423,7 @@ for (i = 0; i < x.length; i += 16) {
b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501) b = md5gg(b, c, d, a, x[i + 8], 20, 1163531501)
a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467) a = md5gg(a, b, c, d, x[i + 13], 5, -1444681467)
d = md5gg(d, a, b, c, x[i + 2], 9, -51403784) d = md5gg(d, a, b, c, x[i + 2], 9, -51403784)
c = md5gg(c, d, a, b, x[i + 7], 14, 1735328473) c = md5gg(c, d, a, b, x[i + 7], 14, 173537119)
b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734) b = md5gg(b, c, d, a, x[i + 12], 20, -1926607734)
a = md5hh(a, b, c, d, x[i + 5], 4, -378558) a = md5hh(a, b, c, d, x[i + 5], 4, -378558)
@ -437,7 +435,7 @@ for (i = 0; i < x.length; i += 16) {
c = md5hh(c, d, a, b, x[i + 7], 16, -155497632) c = md5hh(c, d, a, b, x[i + 7], 16, -155497632)
b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640) b = md5hh(b, c, d, a, x[i + 10], 23, -1094730640)
a = md5hh(a, b, c, d, x[i + 13], 4, 681279174) a = md5hh(a, b, c, d, x[i + 13], 4, 681279174)
d = md5hh(d, a, b, c, x[i], 11, -358537222) d = md5hh(d, a, b, c, x[i + 0], 11, -358537222)
c = md5hh(c, d, a, b, x[i + 3], 16, -722521979) c = md5hh(c, d, a, b, x[i + 3], 16, -722521979)
b = md5hh(b, c, d, a, x[i + 6], 23, 76029189) b = md5hh(b, c, d, a, x[i + 6], 23, 76029189)
a = md5hh(a, b, c, d, x[i + 9], 4, -640364487) a = md5hh(a, b, c, d, x[i + 9], 4, -640364487)
@ -467,115 +465,124 @@ for (i = 0; i < x.length; i += 16) {
c = safeAdd(c, oldc) c = safeAdd(c, oldc)
d = safeAdd(d, oldd) d = safeAdd(d, oldd)
} }
return [a, b, c, d] return [a, b, c, d]
} }
/* /*
* Convert an array of little-endian words to a string * Convert an array of little-endian words to a string
*/ */
/*
* 将小端序的字数组转换为字符串
*/
function binl2rstr (input) { function binl2rstr (input) {
var i var i;
var output = '' var output = '';
var length32 = input.length * 32 var length32 = input.length * 32; // 计算输入数组的总位数
for (i = 0; i < length32; i += 8) { for (i = 0; i < length32; i += 8) {
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff) // 从输入数组中提取每个字节并转换为字符
output += String.fromCharCode((input[i >> 5] >>> (i % 32)) & 0xff);
} }
return output return output;
} }
/* /*
* Convert a raw string to an array of little-endian words * 将原始字符串转换为小端序的字数组
* Characters >255 have their high-byte silently ignored. * 字符值大于255的高字节将被忽略
*/ */
function rstr2binl (input) { function rstr2binl (input) {
var i var i;
var output = [] var output = [];
output[(input.length >> 2) - 1] = undefined output[(input.length >> 2) - 1] = undefined; // 确保输出数组有足够的空间
for (i = 0; i < output.length; i += 1) { for (i = 0; i < output.length; i += 1) {
output[i] = 0 output[i] = 0; // 用零初始化输出数组
} }
var length8 = input.length * 8 var length8 = input.length * 8; // 计算输入字符串的总位数
for (i = 0; i < length8; i += 8) { for (i = 0; i < length8; i += 8) {
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32) // 将每个字符打包到输出数组中作为小端序字
output[i >> 5] |= (input.charCodeAt(i / 8) & 0xff) << (i % 32);
} }
return output return output;
} }
/* /*
* Calculate the MD5 of a raw string * 计算原始字符串的MD5哈希值
*/ */
function rstrMD5 (s) { function rstrMD5 (s) {
return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)) return binl2rstr(binlMD5(rstr2binl(s), s.length * 8)); // 将原始字符串转换为二进制,进行哈希运算,然后转换回原始字符串
} }
/* /*
* Calculate the HMAC-MD5, of a key and some data (raw strings) * 计算HMAC-MD5密钥和数据
*/ */
function rstrHMACMD5 (key, data) { function rstrHMACMD5 (key, data) {
var i var i;
var bkey = rstr2binl(key) var bkey = rstr2binl(key); // 将密钥转换为二进制数组
var ipad = [] var ipad = [];
var opad = [] var opad = [];
var hash var hash;
ipad[15] = opad[15] = undefined ipad[15] = opad[15] = undefined; // 确保ipad和opad数组有足够的空间
if (bkey.length > 16) { if (bkey.length > 16) {
bkey = binlMD5(bkey, key.length * 8) bkey = binlMD5(bkey, key.length * 8); // 如果密钥长度超过16个字先对其进行哈希运算
} }
for (i = 0; i < 16; i += 1) { for (i = 0; i < 16; i += 1) {
ipad[i] = bkey[i] ^ 0x36363636 ipad[i] = bkey[i] ^ 0x36363636; // 使用ipad常量对密钥进行异或操作
opad[i] = bkey[i] ^ 0x5c5c5c5c opad[i] = bkey[i] ^ 0x5c5c5c5c; // 使用opad常量对密钥进行异或操作
} }
hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8) hash = binlMD5(ipad.concat(rstr2binl(data)), 512 + data.length * 8); // 对内填充的密钥和数据进行哈希运算
return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)) return binl2rstr(binlMD5(opad.concat(hash), 512 + 128)); // 对外填充的密钥和之前的哈希结果进行哈希运算,然后转换为原始字符串
} }
/* /*
* Convert a raw string to a hex string * 将原始字符串转换为十六进制字符串
*/ */
function rstr2hex (input) { function rstr2hex (input) {
var hexTab = '0123456789abcdef' var hexTab = '0123456789abcdef'; // 十六进制字符表
var output = '' var output = '';
var x var x;
var i var i;
for (i = 0; i < input.length; i += 1) { for (i = 0; i < input.length; i += 1) {
x = input.charCodeAt(i) x = input.charCodeAt(i); // 获取每个字符的ASCII码
output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f) output += hexTab.charAt((x >>> 4) & 0x0f) + hexTab.charAt(x & 0x0f); // 将每个字符转换为其十六进制表示
} }
return output return output;
} }
/* /*
* Encode a string as utf-8 * 将字符串编码为UTF-8格式
*/ */
function str2rstrUTF8 (input) { function str2rstrUTF8 (input) {
return unescape(encodeURIComponent(input)) return unescape(encodeURIComponent(input)); // 将输入字符串编码为UTF-8格式
} }
/* /*
* Take string arguments and return either raw or hex encoded strings * 接受字符串参数并返回原始或十六进制编码的字符串
*/ */
function rawMD5 (s) { function rawMD5 (s) {
return rstrMD5(str2rstrUTF8(s)) return rstrMD5(str2rstrUTF8(s)); // 将输入字符串转换为原始格式并计算其MD5哈希值
} }
function hexMD5 (s) { function hexMD5 (s) {
return rstr2hex(rawMD5(s)) return rstr2hex(rawMD5(s)); // 将输入字符串转换为原始格式计算其MD5哈希值然后转换为十六进制格式
} }
function rawHMACMD5 (k, d) { function rawHMACMD5 (k, d) {
return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)) return rstrHMACMD5(str2rstrUTF8(k), str2rstrUTF8(d)); // 将密钥和数据转换为原始格式计算它们的HMAC-MD5哈希值并返回原始结果
} }
function hexHMACMD5 (k, d) { function hexHMACMD5 (k, d) {
return rstr2hex(rawHMACMD5(k, d)) return rstr2hex(rawHMACMD5(k, d)); // 将密钥和数据转换为原始格式计算它们的HMAC-MD5哈希值转换为十六进制格式并返回十六进制结果
} }
/*
* 根据提供的参数计算MD5或HMAC-MD5的主函数
*/
function md5 (string, key, raw) { function md5 (string, key, raw) {
if (!key) { if (!key) { // 如果没有提供密钥计算输入字符串的MD5哈希值
if (!raw) { if (!raw) {
return hexMD5(string) return hexMD5(string); // 返回十六进制编码的MD5哈希值
} }
return rawMD5(string) return rawMD5(string); // 返回原始MD5哈希值
} }
if (!raw) { if (!raw) { // 如果提供了密钥使用密钥计算输入字符串的HMAC-MD5哈希值
return hexHMACMD5(key, string) return hexHMACMD5(key, string); // 返回十六进制编码的HMAC-MD5哈希值
} }
return rawHMACMD5(key, string) return rawHMACMD5(key, string);
} }
Loading…
Cancel
Save