diff --git a/certificate.html b/certificate.html index 4448aaf..3a521bc 100644 --- a/certificate.html +++ b/certificate.html @@ -1134,8 +1134,8 @@ const qrContainer = document.createElement('div'); qrContainer.id = 'qrCodeDisplay'; qrContainer.style.cssText = ` - margin: 20px 16px; - padding: 16px; + margin: 12px 16px; + padding: 12px; background-color: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); @@ -1146,8 +1146,8 @@ const qrTitle = document.createElement('h3'); qrTitle.style.cssText = ` color: #28a745; - margin-bottom: 15px; - font-size: 18px; + margin-bottom: 10px; + font-size: 16px; `; qrTitle.innerHTML = '📋 合格证二维码'; @@ -1155,12 +1155,12 @@ const qrImage = document.createElement('img'); qrImage.id = 'qrCodeImage'; qrImage.style.cssText = ` - max-width: 250px; - max-height: 250px; - margin-bottom: 15px; + max-width: 180px; + max-height: 180px; + margin-bottom: 10px; background-color: white; - padding: 10px; - border-radius: 8px; + padding: 8px; + border-radius: 6px; border: 1px solid #e0e0e0; `; @@ -1168,14 +1168,14 @@ const qrText = document.createElement('div'); qrText.style.cssText = ` color: #666; - font-size: 14px; + font-size: 12px; text-align: center; - line-height: 1.5; + line-height: 1.4; `; - qrText.innerHTML = '

扫描二维码查看完整信息

长按保存二维码

'; + qrText.innerHTML = '

扫描二维码查看完整信息

长按保存二维码

'; // 使用Google Charts API生成二维码 - const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(url)}`; + const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(url)}`; qrImage.src = qrCodeUrl; // 组装容器 diff --git a/view.html b/view.html index a3ac09d..650f71c 100644 --- a/view.html +++ b/view.html @@ -337,22 +337,50 @@ // 创建二维码容器 const qrContainer = document.createElement('div'); qrContainer.id = 'qrCodeDisplay'; + qrContainer.style.cssText = ` + margin: 12px 16px; + padding: 12px; + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-align: center; + `; // 创建二维码标题 const qrTitle = document.createElement('h3'); + qrTitle.style.cssText = ` + color: #28a745; + margin-bottom: 10px; + font-size: 16px; + `; qrTitle.innerHTML = '📋 合格证二维码'; // 创建二维码图片 const qrImage = document.createElement('img'); qrImage.id = 'qrCodeImage'; - - // 使用Google Charts API生成二维码 - const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(viewUrl)}`; - qrImage.src = qrCodeUrl; + qrImage.style.cssText = ` + max-width: 180px; + max-height: 180px; + margin-bottom: 10px; + background-color: white; + padding: 8px; + border-radius: 6px; + border: 1px solid #e0e0e0; + `; // 创建提示文字 const qrText = document.createElement('div'); - qrText.innerHTML = '

扫描二维码查看完整信息

长按保存二维码

'; + qrText.style.cssText = ` + color: #666; + font-size: 12px; + text-align: center; + line-height: 1.4; + `; + qrText.innerHTML = '

扫描二维码查看完整信息

长按保存二维码

'; + + // 使用Google Charts API生成二维码 + const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(viewUrl)}`; + qrImage.src = qrCodeUrl; // 组装容器 qrContainer.appendChild(qrTitle);