v1.4 — Photo 详情页画廊

- 灯箱画廊:点击图片全屏查看,多图左右切换
- 单图隐藏左右箭头,边界隐藏对应方向键
- 画廊顶部显示'标题 · 作者'
- 文章导航保留在灯箱底部
- 图片去重(特色图与正文图片不重复)
- 纯黑背景
- 已知限制:画廊内切换文章后灯箱不保持(AJAX 模式未稳定)
This commit is contained in:
2026-05-04 01:44:56 +08:00
parent c615206e88
commit 55cfd26162
4 changed files with 230 additions and 12 deletions
+81
View File
@@ -407,3 +407,84 @@ echo "done"
border-top: 2px dashed var(--border);
}
.photo-detail__meta { border-top: none; padding-top: 0; }
.photo-detail__body img {
display: block;
width: 100%;
height: auto;
margin: 20px 0;
border-radius: var(--radius);
}
.photo-detail__body p {
margin: 16px 0;
text-align: center;
font-style: italic;
color: var(--ink-light);
}
/* 照片灯箱 */
.photo-lightbox {
display: none;
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: #000;
z-index: 9999;
justify-content: center; align-items: center;
}
.photo-lightbox.active { display: flex; }
.photo-lightbox__content { max-width: 90vw; max-height: 90vh; }
.photo-lightbox__content img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
.photo-lightbox__close { position: absolute; top: 24px; right: 36px; font-size: 42px; color: #fff; cursor: pointer; opacity: 0.8; z-index: 2; }
.photo-lightbox__close:hover { opacity: 1; }
.photo-lightbox__counter { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; opacity: 0.7; z-index: 2; }
.photo-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 56px; color: #fff; cursor: pointer; user-select: none; padding: 24px; opacity: 0.7; z-index: 2; }
.photo-lightbox__nav:hover { opacity: 1; }
.photo-lightbox__prev { left: 16px; }
.photo-lightbox__next { right: 16px; }
/* 图片可点击提示 */
.photo-detail__image { cursor: zoom-in; }
.photo-detail__body img { cursor: zoom-in; }
.photo-lightbox__postnav {
position: absolute;
bottom: 18px;
left: 0; right: 0;
display: flex;
justify-content: space-between;
padding: 0 40px;
z-index: 2;
}
.photo-lightbox__postnav a {
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 14px;
}
.photo-lightbox__postnav a:hover { color: #fff; }
.photo-lightbox__postnav span { color: transparent; }
.photo-lightbox__counter { bottom: 60px; }
.photo-lightbox__brand {
position: absolute;
top: 24px;
left: 36px;
color: rgba(255,255,255,0.25);
font-size: 16px;
letter-spacing: 0.1em;
z-index: 2;
font-family: "Noto Serif SC", "STSong", "Songti SC", serif;
}
.photo-lightbox__info {
text-align: center;
margin-bottom: 16px;
}
.photo-lightbox__photo-title {
color: rgba(255,255,255,0.5);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
}
.photo-lightbox__content img { border-radius: 6px; }