@model ScenarioViewModel
|
<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<title>@Model.DocumentTitle</title>
|
<link rel="stylesheet" href="@Model.BasePath/static/style.css" />
|
</head>
|
<body class="page-view page-view--tabs@(Model.Slides.Count > 0 ? "" : " page-view--empty")">
|
@if (Model.Slides.Count > 0)
|
{
|
<div id="viewTabsStack" class="view-tabs-stack">
|
@for (var i = 0; i < Model.Slides.Count; i++)
|
{
|
var s = Model.Slides[i];
|
<iframe
|
class="view-tab-iframe@(i == Model.StartIndex ? " is-active" : "")"
|
data-index="@i"
|
src="@s.BoardUrl"
|
title="@s.Title"
|
aria-hidden="@(i == Model.StartIndex ? "false" : "true")"
|
></iframe>
|
}
|
</div>
|
}
|
else
|
{
|
<p class="view-empty-hint">该场景下没有可轮播的页面，请在 config/scenarios.config.json 中配置 pages。</p>
|
}
|
<script type="application/json" id="boardViewStackSlides">@Html.Raw(Model.SlidesJson)</script>
|
<script>
|
(function () {
|
const SCENARIO_NAME = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.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 = @Model.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 = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(new {
|
scenarioId = Model.ScenarioId,
|
scenarioName = Model.ScenarioName,
|
image = Model.ScenarioImage
|
}));
|
const cur = readRecent().filter((x) => x.scenarioId !== entry.scenarioId);
|
cur.unshift(entry);
|
writeRecent(cur);
|
})();
|
</script>
|
</body>
|
</html>
|
|
