证书

2026-03-28 18:22:37 +08:00
parent 26f77d7c91
commit 948723dba0
6 changed files with 1792 additions and 0 deletions
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>荣誉证书系统</title>
+    <style>
+        :root { --a4-ratio: 210 / 297; }
+        body {
+            margin: 0; padding: 0; background: #f0f2f5;
+            display: flex; flex-direction: column; align-items: center;
+            min-height: 100vh;
+            font-family: system-ui, -apple-system, sans-serif;
+        }
+
+        /* 顶部工具栏 */
+        .toolbar {
+            width: 100%; padding: 15px; background: white;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            position: sticky; top: 0; z-index: 100;
+            display: flex; flex-direction: column; align-items: center; gap: 8px;
+        }
+
+        .btn-print {
+            padding: 10px 25px; background: #1a73e8; color: white;
+            border: none; border-radius: 6px; cursor: pointer; font-weight: 500;
+        }
+
+        .tip { font-size: 12px; color: #ef4444; }
+        @media (min-width: 1024px) { .tip { display: none; } }
+
+        /* 证书容器 */
+        .main-content {
+            flex: 1; /* 撑开中间区域 */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 100%;
+        }
+
+        #cert-viewport {
+            margin: 30px auto;
+            width: 90vw;
+            max-width: 650px;
+            aspect-ratio: var(--a4-ratio);
+            background: white;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            display: flex; justify-content: center; align-items: center;
+            position: relative;
+        }
+
+        #cert-img { width: 100%; height: 100%; object-fit: contain; display: none; }
+        #error-msg { display: none; color: #666; text-align: center; padding: 20px; }
+
+        /* --- 版权页脚样式 --- */
+        .footer {
+            width: 100%;
+            padding: 20px 0;
+            text-align: center;
+            color: #94a3b8; /* 浅灰色，不抢眼 */
+            font-size: 14px;
+            border-top: 1px solid #e2e8f0;
+            margin-top: 20px;
+            background: #f8fafc;
+        }
+
+        .footer p { margin: 5px 0; }
+        .footer a { color: #64748b; text-decoration: none; }
+        .footer a:hover { text-decoration: underline; }
+
+        /* --- 打印优化 --- */
+        @media print {
+            /* 打印时隐藏工具栏和页脚 */
+            .toolbar, .footer { display: none !important; }
+            
+            body { background: white; margin: 0; padding: 0; }
+            .main-content { margin: 0; }
+            #cert-viewport { 
+                margin: 0; 
+                width: 100%; 
+                max-width: none; 
+                box-shadow: none; 
+            }
+            @page { size: A4 portrait; margin: 0; }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="toolbar">
+        <div class="tip">⚠️ 建议在电脑端使用 Chrome 浏览器打印以获得最佳效果</div>
+        <button class="btn-print" onclick="window.print()">打印 / 导出 PDF</button>
+    </div>
+
+    <div class="main-content">
+        <div id="cert-viewport">
+            <img id="cert-img" alt="荣誉证书">
+            <div id="error-msg">
+                <h2 style="color:#e11d48">❌ 证书不存在</h2>
+                <p>请核对证书 ID 或联系管理员</p>
+            </div>
+        </div>
+    </div>
+
+    <footer class="footer">
+        <p>© 2026 BI. All Rights Reserved.</p>
+        <p style="font-size: 12px; opacity: 0.7;">由 Gemini 技术支持提供生成</p>
+    </footer>
+
+    <script>
+        function loadCertificate() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const certId = urlParams.get('id');
+            const imgElement = document.getElementById('cert-img');
+            const errorElement = document.getElementById('error-msg');
+
+            if (!certId) {
+                errorElement.style.display = 'block';
+                errorElement.innerHTML = '<h2>请在链接中包含证书 ID</h2>';
+                return;
+            }
+
+            // 加载 img/ 目录下的同名 SVG
+            const filePath = `img/${certId}.svg`;
+            imgElement.src = filePath;
+
+            imgElement.onload = function() {
+                imgElement.style.display = 'block';
+                errorElement.style.display = 'none';
+                document.title = "证书验证 - " + certId;
+            };
+
+            imgElement.onerror = function() {
+                imgElement.style.display = 'none';
+                errorElement.style.display = 'block';
+            };
+        }
+
+        loadCertificate();
+    </script>
+</body>
+</html>