From 7a7dd4480a52aa290e5b6c8505d0dcedad14f16d Mon Sep 17 00:00:00 2001
From: qzysz <16602114135@126.com>
Date: Tue, 24 Dec 2024 10:43:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/information/informationView.html   | 235 +++++++++++++-----
 .../templates/system/meeting/add.html         |   8 +-
 .../templates/system/meeting/meetingView.html |  42 ++--
 3 files changed, 193 insertions(+), 92 deletions(-)

diff --git a/rwk-admin/src/main/resources/templates/system/information/informationView.html b/rwk-admin/src/main/resources/templates/system/information/informationView.html
index be193f8..2d67880 100644
--- a/rwk-admin/src/main/resources/templates/system/information/informationView.html
+++ b/rwk-admin/src/main/resources/templates/system/information/informationView.html
@@ -44,16 +44,22 @@
             padding: 20px;
         }
         .piece .content {
-            width: 75%;
+            width: 78%;
             max-height: 500px;
             box-sizing: border-box;
-            overflow-y: auto; /* 超出内容出现滚动条 */
-            border-right: 1px solid #ccc; /* 右边框 */
-            scrollbar-width: thin; /* Firefox: 设置滚动条宽度为细 */
-            scrollbar-color: #888 #f1f1f1; /* Firefox: 滚动条颜色和背景颜色 */
+            overflow-y: auto;
+            overflow-x: hidden;
+            border-right: 1px solid #ccc;
+            scrollbar-width: thin;
+            scrollbar-color: #888 #f1f1f1;
+        }
+        .piece .content .informationText {
+            padding: 20px;
+            word-wrap: break-word;
+            white-space: normal;
         }
         .piece .sidebar {
-            width: 25%;
+            width: 22%;
             max-height: 500px;
             padding: 10px 10px 10px 40px;
             position: relative;
@@ -68,27 +74,58 @@
             position: absolute;
             width: 0;
             height: 0;
-            border-left: 16px solid blue; /* 三角形底部为左 */
+            border-left: 16px solid blue;
             border-right: 16px solid transparent;
             border-top: 8px solid transparent;
             border-bottom: 8px solid transparent;
-            left: 10px; /* 三角形位置 */
-            top: 21px; /* 默认位置 */
-            transition: top 0.3s; /* 动画效果 */
+            left: 10px;
+            top: 21px;
+            transition: top 0.3s;
         }
         .sidebar .active {
             color: blue;
         }
-        /* 自定义滚动条样式 */
         .piece .content::-webkit-scrollbar {
-            width: 6px; /* 设置更细的滚动条宽度 */
+            width: 6px;
         }
         .piece .content::-webkit-scrollbar-thumb {
-            background: #888; /* 滚动条颜色 */
-            border-radius: 10px; /* 滚动条圆角 */
+            background: #888;
+            border-radius: 10px;
         }
         .piece .content::-webkit-scrollbar-thumb:hover {
-            background: #555; /* 滚动条悬停颜色 */
+            background: #555;
+        }
+        .multiLine-item {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+            padding: 5px 0;
+        }
+        .multiLine-item .left-content {
+            flex: 0 0 180px;
+            min-width: 180px;
+            padding-right: 15px;
+        }
+        .multiLine-item .right-content {
+            flex: 1;
+            word-break: break-all;
+            padding-left: 15px;
+        }
+        .informationText table {
+            table-layout: fixed;
+            border-collapse: collapse;
+        }
+        .informationText table th,
+        .informationText table td {
+            padding: 8px;
+            word-wrap: break-word;
+            white-space: normal;
+        }
+        .bg-color-1 {
+            background-color: #f9f9f9;
+        }
+        .bg-color-2 {
+            background-color: #ffffff;
         }
     </style>
 </head>
@@ -207,7 +244,7 @@
         </div>
         <div class="piece" style="font-size: 16px;">
             <div style="display: flex;">
-                <div class="marks"></div><h3>学历&nbsp;&nbsp;学位</h3><span style="flex: 0 0 calc(64% - 20px);" class="line"></span>
+                <div class="marks"></div><h3>学历&nbsp;&nbsp;���位</h3><span style="flex: 0 0 calc(64% - 20px);" class="line"></span>
             </div>
             <div style="margin-left: 40px;border-bottom: 1px dashed #DBDBDB;width: 75%;">
                 <h3>全日制教育</h3>
