From 05aa40c3b1e633c7d8b9372689141b30f0b22f99 Mon Sep 17 00:00:00 2001
From: biss <bishsh2006@outlook.com>
Date: Mon, 30 Mar 2026 19:54:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 certs/certificate.html |  65 ++++++++++++-
 certs/index.html       |   4 +-
 ticket/index.html      | 211 +++++++++++++++++++++++++++++------------
 3 files changed, 214 insertions(+), 66 deletions(-)

diff --git a/certs/certificate.html b/certs/certificate.html
index a7f6960..5925a40 100644
--- a/certs/certificate.html
+++ b/certs/certificate.html
@@ -41,8 +41,28 @@
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             margin-bottom: 40px;
             display: flex; justify-content: center;
+            cursor: pointer;
+            position: relative;
+            min-height: 400px;
+            align-items: center;
         }
         #cert-img { width: 100%; height: auto; display: none; }
+        
+        /* 点击加载提示 */
+        .click-hint {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            color: #64748b;
+            font-size: 16px;
+        }
+        .click-hint-icon {
+            font-size: 48px;
+            margin-bottom: 10px;
+            color: var(--primary);
+        }
 
         /* 详细信息表卡片 */
         .info-card {
@@ -109,8 +129,12 @@
     </div>
 
     <div class="main-content">
-        <div id="cert-viewport">
+        <div id="cert-viewport" onclick="loadCertificateImage()">
             <img id="cert-img" alt="荣誉证书原件">
+            <div class="click-hint" id="click-hint">
+                <div class="click-hint-icon">🖼️</div>
+                <div>点击查看证书图片</div>
+            </div>
         </div>
 
         <div class="info-card" id="info-card" style="display: none;">
@@ -172,10 +196,8 @@
                     document.getElementById('display-status').innerHTML = '<span class="status-tag">无效</span>';
                 }
 
-                // 加载图片
-                const img = document.getElementById('cert-img');
-                img.src = `img/${data.cert_number}.svg`;
-                img.onload = () => img.style.display = 'block';
+                // 图片改为点击加载，初始不加载
+                window.currentCertNumber = data.cert_number;
 
             } catch (e) {
                 console.error("加载失败:", e);
@@ -183,7 +205,40 @@
             }
         }
 
+        // 点击加载证书图片
+        function loadCertificateImage() {
+            const certNumber = window.currentCertNumber;
+            if (!certNumber) return;
+            
+            const img = document.getElementById('cert-img');
+            const hint = document.getElementById('click-hint');
+            
+            // 如果图片已加载，直接显示
+            if (img.src && img.complete) {
+                img.style.display = 'block';
+                if (hint) hint.style.display = 'none';
+                return;
+            }
+            
+            // 加载中提示
+            if (hint) {
+                hint.innerHTML = '<div class="click-hint-icon">⏳</div><div>图片加载中...</div>';
+            }
+            
+            img.src = `img/${certNumber}.svg`;
+            img.onload = () => {
+                img.style.display = 'block';
+                if (hint) hint.style.display = 'none';
+            };
+            img.onerror = () => {
+                if (hint) {
+                    hint.innerHTML = '<div class="click-hint-icon">❌</div><div>图片加载失败</div>';
+                }
+            };
+        }
+
         loadData();
+
     </script>
     <script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
 </body>
diff --git a/certs/index.html b/certs/index.html
index 57843e2..21b81f1 100644
--- a/certs/index.html
+++ b/certs/index.html
@@ -299,7 +299,7 @@
                         <tr>
                             <th>证书编号</th>
                             <th>持有人</th>
-                            <th class="hide-on-mobile">荣誉标题</th>
+                            <th>荣誉标题</th>
                             <th>颁发日期</th>
                             <th>操作</th>
                         </tr>
@@ -312,7 +312,7 @@
                 <tr>
                     <td><strong>${item.cert_number}</strong></td>
                     <td>${item.holder_name}</td>
-                    <td class="hide-on-mobile">${item.honor_title}</td>
+                    <td>${item.honor_title}</td>
                     <td>${item.issue_date || '-'}</td>
                     <td><a class="btn-link" onclick="goToDetail('${item.id}')">详情</a></td>
                 </tr>
diff --git a/ticket/index.html b/ticket/index.html
index 6f4fb70..79bbe6a 100644
--- a/ticket/index.html
+++ b/ticket/index.html
@@ -8,36 +8,60 @@
     <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
 
     <style>
