'commit'

dsLightRag/static/RecognizeEduQuestionOcr.html

@@ -230,12 +230,44 @@
         }
 
         @keyframes spin {
-            0% {
-                transform: rotate(0deg);
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
-            100% {
-                transform: rotate(360deg);
+
+        /* 图片模态框样式 */
+        .modal {
+            display: none; /* 默认隐藏 */
+            position: fixed;
+            z-index: 1001; /* 确保在加载动画之上 */
+            padding-top: 50px;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.9);
         }
+
+        .modal-content {
+            margin: auto;
+            display: block;
+            max-width: 80%;
+            max-height: 80%;
+        }
+
+        .close-btn {
+            position: absolute;
+            top: 20px;
+            right: 35px;
+            color: white;
+            font-size: 40px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: 0.3s;
+        }
+
+        .close-btn:hover {
+            color: #bbb;
         }
     </style>
 </head>
@@ -254,7 +286,7 @@
             <h2>示例公式图片</h2>
             <div class="example-images">
                 <div class="example-image-card">
-                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg" alt="公式示例1">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/GongShi.jpg" alt="公式示例1" onclick="openModal(this.src)">
                     <div class="description">数学公式示例</div>
                 </div>
             </div>
@@ -280,7 +312,7 @@
             <h2>示例试题图片</h2>
             <div class="example-images">
                 <div class="example-image-card">
-                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg" alt="试题示例1">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/ShiTi.jpg" alt="试题示例1" onclick="openModal(this.src)">
                     <div class="description">试题示例</div>
                 </div>
             </div>
@@ -299,8 +331,16 @@
             </div>
         </div>
     </div>
+
+    <!-- 图片查看模态框 -->
+    <div id="imageModal" class="modal">
+        <span class="close-btn" onclick="closeModal()">&times;</span>
+        <img class="modal-content" id="modalImage">
     </div>
 
+</body>
+</html>
+
 <script>
     // MathJax 配置
     window.MathJax = {
@@ -479,6 +519,16 @@
         div.textContent = text;
         return div.innerHTML;
     }
+
+    // 图片模态框控制函数
+    function openModal(imageSrc) {
+        const modal = document.getElementById('imageModal');
+        const modalImg = document.getElementById('modalImage');
+        modal.style.display = 'block';
+        modalImg.src = imageSrc;
+    }
+
+    function closeModal() {
+        document.getElementById('imageModal').style.display = 'none';
+    }
 </script>
-</body>
-</html>