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

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

Default User 3 days ago
parent
6e4fd5dac6
commit
1b586c0c16
2 changed files with 147 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      certificate.html
  2. 105
      view.html

82
certificate.html
View File

@ -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">
<img src="${certificate.signature}" alt="签名" style="max-width: 200px; max-height: 100px;">
<div class="signature-qr-content">
<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();
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);
}
}
}
}

105
view.html
View File

@ -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 @@
</div>
`;
// 创建签名和二维码的容器
if (certificate.signature) {
html += `
<div class="info-item">
<div class="info-item signature-qr-container">
<span class="label">签名：</span>
<div class="signature-display">
<img src="${certificate.signature}" alt="签名">
<div class="signature-qr-content">
<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元素内插入
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);
}
}
}
}

Write Preview
Loading…
Cancel
Save