anian
213 lines
7.7 KiB
HTML
213 lines
7.7 KiB
HTML
<div class="tab-container" style="width: 100%; max-width: 1200px; margin: 30px auto 0;">
|
|
<div class="tab-nav" style="display: flex; border-bottom: 1px solid #a7f3d0; margin-bottom: 15px;">
|
|
<div class="tab-nav-item active" data-tab="tab1"
|
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #f0fdf4; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
|
黄黄日历</div>
|
|
<div class="tab-nav-item" data-tab="tab2"
|
|
style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #ffffff; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
|
|
近日快讯</div>
|
|
</div>
|
|
|
|
<div class="tab-content" style="width: 100%; height: auto; position: relative;">
|
|
<div class="tab-panel active" id="tab1" style="display: block; width: 100%; height: auto;">
|
|
<div style="width:100%;height:auto;position:relative;overflow:hidden;">
|
|
<div id="calendar-img-container-2025"
|
|
style="width:100%;height:auto;position:relative;margin:0 auto;max-width:1200px;">
|
|
<div id="calendar-2025-global-blur"></div>
|
|
<div id="calendar-2025-intro">
|
|
<div id="calendar-2025-intro-mask"></div>
|
|
<img id="calendar-2025-intro-img1" src="/upload/2025-0-1.jpg">
|
|
<img id="calendar-2025-intro-img2" src="/upload/2025-0-2.jpg">
|
|
</div>
|
|
<div id="calendar-2025-month-group"
|
|
style="width:100%;height:auto;position:absolute;top:0;left:0;opacity:0;transition:opacity 1s ease-in-out;z-index:1;">
|
|
<img id="calendar-2025-month-1"
|
|
style="width:100%;height:auto;display:block;margin-bottom:5px;object-fit:contain;">
|
|
<img id="calendar-2025-month-2" style="width:100%;height:auto;display:block;object-fit:contain;">
|
|
</div>
|
|
<a id="calendar-2025-link" href="/calendar"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
#calendar-2025-global-blur {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, .35);
|
|
backdrop-filter: blur(16px);
|
|
z-index: 9997;
|
|
opacity: 1;
|
|
transition: opacity .8s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#calendar-2025-intro {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#calendar-2025-intro-mask {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, .25);
|
|
backdrop-filter: blur(18px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#calendar-2025-intro img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
object-fit: contain;
|
|
opacity: .25;
|
|
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#calendar-2025-intro-img1 {
|
|
margin-bottom: 5px;
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
#calendar-2025-intro-img2 {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
#calendar-2025-link {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
pointer-events: auto;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tab-nav-item:hover:not(.active) {
|
|
background-color: #dcfce7;
|
|
border-color: #86efac;
|
|
color: #047857;
|
|
}
|
|
|
|
.tab-nav-item.active {
|
|
background-color: #4ADE80 !important;
|
|
color: #ffffff !important;
|
|
border-color: #4ADE80 !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function initializeCalendar2025() {
|
|
const container = document.getElementById('calendar-img-container-2025');
|
|
if (!container) return;
|
|
|
|
const globalBlur = document.getElementById("calendar-2025-global-blur");
|
|
const intro = document.getElementById("calendar-2025-intro");
|
|
const introImg1 = document.getElementById("calendar-2025-intro-img1");
|
|
const introImg2 = document.getElementById("calendar-2025-intro-img2");
|
|
const monthGroup = document.getElementById("calendar-2025-month-group");
|
|
const monthImg1 = document.getElementById("calendar-2025-month-1");
|
|
const monthImg2 = document.getElementById("calendar-2025-month-2");
|
|
|
|
const month = new Date().getMonth() + 1;
|
|
monthImg1.src = `/upload/2025-${month}-1.jpg`;
|
|
monthImg2.src = `/upload/2025-${month}-2.jpg`;
|
|
|
|
const waitImages = imgs => new Promise(res => {
|
|
let loaded = 0;
|
|
const done = () => (++loaded >= imgs.length && res());
|
|
imgs.forEach(img => {
|
|
if (img.complete) done();
|
|
else {
|
|
img.onload = done;
|
|
img.onerror = done;
|
|
}
|
|
});
|
|
});
|
|
|
|
const setHeightByImages = (img1, img2) => {
|
|
container.style.height = (img1.offsetHeight || 0) + (img2.offsetHeight || 0) + 5 + "px";
|
|
};
|
|
|
|
const smoothScrollToContainer = () => {
|
|
const rect = container.getBoundingClientRect();
|
|
const target = window.scrollY + rect.top + rect.height / 2 - window.innerHeight / 2;
|
|
$('html, body').animate({ scrollTop: target }, 800);
|
|
};
|
|
|
|
const init = async () => {
|
|
await waitImages([introImg1, introImg2]);
|
|
setHeightByImages(introImg1, introImg2);
|
|
|
|
introImg1.style.opacity = "1";
|
|
introImg1.style.transform = "translateX(0)";
|
|
introImg2.style.opacity = "1";
|
|
introImg2.style.transform = "translateX(0)";
|
|
|
|
smoothScrollToContainer();
|
|
|
|
await waitImages([monthImg1, monthImg2]);
|
|
|
|
setTimeout(() => {
|
|
introImg1.style.transform = "translateX(100%)";
|
|
introImg2.style.transform = "translateX(-100%)";
|
|
introImg1.style.opacity = "0";
|
|
introImg2.style.opacity = "0";
|
|
|
|
intro.style.transition = "opacity .8s ease";
|
|
intro.style.opacity = 0;
|
|
globalBlur.style.opacity = 0;
|
|
|
|
setTimeout(() => {
|
|
intro.remove();
|
|
globalBlur.remove();
|
|
}, 900);
|
|
|
|
monthGroup.style.opacity = 1;
|
|
monthGroup.style.zIndex = 3;
|
|
setHeightByImages(monthImg1, monthImg2);
|
|
}, 1500);
|
|
};
|
|
|
|
init();
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", initializeCalendar2025);
|
|
document.addEventListener("pjax:complete", initializeCalendar2025);
|
|
</script>
|
|
</div>
|
|
|
|
<div class="tab-panel" id="tab2" style="display: none; width: 100%; height: auto;">
|
|
<iframe src="https://60s.lylme.com/" width="100%" height="800px"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function initTabSwitch() {
|
|
const navItems = document.querySelectorAll('.tab-nav-item');
|
|
const panels = document.querySelectorAll('.tab-panel');
|
|
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', function () {
|
|
navItems.forEach(nav => nav.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
const targetTab = this.dataset.tab;
|
|
panels.forEach(panel => {
|
|
panel.style.display = 'none';
|
|
panel.classList.remove('active');
|
|
});
|
|
|
|
const targetPanel = document.getElementById(targetTab);
|
|
targetPanel.style.display = 'block';
|
|
targetPanel.classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initTabSwitch);
|
|
document.addEventListener('pjax:complete', initTabSwitch);
|
|
</script> |