From 8e086fe2dcfadbd369ed5602c255cad90122050e Mon Sep 17 00:00:00 2001
From: Default User <user@example.com>
Date: Wed, 4 Mar 2026 16:02:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=AD=BE=E5=90=8D=E5=92=8C?=
 =?UTF-8?q?=E4=BA=8C=E7=BB=B4=E7=A0=81=E7=9A=84=E6=8E=92=E7=89=88=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=BF=E5=85=B6=E5=AF=B9=E9=BD=90=E6=9B=B4=E5=8A=A0=E7=BE=8E?=
 =?UTF-8?q?=E8=A7=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 certificate.html | 54 +++++++++++++++++++++++++++++++++++++++++-------
 view.html        | 54 +++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/certificate.html b/certificate.html
index 4137e9c..2f0f9d4 100644
--- a/certificate.html
+++ b/certificate.html
@@ -398,43 +398,81 @@
     /* 签名和二维码同行显示样式 */
     .signature-qr-container {
       align-items: flex-start;
+      padding: 10px 0;
     }
 
     .signature-qr-content {
       flex: 1;
       display: flex;
-      align-items: center;
-      gap: 15px;
+      align-items: flex-start;
+      gap: 20px;
       flex-wrap: wrap;
     }
 
     .signature-qr-content .signature-display {
       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 {
       flex: 1;
-      min-width: 120px;
+      min-width: 150px;
     }
 
     .signature-qr-content #qrCodeDisplay {
       margin: 0;
-      padding: 8px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 6px;
+      border: 1px solid #e0e0e0;
     }
 
     .signature-qr-content #qrCodeImage {
-      max-width: 120px;
-      max-height: 120px;
+      max-width: 100%;
+      height: auto;
+      max-height: 100px;
     }
 
     .signature-qr-content #qrCodeDisplay h3 {
       font-size: 12px;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
+      color: #333;
     }
 
     .signature-qr-content #qrCodeDisplay div {
       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;
+      }
     }
 
     /* 签名弹窗样式 */
diff --git a/view.html b/view.html
index 5e5d031..3529318 100644
--- a/view.html
+++ b/view.html
@@ -144,43 +144,81 @@
     /* 签名和二维码同行显示样式 */
     .signature-qr-container {
       align-items: flex-start;
+      padding: 10px 0;
     }
 
     .signature-qr-content {
       flex: 1;
       display: flex;
-      align-items: center;
-      gap: 15px;
+      align-items: flex-start;
+      gap: 20px;
       flex-wrap: wrap;
     }
 
     .signature-qr-content .signature-display {
       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 {
       flex: 1;
-      min-width: 120px;
+      min-width: 150px;
     }
 
     .signature-qr-content #qrCodeDisplay {
       margin: 0;
-      padding: 8px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 6px;
+      border: 1px solid #e0e0e0;
     }
 
     .signature-qr-content #qrCodeImage {
-      max-width: 120px;
-      max-height: 120px;
+      max-width: 100%;
+      height: auto;
+      max-height: 100px;
     }
 
     .signature-qr-content #qrCodeDisplay h3 {
       font-size: 12px;
-      margin-bottom: 6px;
+      margin-bottom: 8px;
+      color: #333;
     }
 
     .signature-qr-content #qrCodeDisplay div {
       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;
+      }
     }
 
     /* 二维码展示样式 */