From c81052b0b90ed1deafb7307cf911ae05e7ea24b3 Mon Sep 17 00:00:00 2001
From: whb <17803890193@163.com>
Date: Sat, 19 Aug 2023 17:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E5=BD=92=E5=B1=9E=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../service/impl/CourseServiceImpl.java       |   4 -
 .../zhiyun03/filter/LoginCheckFilter.java     |   2 +-
 .../invite/service/impl/InviteServieImpl.java |   3 -
 .../serve/service/impl/ServeServiceImpl.java  |   4 -
 src/main/resources/application.yml            |   2 +-
 .../templates/layui-v2.6.8/academicList.html  | 182 +++--
 .../layui-v2.6.8/applicationList.html         | 737 ++++++++++++-----
 .../templates/layui-v2.6.8/courseList.html    | 737 ++++++++++++-----
 .../templates/layui-v2.6.8/downloadList.html  | 156 +++-
 .../templates/layui-v2.6.8/inviteList.html    |   7 +
 .../templates/layui-v2.6.8/login.html         |   2 +-
 .../templates/layui-v2.6.8/textualList.html   | 761 +++++++++++++-----
 12 files changed, 1920 insertions(+), 677 deletions(-)

diff --git a/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java b/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
index df5d65e..f522221 100644
--- a/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
@@ -49,10 +49,6 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
         PageHelper.startPage(page,limit);
         //查询所有课程
       List<CourseVo> courseVoList  = courseMapper.queryCourse();
-      if (courseVoList.isEmpty())
-      {
-          throw new ServiceException("400","课程数据为空");
-      }
         PageInfo<CourseVo> pageInfo = new PageInfo<CourseVo>(courseVoList);
         PageVO<CourseVo> courseVoPageInfo = new PageVO<>();
         //当前页
diff --git a/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java b/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
index 8bcdcee..9d0a391 100644
--- a/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
+++ b/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
@@ -17,7 +17,7 @@ import java.io.IOException;
  * @author: Jie
  * @date: 2022/8/10 9:48
  **/
