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

优化签名和二维码的排版，使其对齐更加美观

Default User 3 days ago
parent
1b586c0c16
commit
8e086fe2dc
2 changed files with 92 additions and 16 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. 54
      certificate.html
  2. 54
      view.html

54
certificate.html
View File

@ -398,43 +398,81 @@
/* 签名和二维码同行显示样式 */ /* 签名和二维码同行显示样式 */
.signature-qr-container { .signature-qr-container {
align-items: flex-start; align-items: flex-start;
padding: 10px 0;
} }
.signature-qr-content { .signature-qr-content {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 15px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.signature-qr-content .signature-display { .signature-qr-content .signature-display {
flex: 1; flex: 1;
min-width: 120px; min-width: 150px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background-color: white;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
.signature-qr-content .signature-display img {
max-width: 100%;
height: auto;
max-height: 100px;
} }
.signature-qr-content #qrCodeContainer { .signature-qr-content #qrCodeContainer {
flex: 1; flex: 1;
min-width: 120px; min-width: 150px;
} }
.signature-qr-content #qrCodeDisplay { .signature-qr-content #qrCodeDisplay {
margin: 0; margin: 0;
padding: 8px; padding: 10px;
background-color: white;
border-radius: 6px;
border: 1px solid #e0e0e0;
} }
.signature-qr-content #qrCodeImage { .signature-qr-content #qrCodeImage {
max-width: 120px; max-width: 100%;
max-height: 120px; height: auto;
max-height: 100px;
} }
.signature-qr-content #qrCodeDisplay h3 { .signature-qr-content #qrCodeDisplay h3 {
font-size: 12px; font-size: 12px;
margin-bottom: 6px; margin-bottom: 8px;
color: #333;
} }
.signature-qr-content #qrCodeDisplay div { .signature-qr-content #qrCodeDisplay div {
font-size: 10px; font-size: 10px;
color: #666;
}
/* 响应式调整 */
@media (max-width: 480px) {
.signature-qr-content {
flex-direction: column;
align-items: stretch;
}
.signature-qr-content .signature-display,
.signature-qr-content #qrCodeContainer {
min-width: auto;
}
.signature-qr-content .signature-display img,
.signature-qr-content #qrCodeImage {
max-height: 80px;
}
} }
/* 签名弹窗样式 */ /* 签名弹窗样式 */

54
view.html
View File

@ -144,43 +144,81 @@
/* 签名和二维码同行显示样式 */ /* 签名和二维码同行显示样式 */
.signature-qr-container { .signature-qr-container {
align-items: flex-start; align-items: flex-start;
padding: 10px 0;
} }
.signature-qr-content { .signature-qr-content {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 15px; gap: 20px;
flex-wrap: wrap; flex-wrap: wrap;
} }
.signature-qr-content .signature-display { .signature-qr-content .signature-display {
flex: 1; flex: 1;
min-width: 120px; min-width: 150px;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background-color: white;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
.signature-qr-content .signature-display img {
max-width: 100%;
height: auto;
max-height: 100px;
} }
.signature-qr-content #qrCodeContainer { .signature-qr-content #qrCodeContainer {
flex: 1; flex: 1;
min-width: 120px; min-width: 150px;
} }
.signature-qr-content #qrCodeDisplay { .signature-qr-content #qrCodeDisplay {
margin: 0; margin: 0;
padding: 8px; padding: 10px;
background-color: white;
border-radius: 6px;
border: 1px solid #e0e0e0;
} }
.signature-qr-content #qrCodeImage { .signature-qr-content #qrCodeImage {
max-width: 120px; max-width: 100%;
max-height: 120px; height: auto;
max-height: 100px;
} }
.signature-qr-content #qrCodeDisplay h3 { .signature-qr-content #qrCodeDisplay h3 {
font-size: 12px; font-size: 12px;
margin-bottom: 6px; margin-bottom: 8px;
color: #333;
} }
.signature-qr-content #qrCodeDisplay div { .signature-qr-content #qrCodeDisplay div {
font-size: 10px; font-size: 10px;
color: #666;
}
/* 响应式调整 */
@media (max-width: 480px) {
.signature-qr-content {
flex-direction: column;
align-items: stretch;
}
.signature-qr-content .signature-display,
.signature-qr-content #qrCodeContainer {
min-width: auto;
}
.signature-qr-content .signature-display img,
.signature-qr-content #qrCodeImage {
max-height: 80px;
}
} }
/* 二维码展示样式 */ /* 二维码展示样式 */

Write Preview
Loading…
Cancel
Save