+224
@@ -0,0 +1,224 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>成绩查询系统</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/tech-query.css">
|
||||
<style>
|
||||
.exam-search-grid {
|
||||
grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 0.9fr) minmax(220px, 1.1fr) minmax(132px, 0.52fr);
|
||||
}
|
||||
|
||||
.candidate-card {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
padding: 18px;
|
||||
border-bottom: 1px solid rgba(96, 116, 148, 0.14);
|
||||
background: rgba(248, 251, 255, 0.72);
|
||||
}
|
||||
|
||||
.candidate-name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 24px;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.candidate-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
color: #66758a;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.exam-id-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
background: #eef6ff;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.exam-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.exam-block {
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(120, 144, 176, 0.2);
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.exam-block-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 16px 18px;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(20, 184, 166, 0.06));
|
||||
border-bottom: 1px solid rgba(120, 144, 176, 0.16);
|
||||
}
|
||||
|
||||
.exam-title {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
.exam-date {
|
||||
margin-top: 4px;
|
||||
color: #66758a;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.exam-total {
|
||||
text-align: right;
|
||||
color: #2563eb;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.exam-total strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.score-table {
|
||||
width: 100%;
|
||||
min-width: 640px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.score-table th,
|
||||
.score-table td {
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid rgba(120, 144, 176, 0.14);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.score-table th {
|
||||
background: #f8fbff;
|
||||
color: #4f5f74;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
color: #047857;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.score-value.negative {
|
||||
color: #be123c;
|
||||
}
|
||||
|
||||
.exam-remark {
|
||||
margin: 0;
|
||||
padding: 14px 18px 16px;
|
||||
color: #66758a;
|
||||
line-height: 1.7;
|
||||
background: #fbfdff;
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.exam-search-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.exam-search-grid,
|
||||
.candidate-card,
|
||||
.exam-block-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.exam-total {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="page-shell">
|
||||
<section class="page-header">
|
||||
<div class="hero-card">
|
||||
<span class="eyebrow">Exam Result</span>
|
||||
<h1>成绩查询中心</h1>
|
||||
<p>请选择考试项目，再输入姓名和准考证号进行核验。每场考试独立建档，成绩互不关联，支持负分项目和备注信息。</p>
|
||||
<div class="hero-meta">
|
||||
<span class="meta-chip">查询条件：考试 + 姓名 + 准考证号</span>
|
||||
<span class="meta-chip">每场考试独立记录</span>
|
||||
<span class="meta-chip">成绩项目可为负分</span>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="stat-card">
|
||||
<div>
|
||||
<div class="stat-label">Module</div>
|
||||
<div class="stat-value">EXAM</div>
|
||||
</div>
|
||||
<p>按考试项目分别查询成绩、扣分和备注。</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="panel-card">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<h2 class="panel-title">查询条件</h2>
|
||||
<div class="panel-subtitle">考试项目、姓名和准考证号必须同时匹配</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-grid exam-search-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="examSelect">考试项目</label>
|
||||
<select id="examSelect" class="tech-input"></select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="studentName">姓名</label>
|
||||
<input type="text" id="studentName" class="tech-input" autocomplete="name" placeholder="请输入姓名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="admissionNo">准考证号</label>
|
||||
<input type="text" id="admissionNo" class="tech-input" inputmode="latin" placeholder="请输入准考证号">
|
||||
</div>
|
||||
<button id="searchBtn" class="tech-button" type="button">查询成绩</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-card results-card">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<h2 class="panel-title">查询结果</h2>
|
||||
<div class="panel-subtitle">只展示当前所选考试项目的成绩</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="searchResults" class="results-shell">
|
||||
<div class="empty-state">请选择考试项目，并输入姓名和准考证号后开始查询。</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="page-footer">
|
||||
<p>© 2026 BI Intelligent Query Interface</p>
|
||||
</footer>
|
||||
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
<script defer src="./exam.js?v=20260621"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user