-@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
+//@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
 @Slf4j
 public class LoginCheckFilter implements Filter {
 
diff --git a/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java b/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
index 4ee4f06..235e859 100644
--- a/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
@@ -42,9 +42,6 @@ public class InviteServieImpl extends ServiceImpl<InviteMapper, Invite> implemen
         PageHelper.startPage(page, limit);
         //查询所有课程
         List<InviteVo> inviteVoList = inviteMapper.queryInvite();
-        if (inviteVoList.isEmpty()) {
-            throw new ServiceException("400", "课程数据为空");
-        }
         PageInfo<InviteVo> pageInfo = new PageInfo<InviteVo>(inviteVoList);
         PageVO<InviteVo> inviteVoPageVO = new PageVO<>();
         //当前页
diff --git a/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java b/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
index bc26748..85121a0 100644
--- a/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
@@ -43,10 +43,6 @@ public class ServeServiceImpl extends ServiceImpl<ServeMapper, Serve> implements
         PageHelper.startPage(page,limit);
         //查询所有课程
         List<ServeVo> serveVoList  = serveMapper.queryService();
-        if (serveVoList.isEmpty())
-        {
-            throw new ServiceException("400","服务数据为空");
-        }
         PageInfo<ServeVo> pageInfo = new PageInfo<ServeVo>(serveVoList);
         PageVO<ServeVo> serveVoPageVO = new PageVO<>();
         //当前页
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index 0befe0c..8f27ab5 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -19,7 +19,7 @@ spring:
     druid:
       url: jdbc:mysql://localhost:3306/zhiyun?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
       username: root
-      password: 123456
+      password: root
   thymeleaf:
     cache: false
     prefix: classpath:/templates
diff --git a/src/main/resources/templates/layui-v2.6.8/academicList.html b/src/main/resources/templates/layui-v2.6.8/academicList.html
index f117e9d..62dbb9c 100644
--- a/src/main/resources/templates/layui-v2.6.8/academicList.html
+++ b/src/main/resources/templates/layui-v2.6.8/academicList.html
@@ -7,44 +7,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"  media="all">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+          integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
-    <style>
-        .select-img-wrap {
-            width: calc(100% - 40px);
-            margin: 0 20px;
-        }
-
-        .select-img-wrap .dir-img-icon {
-            position: relative;
-        }
-
-        .select-img-wrap .dir-img-icon .icon {
-            width: 70px;
-            height: 70px;
-            cursor: pointer;
-            vertical-align: bottom;
-            background: #e7e7e7;
-        }
-
-        .select-img-wrap .dir-img-icon.active::before {
-            content: "";
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-        }
-        .select-img-wrap .dir-img-icon.active::after {
-            content: "";
-            width: 16px;
-            height: 8px;
-            border: 3px solid #FF5722;
-            border-bottom: 0;
-            border-left: 0;
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            transform: rotate(135deg);
-        }
-    </style>
 </head>
 <body>
 
@@ -338,7 +304,55 @@
 
 </script>
 <script type="text/html" id="addForm">
+    <style>
+        /* 取消弹框拖拽 */
+        .layui-layer-resize {
+            display: none;
+        }
+
+        .select-img-wrap {
+            width: calc(100% - 90px);
+            margin: 10px auto 0;
+        }
+
+        .select-img-wrap .dir-img-icon {
+            position: relative;
+            padding: 5px !important;
+        }
+
+        .select-img-wrap .dir-img-icon .icon {
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+            object-fit: cover;
+            vertical-align: bottom;
+            background: #e7e7e7;
+        }
 
+        .select-img-wrap .dir-img-icon.active {
+            background: #007aff;
+        }
+
+        .select-img-wrap .dir-img-icon.active::before {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .select-img-wrap .dir-img-icon.active::after {
+            content: "";
+            width: 16px;
+            height: 8px;
+            border: 3px solid #007aff;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 15px;
+            transform: rotate(135deg);
+        }
+    </style>
     <form class="layui-form" id="addDirectory">
 
         <!-- 把id 作为隐藏域传过去 -->
@@ -353,48 +367,116 @@
         </div>
         <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <!--            <input type="hidden"  name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
             <div class="layui-row layui-col-space20 select-img-wrap">
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
                 </div>
             </div>
         </div>
     </form>
 </script>
+<style>
+    .icon-swiper-wrap {
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper {
+        box-sizing: border-box;
+        width: calc(100% - 60px);
+        height: 162px;
+        margin: 20px 30px 20px 30px;
+    }
+
+    .icon-swiper-wrap .swiper-slide {
+        height: calc((100% - 10px) / 2);
+        text-align: center;
+        font-size: 12px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::before {
+        content: "";
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::after {
+        content: "";
+        width: 16px;
+        height: 8px;
+        border: 3px solid #007aff;
+        border-bottom: 0;
+        border-left: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        transform: rotate(135deg);
+    }
+
+    .icon-swiper-wrap .swiper-slide img {
+        width: 70px;
+        height: 70px;
+        cursor: pointer;
+        object-fit: cover;
+        vertical-align: bottom;
+        background: #e7e7e7;
+        border: 3px solid transparent;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active img {
+        border: 3px solid #007aff;
+    }
+
+    .icon-swiper-wrap .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-prev {
+        margin-left: -10px !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-next {
+        margin-right: -10px !important;
+    }
+</style>
 <script>
     function addAcademic(data) {
         //弹框
diff --git a/src/main/resources/templates/layui-v2.6.8/applicationList.html b/src/main/resources/templates/layui-v2.6.8/applicationList.html
index 6612ccc..5f6917b 100644
--- a/src/main/resources/templates/layui-v2.6.8/applicationList.html
+++ b/src/main/resources/templates/layui-v2.6.8/applicationList.html
@@ -1,51 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html xmlns="http://www.w3.org/1999/html">
+
 <head>
     <meta charset="utf-8">
     <title>Layui</title>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"  media="all">
-    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
-    <style>
-        .select-img-wrap {
-            width: calc(100% - 40px);
-            margin: 0 20px;
-        }
-
-        .select-img-wrap .dir-img-icon {
-            position: relative;
-        }
-
-        .select-img-wrap .dir-img-icon .icon {
-            width: 70px;
-            height: 70px;
-            cursor: pointer;
-            vertical-align: bottom;
-            background: #e7e7e7;
-        }
-
-        .select-img-wrap .dir-img-icon.active::before {
-            content: "";
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-        }
-        .select-img-wrap .dir-img-icon.active::after {
-            content: "";
-            width: 16px;
-            height: 8px;
-            border: 3px solid #FF5722;
-            border-bottom: 0;
-            border-left: 0;
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            transform: rotate(135deg);
-        }
-    </style>
+    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+          integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
+
 <body>
 
 <table class="layui-hide" id="test" lay-filter="test"></table>
@@ -53,7 +20,7 @@
 <script type="text/html" id="toolbarDemo">
     <div class="layui-btn-container">
         <button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
-        <button class="layui-btn layui-btn-sm" lay-event="addApplication">添加应用</button>
+        <button class="layui-btn layui-btn-sm" lay-event="addCourse">添加应用</button>
     </div>
 </script>
 <script type="text/html" id="barDemo">
@@ -65,15 +32,20 @@
 <script src="layui/layui.js" charset="utf-8"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+        integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
     layui.use('table', function () {
         var table = layui.table
+
+        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
+        //详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
         table.render({
             elem: '#test'
             , url: 'http://localhost:8080/application/queryApplication'
             , toolbar: '#toolbarDemo'
-            , title: '应用中心'
+            , title: '课程中心'
             , totalRow: true
             , parseData: function (res) {
                 console.log('data', res)
@@ -88,64 +60,62 @@
                 statusName: 'code', //规定返回的状态码字段为code
                 statusCode: 200 //规定成功的状态码为200
             }
-            ,cols: [[
-                {type: 'checkbox', fixed: 'left'}
+            , cols: [[
+                { type: 'checkbox', fixed: 'left' }
                 ,{field:'id', title:'编号', width:250, sort: true, }
                 ,{field:'appName', title:'应用名称', width:250}
                 ,{field:'appBrief', title:'应用简介', width:250}
                 ,{field:'appUrl', title:'超链接', width:250}
                 ,{field:'dirName', title:'归属目录', width:250}
-                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
             ]]
-            ,page: true
-        });
+            , page: true
+        })
 
-        //工具栏事件
+        //头工具栏事件
         table.on('toolbar(test)', function (obj) {
-            var data = obj.data;
+            var data = obj.data
             //console.log(obj)
             if (obj.event === 'addData') {
-                addDir(data);
-            } else if (obj.event === 'addApplication') {
-                addApplication(data);
+                addDir(data)
+            } else if (obj.event === 'addCourse') {
+                addCourse(data)
             }
-        });
+        })
 
         //监听行工具事件
-        table.on('tool(test)', function(obj){
-            var data = obj.data;
+        table.on('tool(test)', function (obj) {
+            var data = obj.data
             //console.log(obj)
-            if(obj.event === 'del'){
-                layer.confirm('真的删除行么', function(index){
+            if (obj.event === 'del') {
+                layer.confirm('真的删除行么', function (index) {
                     //obj.del();//删除表结构
-                    layer.close(index);
+                    layer.close(index)
 
                     //获取要删除的服务的id
-                    var deleteApplication = data.id;
-
-                    //发送Ajax到后台，进行删除操作
-                    $.get("http://localhost:8080/application/deleteApplication", { "id": deleteApplication},
-                        function(result){
-                            if (result.code==200){
-                                // 删除成功之后 弹出msg
-                                layer.msg(result.msg);
-                                // 重点：继续显示当前页
-                                $(".layui-laypage-btn").click();
-                            } else {
-                                layer.msg(result.msg, {icon: 2});
-                                layer.close(index);
-                            }
-                        });
-                });
-            }else if(obj.event === 'edit'){
-                selectOne(data);
+                    var deleteCourseId = data.id
+
+                    $.get("http://localhost:8080/application/deleteApplication", { "id": deleteCourseId }, function (result) {
+                        if (result.code == 200) {
+                            // 删除成功之后 弹出msg
+                            layer.msg(result.msg)
+                            // 重点：继续显示当前页
+                            $(".layui-laypage-btn").click()
+                        } else {
+                            layer.msg(result.msg, { icon: 2 })
+                            layer.close(index)
+                        }
+                    })
+                })
+            } else if (obj.event === 'edit') {
+                selectOne(data)
             }
-        });
+        })
+
     });
 </script>
-
 <script>
-    function selectOne(data) {
+    function selectOne (data) {
         //弹框
         layer.open({
             type: 1,
@@ -160,61 +130,89 @@
                 $("#appBrief").val(data.appBrief);
                 $("#appUrl").val(data.appUrl);
                 $("#dirName").val(data.dirName);
+                $("#appIcon").val(data.appIcon)
+
                 //渲染页面
-                layui.form.render();
+                layui.form.render()
             },
             btn: ['提交', '取消']
             , yes: function (index, layero) {
                 //修改操作
-                $.post("http://localhost:8080/application/updateApplication", $("#updateApplication").serialize(),
+                $.post("http://localhost:8080/application/updateApplication", $("#updateCourse").serialize(),
                     function (data) {
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
-
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
+        })
         layui.use(['form'], function () {
-            var form = layui.form;
+            var form = layui.form
             $.ajax({
                 url: 'http://localhost:8080/application/queryDir',
                 type: "get",
                 success: function (data) {
                     if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected="' + data.dirName + '"></option>';
+                        var opt = '<option value="" selected="' + data.dirName + '"></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
+                        $("#directorId").html(opt)
+                        form.render('select')//需要渲染一下
 
                     } else {
-                        layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                            layer.closeAll();
-                        });
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
 
                 }
-            });
-        });
+            })
+        })
+
+        var swiper = new Swiper(".icon-swiper", {
+            slidesPerView: 6,
+            spaceBetween: 10,
+            slidesPerGroup: 12,
+            grid: {
+                rows: 2,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+            },
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        })
+
+        $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+            const parentEl = $(this).parent('.swiper-slide')
+            const siblingsEl = $(parentEl).siblings('.swiper-slide')
+            parentEl.addClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
+            })
+            appIcon = $(this).attr('src')
+        })
     }
 </script>
 <script type="text/html" id="updateForm">
 
-    <form class="layui-form" id="updateApplication">
+    <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
 
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
@@ -252,19 +250,132 @@
                 </select>
             </div>
         </div>
-
-        <div class="layui-form-item">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <div class="layui-input-block">
-                <input type="text" name="appIcon" id="appIcon" class="layui-input">
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div  class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
-
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
-
 <script>
-    function addDir(data) {
+    function addDir (data) {
         var $ = layui.jquery
         var dirImg = ''
         //弹框
@@ -274,7 +385,6 @@
             title: ['添加页面', 'font-size:18px;'],
             area: ['600px', '600px'],
             btn: ['提交', '取消']
-
             , yes: function (index, layero) {
                 // 获取所有图标元素
                 var dirName = $('#dirName').val()
@@ -286,24 +396,24 @@
                 $.get("http://localhost:8080/application/addDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
-        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+        })
+        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
             const parentEl = $(this).parent('.dir-img-icon')
             const siblingsEl = $(parentEl).siblings('.dir-img-icon')
             parentEl.addClass('active')
-            Array.from(siblingsEl).forEach(item=>{
-                $(item).removeClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
             })
             dirImg = $(this).attr('src')
         })
@@ -311,12 +421,58 @@
 
 </script>
 <script type="text/html" id="addForm">
+    <style>
+        /* 取消弹框拖拽 */
+        .layui-layer-resize {
+            display: none;
+        }
 
-    <form class="layui-form" id="addDirectory">
+        .select-img-wrap {
+            width: calc(100% - 90px);
+            margin: 10px auto 0;
+        }
 
+        .select-img-wrap .dir-img-icon {
+            position: relative;
+            padding: 5px !important;
+        }
+
+        .select-img-wrap .dir-img-icon .icon {
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+            object-fit: cover;
+            vertical-align: bottom;
+            background: #e7e7e7;
+        }
+
+        .select-img-wrap .dir-img-icon.active {
+            background: #007aff;
+        }
+
+        .select-img-wrap .dir-img-icon.active::before {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .select-img-wrap .dir-img-icon.active::after {
+            content: "";
+            width: 16px;
+            height: 8px;
+            border: 3px solid #007aff;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 15px;
+            transform: rotate(135deg);
+        }
+    </style>
+    <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
-
         <div class="layui-form-item">
             <label class="layui-form-label">目录名称</label>
             <div class="layui-input-block">
@@ -326,106 +482,209 @@
         </div>
         <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <!--            <input type="hidden"  name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
             <div class="layui-row layui-col-space20 select-img-wrap">
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
                 </div>
             </div>
         </div>
     </form>
 </script>
-<script>
-    function addApplication(data) {
-        //弹框
-        layer.open({
-            type: 1,
-            content: $("#addForm1").html(),
-            title: ['添加应用', 'font-size:18px;'],
-            area: ['600px', '600px'],
-            btn: ['提交', '取消']
-            , yes: function (index, layero) {
-                //修改操作
-                $.post("http://localhost:8080/application/addApplication", $("#addApplication").serialize(),
-                    function (data) {
-                        if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
-                        } else {
-                            layer.msg(data.msg);
-                        }
-                    });
-            }
-            , btn2: function (index, layero) {
-                // alert("取消")
-            }
-        });
+<style>
+    .icon-swiper-wrap {
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper {
+        box-sizing: border-box;
+        width: calc(100% - 60px);
+        height: 162px;
+        margin: 20px 30px 20px 30px;
+    }
 
-        layui.use(['form'], function() {
-            var form = layui.form;
+    .icon-swiper-wrap .swiper-slide {
+        height: calc((100% - 10px) / 2);
+        text-align: center;
+        font-size: 12px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::before {
+        content: "";
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::after {
+        content: "";
+        width: 16px;
+        height: 8px;
+        border: 3px solid #007aff;
+        border-bottom: 0;
+        border-left: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        transform: rotate(135deg);
+    }
+
+    .icon-swiper-wrap .swiper-slide img {
+        width: 70px;
+        height: 70px;
+        cursor: pointer;
+        object-fit: cover;
+        vertical-align: bottom;
+        background: #e7e7e7;
+        border: 3px solid transparent;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active img {
+        border: 3px solid #007aff;
+    }
+
+    .icon-swiper-wrap .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-prev {
+        margin-left: -10px !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-next {
+        margin-right: -10px !important;
+    }
+</style>
+<script>
+    function addCourse (data) {
+        layui.use(['form'], function () {
+            var form = layui.form
+            var appIcon = ''
+            //弹框
+            layer.open({
+                type: 1,
+                content: $("#addCourseTemplate").html(),
+                title: ['添加课程', 'font-size:18px;'],
+                area: ['600px', '650px'],
+                btn: ['提交', '取消']
+                , yes: function (index, layero) {
+                    var formData = form.val('addCourseForm') // 表单取值
+                    Object.assign(formData, { appIcon: appIcon })
+                    //修改操作
+                    $.post("http://localhost:8080/application/addApplication", formData,
+                        function (data) {
+                            if ("success" == data.msg) {
+                                layer.msg(data.msg)
+                                $(".layui-laypage-btn").click()
+                                parent.layer.close(index)
+                            } else {
+                                layer.msg(data.msg)
+                            }
+                        })
+                }
+                , btn2: function (index, layero) {
+                    // alert("取消")
+                }
+            })
             $.ajax({
                 url: 'http://localhost:8080/application/queryDir',
-                type:"get",
-                success: function(data) {
-                    if(data.msg === "success"){
+                type: "get",
+                success: function (data) {
+                    if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected=""></option>';
+                        var opt = '<option value="" selected=""></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
-
-                    }else{
-                        layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
+                        $("#directorId").html(opt)
+
+                        // $.each($("#directorId").children(), function () {
+                        //     $(this).removeProp('selected')
+                        //     if ($(this).text() === data.dirName) {
+                        //         $(this).prop('selected', data.dirName)
+                        //     }
+                        // })
+                        form.render('select')//需要渲染一下
+                    } else {
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
                 }
-            });
-        });
-    }
-</script>
+            })
 
-<script type="text/html" id="addForm1">
+            var swiper = new Swiper(".icon-swiper", {
+                slidesPerView: 6,
+                spaceBetween: 10,
+                slidesPerGroup: 12,
+                grid: {
+                    rows: 2,
+                },
+                pagination: {
+                    el: ".swiper-pagination",
+                    clickable: true,
+                },
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            })
 
-    <form class="layui-form" id="addApplication" enctype="multipart/form-data">
+            $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+                const parentEl = $(this).parent('.swiper-slide')
+                const siblingsEl = $(parentEl).siblings('.swiper-slide')
+                parentEl.addClass('active')
+                $.each(siblingsEl, function () {
+                    $(this).removeClass('active')
+                })
+                appIcon = $(this).attr('src')
+            })
+        })
+    }
+</script>
+<script type="text/html" id="addCourseTemplate">
+    <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
 
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
@@ -460,15 +719,129 @@
                 </select>
             </div>
         </div>
-
-        <div class="layui-form-item">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <div class="layui-input-block">
-                <input type="text" name="appIcon" id="appIcon" class="layui-input">
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
-
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/layui-v2.6.8/courseList.html b/src/main/resources/templates/layui-v2.6.8/courseList.html
index c87524e..410920d 100644
--- a/src/main/resources/templates/layui-v2.6.8/courseList.html
+++ b/src/main/resources/templates/layui-v2.6.8/courseList.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/html">
+
 <head>
     <meta charset="utf-8">
     <title>Layui</title>
@@ -7,45 +8,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
-    <style>
-        .select-img-wrap {
-            width: calc(100% - 40px);
-            margin: 0 20px;
-        }
-
-        .select-img-wrap .dir-img-icon {
-            position: relative;
-        }
-
-        .select-img-wrap .dir-img-icon .icon {
-            width: 70px;
-            height: 70px;
-            cursor: pointer;
-            vertical-align: bottom;
-            background: #e7e7e7;
-        }
-
-        .select-img-wrap .dir-img-icon.active::before {
-            content: "";
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-        }
-        .select-img-wrap .dir-img-icon.active::after {
-            content: "";
-            width: 16px;
-            height: 8px;
-            /*border: 3px solid #00FFFF;*/
-            border: 3px solid #FF5722;
-            border-bottom: 0;
-            border-left: 0;
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            transform: rotate(135deg);
-        }
-    </style>
-
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+          integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 
 <body>
@@ -67,9 +32,12 @@
 <script src="layui/layui.js" charset="utf-8"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+        integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
     layui.use('table', function () {
-        var table = layui.table;
+        var table = layui.table
 
         //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
         //详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
@@ -86,68 +54,68 @@
                     "count": res.count, //解析总页数
                     "msg": res.msg, //解析提示文本
                     "data": res.data.list //解析数据列表
-                };
+                }
             }
             , response: {
                 statusName: 'code', //规定返回的状态码字段为code
                 statusCode: 200 //规定成功的状态码为200
             }
             , cols: [[
-                {type: 'checkbox', fixed: 'left'}
-                , {field: 'id', title: '序号', width: 300, sort: true,}
-                , {field: 'courseName', title: '课程名称', width: 300}
-                , {field: 'courseBrief', title: '课程简介', width: 300}
-                , {field: 'courseUrl', title: '超链接', width: 300}
-                , {field: 'dirName', title: '归属目录', width: 300}
-                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
+                { type: 'checkbox', fixed: 'left' }
+                , { field: 'id', title: '序号', width: 300, sort: true, }
+                , { field: 'courseName', title: '课程名称', width: 300 }
+                , { field: 'courseBrief', title: '课程简介', width: 300 }
+                , { field: 'courseUrl', title: '超链接', width: 300 }
+                , { field: 'dirName', title: '归属目录', width: 300 }
+                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
             ]]
             , page: true
-        });
+        })
 
         //头工具栏事件
         table.on('toolbar(test)', function (obj) {
-            var data = obj.data;
+            var data = obj.data
             //console.log(obj)
             if (obj.event === 'addData') {
-                addDir(data);
+                addDir(data)
             } else if (obj.event === 'addCourse') {
-                addCourse(data);
+                addCourse(data)
             }
-        });
+        })
 
         //监听行工具事件
         table.on('tool(test)', function (obj) {
-            var data = obj.data;
+            var data = obj.data
             //console.log(obj)
             if (obj.event === 'del') {
                 layer.confirm('真的删除行么', function (index) {
                     //obj.del();//删除表结构
-                    layer.close(index);
+                    layer.close(index)
 
                     //获取要删除的服务的id
-                    var deleteCourseId = data.id;
+                    var deleteCourseId = data.id
 
-                    $.get("http://localhost:8080/api/course/delCourseById", {"id": deleteCourseId}, function (result) {
+                    $.get("http://localhost:8080/api/course/delCourseById", { "id": deleteCourseId }, function (result) {
                         if (result.code == 200) {
                             // 删除成功之后 弹出msg
-                            layer.msg(result.msg);
+                            layer.msg(result.msg)
                             // 重点：继续显示当前页
-                            $(".layui-laypage-btn").click();
+                            $(".layui-laypage-btn").click()
                         } else {
-                            layer.msg(result.msg, {icon: 2});
-                            layer.close(index);
+                            layer.msg(result.msg, { icon: 2 })
+                            layer.close(index)
                         }
-                    });
-                });
+                    })
+                })
             } else if (obj.event === 'edit') {
-                selectOne(data);
+                selectOne(data)
             }
