<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<title><%= documentTitle %></title>
|
<link rel="stylesheet" href="<%= basePath %>/static/style.css" />
|
</head>
|
<body class="page-view page-view--tabs<%= slides.length ? '' : ' page-view--empty' %>">
|
<% if (slides.length) { %>
|
<div id="viewTabsStack" class="view-tabs-stack">
|
<% slides.forEach(function (s, i) { %>
|
<iframe
|
class="view-tab-iframe<%= i === startIndex ? ' is-active' : '' %>"
|
data-index="<%= i %>"
|
src="<%= s.boardUrl %>"
|
title="<%= s.title %>"
|
aria-hidden="<%= i === startIndex ? 'false' : 'true' %>"
|
></iframe>
|
<% }); %>
|
</div>
|
<% } else { %>
|
<p class="view-empty-hint">该场景下没有可轮播的页面，请在 config/scenarios.config.json 中配置 pages。</p>
|
<% } %>
|
<script type="application/json" id="boardViewStackSlides"><%- slidesJson %></script>
|
<script>
|
(function () {
|
const SCENARIO_NAME = <%- JSON.stringify(scenarioName) %>;
|
const slidesEl = document.getElementById("boardViewStackSlides");
|
let slides = [];
|
try {
|
slides = JSON.parse(slidesEl ? slidesEl.textContent : "[]");
|
} catch {
|
slides = [];
|
}
|
if (!Array.isArray(slides) || !slides.length) {
|
return;
|
}
|
|
const iframes = document.querySelectorAll("#viewTabsStack .view-tab-iframe");
|
if (!iframes.length) {
|
return;
|
}
|
if (slides.length === 1) {
|
const f = iframes[0];
|
f.classList.add("is-active");
|
f.setAttribute("aria-hidden", "false");
|
document.title = slides[0].title + " — " + SCENARIO_NAME;
|
return;
|
}
|
|
const START = <%= startIndex %>;
|
const i0 = Math.min(START, Math.max(0, slides.length - 1));
|
|
function setActiveIndex(i) {
|
const s = slides[i];
|
for (let n = 0; n < iframes.length; n++) {
|
const el = iframes[n];
|
if (n === i) {
|
el.classList.add("is-active");
|
el.setAttribute("aria-hidden", "false");
|
} else {
|
el.classList.remove("is-active");
|
el.setAttribute("aria-hidden", "true");
|
}
|
}
|
document.title = s.title + " — " + SCENARIO_NAME;
|
}
|
|
let t = 0;
|
function showAt(i) {
|
setActiveIndex(i);
|
const s = slides[i];
|
const sec = Math.max(1, Number(s.staytime) || 30);
|
if (t) {
|
clearTimeout(t);
|
}
|
t = setTimeout(function () {
|
showAt((i + 1) % slides.length);
|
}, sec * 1000);
|
}
|
showAt(i0);
|
})();
|
</script>
|
<script>
|
(function () {
|
const LS_KEY = "board_recent_v2";
|
const MAX = 5;
|
function readRecent() {
|
try {
|
const raw = localStorage.getItem(LS_KEY);
|
const arr = raw ? JSON.parse(raw) : [];
|
return Array.isArray(arr) ? arr : [];
|
} catch {
|
return [];
|
}
|
}
|
function writeRecent(items) {
|
localStorage.setItem(LS_KEY, JSON.stringify(items.slice(0, MAX)));
|
}
|
const entry = <%- JSON.stringify({
|
scenarioId,
|
scenarioName,
|
image: scenarioImage,
|
}) %>;
|
const cur = readRecent().filter(
|
(x) => x.scenarioId !== entry.scenarioId
|
);
|
cur.unshift(entry);
|
writeRecent(cur);
|
})();
|
</script>
|
</body>
|
</html>
|
