anian
332 lines
6.8 KiB
HTML
332 lines
6.8 KiB
HTML
<div class="year-gallery">
|
|
|
|
<!-- Tabs -->
|
|
<div class="yg-tabs">
|
|
<button class="yg-tab active" data-target="yg-2025">2025</button>
|
|
<button class="yg-tab" data-target="yg-2026">2026</button>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- ================= 2025 ================= -->
|
|
<div class="yg-panel active" id="yg-2025">
|
|
|
|
<!-- 封面：像 2026 一样两个独立卡片 -->
|
|
<div class="yg-2025-hero-row">
|
|
<div class="yg-2025-hero">
|
|
<img src="/upload/2025-0-1.jpg">
|
|
</div>
|
|
|
|
<div class="yg-2025-hero">
|
|
<img src="/upload/2025-0-2.jpg">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ========= 12 个月：4 行 3 列 ========= -->
|
|
<div class="yg-grid-2025-3col">
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-1-1.jpg">
|
|
<img src="/upload/2025-1-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-2-1.jpg">
|
|
<img src="/upload/2025-2-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-3-1.jpg">
|
|
<img src="/upload/2025-3-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-4-1.jpg">
|
|
<img src="/upload/2025-4-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-5-1.jpg">
|
|
<img src="/upload/2025-5-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-6-1.jpg">
|
|
<img src="/upload/2025-6-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-7-1.jpg">
|
|
<img src="/upload/2025-7-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-8-1.jpg">
|
|
<img src="/upload/2025-8-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-9-1.jpg">
|
|
<img src="/upload/2025-9-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-10-1.jpg">
|
|
<img src="/upload/2025-10-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-11-1.jpg">
|
|
<img src="/upload/2025-11-2.jpg">
|
|
</div>
|
|
|
|
<div class="yg-card">
|
|
<img src="/upload/2025-12-1.jpg">
|
|
<img src="/upload/2025-12-2.jpg">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ================= 2026（完全未改动） ================= -->
|
|
<div class="yg-panel" id="yg-2026">
|
|
|
|
<div class="yg-hero-row">
|
|
<div class="yg-hero">
|
|
<img src="/upload/2026.jpg">
|
|
</div>
|
|
|
|
<div class="yg-hero">
|
|
<img src="/upload/2026-0.jpg">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="yg-grid-2026">
|
|
|
|
<div class="yg-2026-month"><img src="/upload/2026-1.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-2.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-3.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-4.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-5.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-6.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-7.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-8.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-9.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-10.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-11.jpg"></div>
|
|
<div class="yg-2026-month"><img src="/upload/2026-12.jpg"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
.year-gallery {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 50px auto;
|
|
}
|
|
|
|
|
|
/* ---------------- Tabs ---------------- */
|
|
.yg-tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.yg-tab {
|
|
padding: 10px 25px;
|
|
margin: 0 5px;
|
|
border-radius: 999px;
|
|
border: 1px solid #9ad1a1;
|
|
background: #e9f7ec;
|
|
cursor: pointer;
|
|
transition: .3s;
|
|
color: #2c6e3f;
|
|
}
|
|
|
|
.yg-tab.active {
|
|
background: #4caf50;
|
|
color: #fff;
|
|
border-color: #4caf50;
|
|
}
|
|
|
|
.yg-panel {
|
|
display: none;
|
|
}
|
|
|
|
.yg-panel.active {
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
/* ================= 2025 ================= */
|
|
|
|
/* 封面像 2026 一样：两个独立卡片 */
|
|
.yg-2025-hero-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.yg-2025-hero {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
|
padding: 8px;
|
|
}
|
|
|
|
.yg-2025-hero img {
|
|
width: 100%;
|
|
display: block;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
|
|
|
|
/* 3 列 × 4 行 月份布局 */
|
|
.yg-grid-2025-3col {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 14px;
|
|
}
|
|
|
|
.yg-card {
|
|
border-radius: 14px;
|
|
background: #fff;
|
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
|
padding: 8px;
|
|
}
|
|
|
|
.yg-grid-2025-3col .yg-card img {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
display: block;
|
|
}
|
|
|
|
/* 月份双图之间：只加一点点 */
|
|
.yg-card img+img {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
|
|
|
|
/* ================= 2026 =================（未改） */
|
|
|
|
.yg-hero-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.yg-hero {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
box-shadow: 0 6px 22px rgba(76, 175, 80, .18);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.yg-hero img {
|
|
width: 100%;
|
|
aspect-ratio: 1185/1775;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.yg-hero:first-child img {
|
|
object-position: top;
|
|
}
|
|
|
|
.yg-grid-2026 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.yg-2026-month {
|
|
background: #fff;
|
|
border-radius: 14px;
|
|
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
|
|
padding: 8px;
|
|
}
|
|
|
|
.yg-2026-month img {
|
|
width: 100%;
|
|
aspect-ratio: 1185/1775;
|
|
object-fit: cover;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
|
|
|
|
/* 手机优化 */
|
|
@media(max-width:900px) {
|
|
|
|
.yg-2025-hero-row,
|
|
.yg-grid-2025-3col {
|
|
gap: 10px;
|
|
}
|
|
|
|
.yg-hero-row,
|
|
.yg-grid-2026 {
|
|
gap: 10px;
|
|
}
|
|
|
|
.yg-card,
|
|
.yg-2026-month {
|
|
padding: 6px;
|
|
box-shadow: 0 4px 12px rgba(76, 175, 80, .15);
|
|
}
|
|
}
|
|
|
|
@media(max-width:600px) {
|
|
.year-gallery {
|
|
margin: 25px auto;
|
|
}
|
|
|
|
.yg-card,
|
|
.yg-2026-month {
|
|
padding: 5px;
|
|
}
|
|
|
|
.yg-2025-hero-row,
|
|
.yg-grid-2025-3col,
|
|
.yg-grid-2026,
|
|
.yg-hero-row {
|
|
gap: 8px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
function initYearGallery() {
|
|
document.querySelectorAll(".yg-tab").forEach(btn => {
|
|
btn.onclick = () => {
|
|
document.querySelectorAll(".yg-tab").forEach(b => b.classList.remove("active"));
|
|
document.querySelectorAll(".yg-panel").forEach(p => p.classList.remove("active"));
|
|
btn.classList.add("active");
|
|
document.getElementById(btn.dataset.target).classList.add("active");
|
|
};
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", initYearGallery);
|
|
document.addEventListener("pjax:complete", initYearGallery);
|
|
</script> |