-        });
+        })
 
     });
 </script>
 <script>
-    function selectOne(data) {
+    function selectOne (data) {
         //弹框
         layer.open({
             type: 1,
@@ -157,70 +125,94 @@
 
             //弹出后回调
             success: function () {
-                $("#id").val(data.id);
-                $("#courseName").val(data.courseName);
-                $("#courseBrief").val(data.courseBrief);
-                $("#courseUrl").val(data.courseUrl);
-                $("#dirName").val(data.dirName);
-                $("#courseIcon").val(data.courseIcon);
+                $("#id").val(data.id)
+                $("#courseName").val(data.courseName)
+                $("#courseBrief").val(data.courseBrief)
+                $("#courseUrl").val(data.courseUrl)
+                $("#dirName").val(data.dirName)
+                $("#courseIcon").val(data.courseIcon)
+
                 //渲染页面
-                layui.form.render();
+                layui.form.render()
             },
-
             btn: ['提交', '取消']
             , yes: function (index, layero) {
-
                 //修改操作
                 $.get("http://localhost:8080/api/course/updateById", $("#updateCourse").serialize(),
                     function (data) {
-
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
-
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
+        })
         layui.use(['form'], function () {
-            var form = layui.form;
+            var form = layui.form
             $.ajax({
                 url: 'http://localhost:8080/api/course/queryCourseDirectory',
                 type: "get",
                 success: function (data) {
                     if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected="' + data.dirName + '"></option>';
+                        var opt = '<option value="" selected="' + data.dirName + '"></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
+                        $("#directorId").html(opt)
+                        form.render('select')//需要渲染一下
 
                     } else {
-                        layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                            layer.closeAll();
-                        });
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
 
                 }
-            });
-        });
+            })
+        })
+
+        var swiper = new Swiper(".icon-swiper", {
+            slidesPerView: 6,
+            spaceBetween: 10,
+            slidesPerGroup: 12,
+            grid: {
+                rows: 2,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+            },
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        })
+
+        $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+            const parentEl = $(this).parent('.swiper-slide')
+            const siblingsEl = $(parentEl).siblings('.swiper-slide')
+            parentEl.addClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
+            })
+            courseIcon = $(this).attr('src')
+        })
     }
 </script>
 <script type="text/html" id="updateForm">
 