+        :root {
+            --primary-blue: #1a73e8;
+            --light-blue: #e3f2fd;
+            --gradient-blue: linear-gradient(135deg, #66b3ff, #1a73e8);
+            --shadow-light: 0 4px 12px rgba(26, 115, 232, 0.15);
+            --shadow-medium: 0 8px 24px rgba(26, 115, 232, 0.2);
+        }
+
         body {
-            background: #f0f2f5;
+            background: linear-gradient(180deg, #f0f7ff, #e8f4fc);
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
+            min-height: 100vh;
+            padding: 20px;
         }
 
         .ticket-container {
             max-width: 900px;
-            margin: 60px auto;
+            margin: 40px auto;
             padding: 32px;
             background: #fff;
-            border-radius: 12px;
-            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+            border-radius: 16px;
+            box-shadow: var(--shadow-medium);
+            -webkit-backdrop-filter: blur(10px);
+            backdrop-filter: blur(10px);
         }
 
         h1 {
             text-align: center;
-            font-size: 24px;
+            font-size: 28px;
             font-weight: 600;
-            margin-bottom: 20px;
+            margin-bottom: 12px;
+            background: var(--gradient-blue);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .page-desc {
+            text-align: center;
+            color: #6b7280;
+            font-size: 14px;
+            margin-bottom: 28px;
         }
 
         .search-form {
             margin-bottom: 24px;
-            padding: 20px;
-            background: #fafafa;
-            border-radius: 10px;
+            padding: 24px;
+            background: linear-gradient(135deg, #f8fbff, #f0f7ff);
+            border-radius: 12px;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 16px;
             align-items: end;
+            border: 1px solid #e0f0ff;
         }
 
         .form-group {
@@ -47,35 +71,49 @@
 
         .form-group label {
             font-size: 13px;
-            color: #666;
-            margin-bottom: 6px;
+            color: #4b5563;
+            margin-bottom: 8px;
+            font-weight: 500;
         }
 
         .form-control {
-            padding: 10px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
+            padding: 12px 16px;
+            border: 1.5px solid #d1d5db;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            background: white;
         }
 
         .form-control:focus {
-            border-color: #4CAF50;
+            border-color: var(--primary-blue);
             outline: none;
-            box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
+            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
+        }
+
+        .form-control::placeholder {
+            color: #9ca3af;
         }
 
         .btn {
-            height: 40px;
-            background: linear-gradient(135deg, #4CAF50, #43a047);
-            border-radius: 6px;
+            height: 44px;
+            background: var(--gradient-blue);
+            border-radius: 8px;
             color: #fff;
-            font-weight: 500;
+            font-weight: 600;
             cursor: pointer;
             border: none;
+            transition: all 0.3s ease;
+            box-shadow: var(--shadow-light);
         }
 
         .btn:hover {
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(76,175,80,0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.3);
+        }
+
+        .btn:active {
+            transform: translateY(0);
         }
 
         .result-table {
@@ -83,70 +121,124 @@
             border-collapse: collapse;
             margin-top: 16px;
             font-size: 14px;
+            border-radius: 10px;
+            overflow: hidden;
         }
 
         .result-table th {
-            background: #fafafa;
+            background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
             text-align: left;
-            padding: 12px;
+            padding: 16px 12px;
             font-weight: 600;
-            border-bottom: 1px solid #eee;
+            color: #1e40af;
+            border-bottom: 2px solid #bfdbfe;
         }
 
         .result-table td {
-            padding: 12px;
-            border-bottom: 1px solid #f0f0f0;
+            padding: 14px 12px;
+            border-bottom: 1px solid #e5e7eb;
+            color: #374151;
         }
 
         .result-table tr:hover {
-            background: #fafafa;
+            background: #f9fafb;
         }
 
         .status {
-            padding: 4px 8px;
-            border-radius: 4px;
+            padding: 6px 12px;
+            border-radius: 6px;
             font-size: 12px;
+            font-weight: 500;
+            display: inline-block;
         }
 
         .status.done {
-            background: #e8f5e9;
-            color: #2e7d32;
+            background: linear-gradient(135deg, #dcfce7, #bbf7d0);
+            color: #166534;
+            box-shadow: 0 2px 4px rgba(22, 101, 52, 0.1);
         }
 
         .status.pending {
-            background: #fff3e0;
-            color: #ef6c00;
+            background: linear-gradient(135deg, #ffedd5, #fed7aa);
+            color: #c2410c;
+            box-shadow: 0 2px 4px rgba(194, 65, 12, 0.1);
         }
 
         .no-result {
             text-align: center;
-            padding: 60px;
-            color: #999;
+            padding: 80px 20px;
+            color: #9ca3af;
+            font-size: 16px;
+            background: #f9fafb;
+            border-radius: 12px;
+            margin-top: 20px;
         }
 
         .loading {
             text-align: center;
-            padding: 30px;
-            color: #666;
+            padding: 40px;
+            color: var(--primary-blue);
+            font-size: 15px;
+            font-weight: 500;
         }
 
         .error-message {
-            background-color: #fee;
-            color: #c33;
-            padding: 10px;
-            border-radius: 6px;
+            background: linear-gradient(135deg, #fee2e2, #fecaca);
+            color: #b91c1c;
+            padding: 16px;
+            border-radius: 10px;
+            border-left: 4px solid #ef4444;
+            margin-top: 20px;
         }
 
         .back-link {
             font-size: 14px;
-            color: #4CAF50;
+            color: var(--primary-blue);
             text-decoration: none;
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
             margin-bottom: 20px;
+            padding: 8px 16px;
+            background: var(--light-blue);
+            border-radius: 8px;
+            transition: all 0.3s ease;
         }
 
         .back-link:hover {
-            text-decoration: underline;
+            background: #bfdbfe;
+            text-decoration: none;
+            transform: translateX(-4px);
+        }
+
+        /* 响应式优化 */
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+
+            .ticket-container {
+                margin: 20px auto;
+                padding: 20px;
+            }
+
+            h1 {
+                font-size: 24px;
+            }
+
+            .search-form {
+                grid-template-columns: 1fr;
+                padding: 16px;
+            }
+
+            .result-table {
+                font-size: 13px;
+            }
+
+            .result-table th,
+            .result-table td {
+                padding: 10px 8px;
+            }
         }
     </style>
 </head>
@@ -157,25 +249,26 @@
     <a href="../index.html" class="back-link">← 返回首页</a>
 
     <h1>单据查询</h1>
-
-    <p>请输入查询条件,可以查询2024年至今的单据</p>
+    
+    <p class="page-desc">请输入查询条件，可查询 2024 年至今的单据</p>
+    
     <div class="search-form">
         <div class="form-group">
-            <label>编号 / 姓名</label>
-            <input type="text" id="searchTerm" class="form-control">
+            <label for="searchTerm">编号 / 姓名</label>
+            <input type="text" id="searchTerm" class="form-control" placeholder="请输入编号或姓名">
         </div>
 
         <div class="form-group">
-            <label>开始日期</label>
-            <input type="date" id="dateFrom" class="form-control">
+            <label for="dateFrom">开始日期</label>
+            <input type="date" id="dateFrom" class="form-control" title="选择开始日期">
         </div>
 
         <div class="form-group">
-            <label>结束日期</label>
-            <input type="date" id="dateTo" class="form-control">
+            <label for="dateTo">结束日期</label>
+            <input type="date" id="dateTo" class="form-control" title="选择结束日期">
         </div>
 
-        <button id="searchBtn" class="btn">查询</button>
+        <button id="searchBtn" class="btn">立即查询</button>
     </div>
 
     <div id="searchResults"></div>
@@ -231,7 +324,7 @@
         const resultsDiv = document.getElementById('searchResults');
 
         if (!tickets || tickets.length === 0) {
-            resultsDiv.innerHTML = '<div class="no-result">未找到符合条件的单据</div>';
+            resultsDiv.innerHTML = '<div class="no-result">🔍 未找到符合条件的单据</div>';
             return;
         }
 
@@ -251,15 +344,15 @@
                     <td>${ticket.ticket_number || ''}</td>
                     <td>${ticket.customer_name || ''}</td>
                     <td>${ticket.reason || ''}</td>
-                    <td>¥${Number(ticket.amount || 0).toFixed(2)}</td>
+                    <td style="font-weight: 600; color: #1a73e8;">¥${Number(ticket.amount || 0).toFixed(2)}</td>
                     <td>${formatDate(ticket.created_at)}</td>
                     <td>
                         <span class="status ${ticket.processed ? 'done' : 'pending'}">
-                            ${ticket.processed ? '已处理' : '未处理'}
+                            ${ticket.processed ? '✓ 已处理' : '⏳ 未处理'}
                         </span>
                     </td>
                     <td>
-                        <button class="btn" onclick="viewDetail('${ticket.id}')">详情</button>
+                        <button class="btn" onclick="viewDetail('${ticket.id}')" style="padding: 6px 16px; font-size: 13px;">查看详情</button>
                     </td>
                 </tr>
             `;