v1.4 — Photo 详情页画廊
- 灯箱画廊:点击图片全屏查看,多图左右切换 - 单图隐藏左右箭头,边界隐藏对应方向键 - 画廊顶部显示'标题 · 作者' - 文章导航保留在灯箱底部 - 图片去重(特色图与正文图片不重复) - 纯黑背景 - 已知限制:画廊内切换文章后灯箱不保持(AJAX 模式未稳定)
This commit is contained in:
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user