464 lines
20 KiB
Plaintext
464 lines
20 KiB
Plaintext
---
|
||
import Layout from "../layouts/Layout.astro"
|
||
|
||
// 示例数据：字段严格对齐后端 BrandRunway 模型 + 图片集接口
|
||
const article = {
|
||
id: 1,
|
||
title: "Maison Lumen — Paper Light",
|
||
description:
|
||
"巴黎，2026 秋冬。Maison Lumen 以“Paper Light（纸光）”为题，将薄纱、宣纸与压褶工艺叠合成一种近乎透明的体积感。\n\n系列延续了工作室对“轻”的执念：肩线被刻意放低，廓形在行走中随风摆动，像被光穿透的纸。色彩仅保留骨白、炭灰与一抹雾蓝。\n\n这不是关于廓形的宣言，而是关于 material 的克制——用最少的手段，制造最大的呼吸感。",
|
||
created_at: 1711948800,
|
||
updated_at: 1711948800,
|
||
year: 2026,
|
||
source_url: "https://example.com/runway/maison-lumen-paper-light",
|
||
brand_id: 12,
|
||
brand_name: "Maison Lumen",
|
||
images: [
|
||
{ id: 1, image: "https://picsum.photos/seed/art1/1200/1500", name: "Look 01", sort_order: 1 },
|
||
{ id: 2, image: "https://picsum.photos/seed/art2/1200/1500", name: "Look 02", sort_order: 2 },
|
||
{ id: 3, image: "https://picsum.photos/seed/art3/1200/1500", name: "Look 03", sort_order: 3 },
|
||
{ id: 4, image: "https://picsum.photos/seed/art4/1200/1500", name: "Look 04", sort_order: 4 },
|
||
],
|
||
}
|
||
|
||
const fmt = (ts: number) => {
|
||
const d = new Date(ts * 1000)
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth() + 1).padStart(2, "0")
|
||
const day = String(d.getDate()).padStart(2, "0")
|
||
return `${y}.${m}.${day}`
|
||
}
|
||
|
||
const body = article.description.split("\n\n")
|
||
---
|
||
|
||
<Layout title={`${article.title} — Runway Report`}>
|
||
<article class="mx-auto max-w-[1100px] px-5 md:px-10 py-12 md:py-16">
|
||
<!-- 面包屑 / 品牌 -->
|
||
<div class="flex items-center justify-between text-[11px] font-mono uppercase tracking-[0.25em] text-black border-b border-black pb-4">
|
||
<a href="/" class="hover:opacity-60 transition-opacity">← Index</a>
|
||
<span id="art-brand">Runway · {article.brand_name}</span>
|
||
</div>
|
||
|
||
<!-- 标题 -->
|
||
<h1 class="font-serif font-black leading-[0.95] tracking-tight text-[10vw] md:text-[4.5rem] mt-8">
|
||
{article.title}
|
||
</h1>
|
||
|
||
<!-- 元信息 -->
|
||
<div class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-[12px] font-mono uppercase tracking-widest text-[#666]">
|
||
<span id="art-date">{fmt(article.created_at)}</span>
|
||
<span id="art-year" class="text-black">{article.year}</span>
|
||
<a href={article.source_url} target="_blank" rel="noopener" class="hover:text-black underline underline-offset-4">Source ↗</a>
|
||
</div>
|
||
|
||
<!-- 正文 -->
|
||
<div class="mt-12 grid md:grid-cols-12 gap-8">
|
||
<div class="md:col-span-2 text-[11px] font-mono uppercase tracking-widest text-[#999] pt-1">
|
||
Report
|
||
</div>
|
||
<div id="art-body" class="md:col-span-10 max-w-[68ch] space-y-5 text-[16px] leading-[1.9] text-[#222]">
|
||
{body.map((p) => <p>{p}</p>)}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图片集 -->
|
||
<section class="mt-16">
|
||
<div class="flex items-end justify-between border-b border-[#eee] pb-3 mb-6">
|
||
<div class="text-[11px] font-mono uppercase tracking-[0.25em] text-[#999]">
|
||
Gallery <span id="art-gallery-count" class="ml-2 text-black"></span>
|
||
</div>
|
||
<button type="button" id="art-viewall" class="text-[11px] font-mono uppercase tracking-widest border border-black px-3 py-1.5 hover:bg-black hover:text-white transition-colors">⤢ 全屏查看</button>
|
||
</div>
|
||
|
||
<!-- 图片网格 -->
|
||
<div id="art-gallery" class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||
{article.images.map((im) => (
|
||
<figure class="g-item bg-[#f2f2f2] cursor-zoom-in">
|
||
<img src={im.image} alt={im.name} loading="lazy" class="w-full aspect-[3/4] object-cover" />
|
||
<figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2">{im.name}</figcaption>
|
||
</figure>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<div class="mt-16 pt-6 border-t border-black">
|
||
<a href="/" class="text-[12px] font-mono uppercase tracking-widest hover:opacity-60 transition-opacity">← Back to Index</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- 灯箱：左侧竖排缩略图条 + 中央大图（点击放大→宽度最大+纵向滚动） -->
|
||
<div id="lb" class="lb" aria-hidden="true">
|
||
<div class="lb-counter" id="lb-counter"></div>
|
||
<button class="lb-btn lb-close" id="lb-close" aria-label="关闭">✕</button>
|
||
<div class="lb-stage" id="lb-stage">
|
||
<div class="lb-thumbs" id="lb-thumbs"></div>
|
||
<button class="lb-tbtn lb-tup" id="lb-tup" type="button" aria-label="上一张">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 14l6-6 6 6"/></svg>
|
||
</button>
|
||
<button class="lb-tbtn lb-tdown" id="lb-tdown" type="button" aria-label="下一张">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 10l6 6 6-6"/></svg>
|
||
</button>
|
||
<button class="lb-btn lb-prev" id="lb-prev" type="button" aria-label="上一张">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg>
|
||
</button>
|
||
<button class="lb-btn lb-next" id="lb-next" type="button" aria-label="下一张">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
|
||
</button>
|
||
<div class="lb-main" id="lb-main">
|
||
<img id="lb-img" class="lb-img" alt="" />
|
||
</div>
|
||
</div>
|
||
<div class="lb-caption" id="lb-caption"></div>
|
||
<div class="lb-hint" id="lb-hint">点击图片放大 · 上下滚动查看 · Esc 关闭</div>
|
||
</div>
|
||
</Layout>
|
||
|
||
<style is:global>
|
||
@reference "tailwindcss";
|
||
|
||
/* 灯箱：左侧竖排缩略图条 + 中央大图；点击放大→宽度最大+纵向滚动 */
|
||
.lb {
|
||
position: fixed; inset: 0; z-index: 100;
|
||
@apply bg-white;
|
||
display: none; flex-direction: column;
|
||
opacity: 0; transition: opacity .2s ease;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.lb.is-open { display: flex; opacity: 1; }
|
||
|
||
.lb-stage {
|
||
flex: 1 1 auto; min-height: 0;
|
||
display: flex; align-items: stretch; justify-content: stretch;
|
||
overflow: hidden; position: relative;
|
||
animation: lbIn .2s ease both;
|
||
}
|
||
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
|
||
|
||
.lb-thumbs {
|
||
flex: 0 0 118px; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth;
|
||
padding: 38px 18px 38px 20px;
|
||
border-right: 1px solid rgba(0,0,0,.08);
|
||
background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
|
||
scrollbar-width: none; -ms-overflow-style: none;
|
||
}
|
||
.lb-thumbs::-webkit-scrollbar { width: 0; height: 0; }
|
||
.lb-thumb {
|
||
position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
|
||
padding: 0; margin: 0 0 8px; border: 0;
|
||
@apply bg-[#ebebeb] rounded-[2px];
|
||
overflow: hidden; cursor: pointer;
|
||
opacity: .42; transition: opacity .2s ease, transform .2s ease;
|
||
}
|
||
.lb-thumb:last-child { margin-bottom: 0; }
|
||
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.lb-thumb::after {
|
||
content: ""; position: absolute; inset: 0; border-radius: 2px;
|
||
box-shadow: inset 0 0 0 0 transparent; pointer-events: none;
|
||
transition: box-shadow .2s ease;
|
||
}
|
||
.lb-thumb:hover { opacity: .85; }
|
||
.lb-thumb.is-active { opacity: 1; transform: scale(1.03); }
|
||
.lb-thumb.is-active::after { box-shadow: inset 0 0 0 2px #111; }
|
||
.lb-thumb-idx {
|
||
position: absolute; left: 6px; top: 6px; z-index: 1;
|
||
font: 600 9px/1 ui-monospace, SFMono-Regular, monospace;
|
||
@apply tracking-[.12em] text-white px-[5px] py-[3px] rounded-[3px];
|
||
background: rgba(0,0,0,.55);
|
||
backdrop-filter: blur(4px); pointer-events: none;
|
||
}
|
||
.lb-thumb.is-active .lb-thumb-idx { @apply bg-[#111] text-white; }
|
||
|
||
.lb-main {
|
||
flex: 1 1 auto; min-width: 0; min-height: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
position: relative; padding: 0 72px;
|
||
}
|
||
.lb-img {
|
||
max-width: 100%; max-height: 100%; display: block;
|
||
object-fit: contain; user-select: none; -webkit-user-drag: none;
|
||
transition: opacity .2s ease; cursor: zoom-in;
|
||
}
|
||
|
||
/* 放大态：宽度最大化 + 纵向滚动（无滚轮缩放、无拖拽、无特效） */
|
||
.lb-main.is-zoomed { align-items: stretch; display: block; overflow-y: auto; overflow-x: hidden; }
|
||
.lb-main.is-zoomed .lb-img { width: 100%; max-width: 100%; height: auto; max-height: none; cursor: zoom-out; }
|
||
|
||
.lb-btn {
|
||
position: absolute; z-index: 3;
|
||
width: 42px; height: 42px;
|
||
@apply rounded-full;
|
||
border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.72);
|
||
@apply text-[#111];
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
transition: background .15s, transform .15s, border-color .15s; backdrop-filter: blur(10px);
|
||
}
|
||
.lb-btn svg, .lb-tbtn svg {
|
||
display: block; fill: none; stroke: currentColor;
|
||
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
.lb-btn svg { width: 20px; height: 20px; }
|
||
.lb-tbtn svg { width: 16px; height: 16px; }
|
||
.lb-btn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.24); }
|
||
.lb-close { top: 18px; right: 18px; }
|
||
.lb-prev { left: 114px; top: 50%; transform: translateY(-50%); }
|
||
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
|
||
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.08); }
|
||
|
||
/* 左栏上下翻页按钮（浮在缩略图条上、禁手动滚动时的翻页入口） */
|
||
.lb-tbtn {
|
||
position: absolute; z-index: 4;
|
||
left: 20px; width: 72px; height: 34px;
|
||
border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.82);
|
||
@apply rounded-[6px];
|
||
cursor: pointer;
|
||
display: flex; align-items: center; justify-content: center;
|
||
@apply text-[#111];
|
||
backdrop-filter: blur(8px);
|
||
transition: background .15s, transform .15s, border-color .15s;
|
||
}
|
||
.lb-tbtn svg { width: 16px; height: 16px; display: block; }
|
||
.lb-tbtn:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.22); }
|
||
.lb-tup { top: 8px; }
|
||
.lb-tdown { bottom: 8px; }
|
||
|
||
.lb-counter {
|
||
position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3;
|
||
font: 600 12px/1 ui-monospace, monospace;
|
||
@apply tracking-[.14em] text-[#111];
|
||
background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.1);
|
||
@apply px-[11px] py-[7px] rounded-[6px];
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
.lb-caption {
|
||
position: absolute; left: 0; right: 0; bottom: 44px; z-index: 3;
|
||
text-align: center; color: rgba(0,0,0,.62); pointer-events: none;
|
||
font: 11px/1.4 ui-monospace, monospace;
|
||
@apply tracking-[.18em] uppercase;
|
||
padding: 0 24px; text-shadow: 0 1px 3px rgba(255,255,255,.7);
|
||
}
|
||
.lb-hint {
|
||
position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
|
||
text-align: center; color: rgba(0,0,0,.45); pointer-events: none;
|
||
font: 11px/1 ui-monospace, monospace;
|
||
@apply tracking-[.14em];
|
||
padding: 0 24px; transition: opacity .2s ease; text-shadow: 0 1px 3px rgba(255,255,255,.7);
|
||
}
|
||
.lb-hint.is-hidden { opacity: 0; }
|
||
|
||
@media (max-width: 640px) {
|
||
.lb-thumbs { flex: 0 0 76px; padding: 32px 8px 32px 12px; }
|
||
.lb-thumb { margin-bottom: 8px; }
|
||
.lb-thumb-idx { font-size: 8px; left: 4px; top: 4px; padding: 2px 4px; }
|
||
.lb-main { padding: 0 18px; }
|
||
.lb-btn { width: 38px; height: 38px; }
|
||
.lb-prev { left: 82px; } .lb-next { right: 8px; }
|
||
.lb-tbtn { left: 12px; width: 52px; height: 30px; }
|
||
.lb-caption { bottom: 40px; }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// 真实数据接入：按 ?id= 拉取后端接口，失败时保留上方示例布局
|
||
const API = import.meta.env.PUBLIC_API_BASE || ""
|
||
const toAbs = (url: string) =>
|
||
!url ? "" : /^https?:\/\//i.test(url) ? url : API + url
|
||
const id = new URLSearchParams(location.search).get("id")
|
||
if (id) {
|
||
;(async () => {
|
||
try {
|
||
const res = await fetch(`${API}/api/public/articles/${id}`)
|
||
if (!res.ok) return
|
||
const d = (await res.json()).data
|
||
if (!d) return
|
||
const titleEl = document.querySelector("h1")
|
||
if (titleEl && d.title) titleEl.textContent = d.title
|
||
const bodyEl = document.getElementById("art-body")
|
||
if (bodyEl && d.description) {
|
||
bodyEl.innerHTML = d.description
|
||
.split("\n\n")
|
||
.map((p: string) => `<p>${p}</p>`)
|
||
.join("")
|
||
}
|
||
const brandEl = document.getElementById("art-brand")
|
||
if (brandEl && d.brand_name) brandEl.textContent = `Runway · ${d.brand_name}`
|
||
const yearEl = document.getElementById("art-year")
|
||
if (yearEl && d.year) yearEl.textContent = String(d.year)
|
||
const dateEl = document.getElementById("art-date")
|
||
if (dateEl && d.published_at) {
|
||
const dt = new Date(Number(d.published_at) * 1000)
|
||
dateEl.textContent = `${dt.getFullYear()}.${String(dt.getMonth() + 1).padStart(2, "0")}.${String(dt.getDate()).padStart(2, "0")}`
|
||
}
|
||
const imgs = d.images
|
||
if (imgs && Array.isArray(imgs)) {
|
||
const gal = document.getElementById("art-gallery")
|
||
if (gal) {
|
||
gal.innerHTML = imgs
|
||
.map(
|
||
(im: any) =>
|
||
`<figure class="bg-[#f2f2f2]"><img src="${toAbs(im.image)}" alt="${im.name || ""}" loading="lazy" class="w-full aspect-[3/4] object-cover" /><figcaption class="text-[11px] font-mono uppercase tracking-widest text-[#999] mt-2">${im.name || ""}</figcaption></figure>`
|
||
)
|
||
.join("")
|
||
}
|
||
}
|
||
} catch {
|
||
/* 后端不可达时，使用示例数据 */
|
||
}
|
||
})()
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
(function () {
|
||
const gallery = document.getElementById("art-gallery");
|
||
const lb = document.getElementById("lb");
|
||
const lbStage = document.getElementById("lb-stage");
|
||
const lbMain = document.getElementById("lb-main");
|
||
const lbImg = document.getElementById("lb-img");
|
||
const lbCounter = document.getElementById("lb-counter");
|
||
const lbCaption = document.getElementById("lb-caption");
|
||
const lbThumbs = document.getElementById("lb-thumbs");
|
||
const lbHint = document.getElementById("lb-hint");
|
||
const btnClose = document.getElementById("lb-close");
|
||
const btnPrev = document.getElementById("lb-prev");
|
||
const btnNext = document.getElementById("lb-next");
|
||
const btnTup = document.getElementById("lb-tup");
|
||
const btnTdown = document.getElementById("lb-tdown");
|
||
const viewall = document.getElementById("art-viewall");
|
||
|
||
let items = [];
|
||
let index = 0;
|
||
let zoomed = false;
|
||
|
||
/* 放大态：宽度最大化 + 纵向滚动（无滚轮缩放 / 无拖拽 / 无特效） */
|
||
function zoomIn() {
|
||
zoomed = true;
|
||
if (lbMain) { lbMain.classList.add("is-zoomed"); lbMain.scrollTop = 0; }
|
||
if (lbHint) lbHint.classList.add("is-hidden");
|
||
}
|
||
function resetZoom() {
|
||
zoomed = false;
|
||
if (lbMain) { lbMain.classList.remove("is-zoomed"); lbMain.scrollTop = 0; }
|
||
if (lbHint) lbHint.classList.remove("is-hidden");
|
||
}
|
||
function toggleZoom() { zoomed ? resetZoom() : zoomIn(); }
|
||
|
||
/* 收集画廊图片 */
|
||
function collect() {
|
||
const list = [];
|
||
if (gallery) gallery.querySelectorAll("img").forEach((img) => {
|
||
const fig = img.closest("figure");
|
||
const cap = fig && fig.querySelector("figcaption");
|
||
list.push({ src: img.currentSrc || img.src, name: (cap && cap.textContent || "").trim() });
|
||
});
|
||
return list;
|
||
}
|
||
|
||
/* 渲染左侧竖排缩略图条 */
|
||
function renderStrip() {
|
||
if (!lbThumbs) return;
|
||
lbThumbs.innerHTML = items
|
||
.map((it, i) => {
|
||
const n = String(i + 1).padStart(2, "0");
|
||
return '<button type="button" class="lb-thumb' + (i === index ? ' is-active' : '') + '" data-i="' + i + '">' +
|
||
'<img src="' + it.src + '" alt="" />' +
|
||
'<span class="lb-thumb-idx">' + n + '</span>' +
|
||
'</button>';
|
||
})
|
||
.join("");
|
||
}
|
||
function show(i) {
|
||
if (!items.length) return;
|
||
index = (i + items.length) % items.length;
|
||
const it = items[index];
|
||
resetZoom();
|
||
lbImg.style.opacity = "0";
|
||
const loader = new Image();
|
||
loader.onload = function () { lbImg.src = it.src; lbImg.style.opacity = "1"; };
|
||
loader.src = it.src;
|
||
if (lbCounter) lbCounter.textContent = (index + 1) + " / " + items.length;
|
||
if (lbCaption) lbCaption.textContent = it.name || "";
|
||
if (lbThumbs) lbThumbs.querySelectorAll(".lb-thumb").forEach((t, k) => {
|
||
t.classList.toggle("is-active", k === index);
|
||
if (k === index) {
|
||
// 自动居中当前张（左栏禁用手动滚动，改用程序化 scrollTo）
|
||
const target = t.offsetTop - (lbThumbs.clientHeight - t.clientHeight) / 2;
|
||
lbThumbs.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
|
||
}
|
||
});
|
||
}
|
||
function open(i) {
|
||
items = collect();
|
||
if (!items.length) return;
|
||
if (lb) { lb.classList.add("is-open"); lb.setAttribute("aria-hidden", "false"); }
|
||
document.body.style.overflow = "hidden";
|
||
renderStrip();
|
||
show(i || 0);
|
||
}
|
||
function close() {
|
||
if (lb) { lb.classList.remove("is-open"); lb.setAttribute("aria-hidden", "true"); }
|
||
document.body.style.overflow = "";
|
||
}
|
||
function next() { show(index + 1); }
|
||
function prev() { show(index - 1); }
|
||
|
||
/* 事件绑定 */
|
||
if (gallery) gallery.addEventListener("click", (e) => {
|
||
const fig = e.target.closest("figure");
|
||
if (!fig) return;
|
||
const imgs = Array.prototype.slice.call(gallery.querySelectorAll("img"));
|
||
open(Math.max(0, imgs.indexOf(fig.querySelector("img"))));
|
||
});
|
||
if (btnClose) btnClose.addEventListener("click", close);
|
||
if (btnNext) btnNext.addEventListener("click", (e) => { e.stopPropagation(); next(); });
|
||
if (btnPrev) btnPrev.addEventListener("click", (e) => { e.stopPropagation(); prev(); });
|
||
if (btnTup) btnTup.addEventListener("click", (e) => { e.stopPropagation(); prev(); });
|
||
if (btnTdown) btnTdown.addEventListener("click", (e) => { e.stopPropagation(); next(); });
|
||
if (lb) lb.addEventListener("click", (e) => {
|
||
const t = e.target;
|
||
if (t === lb || (t.classList && t.classList.contains("lb-stage"))) close();
|
||
});
|
||
if (lbThumbs) lbThumbs.addEventListener("click", (e) => {
|
||
const t = e.target.closest(".lb-thumb");
|
||
if (t) show(Number(t.dataset.i));
|
||
});
|
||
if (lbImg) lbImg.addEventListener("click", toggleZoom);
|
||
|
||
document.addEventListener("keydown", (e) => {
|
||
if (!lb || !lb.classList.contains("is-open")) return;
|
||
if (e.key === "Escape") close();
|
||
else if (e.key === "ArrowRight") next();
|
||
else if (e.key === "ArrowLeft") prev();
|
||
});
|
||
if (viewall) viewall.addEventListener("click", () => open(0));
|
||
|
||
/* 移动端单指滑动切换（仅在未放大时，放大态交给纵向滚动） */
|
||
let tx0 = 0, ty0 = 0, two = false;
|
||
if (lbStage) {
|
||
lbStage.addEventListener("touchstart", (e) => {
|
||
if (e.touches.length === 1) { tx0 = e.touches[0].clientX; ty0 = e.touches[0].clientY; }
|
||
else if (e.touches.length === 2) two = true;
|
||
}, { passive: true });
|
||
lbStage.addEventListener("touchend", (e) => {
|
||
if (two) { two = false; return; }
|
||
if (zoomed) return;
|
||
const t = e.changedTouches[0];
|
||
const dx = t.clientX - tx0, dy = t.clientY - ty0;
|
||
if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) (dx < 0 ? next() : prev());
|
||
}, { passive: true });
|
||
}
|
||
|
||
/* 计数 + 画廊重渲染后同步 */
|
||
function syncCount() {
|
||
const c = document.getElementById("art-gallery-count");
|
||
const n = gallery ? gallery.querySelectorAll("img").length : 0;
|
||
if (c) c.textContent = n ? "· 共 " + n + " 张" : "";
|
||
}
|
||
syncCount();
|
||
if (gallery && "MutationObserver" in window) {
|
||
new MutationObserver(syncCount).observe(gallery, { childList: true });
|
||
}
|
||
})();
|
||
</script>
|