修改1

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/templates/css/knowledgeField.css

@@ -118,7 +118,6 @@
   /* 限制显示2行 */
   text-overflow: ellipsis;
   /* 超出的部分显示省略号 */
-  margin-bottom: 0.625rem;
 }
 .knowledgeFieldCon .knowledgeField .knowledgeField-content .knowledgeField-content-item .textContent span {
   color: #3396fb;
@@ -228,6 +227,9 @@
   flex: 1;
   font-size: 1rem;
 }
+.knowledgeFieldCon .knowledgeDetails .knowledgeDetails-left .hypertextContent img {
+  cursor: pointer;
+}
 .knowledgeFieldCon .knowledgeDetails .knowledgeDetails-left .knowledgeDetails-left-bottom {
   padding: 1.25rem 0;
 }
@@ -423,6 +425,47 @@
   color: #fff;
   border-color: #3396fb;
 }
+.knowledgeFieldCon .modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  justify-content: center;
+  align-items: center;
+}
+.knowledgeFieldCon .modal .layout {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.knowledgeFieldCon .modal .modalImage {
+  width: 50%;
+  display: flex;
+  align-items: center;
+}
+.knowledgeFieldCon .modal .modalImage img {
+  width: 100%;
+}
+.knowledgeFieldCon .modal .prev,
+.knowledgeFieldCon .modal .next {
+  width: 1.875rem;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.knowledgeFieldCon .modal .prev img,
+.knowledgeFieldCon .modal .next img {
+  width: 100%;
+}
+.knowledgeFieldCon .modal button:disabled {
+  background: rgba(0, 0, 0, 0.2);
+  cursor: not-allowed;
+}
 body {
   background: #7b7b7b;
 }

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/templates/css/knowledgeField.less

@@ -115,7 +115,7 @@
             overflow: hidden; /* 隐藏超出的文本 */
             -webkit-line-clamp: 2; /* 限制显示2行 */
             text-overflow: ellipsis; /* 超出的部分显示省略号 */
-            margin-bottom: 0.625rem;
+            // margin-bottom: 0.625rem;
           }
           span {
             color: #3396fb;
@@ -236,6 +236,9 @@
         margin: 0 1.875rem;
         flex: 1;
         font-size: 1rem;
+        img {
+          cursor: pointer;
+        }
       }
 
       .knowledgeDetails-left-bottom {
@@ -445,6 +448,47 @@
       border-color: #3396fb;
     }
   }
+
+  .modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    .layout {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+    .modalImage {
+      width: 50%; 
+      display: flex;
+      align-items: center;
+      img {
+        width: 100%;
+      }
+    }
+    .prev, .next {
+      width: 1.875rem;
+      cursor: pointer;
+      background: none;
+      border: 0;
+      img {
+        width: 100%;
+      }
+    }
+
+    button:disabled {
+      background: rgba(0, 0, 0, 0.2);
+      cursor: not-allowed;
+    }
+  }
 }
 
 body {

fhKeeper/formulahousekeeper/webttkuaiban/src/main/resources/templates/knowledgeDetails.ftl

@@ -122,6 +122,20 @@
         </div>
       </div>
     </div>
+
+    <div class="modal" id="imageModal">
+      <div class="layout" id="modalLayout>
+        <button class="prev" id="prevBtn">
+          <img src="/image/customer/zuo.png" />
+        </button>
+        <div class="modalImage">
+          <img id="modalImage" src="" alt="Preview">
+        </div>
+        <button class="next" id="nextBtn">
+          <img src="/image/customer/you.png" />
+        </button>
+      </div>
+    </div>
   </div>
 </body>
 <script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
@@ -193,5 +207,43 @@
       }
   }
   reinitIframe()
+
+  $(document).ready(function() {
+    const images = $('#hypertextContent img');
+
+    images.on('click', function() {
+      currentImageIndex = images.index(this); 
+      $('#modalImage').attr('src', $(this).attr('src'));
+      $('#imageModal').fadeIn();
+      updateButtons();
+    });
+
+    $('#prevBtn').on('click', function() {
+      if (currentImageIndex > 0) {
+        currentImageIndex--;
+        $('#modalImage').attr('src', $(images[currentImageIndex]).attr('src'));
+        updateButtons();
+      }
+    });
+
+    $('#nextBtn').on('click', function() {
+      if (currentImageIndex < images.length - 1) {
+        currentImageIndex++;
+        $('#modalImage').attr('src', $(images[currentImageIndex]).attr('src'));
+        updateButtons();
+      }
+    });
+
+    function updateButtons() {
+      $('#prevBtn').prop('disabled', currentImageIndex === 0);
+      $('#nextBtn').prop('disabled', currentImageIndex === images.length - 1);
+    }
+
+    $('#modalLayout').on('click', function(event) {
+      if ($(event.target).is('#modalLayout')) {
+        $('#imageModal').fadeOut();
+      }
+    });
+  });
 </script>
 </html>