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

调整二维码大小和样式，确保在一个屏幕内显示完整信息

master
Default User 3 days ago
parent
5d00693991
commit
3b8baa0d6a
2 changed files with 46 additions and 18 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. 26
      certificate.html
  2. 38
      view.html

26
certificate.html
View File

@ -1134,8 +1134,8 @@
const qrContainer = document.createElement('div'); const qrContainer = document.createElement('div');
qrContainer.id = 'qrCodeDisplay'; qrContainer.id = 'qrCodeDisplay';
qrContainer.style.cssText = ` qrContainer.style.cssText = `
margin: 20px 16px; margin: 12px 16px;
padding: 16px; padding: 12px;
background-color: white; background-color: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@ -1146,8 +1146,8 @@
const qrTitle = document.createElement('h3'); const qrTitle = document.createElement('h3');
qrTitle.style.cssText = ` qrTitle.style.cssText = `
color: #28a745; color: #28a745;
margin-bottom: 15px; margin-bottom: 10px;
font-size: 18px; font-size: 16px;
`; `;
qrTitle.innerHTML = '📋 合格证二维码'; qrTitle.innerHTML = '📋 合格证二维码';
@ -1155,12 +1155,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: 250px; max-width: 180px;
max-height: 250px; max-height: 180px;
margin-bottom: 15px; margin-bottom: 10px;
background-color: white; background-color: white;
padding: 10px; padding: 8px;
border-radius: 8px; border-radius: 6px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
`; `;
@ -1168,14 +1168,14 @@
const qrText = document.createElement('div'); const qrText = document.createElement('div');
qrText.style.cssText = ` qrText.style.cssText = `
color: #666; color: #666;
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
line-height: 1.5; line-height: 1.4;
`; `;
qrText.innerHTML = '<p style="margin-bottom: 8px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; qrText.innerHTML = '<p style="margin-bottom: 4px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>';
// 使用Google Charts API生成二维码 // 使用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; qrImage.src = qrCodeUrl;
// 组装容器 // 组装容器

38
view.html
View File

@ -337,22 +337,50 @@
// 创建二维码容器 // 创建二维码容器
const qrContainer = document.createElement('div'); const qrContainer = document.createElement('div');
qrContainer.id = 'qrCodeDisplay'; 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'); const qrTitle = document.createElement('h3');
qrTitle.style.cssText = `
color: #28a745;
margin-bottom: 10px;
font-size: 16px;
`;
qrTitle.innerHTML = '📋 合格证二维码'; qrTitle.innerHTML = '📋 合格证二维码';
// 创建二维码图片 // 创建二维码图片
const qrImage = document.createElement('img'); const qrImage = document.createElement('img');
qrImage.id = 'qrCodeImage'; qrImage.id = 'qrCodeImage';
qrImage.style.cssText = `
// 使用Google Charts API生成二维码 max-width: 180px;
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${encodeURIComponent(viewUrl)}`; max-height: 180px;
qrImage.src = qrCodeUrl; margin-bottom: 10px;
background-color: white;
padding: 8px;
border-radius: 6px;
border: 1px solid #e0e0e0;
`;
// 创建提示文字 // 创建提示文字
const qrText = document.createElement('div'); const qrText = document.createElement('div');
qrText.innerHTML = '<p style="margin-bottom: 8px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>'; qrText.style.cssText = `
color: #666;
font-size: 12px;
text-align: center;
line-height: 1.4;
`;
qrText.innerHTML = '<p style="margin-bottom: 4px;">扫描二维码查看完整信息</p><p>长按保存二维码</p>';
// 使用Google Charts API生成二维码
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(viewUrl)}`;
qrImage.src = qrCodeUrl;
// 组装容器 // 组装容器
qrContainer.appendChild(qrTitle); qrContainer.appendChild(qrTitle);

Write Preview
Loading…
Cancel
Save