新增嵌入式代码块；优化通知书推送时机
This commit is contained in:
anian
@@ -0,0 +1,213 @@
|
||||
<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.png">
|
||||
<img id="calendar-2025-intro-img2" src="/upload/2025-0-2.png">
|
||||
</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.png`;
|
||||
monthImg2.src = `/upload/2025-${month}-2.png`;
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user