-    <form class="layui-form" id="updateCourse">
+    <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
 
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
@@ -256,17 +248,132 @@
                 </select>
             </div>
         </div>
-        <div class="layui-form-item">
-            <label class="layui-form-label">课程图标</label>
-            <div class="layui-input-block">
-                <input type="text" name="courseIcon" id="courseIcon" class="layui-input">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
+            <label class="layui-form-label">选择icon</label>
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
-
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
 <script>
-    function addDir(data) {
+    function addDir (data) {
         var $ = layui.jquery
         var dirImg = ''
         //弹框
@@ -276,7 +383,6 @@
             title: ['添加页面', 'font-size:18px;'],
             area: ['600px', '600px'],
             btn: ['提交', '取消']
-
             , yes: function (index, layero) {
                 // 获取所有图标元素
                 var dirName = $('#dirName').val()
@@ -288,24 +394,24 @@
                 $.get("http://localhost:8080/api/course/addCourseDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
-        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+        })
+        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
             const parentEl = $(this).parent('.dir-img-icon')
             const siblingsEl = $(parentEl).siblings('.dir-img-icon')
             parentEl.addClass('active')
-            Array.from(siblingsEl).forEach(item=>{
-                $(item).removeClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
             })
             dirImg = $(this).attr('src')
         })
@@ -313,12 +419,58 @@
 
 </script>
 <script type="text/html" id="addForm">
+    <style>
+        /* 取消弹框拖拽 */
+        .layui-layer-resize {
+            display: none;
+        }
 
-    <form class="layui-form" id="addDirectory">
+        .select-img-wrap {
+            width: calc(100% - 90px);
+            margin: 10px auto 0;
+        }
 
