SwtTt29
/
Personal-Review
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

压缩二维码大小和空间，确保一个屏幕显示所有信息

master
Default User 3 days ago
parent
032795405a
commit
6e4fd5dac6
2 changed files with 28 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      certificate.html
  2. 28
      view.html

28
certificate.html
View File

@ -1134,10 +1134,10 @@
const qrContainer = document.createElement('div'); const qrContainer = document.createElement('div');
qrContainer.id = 'qrCodeDisplay'; qrContainer.id = 'qrCodeDisplay';
qrContainer.style.cssText = ` qrContainer.style.cssText = `
margin: 20px 0 10px; margin: 10px 0;
padding: 16px; padding: 10px;
background-color: #f8f9fa; background-color: #f8f9fa;
border-radius: 8px; border-radius: 6px;
text-align: center; text-align: center;
`; `;
@ -1145,8 +1145,8 @@
const qrTitle = document.createElement('h3'); const qrTitle = document.createElement('h3');
qrTitle.style.cssText = ` qrTitle.style.cssText = `
color: #28a745; color: #28a745;
margin-bottom: 10px; margin-bottom: 8px;
font-size: 16px; font-size: 14px;
`; `;
qrTitle.innerHTML = '📋 合格证二维码'; qrTitle.innerHTML = '📋 合格证二维码';
@ -1154,12 +1154,12 @@
const qrImage = document.createElement('img'); const qrImage = document.createElement('img');
qrImage.id = 'qrCodeImage'; qrImage.id = 'qrCodeImage';
qrImage.style.cssText = ` qrImage.style.cssText = `
max-width: 180px; max-width: 140px;
max-height: 180px; max-height: 140px;
margin-bottom: 10px; margin-bottom: 8px;
background-color: white; background-color: white;
padding: 8px; padding: 6px;
border-radius: 6px; border-radius: 4px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
`; `;
@ -1167,14 +1167,14 @@
const qrText = document.createElement('div'); const qrText = document.createElement('div');
qrText.style.cssText = ` qrText.style.cssText = `
color: #666; color: #666;
font-size: 12px; font-size: 11px;
text-align: center; text-align: center;
line-height: 1.4; line-height: 1.3;
`; `;
qrText.innerHTML = '<p style="margin-bottom: 4px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; qrText.innerHTML = '<p style="margin-bottom: 2px;">扫描查看完整信息</p><p>长按保存二维码</p>';
// 使用Google Charts API生成二维码 // 使用Google Charts API生成二维码
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(url)}`; const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(url)}`;
qrImage.src = qrCodeUrl; qrImage.src = qrCodeUrl;
// 组装容器 // 组装容器

28
view.html
View File

@ -338,10 +338,10 @@
const qrContainer = document.createElement('div'); const qrContainer = document.createElement('div');
qrContainer.id = 'qrCodeDisplay'; qrContainer.id = 'qrCodeDisplay';
qrContainer.style.cssText = ` qrContainer.style.cssText = `
margin: 20px 0 10px; margin: 10px 0;
padding: 16px; padding: 10px;
background-color: #f8f9fa; background-color: #f8f9fa;
border-radius: 8px; border-radius: 6px;
text-align: center; text-align: center;
`; `;
@ -349,8 +349,8 @@
const qrTitle = document.createElement('h3'); const qrTitle = document.createElement('h3');
qrTitle.style.cssText = ` qrTitle.style.cssText = `
color: #28a745; color: #28a745;
margin-bottom: 10px; margin-bottom: 8px;
font-size: 16px; font-size: 14px;
`; `;
qrTitle.innerHTML = '📋 合格证二维码'; qrTitle.innerHTML = '📋 合格证二维码';
@ -358,12 +358,12 @@
const qrImage = document.createElement('img'); const qrImage = document.createElement('img');
qrImage.id = 'qrCodeImage'; qrImage.id = 'qrCodeImage';
qrImage.style.cssText = ` qrImage.style.cssText = `
max-width: 180px; max-width: 140px;
max-height: 180px; max-height: 140px;
margin-bottom: 10px; margin-bottom: 8px;
background-color: white; background-color: white;
padding: 8px; padding: 6px;
border-radius: 6px; border-radius: 4px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
`; `;
@ -371,14 +371,14 @@
const qrText = document.createElement('div'); const qrText = document.createElement('div');
qrText.style.cssText = ` qrText.style.cssText = `
color: #666; color: #666;
font-size: 12px; font-size: 11px;
text-align: center; text-align: center;
line-height: 1.4; line-height: 1.3;
`; `;
qrText.innerHTML = '<p style="margin-bottom: 4px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; qrText.innerHTML = '<p style="margin-bottom: 2px;">扫描查看完整信息</p><p>长按保存二维码</p>';
// 使用Google Charts API生成二维码 // 使用Google Charts API生成二维码
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(viewUrl)}`; const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=140x140&data=${encodeURIComponent(viewUrl)}`;
qrImage.src = qrCodeUrl; qrImage.src = qrCodeUrl;
// 组装容器 // 组装容器

Write Preview
Loading…
Cancel
Save