From 10da02088582cb3626915f5730f558ff61591b95 Mon Sep 17 00:00:00 2001
From: whb <17803890193@163.com>
Date: Fri, 18 Aug 2023 08:50:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=9B=AE=E5=BD=95=E7=9A=84?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/layui-v2.6.8/courseList.html    | 127 ++-
 .../templates/layui-v2.6.8/downloadList.html  | 111 ++-
 .../templates/layui-v2.6.8/inviteList.html    | 816 ++++++++++--------
 .../templates/layui-v2.6.8/serveList.html     | 147 +++-
 4 files changed, 780 insertions(+), 421 deletions(-)

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 e4680fc..c87524e 100644
--- a/src/main/resources/templates/layui-v2.6.8/courseList.html
+++ b/src/main/resources/templates/layui-v2.6.8/courseList.html
@@ -7,13 +7,44 @@
     <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>-->
-<!--        .layui-container {-->
-<!--            display: flex;-->
-<!--        }-->
-
-<!--    </style>-->
+    <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>
 
 </head>
 
@@ -236,6 +267,8 @@
 </script>
 <script>
     function addDir(data) {
+        var $ = layui.jquery
+        var dirImg = ''
         //弹框
         layer.open({
             type: 1,
@@ -246,8 +279,13 @@
 
             , yes: function (index, layero) {
                 // 获取所有图标元素
+                var dirName = $('#dirName').val()
+                var params = {
+                    dirName: dirName,
+                    dirImg: dirImg,
+                }
                 //修改操作
-                $.get("http://localhost:8080/api/course/addCourseDirectory", $("#addDirectory").serialize(),
+                $.get("http://localhost:8080/api/course/addCourseDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
                             layer.msg(data.msg);
@@ -261,17 +299,16 @@
             , btn2: function (index, layero) {
                 // alert("取消")
             }
-            });
-            var icons = document.getElementsByClassName("icon");
-            // 为每个图标添加点击事件监听器
-            Array.from(icons).forEach(function(icon) {
-                icon.addEventListener("click", function () {
-                    // 获取被点击图标的图片地址
-                    var imageUrl = icon.src;
-                    $("#dirImg").val(icon.src);
-                    console.log(imageUrl)
-                })
+        });
+        $(".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')
             })
+            dirImg = $(this).attr('src')
+        })
     }
 
 </script>
@@ -289,21 +326,45 @@
                        class="layui-input">
             </div>
         </div>
-        <div class="layui-form-item">
-            <input type="hide"   name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>
-            <div class="layui-container" id="test10">
-                <div class="layui-row">
-                    <div  name="dirImg" class="layui-col-md4" lay-event="addData">
-                        <img id="icon1" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon2" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon3" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon4" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon5" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon6" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon7" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon8" class="icon" src="./images/01.png" alt="图片1">
-                        <img id="icon9" class="icon" src="./images/01.png" alt="图片1">
-                    </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
                 </div>
             </div>
         </div>
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 4a2349f..dea72dc 100644
--- a/src/main/resources/templates/layui-v2.6.8/downloadList.html
+++ b/src/main/resources/templates/layui-v2.6.8/downloadList.html
@@ -9,6 +9,45 @@
     <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
     <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
 </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>
@@ -254,6 +293,8 @@
 
 <script>
     function addDir(data) {
+        var $ = layui.jquery
+        var dirImg = ''
         //弹框
         layer.open({
             type: 1,
@@ -261,9 +302,16 @@
             title: ['添加页面', 'font-size:18px;'],
             area: ['600px', '600px'],
             btn: ['提交', '取消']
+
             , yes: function (index, layero) {
+                // 获取所有图标元素
+                var dirName = $('#dirName').val()
+                var params = {
+                    dirName: dirName,
+                    dirImg: dirImg,
+                }
                 //修改操作
-                $.get("http://localhost:8080/download/addDownloadDirectory", $("#addDirectory").serialize(),
+                $.get("http://localhost:8080/download/addDownloadDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
                             layer.msg(data.msg);
@@ -278,6 +326,15 @@
                 // alert("取消")
             }
         });
+        $(".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')
+            })
+            dirImg = $(this).attr('src')
+        })
     }
 
 </script>
@@ -295,22 +352,48 @@
                        class="layui-input">
             </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="dirImg" id="dirImg" required lay-verify="required" autocomplete="off"
-                       class="layui-input">
+            <!--            <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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </div>
             </div>
         </div>
-<!--        <div class="layui-form-item">-->
-<!--            <label class="layui-form-label">选择icon</label>-->
-<!--            <div name="dirImg" class="layui-container" id="test10">-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--            </div>-->
-<!--            </div>-->
-<!--        </div>-->
     </form>
 </script>
 <script>
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 69b49b5..5c3950a 100644
--- a/src/main/resources/templates/layui-v2.6.8/inviteList.html
+++ b/src/main/resources/templates/layui-v2.6.8/inviteList.html
@@ -9,432 +9,528 @@
     <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 #00FFFF;*/
+            border: 3px solid #FF5722;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+            transform: rotate(135deg);
+        }
+    </style>
 </head>
 
 <body>
 
-    <table class="layui-hide" id="test" lay-filter="test"></table>
-    <script type="text/html" id="toolbarDemo">
+<table class="layui-hide" id="test" lay-filter="test"></table>
+<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="addInvite">添加招聘</button>
     </div>
 </script>
-    <script type="text/html" id="barDemo">
+<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
-    <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>
-    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
-    <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
-    <script>
-        layui.use('table', function () {
-            var table = layui.table
-            table.render({
-                elem: '#test'
-                , url: 'http://localhost:8080/api/invite/queryInvite'
-                , toolbar: '#toolbarDemo'
-                , title: '就业中心'
-                , totalRow: true
-                , parseData: function (res) {
-                    console.log('data', res)
-                    return {
-                        "code": res.code, //解析接口状态
-                        "count": res.count, //解析总页数
-                        "msg": res.msg, //解析提示文本
-                        "data": res.data.list //解析数据列表
-                    }
-                }
-                , response: {
-                    statusName: 'code', //规定返回的状态码字段为code
-                    statusCode: 200 //规定成功的状态码为200
+<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>
+<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
+<script src="https://cdn.quilljs.com/1.0.0/quill.js"></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/api/invite/queryInvite'
+            , toolbar: '#toolbarDemo'
+            , title: '就业中心'
+            , totalRow: true
+            , parseData: function (res) {
+                console.log('data', res)
+                return {
+                    "code": res.code, //解析接口状态
+                    "count": res.count, //解析总页数
+                    "msg": res.msg, //解析提示文本
+                    "data": res.data.list //解析数据列表
                 }
-                , cols: [[
-                    { type: 'checkbox', fixed: 'left' }
-                    , { field: 'id', title: '序号', width: 300, sort: true, }
-                    , { field: 'inviteName', title: '招聘名称', width: 300 }
-                    , { field: 'inviteBrief', title: '招聘简介', width: 300 }
-                    , { field: 'inviteUrl', title: '超链接', width: 300 }
-                    , { field: 'dirName', title: '归属目录', width: 300 }
-                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
-                ]]
-                , page: true
-            })
+            }
+            , response: {
+                statusName: 'code', //规定返回的状态码字段为code
+                statusCode: 200 //规定成功的状态码为200
+            }
+            , cols: [[
+                { type: 'checkbox', fixed: 'left' }
+                , { field: 'id', title: '序号', width: 300, sort: true, }
+                , { field: 'inviteName', title: '招聘名称', width: 300 }
+                , { field: 'inviteBrief', title: '招聘简介', width: 300 }
+                , { field: 'inviteUrl', 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
-                //console.log(obj)
-                if (obj.event === 'addData') {
-                    addDir(data)
-                } else if (obj.event === 'addInvite') {
-                    addInvite(data)
-                }
-            })
-
-            //监听行工具事件
-            table.on('tool(test)', function (obj) {
-                var data = obj.data
-                //console.log(obj)
-                if (obj.event === 'del') {
-                    layer.confirm('真的删除行么', function (index) {
-                        //obj.del();//删除表结构
-                        layer.close(index)
-                        //获取要删除的服务的id
-                        var deleteDownloadId = data.id
-                        $.get("http://localhost:8080/api/invite/delInviteById", { "id": deleteDownloadId }, 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)
-                            }
-                        })
+        //工具栏事件
+        table.on('toolbar(test)', function (obj) {
+            var data = obj.data
+            //console.log(obj)
+            if (obj.event === 'addData') {
+                addDir(data)
+            } else if (obj.event === 'addInvite') {
+                addInvite(data)
+            }
+        })
 
+        //监听行工具事件
+        table.on('tool(test)', function (obj) {
+            var data = obj.data
+            //console.log(obj)
+            if (obj.event === 'del') {
+                layer.confirm('真的删除行么', function (index) {
+                    //obj.del();//删除表结构
+                    layer.close(index)
+                    //获取要删除的服务的id
+                    var deleteDownloadId = data.id
+                    $.get("http://localhost:8080/api/invite/delInviteById", { "id": deleteDownloadId }, 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) {
+
+                })
+            } else if (obj.event === 'edit') {
+                selectOne(data)
+            }
+        })
+    });
+</script>
+<script>
+    function selectOne (data) {
+        layui.use(['form', 'layedit'], function () {
+            var form = layui.form
+                , layedit = layui.layedit
+                , $ = layui.jquery
+                , editorIndex
             //弹框
             layer.open({
                 type: 1,
                 content: $("#updateForm").html(),
                 title: ['修改页面', 'font-size:18px;'],
                 area: ['600px', '600px'],
-
-                //弹出后回调
-                success: function () {
-                    $("#id").val(data.id);
-                    $("#inviteName").val(data.inviteName);
-                    $("#inviteBrief").val(data.inviteBrief);
-                    $("#inviteUrl").val(data.inviteUrl);
-                    $("#dirName").val(data.dirName);
-                    //渲染页面
-                    layui.form.render();
-                },
                 btn: ['提交', '取消']
+                , success: function (layero, index) {
+                    // 添加form标识
+                    layero.addClass('layui-form')
+                    // 将保存按钮改变成提交按钮
+                    layero.find('.layui-layer-btn0').attr({
+                        'lay-filter': 'update-form1',
+                        'lay-submit': ''
+                    })
+                    form.val('updateServeForm', {
+                        "id": data.id
+                        , "inviteName": data.inviteName
+                        , "inviteBrief": data.inviteBrief
+                        , "inviteUrl": data.inviteUrl
+                        , "dirName": data.dirName
+                    });
+                    // layedit.setContent(editorIndex, data.inviteBrief, false)
+                    form.render()
+                }
                 , yes: function (index, layero) {
+                    var formData = form.val('updateServeForm') // 表单取值
+                    var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
+                    Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
+                    var params = $.param(formData) // 是否需要序列化，不需要直接用 formData
+
+                    console.log(params, inviteBrief)
+                    // $("#updateServe").serialize()
                     //修改操作
-                    $.post("http://localhost:8080/api/invite/updateById", $("#updateServe").serialize(),
-                        function (data) {
-                            if ("success" == data.msg) {
-                                layer.msg(data.msg);
-                                $(".layui-laypage-btn").click();
-                                parent.layer.close(index);
-                            } else {
-                                layer.msg(data.msg);
+                    form.on('submit(update-form1)', function (data) {
+                        $.post("http://localhost:8080/api/invite/updateById", params,
+                            function (data) {
+                                if ("success" == data.msg) {
+                                    layer.msg(data.msg)
+                                    $(".layui-laypage-btn").click()
+                                    parent.layer.close(index)
+                                } else {
+                                    layer.msg(data.msg)
+                                }
                             }
-                        });
-
+                        )
+                        return false
+                    })
                 }
                 , btn2: function (index, layero) {
                     // alert("取消")
-                }
-            });
-            layui.use(['form'], function () {
-                var form = layui.form;
-                $.ajax({
-                    url: 'http://localhost:8080/api/invite/queryInviteDirectory',
-                    type: "get",
-                    success: function (data) {
-                        if (data.msg === "success") {
-                            //给一个默认值（‘请选择’）
-                            var opt = '<option value="" selected="' + data.dirName + '"></option>';
-                            //获取返回的数据
-                            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');//需要渲染一下
-
-                        } else {
-                            layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
-                                layer.closeAll();
-                            });
+                },
+            })
+            $.ajax({
+                url: 'http://localhost:8080/api/invite/queryInviteDirectory',
+                type: "get",
+                success: function (data) {
+                    if (data.msg === "success") {
+                        //给一个默认值（‘请选择’）
+                        var opt = '<option value="" selected="' + data.dirName + '"></option>'
+                        //获取返回的数据
+                        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')//需要渲染一下
+                    } else {
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+                            layer.closeAll()
+                        })
                     }
-                });
-
-                layui.use(['form', 'layedit'], function () {
-                    var layedit = layui.layedit;
-                    /**
-                     * 自定义富文本编辑器工具栏
-                     */
-                    var layeditTool = {
-                        tool: [
-                            'strong' //加粗
-                            , 'italic' //斜体
-                            , 'underline' //下划线
-                            , 'del' //删除线
-                            , '|' //分割线
-                            , 'left' //左对齐
-                            , 'center' //居中对齐
-                            , 'right' //右对齐
-                            , '|' //分割线
-                            , 'link' //超链接
-                            , 'unlink' //清除链接
-                        ]
-                    };
-                    var editIndex  = layedit.build('inviteBrief',layeditTool);
+                }
+            })
+            /**
+             * 自定义富文本编辑器工具栏
+             */
+            var layeditTool = {
+                tool: [
+                    'strong' //加粗
+                    , 'italic' //斜体F
+                    , 'underline' //下划线
+                    , 'del' //删除线
+                    , '|' //分割线
+                    , 'left' //左对齐
+                    , 'center' //居中对齐
+                    , 'right' //右对齐
+                    , '|' //分割线
+                    , 'link' //超链接
+                    , 'unlink' //清除链接
+                ]
+            }
+            editorIndex = layedit.build('inviteBrief', layeditTool)
+            form.verify({
+                inviteName: function (value) {
+                    if (value.length < 5) {
+                        return '招聘名称至少得5个字符啊'
+                    }
+                },
+                inviteBrief: function () {
+                    var value = layedit.getContent(editorIndex)
+                    if (value.length < 5) {
+                        layedit.sync(editorIndex)
+                        return '招聘简介至少得5个字符啊'
+                    }
+                }
+            })
+        })
+    }
+</script>
+<script type="text/html" id="updateForm" >
+    <form class="layui-form" id="updateServe" lay-filter="updateServeForm">
+        <!-- 把id 作为隐藏域传过去 -->
+        <input type="hidden" name="id" id="id">
+        <div class="layui-form-item">
+            <label class="layui-form-label">招聘名称</label>
+            <div class="layui-input-block">
+                <input type="text" name="inviteName" id="inviteName" required lay-verify="required" autocomplete="off"
+                       class="layui-input">
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">招聘简介</label>
+            <div class="layui-input-block">
+                <textarea name="inviteBrief" id="inviteBrief" required lay-verify="inviteBrief" placeholder="请输入招聘简介" class="layui-textarea" style="display: none"></textarea>
+            </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">招聘链接</label>
+            <div class="layui-input-block">
+                <input type="text" name="inviteUrl" id="inviteUrl" 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>
+            </div>
+        </div>
+    </form>
+</script>
 
+<script>
+    function addDir(data) {
+        var $ = layui.jquery
+        var dirImg = ''
+        //弹框
+        layer.open({
+            type: 1,
+            content: $("#addForm").html(),
+            title: ['添加页面', 'font-size:18px;'],
+            area: ['600px', '600px'],
+            btn: ['提交', '取消']
 
-                    console.log(content,"231231")
-                    form.verify({
-                        inviteBrief: function(value){
-                            layedit.sync(editIndex);
+            , yes: function (index, layero) {
+                // 获取所有图标元素
+                var dirName = $('#dirName').val()
+                var params = {
+                    dirName: dirName,
+                    dirImg: dirImg,
+                }
+                //修改操作
+                $.get("http://localhost:8080/api/invite/addInviteDirectory", params,
+                    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("取消")
+            }
+        });
+        $(".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')
+            })
+            dirImg = $(this).attr('src')
+        })
+    }
 
-                });
+</script>
+<script type="text/html" id="addForm">
 
-            });
-        }
-    </script>
-    <script type="text/html" id="updateForm"  lay-filter="updateForm">
-        <form class="layui-form" id="updateServe">
-            <!-- 把id 作为隐藏域传过去 -->
-            <input type="hidden" name="id" id="id">
+    <form class="layui-form" id="addDirectory">
 
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘名称</label>
-                <div class="layui-input-block">
-                    <input type="text" name="inviteName" id="inviteName" required lay-verify="required" autocomplete="off"
-                        class="layui-input">
-                </div>
+        <!-- 把id 作为隐藏域传过去 -->
+        <input type="hidden" name="id" id="id">
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">目录名称</label>
+            <div class="layui-input-block">
+                <input type="text" name="dirName" id="dirName" required lay-verify="required" autocomplete="off"
+                       class="layui-input">
             </div>
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘简介</label>
-                <div class="layui-input-block">
-                    <textarea name="inviteBrief" id="inviteBrief" required lay-verify="inviteBrief" placeholder="请输入招聘简介" class="layui-textarea" style="display: none"></textarea>
+        </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">
                 </div>
-            </div>
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘链接</label>
-                <div class="layui-input-block">
-                    <input type="text" name="inviteUrl" id="inviteUrl" class="layui-input">
+                <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">
                 </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>
+                <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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
                 </div>
             </div>
-        </form>
-    </script>
-
-    <script>
-        function addDir (data) {
+        </div>
+    </form>
+</script>
+<script>
+    function addInvite (data) {
+        layui.use(['form', 'layedit'], function () {
+            var form = layui.form
+                , layedit = layui.layedit
+                , $ = layui.jquery
+                , editorIndex
             //弹框
             layer.open({
                 type: 1,
-                content: $("#addForm").html(),
-                title: ['添加页面', 'font-size:18px;'],
+                content: $("#addForm1").html(),
+                title: ['添加下载', 'font-size:18px;'],
                 area: ['600px', '600px'],
                 btn: ['提交', '取消']
+                , success: function (layero, index) {
+                    // 添加form标识
+                    layero.addClass('layui-form')
+                    // 将保存按钮改变成提交按钮
+                    layero.find('.layui-layer-btn0').attr({
+                        'lay-filter': 'add-form1',
+                        'lay-submit': ''
+                    })
+                    form.render()
+                }
                 , yes: function (index, layero) {
+                    var formData = form.val('addInviteForm') // 表单取值
+                    var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
+                    Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
+                    var params = $.param(formData) // 是否需要序列化，不需要直接用 formData
+
+                    console.log(params, inviteBrief)
+                    // 参考地址：http://layui.apixx.net/demo/form.html
+                    // $("#addInvite").serialize() 方式获取不到 form 表单 textarea name 为 inviteBrief
+                    //  的值，需要单独用 layedit 提供的方式获取，textarea 对应的 id 建议唯一区分下
                     //修改操作
-                    $.get("http://localhost:8080/api/invite/addInviteDirectory", $("#addDirectory").serialize(),
-                        function (data) {
-                            if ("success" == data.msg) {
-                                layer.msg(data.msg)
-                                $(".layui-laypage-btn").click()
-                                parent.layer.close(index)
-                            } else {
-                                layer.msg(data.msg)
+
+                    form.on('submit(add-form1)', function (data) {
+                        $.post("http://localhost:8080/api/invite/addInvite", params,
+                            function (data) {
+                                if ("success" == data.msg) {
+                                    layer.msg(data.msg)
+                                    $(".layui-laypage-btn").click()
+                                    parent.layer.close(index)
+                                } else {
+                                    layer.msg(data.msg)
+                                }
                             }
-                        })
+                        )
+                        return false
+                    })
                 }
                 , btn2: function (index, layero) {
                     // alert("取消")
                 }
             })
-        }
-
-    </script>
-    <script type="text/html" id="addForm">
-        <form class="layui-form" id="addDirectory">
-            <!-- 把id 作为隐藏域传过去 -->
-            <input type="hidden" name="id" id="id">
-
-            <div class="layui-form-item">
-                <label class="layui-form-label">目录名称</label>
-                <div class="layui-input-block">
-                    <input type="text" name="dirName" id="dirName" required lay-verify="required" autocomplete="off"
-                        class="layui-input">
-                </div>
-            </div>
-            <div class="layui-form-item">
-                <label class="layui-form-label">选择icon</label>
-                <div class="layui-input-block">
-                    <input type="text" name="dirImg" id="dirImg" required lay-verify="required" autocomplete="off"
-                        class="layui-input">
-                </div>
-            </div>
-        </form>
-    </script>
-    <script>
-        function addInvite (data) {
-            layui.use(['form', 'layedit'], function () {
-                var form = layui.form
-                    , layedit = layui.layedit
-                    , $ = layui.jquery
-                    , editorIndex
-                //弹框
-                layer.open({
-                    type: 1,
-                    content: $("#addForm1").html(),
-                    title: ['添加服务', 'font-size:18px;'],
-                    area: ['600px', '600px'],
-                    btn: ['提交', '取消']
-                    , success: function (layero, index) {
-                        // 添加form标识
-                        layero.addClass('layui-form')
-                        // 将保存按钮改变成提交按钮
-                        layero.find('.layui-layer-btn0').attr({
-                            'lay-filter': 'add-form1',
-                            'lay-submit': ''
-                        })
-                        form.render()
-                    }
-                    , yes: function (index, layero) {
-                        var formData = form.val('addInviteForm') // 表单取值
-                        var inviteBrief = layedit.getContent(editorIndex) // 富文本取值
-                        Object.assign(formData, { inviteBrief: inviteBrief }) // 合并数据
-                        var params = $.param(formData) // 是否需要序列化，不需要直接用 formData
+            // 创建富文本编辑器
+            editorIndex = layedit.build('addInviteBrief')
 
-                        console.log(params, inviteBrief)
-                        // 参考地址：http://layui.apixx.net/demo/form.html
-                        // $("#addInvite").serialize() 方式获取不到 form 表单 textarea name 为 inviteBrief
-                        //  的值，需要单独用 layedit 提供的方式获取，textarea 对应的 id 建议唯一区分下
-                        //修改操作
+            $.ajax({
+                url: 'http://localhost:8080/api/invite/queryInviteDirectory',
+                type: "get",
+                success: function (data) {
+                    if (data.msg === "success") {
+                        //给一个默认值（‘请选择’）
+                        var opt = '<option value="" selected=""></option>'
+                        //获取返回的数据
+                        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')//需要渲染一下
 
-                        form.on('submit(add-form1)', function (data) {
-                            $.post("http://localhost:8080/api/invite/addInvite", params,
-                                function (data) {
-                                    if ("success" == data.msg) {
-                                        layer.msg(data.msg)
-                                        $(".layui-laypage-btn").click()
-                                        parent.layer.close(index)
-                                    } else {
-                                        layer.msg(data.msg)
-                                    }
-                                }
-                            )
-                            return false
-                        })
-                    }
-                    , btn2: function (index, layero) {
-                        // alert("取消")
+                    } else {
+                        layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) { layer.closeAll() })
                     }
-                })
-                var layeditTool = {
-                    tool: [
-                        'strong' //加粗
-                        , 'italic' //斜体F
-                        , 'underline' //下划线
-                        , 'del' //删除线
-                        , '|' //分割线
-                        , 'left' //左对齐
-                        , 'center' //居中对齐
-                        , 'right' //右对齐
-                        , '|' //分割线
-                        , 'link' //超链接
-                        , 'unlink' //清除链接
-                    ]
                 }
-                // 创建富文本编辑器
-                editorIndex = layedit.build('inviteBrief',layeditTool)
-
-                $.ajax({
-                    url: 'http://localhost:8080/api/invite/queryInviteDirectory',
-                    type: "get",
-                    success: function (data) {
-                        if (data.msg === "success") {
-                            //给一个默认值（‘请选择’）
-                            var opt = '<option value="" selected=""></option>'
-                            //获取返回的数据
-                            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')//需要渲染一下
-
-                        } else {
-                            layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) { layer.closeAll() })
-                        }
+            })
+            form.verify({
+                inviteName: function (value) {
+                    if (value.length < 5) {
+                        return '招聘名称至少得5个字符啊'
                     }
-                })
-                form.verify({
-                    inviteName: function (value) {
-                        if (value.length < 5) {
-                            return '招聘名称至少得5个字符啊'
-                        }
-                    },
-                    inviteBrief: function () {
-                        var value = layedit.getContent(editorIndex)
-                        if (value.length < 5) {
-                            layedit.sync(editorIndex)
-                            return '招聘简介至少得5个字符啊'
-                        }
+                },
+                inviteBrief: function () {
+                    var value = layedit.getContent(editorIndex)
+                    if (value.length < 5) {
+                        layedit.sync(editorIndex)
+                        return '招聘简介至少得5个字符啊'
                     }
-                })
+                }
             })
-        }
-    </script>
+        })
+    }
+</script>
 
-    <script type="text/html" id="addForm1">
-        <form class="layui-form" id="addInvite" lay-filter="addInviteForm">
-            <!-- 把id 作为隐藏域传过去 -->
-            <input type="hidden" name="id" id="id">
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘名称</label>
-                <div class="layui-input-block">
-                    <input type="text" name="inviteName" id="inviteName" required lay-verify="inviteName" autocomplete="off"
-                        class="layui-input">
-                </div>
+<script type="text/html" id="addForm1">
+    <form class="layui-form" id="addInvite" lay-filter="addInviteForm">
+        <!-- 把id 作为隐藏域传过去 -->
+        <input type="hidden" name="id" id="id">
+        <div class="layui-form-item">
+            <label class="layui-form-label">招聘名称</label>
+            <div class="layui-input-block">
+                <input type="text" name="inviteName" id="inviteName" required lay-verify="inviteName" autocomplete="off"
+                       class="layui-input">
             </div>
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘简介</label>
-                <div class="layui-input-block">
-                    <textarea type="text" name="inviteBrief" id="inviteBrief" placeholder="请输入招聘简介" required lay-verify="inviteBrief"  class="layui-textarea" style="display: none"></textarea>
-                </div>
+        </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">招聘简介</label>
+            <div class="layui-input-block">
+                <textarea type="text" name="inviteBrief" id="addInviteBrief" placeholder="请输入招聘简介" required lay-verify="inviteBrief"  class="layui-textarea" style="display: none"></textarea>
             </div>
-            <div class="layui-form-item">
-                <label class="layui-form-label">招聘链接</label>
-                <div class="layui-input-block">
-                    <input type="text" name="inviteUrl" id="inviteUrl" 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="inviteUrl" id="inviteUrl" class="layui-input">
             </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>
-                </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>
             </div>
-        </form>
-    </script>
+        </div>
+    </form>
+</script>
 </body>
-
-</html>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/layui-v2.6.8/serveList.html b/src/main/resources/templates/layui-v2.6.8/serveList.html
index c35c07f..8095f18 100644
--- a/src/main/resources/templates/layui-v2.6.8/serveList.html
+++ b/src/main/resources/templates/layui-v2.6.8/serveList.html
@@ -8,6 +8,81 @@
     <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 #00FFFF;*/
+            border: 3px solid #FF5722;
+            border-bottom: 0;
+            border-left: 0;
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+            transform: rotate(135deg);
+        }
+    </style> <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>
 </head>
 <body>
 
@@ -256,6 +331,8 @@
 
 <script>
     function addDir(data) {
+        var $ = layui.jquery
+        var dirImg = ''
         //弹框
         layer.open({
             type: 1,
@@ -263,9 +340,16 @@
             title: ['添加页面', 'font-size:18px;'],
             area: ['600px', '600px'],
             btn: ['提交', '取消']
+
             , yes: function (index, layero) {
+                // 获取所有图标元素
+                var dirName = $('#dirName').val()
+                var params = {
+                    dirName: dirName,
+                    dirImg: dirImg,
+                }
                 //修改操作
-                $.get("http://localhost:8080/api/serve/addServiceDirectory", $("#addDirectory").serialize(),
+                $.get("http://localhost:8080/api/serve/addServiceDirectory", params,
                     function (data) {
                         if ("success" == data.msg) {
                             layer.msg(data.msg);
@@ -280,6 +364,15 @@
                 // alert("取消")
             }
         });
+        $(".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')
+            })
+            dirImg = $(this).attr('src')
+        })
     }
 
 </script>
@@ -297,22 +390,48 @@
                        class="layui-input">
             </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="dirImg" id="dirImg" required lay-verify="required" autocomplete="off"
-                       class="layui-input">
+            <!--            <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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </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">
+                </div>
             </div>
         </div>
-<!--        <div class="layui-form-item">-->
-<!--            <label class="layui-form-label">选择icon</label>-->
-<!--            <div name="dirImg" class="layui-container" id="test10">-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--                <div><img src="./images/01.png"></div>-->
-<!--            </div>-->
-<!--            </div>-->
-<!--        </div>-->
     </form>
 </script>
 <script>