+        .select-img-wrap .dir-img-icon {
+            position: relative;
+            padding: 5px !important;
+        }
+
+        .select-img-wrap .dir-img-icon .icon {
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+            object-fit: cover;
+            vertical-align: bottom;
+            background: #e7e7e7;
+        }
+
+        .select-img-wrap .dir-img-icon.active {
+            background: #007aff;
+        }
+
+        .select-img-wrap .dir-img-icon.active::before {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .select-img-wrap .dir-img-icon.active::after {
+            content: "";
+            width: 16px;
+            height: 8px;
+            border: 3px solid #007aff;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 15px;
+            transform: rotate(135deg);
+        }
+    </style>
+    <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
-
         <div class="layui-form-item">
             <label class="layui-form-label">目录名称</label>
             <div class="layui-input-block">
@@ -328,120 +480,211 @@
         </div>
         <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <!--            <input type="hidden"  name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
             <div class="layui-row layui-col-space20 select-img-wrap">
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
                 </div>
             </div>
         </div>
     </form>
 </script>
+<style>
+    .icon-swiper-wrap {
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper {
+        box-sizing: border-box;
+        width: calc(100% - 60px);
+        height: 162px;
+        margin: 20px 30px 20px 30px;
+    }
+
+    .icon-swiper-wrap .swiper-slide {
+        height: calc((100% - 10px) / 2);
+        text-align: center;
+        font-size: 12px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::before {
+        content: "";
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::after {
+        content: "";
+        width: 16px;
+        height: 8px;
+        border: 3px solid #007aff;
+        border-bottom: 0;
+        border-left: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        transform: rotate(135deg);
+    }
+
+    .icon-swiper-wrap .swiper-slide img {
+        width: 70px;
+        height: 70px;
+        cursor: pointer;
+        object-fit: cover;
+        vertical-align: bottom;
+        background: #e7e7e7;
+        border: 3px solid transparent;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active img {
+        border: 3px solid #007aff;
+    }
+
+    .icon-swiper-wrap .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-prev {
+        margin-left: -10px !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-next {
+        margin-right: -10px !important;
+    }
+</style>
 <script>
-    function addCourse(data) {
-        //弹框
-        layer.open({
-            type: 1,
-            content: $("#addForm1").html(),
-            title: ['添加课程', 'font-size:18px;'],
-            area: ['600px', '600px'],
-            btn: ['提交', '取消']
-            , yes: function (index, layero) {
-                //修改操作
-                $.get("http://localhost:8080/api/course/addCourse", $("#addCourse1").serialize(),
-                    function (data) {
-                        if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
-                        } else {
-                            layer.msg(data.msg);
-                        }
-                    });
-            }
-            , btn2: function (index, layero) {
-                // alert("取消")
-            }
-        });
+    function addCourse (data) {
         layui.use(['form'], function () {
-            var form = layui.form;
+            var form = layui.form
+            var courseIcon = ''
+            //弹框
+            layer.open({
+                type: 1,
+                content: $("#addCourseTemplate").html(),
+                title: ['添加课程', 'font-size:18px;'],
+                area: ['600px', '650px'],
+                btn: ['提交', '取消']
+                , yes: function (index, layero) {
+                    var formData = form.val('addCourseForm') // 表单取值
+                    Object.assign(formData, { courseIcon: courseIcon })
+                    //修改操作
+                    $.get("http://localhost:8080/api/course/addCourse", formData,
+                        function (data) {
+                            if ("success" == data.msg) {
+                                layer.msg(data.msg)
+                                $(".layui-laypage-btn").click()
+                                parent.layer.close(index)
+                            } else {
+                                layer.msg(data.msg)
+                            }
+                        })
+                }
+                , btn2: function (index, layero) {
+                    // alert("取消")
+                }
+            })
             $.ajax({
                 url: 'http://localhost:8080/api/course/queryCourseDirectory',
                 type: "get",
                 success: function (data) {
                     if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected=""></option>';
+                        var opt = '<option value="" selected=""></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
-
+                        $("#directorId").html(opt)
+
+                        // $.each($("#directorId").children(), function () {
+                        //     $(this).removeProp('selected')
+                        //     if ($(this).text() === data.dirName) {
+                        //         $(this).prop('selected', data.dirName)
+                        //     }
+                        // })
+                        form.render('select')//需要渲染一下
                     } else {
-                        layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                            layer.closeAll();
-                        });
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
                 }
-            });
-        });
-        layui.use(['carousel', 'form'], function(){
-            var carousel = layui.carousel
-                ,form = layui.form;
-
-            //常规轮播
-            carousel.render({
-                elem: '#test1'
-                ,arrow: 'always'
-            });
-        });
-    }
-</script>
-<script type="text/html" id="addForm1">
+            })
 
-    <form class="layui-form" id="addCourse1">
+            var swiper = new Swiper(".icon-swiper", {
+                slidesPerView: 6,
+                spaceBetween: 10,
+                slidesPerGroup: 12,
+                grid: {
+                    rows: 2,
+                },
+                pagination: {
+                    el: ".swiper-pagination",
+                    clickable: true,
+                },
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            })
 
+            $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+                const parentEl = $(this).parent('.swiper-slide')
+                const siblingsEl = $(parentEl).siblings('.swiper-slide')
+                parentEl.addClass('active')
+                $.each(siblingsEl, function () {
+                    $(this).removeClass('active')
+                })
+                courseIcon = $(this).attr('src')
+            })
+        })
+    }
+</script>
+<script type="text/html" id="addCourseTemplate">
+    <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
-
         <div class="layui-form-item">
             <label class="layui-form-label">课程名称</label>
             <div class="layui-input-block">
@@ -456,41 +699,141 @@
                        class="layui-input">
             </div>
         </div>
-
         <div class="layui-form-item">
             <label class="layui-form-label">课程链接</label>
             <div class="layui-input-block">
                 <input type="text" name="courseUrl" id="courseUrl" class="layui-input">
             </div>
         </div>
-
         <div class="layui-form-item">
             <label class="layui-form-label">归属目录</label>
             <div class="layui-input-block">
-                <select name="dirName" id="directorId">
-                    <option value="">直接选择或搜索选择</option>
-                </select>
+                <select name="dirName" id="directorId"></select>
             </div>
         </div>
-
-            <div class="layui-carousel" id="test1">
-                <div carousel-item="">
-                    <img class="image-item" src="./images/01.png" alt="Image 1">
-                    <img class="image-item" src="./images/02.png" alt="Image 2">
-                    <img class="image-item" src="./images/03.png" alt="Image 1">
-                    <img class="image-item" src="./images/04.png" alt="Image 2">
-                    <img class="image-item" src="./images/05.png" alt="Image 1">
-                    <img class="image-item" src="./images/06.png" alt="Image 2">
-                    <img class="image-item" src="./images/01.png" alt="Image 1">
-                    <img class="image-item" src="./images/02.png" alt="Image 2">
-                    <img class="image-item" src="./images/03.png" alt="Image 1">
-                    <img class="image-item" src="./images/04.png" alt="Image 2">
-                    <img class="image-item" src="./images/05.png" alt="Image 1">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
+            <label class="layui-form-label">选择icon</label>
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
                 </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
-
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/layui-v2.6.8/downloadList.html b/src/main/resources/templates/layui-v2.6.8/downloadList.html
index 288b1fd..375a4db 100644
--- a/src/main/resources/templates/layui-v2.6.8/downloadList.html
+++ b/src/main/resources/templates/layui-v2.6.8/downloadList.html
@@ -47,44 +47,6 @@
     </style>
 </head>
 
-<style>
-    .select-img-wrap {
-        width: calc(100% - 40px);
-        margin: 0 20px;
-    }
-
-    .select-img-wrap .dir-img-icon {
-        position: relative;
-    }
-
-    .select-img-wrap .dir-img-icon .icon {
-        width: 70px;
-        height: 70px;
-        cursor: pointer;
-        vertical-align: bottom;
-        background: #e7e7e7;
-    }
-
-    .select-img-wrap .dir-img-icon.active::before {
-        content: "";
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-    }
-    .select-img-wrap .dir-img-icon.active::after {
-        content: "";
-        width: 16px;
-        height: 8px;
-        /*border: 3px solid #00FFFF;*/
-        border: 3px solid #FF5722;
-        border-bottom: 0;
-        border-left: 0;
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-        transform: rotate(135deg);
-    }
-</style>
 <body>
 
 <table class="layui-hide" id="test" lay-filter="test"></table>
@@ -252,6 +214,7 @@
 
 
         });
+
         layui.use(['upload', 'element', 'layer'], function(){
             var $ = layui.jquery
                 ,upload = layui.upload
@@ -376,7 +339,55 @@
 
 </script>
 <script type="text/html" id="addForm">
+    <style>
+        /* 取消弹框拖拽 */
+        .layui-layer-resize {
+            display: none;
+        }
+
+        .select-img-wrap {
+            width: calc(100% - 90px);
+            margin: 10px auto 0;
+        }
 
+        .select-img-wrap .dir-img-icon {
+            position: relative;
+            padding: 5px !important;
+        }
+
+        .select-img-wrap .dir-img-icon .icon {
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+            object-fit: cover;
+            vertical-align: bottom;
+            background: #e7e7e7;
+        }
+
+        .select-img-wrap .dir-img-icon.active {
+            background: #007aff;
+        }
+
+        .select-img-wrap .dir-img-icon.active::before {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .select-img-wrap .dir-img-icon.active::after {
+            content: "";
+            width: 16px;
+            height: 8px;
+            border: 3px solid #007aff;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 15px;
+            transform: rotate(135deg);
+        }
+    </style>
     <form class="layui-form" id="addDirectory">
 
         <!-- 把id 作为隐藏域传过去 -->
@@ -433,6 +444,75 @@
         </div>
     </form>
 </script>
+<style>
+    .icon-swiper-wrap {
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper {
+        box-sizing: border-box;
+        width: calc(100% - 60px);
+        height: 162px;
+        margin: 20px 30px 20px 30px;
+    }
+
+    .icon-swiper-wrap .swiper-slide {
+        height: calc((100% - 10px) / 2);
+        text-align: center;
+        font-size: 12px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::before {
+        content: "";
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::after {
+        content: "";
+        width: 16px;
+        height: 8px;
+        border: 3px solid #007aff;
+        border-bottom: 0;
+        border-left: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        transform: rotate(135deg);
+    }
+
+    .icon-swiper-wrap .swiper-slide img {
+        width: 70px;
+        height: 70px;
+        cursor: pointer;
+        object-fit: cover;
+        vertical-align: bottom;
+        background: #e7e7e7;
+        border: 3px solid transparent;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active img {
+        border: 3px solid #007aff;
+    }
+
+    .icon-swiper-wrap .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-prev {
+        margin-left: -10px !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-next {
+        margin-right: -10px !important;
+    }
+</style>
 <script>
     function addDownload(data) {
         //弹框
diff --git a/src/main/resources/templates/layui-v2.6.8/inviteList.html b/src/main/resources/templates/layui-v2.6.8/inviteList.html
index d75dcca..83a08eb 100644
--- a/src/main/resources/templates/layui-v2.6.8/inviteList.html
+++ b/src/main/resources/templates/layui-v2.6.8/inviteList.html
@@ -169,6 +169,13 @@
                         , "inviteUrl": data.inviteUrl
                         , "dirName": data.dirName
                     });
+
+                    $.each($("#directorId").children(), function () {
+                        $(this).removeProp('selected')
+                        if ($(this).text() === data.dirName) {
+                            $(this).prop('selected', data.dirName)
+                        }
+                    })
                     // layedit.setContent(editorIndex, data.inviteBrief, false)
                     form.render()
                 }
diff --git a/src/main/resources/templates/layui-v2.6.8/login.html b/src/main/resources/templates/layui-v2.6.8/login.html
index fbfc471..b986f5b 100644
--- a/src/main/resources/templates/layui-v2.6.8/login.html
+++ b/src/main/resources/templates/layui-v2.6.8/login.html
@@ -60,7 +60,7 @@
                         })
                     }else {
                         layer.msg(result.msg)
-                        // location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
+                        location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
                     }
                 },
 
diff --git a/src/main/resources/templates/layui-v2.6.8/textualList.html b/src/main/resources/templates/layui-v2.6.8/textualList.html
index a72b799..9299fdb 100644
--- a/src/main/resources/templates/layui-v2.6.8/textualList.html
+++ b/src/main/resources/templates/layui-v2.6.8/textualList.html
@@ -1,51 +1,18 @@
 <!DOCTYPE html>
-<html>
+<html xmlns="http://www.w3.org/1999/html">
+
 <head>
     <meta charset="utf-8">
     <title>Layui</title>
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css"  media="all">
-    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
-    <style>
-        .select-img-wrap {
-            width: calc(100% - 40px);
-            margin: 0 20px;
-        }
-
-        .select-img-wrap .dir-img-icon {
-            position: relative;
-        }
-
-        .select-img-wrap .dir-img-icon .icon {
-            width: 70px;
-            height: 70px;
-            cursor: pointer;
-            vertical-align: bottom;
-            background: #e7e7e7;
-        }
-
-        .select-img-wrap .dir-img-icon.active::before {
-            content: "";
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-        }
-        .select-img-wrap .dir-img-icon.active::after {
-            content: "";
-            width: 16px;
-            height: 8px;
-            border: 3px solid #FF5722;
-            border-bottom: 0;
-            border-left: 0;
-            position: absolute;
-            right: 10px;
-            bottom: 10px;
-            transform: rotate(135deg);
-        }
-    </style>
+    <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+          integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
+
 <body>
 
 <table class="layui-hide" id="test" lay-filter="test"></table>
@@ -53,7 +20,7 @@
 <script type="text/html" id="toolbarDemo">
     <div class="layui-btn-container">
         <button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
-        <button class="layui-btn layui-btn-sm" lay-event="addText">添加考证</button>
+        <button class="layui-btn layui-btn-sm" lay-event="addCourse">添加考证</button>
     </div>
 </script>
 <script type="text/html" id="barDemo">
@@ -65,89 +32,89 @@
 <script src="layui/layui.js" charset="utf-8"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+        integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 <script>
-    layui.use('table', function(){
-        var table = layui.table;
+    layui.use('table', function () {
+        var table = layui.table
 
         //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
         //详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
         table.render({
             elem: '#test'
             ,url:'http://localhost:8080/textual/queryTextual'
-            ,toolbar: '#toolbarDemo'
+            , toolbar: '#toolbarDemo'
             ,title: '考证中心'
-            ,totalRow: true
-            ,parseData: function(res){
-                // var parse = JSON.parse(res.data.data);
-                console.log('data',res)
+            , totalRow: true
+            , parseData: function (res) {
+                // console.log('data', res)
                 return {
-                    "code" : res.code, //解析接口状态
-                    "count":res.count, //解析总页数
-                    "msg" : res.msg, //解析提示文本
-                    "data" : res.data.list //解析数据列表
-                };
-
-            }
-            ,response:{
-                statusCode:200 //规定成功的状态码为200
+                    "code": res.code, //解析接口状态
+                    "count": res.count, //解析总页数
+                    "msg": res.msg, //解析提示文本
+                    "data": res.data.list //解析数据列表
                 }
-            ,cols: [[
+            }
+            , response: {
+                statusName: 'code', //规定返回的状态码字段为code
+                statusCode: 200 //规定成功的状态码为200
+            }
+            , cols: [[
                 {type: 'checkbox', fixed: 'left'}
-                ,{field:'id', title:'编号', width:250, sort: true, }
-                ,{field:'textualName', title:'考证名称', width:250}
-                ,{field:'textualUrl', title:'超链接', width:250}
-                ,{field:'dirName', title:'归属目录', width:250}
-                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+                ,{field:'id', title:'编号', width:300, sort: true, }
+                ,{field:'textualName', title:'考证名称', width:300}
+                ,{field:'textualUrl', title:'超链接', width:300}
+                ,{field:'dirName', title:'归属目录', width:300}
+                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}
             ]]
-            ,page: true
-        });
+            , page: true
+        })
 
         //头工具栏事件
         table.on('toolbar(test)', function (obj) {
-            var data = obj.data;
+            var data = obj.data
             //console.log(obj)
             if (obj.event === 'addData') {
-                addDir(data);
-            } else if (obj.event === 'addText') {
-                addText(data);
+                addDir(data)
+            } else if (obj.event === 'addCourse') {
+                addCourse(data)
             }
-        });
+        })
+
         //监听行工具事件
-        table.on('tool(test)', function(obj){
-            var data = obj.data;
+        table.on('tool(test)', function (obj) {
+            var data = obj.data
             //console.log(obj)
-            if(obj.event === 'del'){
-                layer.confirm('真的删除行么', function(index){
+            if (obj.event === 'del') {
+                layer.confirm('真的删除行么', function (index) {
                     //obj.del();//删除表结构
-                    layer.close(index);
+                    layer.close(index)
 
                     //获取要删除的服务的id
-                    var deleteTextual = data.id;
-
-                    //发送Ajax到后台，进行删除操作
-                    $.get("http://localhost:8080/textual/deleteTextual", { "id": deleteTextual},
-                        function(result){
-                            if (result.code == 200) {
-                                // 删除成功之后 弹出msg
-                                layer.msg(result.msg);
-                                // 重点：继续显示当前页
-                                $(".layui-laypage-btn").click();
-                            } else {
-                                layer.msg(result.msg, {icon: 2});
-                                layer.close(index);
-                            }
-                        });
-                });
-            }else if (obj.event === 'edit') {
-                selectOne(data);
+                    var deleteCourseId = data.id
+
+                    $.get("http://localhost:8080/textual/deleteTextual", { "id": deleteCourseId }, function (result) {
+                        if (result.code == 200) {
+                            // 删除成功之后 弹出msg
+                            layer.msg(result.msg)
+                            // 重点：继续显示当前页
+                            $(".layui-laypage-btn").click()
+                        } else {
+                            layer.msg(result.msg, { icon: 2 })
+                            layer.close(index)
+                        }
+                    })
+                })
+            } else if (obj.event === 'edit') {
+                selectOne(data)
             }
-        });
+        })
+
     });
 </script>
 <script>
-    function selectOne(data) {
+    function selectOne (data) {
         //弹框
         layer.open({
             type: 1,
@@ -162,64 +129,88 @@
                 $("#textualUrl").val(data.textualUrl);
                 $("#dirName").val(data.dirName);
                 $("#textualImg").val(data.textualImg);
+
                 //渲染页面
-                layui.form.render();
+                layui.form.render()
             },
-
             btn: ['提交', '取消']
             , yes: function (index, layero) {
-
                 //修改操作
-                $.post("http://localhost:8080/textual/updateTextual", $("#updateText").serialize(),
+                $.post("http://localhost:8080/textual/updateTextual", $("#updateCourse").serialize(),
                     function (data) {
-
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
-
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
+        })
         layui.use(['form'], function () {
-            var form = layui.form;
+            var form = layui.form
             $.ajax({
                 url: 'http://localhost:8080/textual/queryDir',
                 type: "get",
                 success: function (data) {
                     if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected="' + data.dirName + '"></option>';
+                        var opt = '<option value="" selected="' + data.dirName + '"></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
+                        $("#directorId").html(opt)
+                        form.render('select')//需要渲染一下
 
                     } else {
-                        layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                            layer.closeAll();
-                        });
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
 
                 }
-            });
-        });
+            })
+        })
+
+        var swiper = new Swiper(".icon-swiper", {
+            slidesPerView: 6,
+            spaceBetween: 10,
+            slidesPerGroup: 12,
+            grid: {
+                rows: 2,
+            },
+            pagination: {
+                el: ".swiper-pagination",
+                clickable: true,
+            },
+            navigation: {
+                nextEl: ".swiper-button-next",
+                prevEl: ".swiper-button-prev",
+            },
+        })
+
+        $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+            const parentEl = $(this).parent('.swiper-slide')
+            const siblingsEl = $(parentEl).siblings('.swiper-slide')
+            parentEl.addClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
+            })
+            textualImg = $(this).attr('src')
+        })
     }
 </script>
 <script type="text/html" id="updateForm">
 
