@@ -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>
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.9 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.9 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.9 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.0 MiB |
@@ -0,0 +1,173 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>荣誉证书查询系统 - XX 机构</title>
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0; padding: 0;
|
||||||
|
font-family: system-ui, -apple-system, sans-serif;
|
||||||
|
background-color: #f9fafb;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主容器 - 左右分布 */
|
||||||
|
.login-container {
|
||||||
|
width: 90vw;
|
||||||
|
max-width: 1000px;
|
||||||
|
height: 70vh; /* 限制高度，保持居中感 */
|
||||||
|
min-height: 450px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden; /* 保证左边背景不溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 左侧：背景区域 --- */
|
||||||
|
.left-panel {
|
||||||
|
flex: 1; /* 占据一半空间 */
|
||||||
|
background-color: #1a73e8; /* 品牌主色调 */
|
||||||
|
background-image:
|
||||||
|
linear-gradient(135deg, rgba(26, 115, 232, 0.8) 0%, rgba(20, 93, 191, 0.9) 100%),
|
||||||
|
url('https://images.unsplash.com/photo-1590856029826-c7a73142bbf1?q=80&w=1000&auto=format&fit=crop'); /* 证书相关的背景图 */
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel h1 { font-size: 32px; margin: 0 0 15px 0; font-weight: 700; }
|
||||||
|
.left-panel p { font-size: 16px; opacity: 0.9; line-height: 1.6; margin: 0; }
|
||||||
|
.decor-line { width: 60px; height: 4px; background: rgba(255,255,255,0.4); margin: 20px 0; border-radius: 2px; }
|
||||||
|
|
||||||
|
/* --- 右侧：查询区域 --- */
|
||||||
|
.right-panel {
|
||||||
|
width: 400px; /* 固定宽度，防止输入框过宽 */
|
||||||
|
padding: 60px 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-logo { font-size: 20px; font-weight: bold; color: #1a73e8; margin-bottom: 50px; }
|
||||||
|
.search-title { font-size: 24px; color: #1f2937; margin: 0 0 10px 0; font-weight: 600; }
|
||||||
|
.search-subtitle { font-size: 14px; color: #6b7280; margin: 0 0 40px 0; }
|
||||||
|
|
||||||
|
.form-group { margin-bottom: 25px; }
|
||||||
|
.form-label { display: block; font-size: 14px; color: #374151; margin-bottom: 8px; font-weight: 500; }
|
||||||
|
|
||||||
|
/* 输入框样式 */
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 18px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid #e2e8f0;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1a73e8;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 查询按钮样式 */
|
||||||
|
.search-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
font-size: 16px;
|
||||||
|
background-color: #1a73e8;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.search-btn:hover { background-color: #1557b0; }
|
||||||
|
.search-btn:active { transform: translateY(1px); }
|
||||||
|
|
||||||
|
/* 页脚版权 */
|
||||||
|
.footer-copyright {
|
||||||
|
margin-top: auto; /* 推到底部 */
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- 移动端适配 --- */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.login-container { flex-direction: column; height: auto; min-height: 100vh; border-radius: 0; }
|
||||||
|
.left-panel { flex: none; height: 30vh; padding: 20px; }
|
||||||
|
.left-panel h1 { font-size: 24px; }
|
||||||
|
.right-panel { width: 100%; padding: 40px 20px; flex: 1; }
|
||||||
|
.brand-logo { margin-bottom: 30px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="left-panel">
|
||||||
|
<h1>荣誉证书系统</h1>
|
||||||
|
<div class="decor-line"></div>
|
||||||
|
<p>在这里，您可以查询并下载<br>您获得的各类荣誉与奖项证书。(2024年以后)</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-panel">
|
||||||
|
<div class="brand-logo"></div>
|
||||||
|
|
||||||
|
<h2 class="search-title">证书查询</h2>
|
||||||
|
<p class="search-subtitle">输入您的证书 ID (编号)，验证证书真实性</p>
|
||||||
|
|
||||||
|
<form onsubmit="redirectToCertificate(event)">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label" for="certIdInput">证书 ID / 编号</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="certIdInput"
|
||||||
|
class="search-input"
|
||||||
|
placeholder="例如: ZS20261001"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="search-btn">立即查询</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="footer-copyright">
|
||||||
|
© 2026 BI. All Rights Reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function redirectToCertificate(event) {
|
||||||
|
// 1. 阻止表单默认提交（防止刷新页面）
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// 2. 获取输入框的值
|
||||||
|
const certId = document.getElementById('certIdInput').value.trim();
|
||||||
|
|
||||||
|
if (certId) {
|
||||||
|
// 3. 执行跳转，拼接 URL 参数
|
||||||
|
// 假设 certificate.html 和 index.html 在同一个文件夹下
|
||||||
|
window.location.href = `certificate.html?id=${encodeURIComponent(certId)}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user