手机端

certs/certificate.html

@@ -41,8 +41,28 @@
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             margin-bottom: 40px;
             display: flex; justify-content: center;
+            cursor: pointer;
+            position: relative;
+            min-height: 400px;
+            align-items: center;
         }
         #cert-img { width: 100%; height: auto; display: none; }
+        
+        /* 点击加载提示 */
+        .click-hint {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            color: #64748b;
+            font-size: 16px;
+        }
+        .click-hint-icon {
+            font-size: 48px;
+            margin-bottom: 10px;
+            color: var(--primary);
+        }
 
         /* 详细信息表卡片 */
         .info-card {
@@ -109,8 +129,12 @@
     </div>
 
     <div class="main-content">
-        <div id="cert-viewport">
+        <div id="cert-viewport" onclick="loadCertificateImage()">
             <img id="cert-img" alt="荣誉证书原件">
+            <div class="click-hint" id="click-hint">
+                <div class="click-hint-icon">🖼️</div>
+                <div>点击查看证书图片</div>
+            </div>
         </div>
 
         <div class="info-card" id="info-card" style="display: none;">
@@ -172,10 +196,8 @@
                     document.getElementById('display-status').innerHTML = '<span class="status-tag">无效</span>';
                 }
 
-                // 加载图片
-                const img = document.getElementById('cert-img');
-                img.src = `img/${data.cert_number}.svg`;
-                img.onload = () => img.style.display = 'block';
+                // 图片改为点击加载，初始不加载
+                window.currentCertNumber = data.cert_number;
 
             } catch (e) {
                 console.error("加载失败:", e);
@@ -183,7 +205,40 @@
             }
         }
 
+        // 点击加载证书图片
+        function loadCertificateImage() {
+            const certNumber = window.currentCertNumber;
+            if (!certNumber) return;
+            
+            const img = document.getElementById('cert-img');
+            const hint = document.getElementById('click-hint');
+            
+            // 如果图片已加载，直接显示
+            if (img.src && img.complete) {
+                img.style.display = 'block';
+                if (hint) hint.style.display = 'none';
+                return;
+            }
+            
+            // 加载中提示
+            if (hint) {
+                hint.innerHTML = '<div class="click-hint-icon">⏳</div><div>图片加载中...</div>';
+            }
+            
+            img.src = `img/${certNumber}.svg`;
+            img.onload = () => {
+                img.style.display = 'block';
+                if (hint) hint.style.display = 'none';
+            };
+            img.onerror = () => {
+                if (hint) {
+                    hint.innerHTML = '<div class="click-hint-icon">❌</div><div>图片加载失败</div>';
+                }
+            };
+        }
+
         loadData();
+
     </script>
     <script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
 </body>

certs/index.html

@@ -299,7 +299,7 @@
                         <tr>
                             <th>证书编号</th>
                             <th>持有人</th>
-                            <th class="hide-on-mobile">荣誉标题</th>
+                            <th>荣誉标题</th>
                             <th>颁发日期</th>
                             <th>操作</th>
                         </tr>
@@ -312,7 +312,7 @@
                 <tr>
                     <td><strong>${item.cert_number}</strong></td>
                     <td>${item.holder_name}</td>
-                    <td class="hide-on-mobile">${item.honor_title}</td>
+                    <td>${item.honor_title}</td>
                     <td>${item.issue_date || '-'}</td>
                     <td><a class="btn-link" onclick="goToDetail('${item.id}')">详情</a></td>
                 </tr>