70 lines
2.3 KiB
HTML
70 lines
2.3 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>B1 核心词汇 — 西班牙语知识库</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<nav class="top-nav">
|
|
<a class="back" href="../knowledge.html">← 知识库</a>
|
|
<span class="home">📚 B1 核心词汇</span>
|
|
</nav>
|
|
|
|
<h1>B1 核心词汇与表达</h1>
|
|
<p class="page-subtitle">按主题整理的 B1 常用词汇，约 600 个核心词与表达。点击 🔊 听发音。</p>
|
|
|
|
<div id="b1-index" class="category-grid"></div>
|
|
<div id="b1-content"></div>
|
|
|
|
<script src="../b1-vocab.js"></script>
|
|
<script src="../speech.js"></script>
|
|
<script>
|
|
function escHtml(s) {
|
|
var div = document.createElement('div');
|
|
div.textContent = s;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function speakWord(es) {
|
|
speakText(es, 'es');
|
|
}
|
|
|
|
var groups = {};
|
|
B1_VOCAB.forEach(function(item) {
|
|
var cat = item[3];
|
|
if (!groups[cat]) groups[cat] = [];
|
|
groups[cat].push({ es: item[0], en: item[1], zh: item[2] });
|
|
});
|
|
|
|
var order = Object.keys(groups);
|
|
document.getElementById('b1-index').innerHTML = order.map(function(cat) {
|
|
return '<a class="category-card" href="#cat-' + encodeURIComponent(cat) + '">' +
|
|
'<h2>' + escHtml(cat) + '</h2>' +
|
|
'<span class="count">' + groups[cat].length + ' 词</span>' +
|
|
'</a>';
|
|
}).join('');
|
|
|
|
document.getElementById('b1-content').innerHTML = order.map(function(cat) {
|
|
var rows = groups[cat].map(function(w) {
|
|
return '<tr>' +
|
|
'<td class="vocab-word-cell">' + escHtml(w.es) + ' <button class="speak-btn" data-text="' + escHtml(w.es) + '">🔊</button></td>' +
|
|
'<td>' + escHtml(w.en) + '</td>' +
|
|
'<td>' + escHtml(w.zh) + '</td>' +
|
|
'</tr>';
|
|
}).join('');
|
|
return '<div class="article" id="cat-' + encodeURIComponent(cat) + '">' +
|
|
'<h2>' + escHtml(cat) + '</h2>' +
|
|
'<table><thead><tr><th>Español</th><th>English</th><th>中文</th></tr></thead><tbody>' +
|
|
rows + '</tbody></table></div>';
|
|
}).join('');
|
|
|
|
document.addEventListener('click', function(e) {
|
|
var btn = e.target.closest('.speak-btn');
|
|
if (btn) speakText(btn.dataset.text, 'es');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|