修改签名和二维码布局，使其在同一行显示，左边签名右边二维码

certificate.html

@@ -395,6 +395,48 @@
       background-color: white;
     }
 
+    /* 签名和二维码同行显示样式 */
+    .signature-qr-container {
+      align-items: flex-start;
+    }
+
+    .signature-qr-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      flex-wrap: wrap;
+    }
+
+    .signature-qr-content .signature-display {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .signature-qr-content #qrCodeContainer {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .signature-qr-content #qrCodeDisplay {
+      margin: 0;
+      padding: 8px;
+    }
+
+    .signature-qr-content #qrCodeImage {
+      max-width: 120px;
+      max-height: 120px;
+    }
+
+    .signature-qr-content #qrCodeDisplay h3 {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    .signature-qr-content #qrCodeDisplay div {
+      font-size: 10px;
+    }
+
     /* 签名弹窗样式 */
     .signature-modal {
       display: none;
@@ -748,20 +790,26 @@
         </div>
       `;
       
+      // 创建签名和二维码的容器
       if (certificate.signature) {
         html += `
-          <div class="info-item">
+          <div class="info-item signature-qr-container">
             <span class="label">签名：</span>
-            <div class="signature-display">
+            <div class="signature-qr-content">
-              <img src="${certificate.signature}" alt="签名" style="max-width: 200px; max-height: 100px;">
+              <div class="signature-display">
+                <img src="${certificate.signature}" alt="签名" style="max-width: 150px; max-height: 80px;">
+              </div>
+              <div id="qrCodeContainer"></div>
             </div>
           </div>
         `;
         
         // 显示二维码
-        const sessionId = getSessionId();
+        setTimeout(() => {
-        const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`;
+          const sessionId = getSessionId();
-        displayQRCodeOnPage(viewUrl);
+          const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`;
+          displayQRCodeOnPage(viewUrl);
+        }, 100);
       }
       
       container.innerHTML = html;
@@ -1183,15 +1231,21 @@
       qrContainer.appendChild(qrText);
       
       // 找到合适的位置插入二维码容器
-      // 在certificate元素内插入
+      // 优先插入到qrCodeContainer元素中
-      const certificateElement = document.querySelector('.certificate');
+      const qrCodeContainer = document.getElementById('qrCodeContainer');
-      if (certificateElement) {
+      if (qrCodeContainer) {
-        certificateElement.appendChild(qrContainer);
+        qrCodeContainer.appendChild(qrContainer);
       } else {
-        // 如果没有certificate元素，就在container末尾插入
+        // 如果没有qrCodeContainer元素，就在certificate元素内插入
-        const container = document.querySelector('.container');
+        const certificateElement = document.querySelector('.certificate');
-        if (container) {
+        if (certificateElement) {
-          container.appendChild(qrContainer);
+          certificateElement.appendChild(qrContainer);
+        } else {
+          // 如果都没有，就在container末尾插入
+          const container = document.querySelector('.container');
+          if (container) {
+            container.appendChild(qrContainer);
+          }
         }
       }
     }

view.html

@@ -141,37 +141,78 @@
       background-color: white;
     }
 
+    /* 签名和二维码同行显示样式 */
+    .signature-qr-container {
+      align-items: flex-start;
+    }
+
+    .signature-qr-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+      flex-wrap: wrap;
+    }
+
+    .signature-qr-content .signature-display {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .signature-qr-content #qrCodeContainer {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .signature-qr-content #qrCodeDisplay {
+      margin: 0;
+      padding: 8px;
+    }
+
+    .signature-qr-content #qrCodeImage {
+      max-width: 120px;
+      max-height: 120px;
+    }
+
+    .signature-qr-content #qrCodeDisplay h3 {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+
+    .signature-qr-content #qrCodeDisplay div {
+      font-size: 10px;
+    }
+
     /* 二维码展示样式 */
     #qrCodeDisplay {
-      margin: 20px 16px;
+      margin: 10px 0;
-      padding: 16px;
+      padding: 10px;
-      background-color: white;
+      background-color: #f8f9fa;
-      border-radius: 8px;
+      border-radius: 6px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       text-align: center;
     }
 
     #qrCodeDisplay h3 {
       color: #28a745;
-      margin-bottom: 15px;
+      margin-bottom: 8px;
-      font-size: 18px;
+      font-size: 14px;
     }
 
     #qrCodeImage {
-      max-width: 250px;
+      max-width: 140px;
-      max-height: 250px;
+      max-height: 140px;
-      margin-bottom: 15px;
+      margin-bottom: 8px;
       background-color: white;
-      padding: 10px;
+      padding: 6px;
-      border-radius: 8px;
+      border-radius: 4px;
       border: 1px solid #e0e0e0;
     }
 
     #qrCodeDisplay div {
       color: #666;
-      font-size: 14px;
+      font-size: 11px;
       text-align: center;
-      line-height: 1.5;
+      line-height: 1.3;
     }
 
     .footer {
@@ -303,12 +344,16 @@
         </div>
       `;
       
+      // 创建签名和二维码的容器
       if (certificate.signature) {
         html += `
-          <div class="info-item">
+          <div class="info-item signature-qr-container">
             <span class="label">签名：</span>
-            <div class="signature-display">
+            <div class="signature-qr-content">
-              <img src="${certificate.signature}" alt="签名">
+              <div class="signature-display">
+                <img src="${certificate.signature}" alt="签名" style="max-width: 150px; max-height: 80px;">
+              </div>
+              <div id="qrCodeContainer"></div>
             </div>
           </div>
         `;
@@ -317,7 +362,9 @@
       container.innerHTML = html;
       
       // 显示二维码
-      displayQRCode();
+      setTimeout(() => {
+        displayQRCode();
+      }, 100);
     }
     
     // 显示二维码
@@ -387,15 +434,21 @@
       qrContainer.appendChild(qrText);
       
       // 找到合适的位置插入二维码容器
-      // 在certificate元素内插入
+      // 优先插入到qrCodeContainer元素中
-      const certificateElement = document.querySelector('.certificate');
+      const qrCodeContainer = document.getElementById('qrCodeContainer');
-      if (certificateElement) {
+      if (qrCodeContainer) {
-        certificateElement.appendChild(qrContainer);
+        qrCodeContainer.appendChild(qrContainer);
       } else {
-        // 如果没有certificate元素，就在container末尾插入
+        // 如果没有qrCodeContainer元素，就在certificate元素内插入
-        const container = document.querySelector('.container');
+        const certificateElement = document.querySelector('.certificate');
-        if (container) {
+        if (certificateElement) {
-          container.appendChild(qrContainer);
+          certificateElement.appendChild(qrContainer);
+        } else {
+          // 如果都没有，就在container末尾插入
+          const container = document.querySelector('.container');
+          if (container) {
+            container.appendChild(qrContainer);
+          }
         }
       }
     }