386 lines
20 KiB
HTML
386 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>查校对比 - 河南高考志愿助手</title>
|
||
<meta name="description" content="输入分数查询可报的院校，对比两所学校的投档分、位次、招生人数。">
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#0a0a0f;color:#e0e0e0;min-height:100vh;line-height:1.7}
|
||
.header{background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.08);padding:14px 0;position:sticky;top:0;z-index:100}
|
||
.header-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
|
||
.logo{font-size:1.3rem;font-weight:700;color:#fff;text-decoration:none}
|
||
.logo span{color:#667eea}
|
||
.nav-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
|
||
.nav-links a{color:#a0a0a0;text-decoration:none;font-size:0.9rem;transition:color 0.3s}
|
||
.nav-links a:hover{color:#667eea}.nav-links a.highlight{color:#667eea;font-weight:600}
|
||
.page-hero{background:linear-gradient(135deg,#0f0f1a,#12102a);padding:40px 0 36px;border-bottom:1px solid rgba(102,126,234,0.15)}
|
||
.container{max-width:1100px;margin:0 auto;padding:0 20px}
|
||
.page-hero h1{font-size:1.7rem;color:#fff;margin-bottom:6px}
|
||
.page-hero p{color:#888;font-size:0.9rem}
|
||
|
||
.search-bar{display:flex;gap:10px;margin:28px 0 20px;flex-wrap:wrap}
|
||
.search-bar input{flex:1;min-width:200px;padding:11px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:10px;color:#e0e0e0;font-size:0.95rem;outline:none}
|
||
.search-bar input:focus{border-color:#667eea}
|
||
.search-bar input::placeholder{color:#666}
|
||
.search-bar select{padding:11px 16px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:10px;color:#e0e0e0;font-size:0.9rem;outline:none;appearance:auto;-webkit-appearance:auto}
|
||
.search-bar button{padding:11px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:opacity 0.2s}
|
||
.search-bar button:hover{opacity:0.88}
|
||
|
||
.compare-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}
|
||
.compare-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:20px;position:relative}
|
||
.compare-card h3{color:#667eea;font-size:0.82rem;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
|
||
.compare-school{display:flex;align-items:center;gap:10px;margin-bottom:12px}
|
||
.compare-school select{width:100%;padding:10px 14px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:8px;color:#e0e0e0;font-size:0.9rem;outline:none;appearance:auto;-webkit-appearance:auto}
|
||
.compare-school select:focus{border-color:#667eea}
|
||
.school-info{minor-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
|
||
.info-item{background:rgba(255,255,255,0.04);border-radius:8px;padding:12px}
|
||
.info-item .label{color:#666;font-size:0.75rem;margin-bottom:4px}
|
||
.info-item .value{color:#e0e0e0;font-size:1rem;font-weight:600}
|
||
.info-item .value.highlight{color:#4ade80}
|
||
.info-item .value.warning{color:#fbbf24}
|
||
.info-item .value.type-tag{color:#fbbf24;font-size:0.78rem;background:rgba(251,191,36,0.1);padding:2px 8px;border-radius:4px;display:inline-block}
|
||
.info-item .value.req-tag{color:#888;font-size:0.75rem;margin-top:4px}
|
||
.vs-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#667eea;color:#fff;font-size:0.8rem;font-weight:700;padding:6px 14px;border-radius:20px;z-index:2}
|
||
|
||
.results-table{width:100%;border-collapse:collapse;margin-top:24px}
|
||
.results-table th{text-align:left;padding:10px 14px;background:rgba(102,126,234,0.1);color:#667eea;font-size:0.8rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.06)}
|
||
.results-table td{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.88rem;color:#aaa}
|
||
.results-table tr:hover td{background:rgba(255,255,255,0.02)}
|
||
|
||
/* 分页 */
|
||
.pagination{margin-top:24px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
|
||
.pagination button{display:inline-flex;align-items:center;gap:5px;padding:8px 18px;border-radius:8px;font-size:0.85rem;font-weight:600;cursor:pointer;border:none;transition:all 0.2s;background:rgba(255,255,255,0.06);color:#aaa}
|
||
.pagination button:hover:not(:disabled){background:rgba(102,126,234,0.15);color:#667eea}
|
||
.pagination button:disabled{opacity:0.35;cursor:not-allowed}
|
||
.pagination .page-info{color:#555;font-size:0.82rem}
|
||
.pagination .page-info span{color:#667eea;font-weight:600}
|
||
|
||
/* 移动端适配 */
|
||
@media(max-width:600px){
|
||
.compare-section{grid-template-columns:1fr!important}
|
||
.vs-badge{display:none}
|
||
.page-hero h1{font-size:1.3rem}
|
||
.results-table{font-size:0.8rem}
|
||
.results-table th,.results-table td{padding:7px 8px}
|
||
}
|
||
|
||
/* 页脚 */
|
||
.footer{background:rgba(255,255,255,0.03);border-top:1px solid rgba(255,255,255,0.06);padding:30px 0;margin-top:40px;text-align:center}
|
||
.footer-inner{max-width:1100px;margin:0 auto;padding:0 20px}
|
||
.footer-logo{font-size:1rem;font-weight:700;color:#fff;margin-bottom:6px}
|
||
.footer-logo span{color:#667eea}
|
||
.footer-desc{color:#555;font-size:0.8rem;margin-bottom:14px}
|
||
.footer-contact-title{color:#888;font-size:0.82rem;margin-bottom:10px}
|
||
.footer-qr{width:80px;height:80px;background:rgba(255,255,255,0.05);border:1px dashed rgba(255,255,255,0.15);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#555;font-size:0.7rem;text-align:center;padding:6px;margin-bottom:14px}
|
||
.footer-bottom{color:#444;font-size:0.78rem;border-top:1px solid rgba(255,255,255,0.05);padding-top:16px;margin-top:14px}
|
||
.results-table .school-name{color:#e0e0e0;font-weight:600}
|
||
.results-table .score{color:#4ade80;font-weight:600}
|
||
.results-table .rank{color:#fbbf24}
|
||
.results-table .add-btn{background:rgba(102,126,234,0.15);color:#667eea;border:1px solid rgba(102,126,234,0.3);padding:4px 10px;border-radius:6px;cursor:pointer;font-size:0.78rem}
|
||
.results-table .add-btn:hover{background:rgba(102,126,234,0.3)}
|
||
|
||
.section-title{font-size:1.2rem;color:#fff;margin:36px 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.06)}
|
||
.tips{background:rgba(102,126,234,0.06);border:1px solid rgba(102,126,234,0.15);border-radius:10px;padding:16px 20px;margin:16px 0;color:#999;font-size:0.85rem}
|
||
.tips::before{content:"💡 ";color:#667eea}
|
||
|
||
.loading{text-align:center;padding:30px;color:#666;font-size:0.9rem}
|
||
.no-data{text-align:center;padding:30px;color:#666;font-size:0.9rem}
|
||
|
||
@media(max-width:700px){
|
||
.compare-section{grid-template-columns:1fr}
|
||
.vs-badge{display:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="header-inner">
|
||
<a href="/" class="logo">高考志愿<span>助手</span></a>
|
||
<ul class="nav-links">
|
||
<li><a href="/ai-chat" target="_blank" class="highlight">🤖 AI助手</a></li>
|
||
<li><a href="/plan.html">志愿草表</a></li>
|
||
<li><a href="/school.html" style="color:#667eea;font-weight:600">查校对比</a></li>
|
||
<li><a href="/#prob">录取概率估算</a></li>
|
||
<li><a href="/major.html">查历年录取分数和位次</a></li>
|
||
<li><a href="/#tools">官方查询渠道</a></li>
|
||
<li><a href="/#provinces">各省教育考试院入口</a></li>
|
||
<li><a href="/#resources">扩展工具 & 数据查询</a></li>
|
||
<li><a href="/qa.html">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="page-hero"><div class="container">
|
||
<h1>🔍 查校对比</h1>
|
||
<p>搜索院校名称，查看 2025 年真实投档数据，支持两校对比</p>
|
||
</div></div>
|
||
|
||
<div class="container">
|
||
<!-- 搜索框 -->
|
||
<div class="search-bar">
|
||
<select id="category">
|
||
<option value="物理类">物理类（理科）</option>
|
||
<option value="历史类">历史类（文科）</option>
|
||
</select>
|
||
<input type="text" id="keyword" list="searchHistory" placeholder="输入院校名称，如：郑州大学" onkeydown="if(event.key==='Enter')searchSchool()" autocomplete="off">
|
||
<datalist id="searchHistory"></datalist>
|
||
<button onclick="searchSchool()">搜索</button>
|
||
</div>
|
||
|
||
<!-- 院校对比区 -->
|
||
<div class="compare-section" id="compareSection" style="display:none">
|
||
<div class="compare-card">
|
||
<h3>院校 A</h3>
|
||
<div class="compare-school">
|
||
<select id="schoolA"><option value="">— 选择院校 —</option></select>
|
||
</div>
|
||
<div class="school-info" id="infoA">
|
||
<div class="info-item"><div class="label">院校名称</div><div class="value" id="aName">-</div></div>
|
||
<div class="info-item"><div class="label">招生类型</div><div class="value type-tag" id="aType">-</div><div class="value req-tag" id="aReq">-</div></div>
|
||
<div class="info-item"><div class="label">2025投档分</div><div class="value highlight" id="aScore">-</div></div>
|
||
<div class="info-item"><div class="label">投档位次</div><div class="value" id="aRank">-</div></div>
|
||
<div class="info-item"><div class="label">招生人数</div><div class="value" id="aNum">-</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="compare-card" style="position:relative">
|
||
<div class="vs-badge">VS</div>
|
||
<h3>院校 B</h3>
|
||
<div class="compare-school">
|
||
<select id="schoolB"><option value="">— 选择院校 —</option></select>
|
||
</div>
|
||
<div class="school-info" id="infoB">
|
||
<div class="info-item"><div class="label">院校名称</div><div class="value" id="bName">-</div></div>
|
||
<div class="info-item"><div class="label">招生类型</div><div class="value type-tag" id="bType">-</div><div class="value req-tag" id="bReq">-</div></div>
|
||
<div class="info-item"><div class="label">2025投档分</div><div class="value highlight" id="bScore">-</div></div>
|
||
<div class="info-item"><div class="label">投档位次</div><div class="value" id="bRank">-</div></div>
|
||
<div class="info-item"><div class="label">招生人数</div><div class="value" id="bNum">-</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tips">提示：先在上方搜索框输入院校名称，然后从下拉列表选择学校添加到对比区。数据来源为2025年河南高考真实投档分。</div>
|
||
|
||
<!-- 搜索结果 -->
|
||
<div class="section-title">搜索结果</div>
|
||
<div id="resultsArea">
|
||
<div class="no-data">输入院校名称开始搜索，可以看到历年投档分、位次和招生人数</div>
|
||
</div>
|
||
|
||
<a href="/" style="display:inline-block;margin-top:32px;color:#667eea;text-decoration:none;font-size:0.9rem">← 返回首页</a>
|
||
<br><br>
|
||
</div>
|
||
|
||
<script>
|
||
var allSchools = []; // 所有搜索过的学校，长期累积
|
||
var selectedA = null;
|
||
var selectedB = null;
|
||
var lastResults = []; // 最近一次搜索结果（用于分页）
|
||
var currentPage = 1;
|
||
var PAGE_SIZE = 20;
|
||
|
||
function loadSearchHistory(){
|
||
var list = JSON.parse(localStorage.getItem('gaokao_school_history') || '[]');
|
||
var datalist = document.getElementById('searchHistory');
|
||
if(!datalist) return;
|
||
datalist.innerHTML = list.map(function(k){
|
||
return '<option value="'+esc(k)+'">';
|
||
}).join('');
|
||
}
|
||
|
||
function saveSearchHistory(kw){
|
||
if(!kw) return;
|
||
var list = JSON.parse(localStorage.getItem('gaokao_school_history') || '[]');
|
||
list = list.filter(function(k){ return k !== kw; });
|
||
list.unshift(kw);
|
||
if(list.length > 8) list = list.slice(0, 8);
|
||
localStorage.setItem('gaokao_school_history', JSON.stringify(list));
|
||
loadSearchHistory();
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', loadSearchHistory);
|
||
|
||
function searchSchool(){
|
||
var kw = document.getElementById('keyword').value.trim();
|
||
var cat = document.getElementById('category').value;
|
||
if(!kw){return;}
|
||
var area = document.getElementById('resultsArea');
|
||
area.innerHTML = '<div class="loading">🔍 搜索中，请稍候...</div>';
|
||
|
||
fetch('/api/school/search?q=' + encodeURIComponent(kw) + '&subject=' + encodeURIComponent(cat))
|
||
.then(function(r){
|
||
if(!r.ok) throw new Error('网络错误 ' + r.status);
|
||
return r.json();
|
||
})
|
||
.then(function(d){
|
||
var results = d.schools || [];
|
||
if(results.length === 0){
|
||
area.innerHTML = '<div class="no-data">未找到相关院校，请尝试其他关键词</div>';
|
||
return;
|
||
}
|
||
// 合并到 allSchools，避免重复（按 school+score 去重）
|
||
var existKeys = {};
|
||
allSchools.forEach(function(s){ existKeys[s.school + '|' + s.score] = true; });
|
||
results.forEach(function(s){
|
||
var key = s.school + '|' + s.score;
|
||
if(!existKeys[key]){ allSchools.push(s); existKeys[key] = true; }
|
||
});
|
||
|
||
lastResults = results;
|
||
currentPage = 1;
|
||
|
||
// 写 history
|
||
addHistory('school', '查校对比', '/school.html', kw + ' · ' + cat + '类');
|
||
saveSearchHistory(kw);
|
||
|
||
renderResultsPage();
|
||
refreshDropdowns();
|
||
})
|
||
.catch(function(e){
|
||
area.innerHTML = '<div class="no-data" style="color:#ef4444">⚠️ 搜索失败：' + e.message + '，请刷新页面重试</div>';
|
||
});
|
||
}
|
||
|
||
function addCompareA(idx){
|
||
var s = allSchools[idx];
|
||
if(!s) return;
|
||
if(selectedB && selectedB.school === s.school && selectedB.score === s.score) return;
|
||
selectedA = s;
|
||
refreshDropdowns();
|
||
fillCompare();
|
||
}
|
||
|
||
function addCompareB(idx){
|
||
var s = allSchools[idx];
|
||
if(!s) return;
|
||
if(selectedA && selectedA.school === s.school && selectedA.score === s.score) return;
|
||
selectedB = s;
|
||
refreshDropdowns();
|
||
fillCompare();
|
||
}
|
||
|
||
function refreshDropdowns(){
|
||
// 每次搜索或添加后，用 allSchools 重建下拉框
|
||
var selA = document.getElementById('schoolA');
|
||
var selB = document.getElementById('schoolB');
|
||
var optA = '<option value="">— 选择院校 —</option>';
|
||
var optB = '<option value="">— 选择院校 —</option>';
|
||
allSchools.forEach(function(s,i){
|
||
var isA = selectedA && selectedA.school === s.school && selectedA.score === s.score;
|
||
var isB = selectedB && selectedB.school === s.school && selectedB.score === s.score;
|
||
var label = esc(s.school) + ' | ' + esc(s.type) + ' | ' + s.score + '分';
|
||
optA += '<option value="'+i+'"'+(isA?' selected':'')+'>'+label+'</option>';
|
||
optB += '<option value="'+i+'"'+(isB?' selected':'')+'>'+label+'</option>';
|
||
});
|
||
selA.innerHTML = optA;
|
||
selB.innerHTML = optB;
|
||
}
|
||
|
||
function fillCompare(){
|
||
function fill(t, src){
|
||
document.getElementById(t+'Name').textContent = src ? src.school : '-';
|
||
document.getElementById(t+'Score').textContent = src ? src.score : '-';
|
||
document.getElementById(t+'Rank').textContent = src ? src.rank.toLocaleString() : '-';
|
||
document.getElementById(t+'Num').textContent = src ? (src.num||'-') : '-';
|
||
document.getElementById(t+'Type').textContent = src ? src.type : '-';
|
||
document.getElementById(t+'Req').textContent = src ? src.req : '-';
|
||
}
|
||
fill('a', selectedA);
|
||
fill('b', selectedB);
|
||
var sec = document.getElementById('compareSection');
|
||
sec.style.display = (selectedA || selectedB) ? 'grid' : 'none';
|
||
}
|
||
|
||
// 手动切换下拉框时同步
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
document.getElementById('schoolA').addEventListener('change', function(){
|
||
var idx = parseInt(this.value);
|
||
selectedA = (idx >= 0 && allSchools[idx]) ? allSchools[idx] : null;
|
||
fillCompare();
|
||
});
|
||
document.getElementById('schoolB').addEventListener('change', function(){
|
||
var idx = parseInt(this.value);
|
||
selectedB = (idx >= 0 && allSchools[idx]) ? allSchools[idx] : null;
|
||
fillCompare();
|
||
});
|
||
});
|
||
|
||
function esc(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}
|
||
|
||
function renderResultsPage(){
|
||
var area = document.getElementById('resultsArea');
|
||
var total = lastResults.length;
|
||
var totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
||
if(currentPage < 1) currentPage = 1;
|
||
if(currentPage > totalPages) currentPage = totalPages;
|
||
|
||
var start = (currentPage - 1) * PAGE_SIZE;
|
||
var page = lastResults.slice(start, start + PAGE_SIZE);
|
||
|
||
var html = '<table class="results-table"><thead><tr><th>院校名称</th><th>招生类型</th><th>选科要求</th><th>2025投档分</th><th>投档位次</th><th>招生人数</th><th>操作</th></tr></thead><tbody>';
|
||
page.forEach(function(s){
|
||
var realIdx = allSchools.indexOf(s);
|
||
var selA = selectedA && selectedA.school === s.school && selectedA.score === s.score ? 'disabled' : '';
|
||
var selB = selectedB && selectedB.school === s.school && selectedB.score === s.score ? 'disabled' : '';
|
||
var groupLabel = s.group ? '<span style="color:#60a5fa;font-size:0.72rem">'+s.group+'</span>' : '';
|
||
var typeLabel = s.type + (s.group ? ' <span style="color:#60a5fa;font-size:0.72rem">'+s.group+'</span>' : '');
|
||
var tuitionLabel = s.tuition_annual
|
||
? '<span class="tuition-tag" style="background:rgba(102,126,234,0.18);color:#a5b4fc;border:1px solid rgba(102,126,234,0.3);border-radius:20px;padding:1px 8px;font-size:0.72rem;margin-left:6px;font-weight:600">' + s.tuition_annual.toLocaleString() + '元/年</span>'
|
||
: '';
|
||
html += '<tr>' +
|
||
'<td class="school-name">'+esc(s.school)+tuitionLabel+'</td>' +
|
||
'<td style="color:#fbbf24;font-size:0.82rem">'+typeLabel+'</td>' +
|
||
'<td style="color:#888;font-size:0.78rem">'+esc(s.req)+'</td>' +
|
||
'<td class="score">'+s.score+'</td>' +
|
||
'<td class="rank">'+s.rank.toLocaleString()+'</td>' +
|
||
'<td>'+(s.num||'-')+'</td>' +
|
||
'<td>' +
|
||
'<button class="add-btn" onclick="addCompareA('+realIdx+')" '+selA+'>→ A校</button> ' +
|
||
'<button class="add-btn" onclick="addCompareB('+realIdx+')" '+selB+'>→ B校</button>' +
|
||
'</td>' +
|
||
'</tr>';
|
||
});
|
||
html += '</tbody></table>';
|
||
|
||
// 分页控件
|
||
if(total > PAGE_SIZE){
|
||
html += '<div class="pagination">' +
|
||
'<button onclick="goPage(' + (currentPage-1) + ')" ' + (currentPage<=1?'disabled':'') + '>← 上一页</button>' +
|
||
'<span class="page-info">第 <span>' + currentPage + '</span> / ' + totalPages + ' 页，共 <span>' + total + '</span> 条</span>' +
|
||
'<button onclick="goPage(' + (currentPage+1) + ')" ' + (currentPage>=totalPages?'disabled':'') + '>下一页 →</button>' +
|
||
'</div>';
|
||
}
|
||
|
||
area.innerHTML = html;
|
||
}
|
||
|
||
function goPage(p){
|
||
currentPage = p;
|
||
renderResultsPage();
|
||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||
}
|
||
|
||
// ===== 历史记录 =====
|
||
function addHistory(type, label, url, meta) {
|
||
var key = 'gaokao_history';
|
||
var list = JSON.parse(localStorage.getItem(key) || '[]');
|
||
list = list.filter(function(item){ return !(item.type === type && item.url === url); });
|
||
list.unshift({ type: type, label: label, url: url, meta: meta, time: Date.now() });
|
||
if(list.length > 6) list = list.slice(0, 6);
|
||
localStorage.setItem(key, JSON.stringify(list));
|
||
}
|
||
</script>
|
||
|
||
<div class="footer">
|
||
<div class="footer-inner">
|
||
<p class="footer-logo">高考志愿<span>助手</span></p>
|
||
<p class="footer-desc">数据来源：河南省教育考试院，仅供参考，不作为正式依据</p>
|
||
<p class="footer-contact-title">遇到问题？</p>
|
||
<div class="footer-qr">📷 微信二维码<br><span style="font-size:0.65rem;color:#666">待添加</span></div>
|
||
<div class="footer-bottom">© 2026 河南高考志愿助手 · 仅供辅助参考，不构成正式志愿填报依据</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |