r112/majors.html · 约 3502 字符
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">6<title>专业地图 · 小草职业教育学校</title>7<link rel="icon" href="data:,">8<link rel="stylesheet" href="style.css">9</head>10<body data-page="majors">1112<div class="map-head">13 <div class="mh-title">专业地图</div>14 <div class="mh-sub">六大专业群 · 覆盖热门就业方向</div>15</div>16<div class="cat-bar" id="catBar"></div>17<div class="map-legend" id="mapLegend"></div>18<div id="majorList" class="major-list"><p class="dim">加载中…</p></div>1920<nav class="tabbar"><a class="tab-item" href="index.html"><span class="tab-ic">🏠</span><span>首页</span></a><a class="tab-item on" href="majors.html"><span class="tab-ic">🗺️</span><span>专业</span></a><a class="tab-item" href="enroll.html"><span class="tab-ic">📝</span><span>报名</span></a><a class="tab-item" href="contact.html"><span class="tab-ic">☎️</span><span>联系</span></a></nav>21<div class="mask" id="mask"></div>22<div class="toast" id="toast"></div>23<script src="data/fallback.js"></script>24<script src="app.js"></script>25<script>26var CATCOL = ['#19b36b', '#2f6fed', '#e8a317', '#e64980', '#7048e8', '#1098ad'];27DS.get('majors', function (d) {28 if (!d) { failBox($('#majorList'), '专业数据加载失败', "location.reload()"); return; }29 var groups = d.groups || [];30 $('#catBar').innerHTML = '<button class="cat-chip on" data-cat="">全部</button>' + groups.map(function (g, i) {31 return '<button class="cat-chip" data-cat="' + esc(g.cat) + '" style="--c:' + CATCOL[i % CATCOL.length] + '">' + esc(g.cat) + '</button>';32 }).join('');33 $('#mapLegend').innerHTML = groups.map(function (g, i) {34 return '<span class="lg"><i style="background:' + CATCOL[i % CATCOL.length] + '"></i>' + esc(g.cat) + '</span>';35 }).join('');36 function render(filter) {37 var html = '';38 groups.forEach(function (g, gi) {39 if (filter && g.cat !== filter) return;40 var c = CATCOL[gi % CATCOL.length];41 html += '<div class="mgroup"><div class="mgroup-h"><i style="background:' + c + '"></i>' + esc(g.cat) + ' <span>' + esc(g.icon || '') + '</span></div>';42 html += (g.list || []).map(function (m) {43 return '<div class="mcard" style="--c:' + c + '">'44 + '<div class="mcard-top"><span class="mcard-name">' + esc(m.name) + '</span><span class="mcard-code">' + esc(m.code || '') + '</span></div>'45 + '<div class="mcard-meta">学制 ' + esc(m.years || '') + ' 年 · 计划 ' + fmt(m.plan || 0) + ' 人 · ¥' + fmt(m.tuition || 0) + '/年</div>'46 + '<div class="mcard-dir">' + esc(m.direction || '') + '</div>'47 + '<button class="mcard-btn" data-major="' + esc(m.name) + '">填报此专业 ›</button>'48 + '</div>';49 }).join('');50 html += '</div>';51 });52 $('#majorList').innerHTML = html;53 }54 render('');55 $('#catBar').addEventListener('click', function (e) {56 var b = e.target.closest('.cat-chip'); if (!b) return;57 $$('.cat-chip', $('#catBar')).forEach(function (x) { x.classList.remove('on'); });58 b.classList.add('on'); render(b.getAttribute('data-cat'));59 });60 $('#majorList').addEventListener('click', function (e) {61 var b = e.target.closest('.mcard-btn'); if (!b) return;62 location.href = 'enroll.html?major=' + encodeURIComponent(b.getAttribute('data-major'));63 });64});65</script>66</body>67</html>68