@@ -252,10 +289,13 @@
                             <div class="marks"></div><h3>简历</h3><span class="line"></span>
                         </div>
                         <div class="informationText">
-                            <div th:if="${#lists.size(resumeLines) > 0}" th:each="line1, iterStat1 : ${resumeLines}"
+                            <div th:if="${#lists.size(resumeLines) > 0}" 
+                                 th:each="line1, iterStat1 : ${resumeLines}"
                                  th:class="${iterStat1.even} ? 'multiLine-item bg-color-1' : 'multiLine-item bg-color-2'">
                                 <div th:each="line2,iterStat2:${line1}"
-                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
+                                     th:class="${iterStat2.index == 0} ? 'left-content' : 'right-content'" 
+                                     th:text="${line2}">
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -266,7 +306,7 @@
                         <div class="informationText">
                             <div th:if="${#lists.size(trainingLines) > 0}" th:each="line1 : ${trainingLines}" class="multiLine-item">
                                 <div th:each="line2,iterStat2:${line1}"
-                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
+                                     th:class="${iterStat2.index == 0} ? 'left-content' : 'right-content'" th:text="${line2}"></div>
                             </div>
                             <div th:if="${#lists.size(rwkMeetingList) > 0}" th:each="rwkMeeting : ${rwkMeetingList}" style="padding: 10px;width: 100%;">
                                 <div style="font-size: 25px;" th:text="${rwkMeeting.meetingName}"></div>
@@ -282,7 +322,7 @@
                         <div class="informationText">
                             <div th:if="${#lists.size(achievementLines) > 0}" th:each="line1 : ${achievementLines}" class="multiLine-item">
                                 <div th:each="line2,iterStat2:${line1}"
-                                     th:class="${iterStat2.even} ? 'right-content' : 'left-content'" th:text="${line2}"></div>
+                                     th:class="${iterStat2.index == 0} ? 'left-content' : 'right-content'" th:text="${line2}"></div>
                             </div>
                         </div>
                     </div>
@@ -325,74 +365,131 @@
 <th:block th:include="include :: footer" />
 <script th:inline="javascript">
     var prefix = ctx + "system/information";
-    rollingLinkage();
-    init();
-    //数据进行初始化加载
-    function init(){
-        // 初始化时设置第一个标题为激活状态
+    
+    $(document).ready(function() {
+        init();
+        rollingLinkage();
+    });
+
+    // 初始化
+    function init() {
         $('.sidebar .title').first().addClass('active');
-        // 初始化箭头位置
         var arrow = $("#arrow");
         arrow.css('top', $('.sidebar .title').first().position().top + 11);
     }
 
-    function rollingLinkage(){
-        // 点击事件
+    function rollingLinkage() {
         var arrow = $("#arrow");
-        $('.sidebar .title').click(function() {
-            const target = $(this).data('target');
-            const targetElement = $(target);
-            let scrollPosition = 0;
-            // 计算目标标签之前的所有兄弟标签的高度
-            targetElement.prevAll().each(function() {
-                scrollPosition += parseInt($(this).css("height"));
+        var content = $('#content');
+        var titles = $('.sidebar .title');
+        var sections = $('.section');
+        var sectionPositions = [];
+        var isScrolling = false; // 添加标志位判断是否是点击导航触发的滚动
+
+        // 计算每个section的位置
+        function calculatePositions() {
+            sectionPositions = [];
+            sections.each(function() {
+                var $section = $(this);
+                var offsetTop = 0;
+                // 计算相对于content的实际偏移量
+                $section.prevAll('.section').each(function() {
+                    offsetTop += $(this).outerHeight(true);
+                });
+                
+                sectionPositions.push({
+                    id: $section.attr('id'),
+                    top: offsetTop,
+                    bottom: offsetTop + $section.outerHeight(true)
+                });
+            });
+        }
+
+        // 初始计算位置
+        calculatePositions();
+
+        // 点击导航事件
+        titles.click(function() {
+            var targetId = $(this).data('target').substring(1); // 移除#号
+            var targetPosition = 0;
+            
+            // 查找目标section的位置
+            sectionPositions.forEach(function(section) {
+                if (section.id === targetId) {
+                    targetPosition = section.top;
+                }
+            });
+
+            // 更新导航状态
+            titles.removeClass('active');
+            $(this).addClass('active');
+            
+            // 更新箭头位置
+            arrow.css('top', $(this).position().top + 11);
+            
+            // 设置滚动标志
+            isScrolling = true;
+            
+            // 平滑滚动到目标位置
+            content.animate({
+                scrollTop: targetPosition
+            }, 300, function() {
+                // 滚动完成后重置标志
+                setTimeout(function() {
+                    isScrolling = false;
+                }, 50);
             });
-            // 移动箭头
-            const newArrowPosition = $(this).position().top + 11; // 更新箭头位置
-            arrow.css('top', newArrowPosition); // 更新箭头位置
-            $('.sidebar .title').removeClass('active'); // 移除所有标题的选中状态
-            $(this).addClass('active'); // 设置当前标题为选中状态
-            // 滚动左侧区域到目标内容
-            $('#content').animate({
-                scrollTop: scrollPosition
-            }, 300); // 动画效果
         });
 
         // 滚动事件
-        $('#content').scroll(function() {
-            var scrollTop = $(this).scrollTop();
-            var titles = $('.sidebar .title');
-            var contentHeight = $('#content').height();
-            var contentScrollHeight = $('#content')[0].scrollHeight;
-            var lastTitle = titles.last();
+        content.scroll(function() {
+            // 如果是点击导航触发的滚动，不处理
+            if (isScrolling) return;
 
-            titles.each(function() {
-                var target = $(this).data('target');
-                var targetElement = $(target);
-                var targetTop = targetElement.position().top;
-                var targetHeight = targetElement.outerHeight();
+            var scrollTop = $(this).scrollTop();
+            var contentHeight = $(this).height();
+            var scrollPosition = scrollTop + (contentHeight * 0.3); // 使用30%视口高度作为触发点
 
-                if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
-                    titles.removeClass('active');
-                    $(this).addClass('active');
-                    // 移动箭头
-                    var newArrowPosition = $(this).position().top + 11;
-                    arrow.css('top', newArrowPosition);
-                    return false; // 停止遍历
+            // 找到当前滚动位置对应的section
+            var currentSection = null;
+            
+            sectionPositions.forEach(function(section) {
+                if (scrollPosition >= section.top && scrollPosition < section.bottom) {
+                    currentSection = section.id;
                 }
             });
 
-            // 如果滚动到底部且最后一个标题未被激活，则激活最后一个标题
-            if (scrollTop + contentHeight >= contentScrollHeight - 10) {
+            // 如果滚动到底部，激活最后一个导航
+            if (scrollTop + contentHeight >= content[0].scrollHeight - 20) {
+                currentSection = sections.last().attr('id');
+            }
+
+            // 更新导航状态
+            if (currentSection) {
                 titles.removeClass('active');
-                lastTitle.addClass('active');
-                // 移动箭头
-                var newArrowPosition = lastTitle.position().top + 11;
-                arrow.css('top', newArrowPosition);
+                var activeTitle = titles.filter('[data-target="#' + currentSection + '"]');
+                activeTitle.addClass('active');
+                arrow.css('top', activeTitle.position().top + 11);
             }
         });
-    }
 
+        // 监听窗口大小变化，重新计算位置
+        $(window).resize(function() {
+            calculatePositions();
+        });
+
+        // 监听内容变化
+        var observer = new MutationObserver(function() {
+            calculatePositions();
+        });
+
+        // 观察content内容变化
+        observer.observe(content[0], {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/rwk-admin/src/main/resources/templates/system/meeting/add.html b/rwk-admin/src/main/resources/templates/system/meeting/add.html
index f0c048c..b2a139a 100644
--- a/rwk-admin/src/main/resources/templates/system/meeting/add.html
+++ b/rwk-admin/src/main/resources/templates/system/meeting/add.html
@@ -40,8 +40,8 @@
         <div class="col-md-12">
             <div class="daj_middle">
                 <label class="daj_left_two control-label">附件</label>
-                <div class="daj_right_two fj_box1">
-                    <div style="height: 43px;width: 100%;margin-top: 3px;">
+                <div class="daj_right_two fj_box1" style="border: none;">
+                    <div style="height: 42px;width: 100%;border: none;display: flex;align-items: center;">
                         <input name="fj" type="button"  class="fj_btn" onclick="uploadModal()">
                         <input type="file" name="fileUpload_l" id="fileUpload_l" onchange="uploadFile()" style="display:none;" accept=".pdf,.ofd,.txt,.wps,.xlsx,.xls,.pub,.docx,.doc,.xml,.jpg,.png">
                     </div>
@@ -52,8 +52,8 @@
             <div class="daj_middle">
                 <label class="daj_left_two control-label"></label>
                 <div class="daj_right_two fj_box1" style="min-height:47px;height: auto;">
-                    <div class="table-container">
-                    <table id="table-show" class="table table-hover"  style="margin-bottom: 10px;">
+                    <div class="table-container" style="border: none;">
+                    <table id="table-show" class="table table-hover" >
                         <tbody id="filetb">
 <!--                        <tr>-->
 <!--                            <td class="width-40"><img src="/img/use/filelook.png" />厨房零配件维修清单及报价(三月至五月).docx</td>-->
diff --git a/rwk-admin/src/main/resources/templates/system/meeting/meetingView.html b/rwk-admin/src/main/resources/templates/system/meeting/meetingView.html
index 8245c2f..e1b31cf 100644
--- a/rwk-admin/src/main/resources/templates/system/meeting/meetingView.html
+++ b/rwk-admin/src/main/resources/templates/system/meeting/meetingView.html
@@ -4,6 +4,15 @@
     <th:block th:include="include :: header('培训人员详情')" />
     <link th:href="@{/css/use/css1.css}" rel="stylesheet"/>
     <link th:href="@{/ruoyi/css/meeting.css}" rel="stylesheet"/>
+    <style>
+        /* 左右表格容器样式 */
+        .table-container {
+            overflow-y: auto;
+            border: 1px solid #d7dff2;
+            height: calc(100vh - 250px);
+            min-height: 400px;
+        }
+    </style>
 </head>
 <body class="white-bg">
 <div class="wrapper wrapper-content animated fadeInRight ibox-content meeting-content">
@@ -12,7 +21,7 @@
             <div class="daj_middle">
                 <label class="daj_left_two control-label"><span class="specialSign">*</span>活动标题</label>
                 <div class="daj_right_two">
-                    <input name="meetingName" class="form-control daj_frame" th:field="*{meetingName}" placeholder="请填写培训活动标题" readonly>
+                    <input name="meetingName" class="form-control daj_frame" th:field="*{meetingName}" placeholder="请填写培训活动���" readonly>
                 </div>
             </div>
         </div>
@@ -43,26 +52,21 @@
                     <div style="display: flex;">
                         <div style="width: 50%;margin-right: 20px;">
                             <div class="table-container">
-                            <table class="userTable">
-                                <tr>
-                                    <th>姓名</th>
-                                    <th>签到情况</th>
-                                    <th>手机号</th>
-                                </tr>
-                                <tr>
-                                    <td>张三</td>
-                                    <td>已签到</td>
-                                    <td>手机号测试</td>
-                                </tr>
-                            </table>
+                                <table class="userTable">
+                                    <tr>
+                                        <th>姓名</th>
+                                        <th>签到情况</th>
+                                        <th>手机号</th>
+                                    </tr>
+                                </table>
                             </div>
                         </div>
-                        <div style="width: 50%;border: 1px solid #d7dff2;">
+                        <div style="width: 50%;">
                             <div class="table-container">
-                            <table  class="table table-hover"  style="margin-bottom: 10px; height: 300px; overflow-y: auto;">
-                                <tbody id="table-show">
-                                </tbody>
-                            </table>
+                                <table class="table table-hover" style="margin-bottom: 0;">
+                                    <tbody id="table-show">
+                                    </tbody>
+                                </table>
                             </div>
                         </div>
                     </div>
@@ -95,7 +99,7 @@
         $(".progress-bar.progress-bar-success").css("width",Math.floor((signedInCount/totalInvited)*100)+"%");
     }
 
-    //受邀人员展示
+    //受邀人员示
     function peopleShow(data){
         var html = "<tr>\n" +
             "    <th>姓名</th>\n" +