From 1b586c0c16d284dc4632ad345127376df06a3207 Mon Sep 17 00:00:00 2001 From: Default User Date: Wed, 4 Mar 2026 15:56:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=AD=BE=E5=90=8D=E5=92=8C?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BD=BF?= =?UTF-8?q?=E5=85=B6=E5=9C=A8=E5=90=8C=E4=B8=80=E8=A1=8C=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=EF=BC=8C=E5=B7=A6=E8=BE=B9=E7=AD=BE=E5=90=8D=E5=8F=B3=E8=BE=B9?= =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- certificate.html | 82 +++++++++++++++++++++++++++++------- view.html | 105 +++++++++++++++++++++++++++++++++++------------ 2 files changed, 147 insertions(+), 40 deletions(-) diff --git a/certificate.html b/certificate.html index 6b07d6b..4137e9c 100644 --- a/certificate.html +++ b/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 @@ `; + // 创建签名和二维码的容器 if (certificate.signature) { html += ` -
+
签名： -
- 签名 +
+
+ 签名 +
+
`; // 显示二维码 - const sessionId = getSessionId(); - const viewUrl = `http://8.137.125.67:3008/view.html?sessionId=${encodeURIComponent(sessionId)}`; - displayQRCodeOnPage(viewUrl); + setTimeout(() => { + const sessionId = getSessionId(); + 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元素内插入 - const certificateElement = document.querySelector('.certificate'); - if (certificateElement) { - certificateElement.appendChild(qrContainer); + // 优先插入到qrCodeContainer元素中 + const qrCodeContainer = document.getElementById('qrCodeContainer'); + if (qrCodeContainer) { + qrCodeContainer.appendChild(qrContainer); } else { - // 如果没有certificate元素，就在container末尾插入 - const container = document.querySelector('.container'); - if (container) { - container.appendChild(qrContainer); + // 如果没有qrCodeContainer元素，就在certificate元素内插入 + const certificateElement = document.querySelector('.certificate'); + if (certificateElement) { + certificateElement.appendChild(qrContainer); + } else { + // 如果都没有，就在container末尾插入 + const container = document.querySelector('.container'); + if (container) { + container.appendChild(qrContainer); + } } } } diff --git a/view.html b/view.html index 4e748e0..5e5d031 100644 --- a/view.html +++ b/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; - padding: 16px; - background-color: white; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 10px 0; + padding: 10px; + background-color: #f8f9fa; + border-radius: 6px; text-align: center; } #qrCodeDisplay h3 { color: #28a745; - margin-bottom: 15px; - font-size: 18px; + margin-bottom: 8px; + font-size: 14px; } #qrCodeImage { - max-width: 250px; - max-height: 250px; - margin-bottom: 15px; + max-width: 140px; + max-height: 140px; + margin-bottom: 8px; background-color: white; - padding: 10px; - border-radius: 8px; + padding: 6px; + 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 @@
`; + // 创建签名和二维码的容器 if (certificate.signature) { html += ` -
+
签名： -
- 签名 +
+
+ 签名 +
+
`; @@ -317,7 +362,9 @@ container.innerHTML = html; // 显示二维码 - displayQRCode(); + setTimeout(() => { + displayQRCode(); + }, 100); } // 显示二维码 @@ -387,15 +434,21 @@ qrContainer.appendChild(qrText); // 找到合适的位置插入二维码容器 - // 在certificate元素内插入 - const certificateElement = document.querySelector('.certificate'); - if (certificateElement) { - certificateElement.appendChild(qrContainer); + // 优先插入到qrCodeContainer元素中 + const qrCodeContainer = document.getElementById('qrCodeContainer'); + if (qrCodeContainer) { + qrCodeContainer.appendChild(qrContainer); } else { - // 如果没有certificate元素，就在container末尾插入 - const container = document.querySelector('.container'); - if (container) { - container.appendChild(qrContainer); + // 如果没有qrCodeContainer元素，就在certificate元素内插入 + const certificateElement = document.querySelector('.certificate'); + if (certificateElement) { + certificateElement.appendChild(qrContainer); + } else { + // 如果都没有，就在container末尾插入 + const container = document.querySelector('.container'); + if (container) { + container.appendChild(qrContainer); + } } } }