-    <form class="layui-form" id="updateText">
+    <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
 
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
@@ -247,17 +238,132 @@
                 </select>
             </div>
         </div>
-        <div class="layui-form-item">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <div class="layui-input-block">
-                <input type="text" name="textualImg" id="textualImg" class="layui-input">
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
-
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
 <script>
-    function addDir(data) {
+    function addDir (data) {
         var $ = layui.jquery
         var dirImg = ''
         //弹框
@@ -267,7 +373,6 @@
             title: ['添加页面', 'font-size:18px;'],
             area: ['600px', '600px'],
             btn: ['提交', '取消']
-
             , yes: function (index, layero) {
                 // 获取所有图标元素
                 var dirName = $('#dirName').val()
@@ -279,24 +384,24 @@
                 $.get("http://localhost:8080/textual/addDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
+                            layer.msg(data.msg)
+                            $(".layui-laypage-btn").click()
+                            parent.layer.close(index)
                         } else {
-                            layer.msg(data.msg);
+                            layer.msg(data.msg)
                         }
-                    });
+                    })
             }
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-        });
-        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+        })
+        $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
             const parentEl = $(this).parent('.dir-img-icon')
             const siblingsEl = $(parentEl).siblings('.dir-img-icon')
             parentEl.addClass('active')
-            Array.from(siblingsEl).forEach(item=>{
-                $(item).removeClass('active')
+            $.each(siblingsEl, function () {
+                $(this).removeClass('active')
             })
             dirImg = $(this).attr('src')
         })
@@ -304,12 +409,58 @@
 
 </script>
 <script type="text/html" id="addForm">
+    <style>
+        /* 取消弹框拖拽 */
+        .layui-layer-resize {
+            display: none;
+        }
+
+        .select-img-wrap {
+            width: calc(100% - 90px);
+            margin: 10px auto 0;
+        }
+
+        .select-img-wrap .dir-img-icon {
+            position: relative;
+            padding: 5px !important;
+        }
 
-    <form class="layui-form" id="addDirectory">
+        .select-img-wrap .dir-img-icon .icon {
+            width: 70px;
+            height: 70px;
+            cursor: pointer;
+            object-fit: cover;
+            vertical-align: bottom;
+            background: #e7e7e7;
+        }
+
+        .select-img-wrap .dir-img-icon.active {
+            background: #007aff;
+        }
 
+        .select-img-wrap .dir-img-icon.active::before {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+        }
+
+        .select-img-wrap .dir-img-icon.active::after {
+            content: "";
+            width: 16px;
+            height: 8px;
+            border: 3px solid #007aff;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 15px;
+            transform: rotate(135deg);
+        }
+    </style>
+    <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
         <!-- 把id 作为隐藏域传过去 -->
         <input type="hidden" name="id" id="id">
-
         <div class="layui-form-item">
             <label class="layui-form-label">目录名称</label>
             <div class="layui-input-block">
@@ -319,109 +470,211 @@
         </div>
         <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <!--            <input type="hidden"  name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
             <div class="layui-row layui-col-space20 select-img-wrap">
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+                    <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+                    <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
                 </div>
                 <div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
-                    <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+                    <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
                 </div>
             </div>
         </div>
     </form>
 </script>
-<script>
-    function addText(data) {
-        //弹框
-        layer.open({
-            type: 1,
-            content: $("#addForm1").html(),
-            title: ['添加课程', 'font-size:18px;'],
-            area: ['600px', '600px'],
-            btn: ['提交', '取消']
-            , yes: function (index, layero) {
-                //修改操作
-                $.post("http://localhost:8080/textual/addTextual", $("#addText").serialize(),
-                    function (data) {
-                        if ("success" == data.msg) {
-                            layer.msg(data.msg);
-                            $(".layui-laypage-btn").click();
-                            parent.layer.close(index);
-                        } else {
-                            layer.msg(data.msg);
-                        }
-                    });
-            }
-            , btn2: function (index, layero) {
-                // alert("取消")
-            }
+<style>
+    .icon-swiper-wrap {
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper {
+        box-sizing: border-box;
+        width: calc(100% - 60px);
+        height: 162px;
+        margin: 20px 30px 20px 30px;
+    }
+
+    .icon-swiper-wrap .swiper-slide {
+        height: calc((100% - 10px) / 2);
+        text-align: center;
+        font-size: 12px;
+        background: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::before {
+        content: "";
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active::after {
+        content: "";
+        width: 16px;
+        height: 8px;
+        border: 3px solid #007aff;
+        border-bottom: 0;
+        border-left: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 15px;
+        transform: rotate(135deg);
+    }
 
-        });
+    .icon-swiper-wrap .swiper-slide img {
+        width: 70px;
+        height: 70px;
+        cursor: pointer;
+        object-fit: cover;
+        vertical-align: bottom;
+        background: #e7e7e7;
+        border: 3px solid transparent;
+    }
+
+    .icon-swiper-wrap .swiper-slide.active img {
+        border: 3px solid #007aff;
+    }
+
+    .icon-swiper-wrap .swiper-pagination {
+        bottom: 0 !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-prev {
+        margin-left: -10px !important;
+    }
+
+    .icon-swiper-wrap .swiper-button-next {
+        margin-right: -10px !important;
+    }
+</style>
+<script>
+    function addCourse (data) {
         layui.use(['form'], function () {
-            var form = layui.form;
+            var form = layui.form
+            var textualImg = ''
+            //弹框
+            layer.open({
+                type: 1,
+                content: $("#addCourseTemplate").html(),
+                title: ['添加课程', 'font-size:18px;'],
+                area: ['600px', '650px'],
+                btn: ['提交', '取消']
+                , yes: function (index, layero) {
+                    var formData = form.val('addCourseForm') // 表单取值
+                    Object.assign(formData, { textualImg: textualImg })
+                    //修改操作
+                    $.post("http://localhost:8080/textual/addTextual", formData,
+                        function (data) {
+                            if ("success" == data.msg) {
+                                layer.msg(data.msg)
+                                $(".layui-laypage-btn").click()
+                                parent.layer.close(index)
+                            } else {
+                                layer.msg(data.msg)
+                            }
+                        })
+                }
+                , btn2: function (index, layero) {
+                    // alert("取消")
+                }
+            })
             $.ajax({
                 url: 'http://localhost:8080/textual/queryDir',
                 type: "get",
                 success: function (data) {
                     if (data.msg === "success") {
                         //给一个默认值（‘请选择’）
-                        var opt = '<option value="" selected=""></option>';
+                        var opt = '<option value="" selected=""></option>'
                         //获取返回的数据
-                        var value = data.data;
+                        var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
                         //循环遍历
                         for (var i in value) {
                             opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
                             console.log(value[i].dirName)
                         }
-                        $("#directorId").html(opt);
-                        form.render('select');//需要渲染一下
-
+                        $("#directorId").html(opt)
+
+                        // $.each($("#directorId").children(), function () {
+                        //     $(this).removeProp('selected')
+                        //     if ($(this).text() === data.dirName) {
+                        //         $(this).prop('selected', data.dirName)
+                        //     }
+                        // })
+                        form.render('select')//需要渲染一下
                     } else {
-                        layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                            layer.closeAll();
-                        });
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
-
                 }
-            });
-        });
-    }
-</script>
-<script type="text/html" id="addForm1">
+            })
 
-    <form class="layui-form" id="addText">
+            var swiper = new Swiper(".icon-swiper", {
+                slidesPerView: 6,
+                spaceBetween: 10,
+                slidesPerGroup: 12,
+                grid: {
+                    rows: 2,
+                },
+                pagination: {
+                    el: ".swiper-pagination",
+                    clickable: true,
+                },
+                navigation: {
+                    nextEl: ".swiper-button-next",
+                    prevEl: ".swiper-button-prev",
+                },
+            })
 
+            $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+                const parentEl = $(this).parent('.swiper-slide')
+                const siblingsEl = $(parentEl).siblings('.swiper-slide')
+                parentEl.addClass('active')
+                $.each(siblingsEl, function () {
+                    $(this).removeClass('active')
+                })
+                textualImg = $(this).attr('src')
+            })
+        })
+    }
+</script>
+<script type="text/html" id="addCourseTemplate">
+    <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
+        <!-- 把id 作为隐藏域传过去 -->
+        <input type="hidden" name="id" id="id">
         <div class="layui-form-item">
             <label class="layui-form-label">考证名称</label>
             <div class="layui-input-block">
@@ -445,13 +698,129 @@
                 </select>
             </div>
         </div>
-        <div class="layui-form-item">
+        <div class="layui-form-item" style="display: flex;flex-direction: column">
             <label class="layui-form-label">选择icon</label>
-            <div class="layui-input-block">
-                <input type="text" name="textualImg" id="textualImg" class="layui-input">
+            <div class="icon-swiper-wrap">
+                <div #swiperRef="" class="swiper icon-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/500/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/501/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/502/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/503/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/504/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/505/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/506/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/507/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/508/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/509/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/510/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/511/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/512/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/520/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/521/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/523/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/533/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/534/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/535/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/536/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/550/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/551/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/552/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/553/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/554/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/555/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/556/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/557/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/558/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/559/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/560/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/562/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/563/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/564/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/565/70/70">
+                        </div>
+                        <div class="swiper-slide">
+                            <img class="image-item" src="https://picsum.photos/id/566/70/70">
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-button-next" style="margin-right: -5px;"></div>
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-pagination"></div>
             </div>
         </div>
+        <!-- 弹框错乱，多了这个 div 闭合标签 -->
+        <!-- </div> -->
     </form>
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>