新增嵌入式代码块；优化通知书推送时机
This commit is contained in:
anian
@@ -0,0 +1,624 @@
|
||||
<section class="people-list">
|
||||
<style>
|
||||
/* CSS 变量定义 (绿色主题) */
|
||||
:root {
|
||||
--green-text: #0f5132;
|
||||
--green-light: #e9f7f1;
|
||||
--green-border: #c3e6d3;
|
||||
--green-link: #197d53;
|
||||
--green-link-hover: #146343;
|
||||
--green-glow: rgba(15, 81, 50, 0.2);
|
||||
--avatar-w: 80px;
|
||||
--avatar-h: 100px;
|
||||
--radius: 12px;
|
||||
--font: "Helvetica Neue", Arial, sans-serif;
|
||||
--scratch-cursor-size: 100px;
|
||||
/* 刮奖圆圈大小 */
|
||||
--scratch-mask-color: #d1efe3;
|
||||
/* 刮奖遮罩颜色 */
|
||||
}
|
||||
|
||||
/* 整体容器样式 */
|
||||
.people-list {
|
||||
font-family: var(--font);
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.category-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: var(--green-text);
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--green-border);
|
||||
letter-spacing: 0.5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 朋友圈链接样式 */
|
||||
.people-friends-link {
|
||||
font-size: 0.9rem !important;
|
||||
font-weight: normal !important;
|
||||
color: var(--green-link) !important;
|
||||
text-decoration: none !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 4px !important;
|
||||
transition: color 0.2s ease !important;
|
||||
}
|
||||
|
||||
.people-friends-link:hover {
|
||||
color: var(--green-link-hover) !important;
|
||||
}
|
||||
|
||||
/* 分类区段 */
|
||||
.category-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.category-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 卡片网格布局 */
|
||||
.people-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 单个卡片 (person) 基础样式 */
|
||||
.person {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
border-radius: 14px;
|
||||
background: var(--green-light);
|
||||
align-items: center;
|
||||
flex: 1 1 calc(50% - 6px);
|
||||
min-width: 260px;
|
||||
transition: background-color 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
/* 默认光标 */
|
||||
}
|
||||
|
||||
/* 普通卡片：鼠标光晕效果 */
|
||||
.person:not(.mystery-person)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: var(--green-glow);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
transition: transform 0.3s ease;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
left: 50%;
|
||||
/* 默认居中 */
|
||||
top: 50%;
|
||||
/* 默认居中 */
|
||||
}
|
||||
|
||||
/* 悬停时光晕放大 */
|
||||
.person:not(.mystery-person):hover::before {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
/* 悬停时头像缩放 */
|
||||
.person:not(.mystery-person):hover .avatar img {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
/* 悬停时背景色变化 */
|
||||
.person:not(.mystery-person):hover {
|
||||
background-color: #dff4ec;
|
||||
}
|
||||
|
||||
/* 头像区域 */
|
||||
.avatar {
|
||||
width: var(--avatar-w);
|
||||
height: var(--avatar-h);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: #d1efe3;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* 信息区域 */
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.name,
|
||||
.bio {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--green-text);
|
||||
}
|
||||
|
||||
.bio {
|
||||
margin-top: 1px;
|
||||
font-size: 0.92rem;
|
||||
color: #234437;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.bio a {
|
||||
color: var(--green-text);
|
||||
text-decoration: none !important;
|
||||
border-bottom: none !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* 神秘嘉宾卡片 (刮奖效果) */
|
||||
.mystery-person {
|
||||
cursor: none;
|
||||
/* 隐藏默认光标 */
|
||||
background-color: var(--scratch-mask-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 刮奖遮罩 Canvas */
|
||||
.mystery-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: auto;
|
||||
/* 允许鼠标事件交互 */
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 刮奖提示文字 */
|
||||
.mystery-hint {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--green-text);
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.mystery-hint i {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 刮奖自定义光标 */
|
||||
.mystery-cursor {
|
||||
position: absolute;
|
||||
width: var(--scratch-cursor-size);
|
||||
height: var(--scratch-cursor-size);
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(15, 81, 50, 0.6);
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
/* 默认隐藏 */
|
||||
}
|
||||
|
||||
/* 补充 CSS：普通卡片光晕位置 (用于JS鼠标追踪) */
|
||||
.person:not(.mystery-person)::before {
|
||||
left: var(--mouse-x, 50%);
|
||||
top: var(--mouse-y, 50%);
|
||||
}
|
||||
|
||||
/* 响应式调整 (max-width: 768px) */
|
||||
@media (max-width: 768px) {
|
||||
.category-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.people-friends-link {
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
|
||||
.person {
|
||||
flex: 1 1 100%;
|
||||
/* 单列显示 */
|
||||
padding: 18px;
|
||||
gap: 18px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.people-grid {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
--avatar-w: 90px;
|
||||
--avatar-h: 110px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.bio {
|
||||
font-size: 0.96rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 移动端隐藏普通卡片光晕 */
|
||||
.person:not(.mystery-person)::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="category-section">
|
||||
<h3 class="category-title">
|
||||
近期联系
|
||||
<a href="/friends" class="people-friends-link">
|
||||
<i class="ri-group-line"></i> 前往朋友圈
|
||||
</a>
|
||||
</h3>
|
||||
<div class="people-grid">
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/8aea7800gy1i2vfbxoqhdj24w07c0b2p.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">黄诗扶</p>
|
||||
<p class="bio">
|
||||
又甜又脆的大冬枣！好听！好看！好吃！黄黄的伟大无需多言！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/ec39c62fly1i3rextah4gj22dc35s1ky.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">双笙</p>
|
||||
<p class="bio">
|
||||
什么？你问我为什么喜欢包包？可能因为是“青春”吧？
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/005Jyswjgy1hywx7z7sb7j30zk1betbd.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">浅影阿</p>
|
||||
<p class="bio">
|
||||
谁能拒绝唱歌这么好看的老大呢？反正我是不行！下一位！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/ab0efe4ely1hnpfzqqw1oj23ls5eoqvg.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">平生不晚</p>
|
||||
<p class="bio">
|
||||
首先是戏腔好听，然后是妆造好看，最后就来到了这里
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-section">
|
||||
<h3 class="category-title">神秘嘉宾</h3>
|
||||
<div class="people-grid">
|
||||
<div class="person mystery-person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/69e273f8ly8fnvmu255jyj20e80e8wev.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">蔡徐坤</p>
|
||||
<p class="bio">
|
||||
不要问为什么坤坤会在这里！因为！黑粉也是粉！
|
||||
</p>
|
||||
</div>
|
||||
<canvas class="mystery-mask"></canvas>
|
||||
<div class="mystery-hint">
|
||||
<i class="ri-hand-scratch-line"></i>
|
||||
点击或悬浮，解锁神秘嘉宾
|
||||
</div>
|
||||
<div class="mystery-cursor"></div>
|
||||
</div>
|
||||
|
||||
<div class="person mystery-person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/logo.png">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">敬请期待</p>
|
||||
<p class="bio">
|
||||
会是谁呢？我也不知道
|
||||
</p>
|
||||
</div>
|
||||
<canvas class="mystery-mask"></canvas>
|
||||
<div class="mystery-hint">
|
||||
<i class="ri-hand-scratch-line"></i>
|
||||
点击或悬浮，解锁神秘嘉宾
|
||||
</div>
|
||||
<div class="mystery-cursor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="category-section">
|
||||
<h3 class="category-title">全部名单</h3>
|
||||
<div class="people-grid">
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/62a32171jw8f2kxo5x4j1j20ai0bvt9l.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">明月庄主</p>
|
||||
<p class="bio">
|
||||
眼睁睁的看着庄主结婚生娃，也算是从小看到大了
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/80c44916gy1i6s8l132bhj20u01n14cu.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">杨馥羽</p>
|
||||
<p class="bio">
|
||||
剧是没看的，人是要夸可爱的，抖音是第一条推的
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/mugu.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">木骨</p>
|
||||
<p class="bio">
|
||||
事情的起因要从那节最优化理论课说起...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="person">
|
||||
<div class="avatar">
|
||||
<img src="/upload/001U2r7Jgy1i20tzkph8gj61vk2tcx6p02.jpg">
|
||||
</div>
|
||||
<div class="info">
|
||||
<p class="name">音频怪物</p>
|
||||
<p class="bio">
|
||||
你知道的，我很少粉同性的，但...老妖他不一样！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 存储事件监听引用，用于PJAX返回时清理
|
||||
const eventListeners = {
|
||||
personMouseMove: [],
|
||||
mysteryMouseMove: [],
|
||||
mysteryMouseLeave: [],
|
||||
mysteryClick: [],
|
||||
resize: []
|
||||
};
|
||||
|
||||
// 普通卡片：鼠标跟踪脚本
|
||||
function initPersonCards() {
|
||||
// 清理之前的事件监听
|
||||
eventListeners.personMouseMove.forEach(({ el, handler }) => {
|
||||
el.removeEventListener('mousemove', handler);
|
||||
});
|
||||
eventListeners.personMouseMove = [];
|
||||
|
||||
const personCards = document.querySelectorAll('.person:not(.mystery-person)');
|
||||
personCards.forEach(card => {
|
||||
let lastMouseX = 50;
|
||||
let lastMouseY = 50;
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
const rect = card.getBoundingClientRect();
|
||||
lastMouseX = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
lastMouseY = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
card.style.setProperty('--mouse-x', `${lastMouseX}%`);
|
||||
card.style.setProperty('--mouse-y', `${lastMouseY}%`);
|
||||
};
|
||||
|
||||
card.addEventListener('mousemove', handleMouseMove);
|
||||
eventListeners.personMouseMove.push({ el: card, handler: handleMouseMove });
|
||||
|
||||
card.addEventListener('mouseleave', () => { });
|
||||
});
|
||||
}
|
||||
|
||||
// 神秘嘉宾：刮奖效果脚本
|
||||
function initMysteryCards() {
|
||||
// 清理之前的事件监听
|
||||
eventListeners.mysteryMouseMove.forEach(({ el, handler }) => {
|
||||
el.removeEventListener('mousemove', handler);
|
||||
});
|
||||
eventListeners.mysteryMouseLeave.forEach(({ el, handler }) => {
|
||||
el.removeEventListener('mouseleave', handler);
|
||||
});
|
||||
eventListeners.mysteryClick.forEach(({ el, handler }) => {
|
||||
el.removeEventListener('click', handler);
|
||||
});
|
||||
eventListeners.resize.forEach(handler => {
|
||||
window.removeEventListener('resize', handler);
|
||||
});
|
||||
eventListeners.mysteryMouseMove = [];
|
||||
eventListeners.mysteryMouseLeave = [];
|
||||
eventListeners.mysteryClick = [];
|
||||
eventListeners.resize = [];
|
||||
|
||||
const mysteryCards = document.querySelectorAll('.mystery-person');
|
||||
mysteryCards.forEach(card => {
|
||||
const canvas = card.querySelector('.mystery-mask');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const cursor = card.querySelector('.mystery-cursor');
|
||||
const hintText = card.querySelector('.mystery-hint');
|
||||
|
||||
// 从:root获取 CSS 变量值
|
||||
const computedStyle = getComputedStyle(document.documentElement);
|
||||
const cursorSize = parseInt(computedStyle.getPropertyValue('--scratch-cursor-size'));
|
||||
const maskColor = computedStyle.getPropertyValue('--scratch-mask-color');
|
||||
|
||||
// 重置/初始化 Canvas 状态
|
||||
canvas.width = card.offsetWidth;
|
||||
canvas.height = card.offsetHeight;
|
||||
ctx.fillStyle = maskColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
hintText.style.opacity = '1';
|
||||
cursor.style.display = 'none';
|
||||
canvas.style.display = 'block';
|
||||
hintText.style.display = 'flex';
|
||||
card.style.cursor = 'none';
|
||||
|
||||
function resizeMysteryCanvas() {
|
||||
const rect = card.getBoundingClientRect();
|
||||
canvas.width = rect.width;
|
||||
canvas.height = rect.height;
|
||||
fillMysteryMask();
|
||||
}
|
||||
|
||||
function fillMysteryMask() {
|
||||
ctx.fillStyle = maskColor;
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
function updateMysteryCursor(x, y) {
|
||||
// 光标位置计算
|
||||
cursor.style.left = `${x - cursorSize / 2}px`;
|
||||
cursor.style.top = `${y - cursorSize / 2}px`;
|
||||
}
|
||||
|
||||
function scratchMystery(x, y) {
|
||||
fillMysteryMask();
|
||||
ctx.globalCompositeOperation = 'destination-out';
|
||||
ctx.beginPath();
|
||||
// 刮奖半径同步光标大小
|
||||
ctx.arc(x, y, cursorSize / 2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.globalCompositeOperation = 'source-over';
|
||||
}
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
cursor.style.display = 'block';
|
||||
hintText.style.opacity = '0';
|
||||
updateMysteryCursor(x, y);
|
||||
scratchMystery(x, y);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
cursor.style.display = 'none';
|
||||
hintText.style.opacity = '1';
|
||||
fillMysteryMask(); // 鼠标移开重新遮挡
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
// 清除遮罩，显示内容
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
setTimeout(() => {
|
||||
canvas.style.display = 'none';
|
||||
hintText.style.display = 'none';
|
||||
card.style.cursor = 'default';
|
||||
cursor.style.display = 'none';
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 绑定事件
|
||||
canvas.addEventListener('mousemove', handleMouseMove);
|
||||
canvas.addEventListener('mouseleave', handleMouseLeave);
|
||||
card.addEventListener('click', handleClick);
|
||||
window.addEventListener('resize', resizeMysteryCanvas);
|
||||
|
||||
// 存储事件监听引用
|
||||
eventListeners.mysteryMouseMove.push({ el: canvas, handler: handleMouseMove });
|
||||
eventListeners.mysteryMouseLeave.push({ el: canvas, handler: handleMouseLeave });
|
||||
eventListeners.mysteryClick.push({ el: card, handler: handleClick });
|
||||
eventListeners.resize.push(resizeMysteryCanvas);
|
||||
|
||||
resizeMysteryCanvas();
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化所有组件
|
||||
function initPeopleList() {
|
||||
initPersonCards();
|
||||
initMysteryCards();
|
||||
}
|
||||
|
||||
// 页面首次加载初始化
|
||||
document.addEventListener('DOMContentLoaded', initPeopleList);
|
||||
|
||||
// PJAX跳转成功后重新初始化
|
||||
document.addEventListener('pjax:success', function () {
|
||||
// 仅当页面存在people-list组件时才初始化
|
||||
if (document.querySelector('.people-list')) {
|
||||
initPeopleList();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面隐藏时清理事件监听（避免内存泄漏）
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
if (document.hidden) {
|
||||
// 清理所有事件监听 (简化逻辑：仅清除存储的)
|
||||
[...eventListeners.personMouseMove, ...eventListeners.mysteryMouseMove].forEach(({ el, handler }) => el.removeEventListener('mousemove', handler));
|
||||
eventListeners.mysteryMouseLeave.forEach(({ el, handler }) => el.removeEventListener('mouseleave', handler));
|
||||
eventListeners.mysteryClick.forEach(({ el, handler }) => el.removeEventListener('click', handler));
|
||||
eventListeners.resize.forEach(handler => window.removeEventListener('resize', handler));
|
||||
} else {
|
||||
// 页面重新显示时重新初始化
|
||||
if (document.querySelector('.people-list')) {
|
||||
initPeopleList();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
@@ -0,0 +1,332 @@
|
||||
<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.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-2025-hero">
|
||||
<img src="/upload/2025-0-2.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ========= 12 个月：4 行 3 列 ========= -->
|
||||
<div class="yg-grid-2025-3col">
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-1-1.png">
|
||||
<img src="/upload/2025-1-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-2-1.png">
|
||||
<img src="/upload/2025-2-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-3-1.png">
|
||||
<img src="/upload/2025-3-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-4-1.png">
|
||||
<img src="/upload/2025-4-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-5-1.png">
|
||||
<img src="/upload/2025-5-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-6-1.png">
|
||||
<img src="/upload/2025-6-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-7-1.png">
|
||||
<img src="/upload/2025-7-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-8-1.png">
|
||||
<img src="/upload/2025-8-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-9-1.png">
|
||||
<img src="/upload/2025-9-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-10-1.png">
|
||||
<img src="/upload/2025-10-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-11-1.png">
|
||||
<img src="/upload/2025-11-2.png">
|
||||
</div>
|
||||
|
||||
<div class="yg-card">
|
||||
<img src="/upload/2025-12-1.png">
|
||||
<img src="/upload/2025-12-2.png">
|
||||
</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.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yg-grid-2026">
|
||||
|
||||
<div class="yg-2026-month"><img src="/upload/2026-1.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-2.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-3.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-4.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-5.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-6.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-7.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-8.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-9.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-10.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-11.png"></div>
|
||||
<div class="yg-2026-month"><img src="/upload/2026-12.png"></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>
|
||||
@@ -0,0 +1,268 @@
|
||||
<style>
|
||||
/* 基础样式：保留原有3D旋转卡片核心样式，修复超链接消失问题 */
|
||||
.dr_card_wrapper {
|
||||
width: 100%;
|
||||
height: clamp(300px, 70vw, 500px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
background: none;
|
||||
touch-action: pan-y;
|
||||
margin: 0 0 50px 0;
|
||||
/* 容器间距 */
|
||||
}
|
||||
|
||||
.dr_card_inner {
|
||||
--dr-w: clamp(60px, 18vw, 100px);
|
||||
--dr-h: clamp(110px, 30vw, 170px);
|
||||
--dr-translateZ: calc((var(--dr-w) + var(--dr-h)));
|
||||
--dr-rotateX: -15deg;
|
||||
--dr-perspective: clamp(800px, 150vw, 1000px);
|
||||
--dr-rotate-direction: 1;
|
||||
/* 统一顺时针旋转，可修改为-1改为逆时针 */
|
||||
position: absolute;
|
||||
width: var(--dr-w);
|
||||
height: var(--dr-h);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) perspective(var(--dr-perspective));
|
||||
z-index: 2;
|
||||
transform-style: preserve-3d;
|
||||
animation: dr_card_rotating 25s linear infinite;
|
||||
will-change: transform;
|
||||
-webkit-will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes dr_card_rotating {
|
||||
from {
|
||||
transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(0deg);
|
||||
-webkit-transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(calc(360deg * var(--dr-rotate-direction)));
|
||||
-webkit-transform: translate(-50%, -50%) perspective(var(--dr-perspective)) rotateX(var(--dr-rotateX)) rotateY(calc(360deg * var(--dr-rotate-direction)));
|
||||
}
|
||||
}
|
||||
|
||||
.dr_card_card {
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ));
|
||||
-webkit-transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ));
|
||||
touch-action: manipulation;
|
||||
z-index: 3;
|
||||
/* 保证卡片层级高于背景 */
|
||||
transition: all 0.3s ease;
|
||||
/* 过渡动画，优化交互体验 */
|
||||
}
|
||||
|
||||
.dr_card_card a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
tap-highlight-color: transparent;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.dr_card_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
/* 为视频播放图标做定位容器 */
|
||||
}
|
||||
|
||||
/* 图片卡片专属样式（绿色系，标识静态图片） */
|
||||
.dr_card_card--img {
|
||||
border: 2px solid #4CAF50;
|
||||
/* 绿色边框，直观区分 */
|
||||
background-color: rgba(76, 175, 80, 0.1);
|
||||
/* 浅绿透明底色，增加层次感 */
|
||||
}
|
||||
|
||||
/* 视频卡片专属样式（蓝色系，标识动态视频） */
|
||||
.dr_card_card--video {
|
||||
border: 2px solid #2196F3;
|
||||
/* 蓝色边框，直观区分 */
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
/* 浅蓝透明底色，增加层次感 */
|
||||
}
|
||||
|
||||
/* 视频卡片专属播放图标，用户一眼识别视频类型 */
|
||||
.dr_card_card--video .dr_card_img::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
clip-path: polygon(50% 50%, 80% 50%, 65% 35%, 65% 65%);
|
||||
/* 三角形播放按钮 */
|
||||
z-index: 10;
|
||||
pointer-events: none;
|
||||
/* 不遮挡超链接点击 */
|
||||
}
|
||||
|
||||
/* 卡片标签，明确标注图片/视频（强化信息） */
|
||||
.dr_card_tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.dr_card_tag--img {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.dr_card_tag--video {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
/* 交互反馈，强化用户认知（电脑端hover/手机端active） */
|
||||
.dr_card_card--img:hover {
|
||||
box-shadow: 0 0 18px rgba(76, 175, 80, 0.6);
|
||||
/* 绿色阴影扩散 */
|
||||
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ)) scale(1.05);
|
||||
/* 轻微放大 */
|
||||
}
|
||||
|
||||
.dr_card_card--video:hover {
|
||||
box-shadow: 0 0 18px rgba(33, 150, 243, 0.6);
|
||||
/* 蓝色阴影扩散 */
|
||||
transform: rotateY(calc((360deg / var(--dr-quantity)) * var(--dr-index))) translateZ(var(--dr-translateZ)) scale(1.05);
|
||||
/* 轻微放大 */
|
||||
}
|
||||
|
||||
.dr_card_card--img:active,
|
||||
.dr_card_card--video:active {
|
||||
opacity: 0.9;
|
||||
/* 手机端触摸反馈，轻微透明 */
|
||||
}
|
||||
|
||||
/* 媒体查询：小屏手机优化 - 缩小标签文字及容器尺寸 */
|
||||
@media (max-width: 375px) {
|
||||
.dr_card_inner {
|
||||
--dr-rotateX: -10deg;
|
||||
animation-duration: 30s;
|
||||
}
|
||||
|
||||
.dr_card_card {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.dr_card_card--video .dr_card_img::after {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
/* 小屏缩小播放图标 */
|
||||
}
|
||||
|
||||
/* 手机端：缩小标签容器高度和文字大小 */
|
||||
.dr_card_tag {
|
||||
height: 16px;
|
||||
/* 标签容器高度减小 */
|
||||
line-height: 16px;
|
||||
/* 行高与高度匹配，垂直居中 */
|
||||
font-size: 10px;
|
||||
/* 标签文字缩小 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 单个旋转容器：包含5张图片 + 5个视频（总计10张卡片） -->
|
||||
<div class="dr_card_wrapper">
|
||||
<div class="dr_card_inner" style="--dr-quantity: 10; --dr-rotate-direction: 1;">
|
||||
<!-- 图片卡片（5张，随机挑选原图片集中的5张） -->
|
||||
<div class="dr_card_card dr_card_card--img" style="--dr-index: 0;">
|
||||
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||
<a href="/photos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/3867579473.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--img" style="--dr-index: 1;">
|
||||
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||
<a href="/photos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/433739173.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--img" style="--dr-index: 2;">
|
||||
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||
<a href="/photos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/2026-0.png');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--img" style="--dr-index: 3;">
|
||||
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||
<a href="/photos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/IMG_20251207_103435.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--img" style="--dr-index: 4;">
|
||||
<div class="dr_card_tag dr_card_tag--img">图片</div>
|
||||
<a href="/photos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/26szrmrp1fm.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 视频卡片（5张，随机挑选原视频集中的5张） -->
|
||||
<div class="dr_card_card dr_card_card--video" style="--dr-index: 5;">
|
||||
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||
<a href="/videos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/ec39c62fly1i3rextah4gj22dc35s1ky.jpg');">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--video" style="--dr-index: 6;">
|
||||
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||
<a href="/videos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/8aea7800gy1i2vfbxoqhdj24w07c0b2p.jpg');">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--video" style="--dr-index: 7;">
|
||||
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||
<a href="/videos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/IMG_20251207_161707.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--video" style="--dr-index: 8;">
|
||||
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||
<a href="/videos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/IMG_9900.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dr_card_card dr_card_card--video" style="--dr-index: 9;">
|
||||
<div class="dr_card_tag dr_card_tag--video">视频</div>
|
||||
<a href="/videos">
|
||||
<div class="dr_card_img" style="background-image: url('/upload/IMG_9902.jpg');"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,363 @@
|
||||
<style>
|
||||
/**
|
||||
* 导航容器基础样式
|
||||
*/
|
||||
.nav-container {
|
||||
font-family: 'Segoe UI', Roboto, sans-serif;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tab 导航栏
|
||||
*/
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background-color: #f9fef7;
|
||||
border: 1px solid #e6f7ef;
|
||||
}
|
||||
|
||||
.nav-tab {
|
||||
flex: 1;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #2d8659;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.nav-tab {
|
||||
padding: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab.active {
|
||||
background-color: #4ade80;
|
||||
/* 激活状态背景色 */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-tab:hover:not(.active) {
|
||||
background-color: #e6f7ef;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容区标题样式
|
||||
*/
|
||||
.nav-section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2d8659;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #e6f7ef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 标题前的装饰块 */
|
||||
.nav-section-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
background-color: #4ade80;
|
||||
margin-right: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡片布局网格
|
||||
*/
|
||||
.nav-grid {
|
||||
display: grid;
|
||||
gap: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.nav-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.nav-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航卡片样式
|
||||
*/
|
||||
.nav-card {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(74, 222, 128, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e6f7ef;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 隐藏的链接，用于覆盖整个卡片 */
|
||||
.nav-card-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.nav-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(74, 222, 128, 0.2);
|
||||
border-color: #4ade80;
|
||||
}
|
||||
|
||||
/* 图片容器和图片缩放效果 */
|
||||
.nav-card-img-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
/* 16:9 比例 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-card-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-card:hover .nav-card-img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 卡片内容 */
|
||||
.nav-card-content {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nav-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2d8659;
|
||||
margin-bottom: 8px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-card:hover .nav-card-title {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.nav-card-desc {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* 标签区卡片特殊样式 (tag-section) */
|
||||
.tag-section .nav-card {
|
||||
background: #f9fef7;
|
||||
}
|
||||
|
||||
.tag-section .nav-card-title {
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.tag-section .nav-card:hover .nav-card-title {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.tag-section .nav-card-desc {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/**
|
||||
* 内容切换和动画
|
||||
*/
|
||||
.nav-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="nav-container">
|
||||
<div class="nav-tabs">
|
||||
<div class="nav-tab active" data-target="category-content">文章分类</div>
|
||||
<div class="nav-tab" data-target="tag-content">文章标签</div>
|
||||
</div>
|
||||
|
||||
<div id="category-content" class="nav-content active">
|
||||
<h2 class="nav-section-title">热门分类</h2>
|
||||
<div class="nav-grid category-section">
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/categories/shi')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/shi.jpg" class="nav-card-img" alt="诗">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">诗</h3>
|
||||
<p class="nav-card-desc">笔落山河凝气韵，字藏风月寄情长。一吟一咏皆风骨，半阙半章尽流芳。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/categories/ci')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/ci.jpg" class="nav-card-img" alt="词">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">词</h3>
|
||||
<p class="nav-card-desc">锦字填成清浅调，柔肠织就婉约声。小令长调皆入画，浅唱低吟总关情。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/categories/qu')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/qu.jpg" class="nav-card-img" alt="曲">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">曲</h3>
|
||||
<p class="nav-card-desc">俗韵唱尽人间味，清声漫染烟火色。嬉笑怒骂藏真意，浅白深醇总动人。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/categories/fu')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/fu.jpg" class="nav-card-img" alt="赋">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">赋</h3>
|
||||
<p class="nav-card-desc">铺陈万象摛文彩，墨叙今古诉慨慷。骈俪藏锋含浩气，一赋千秋韵远长。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tag-content" class="nav-content">
|
||||
<h2 class="nav-section-title">热门标签</h2>
|
||||
<div class="nav-grid tag-section">
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/tags/li-yu')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/liyu.jpg" class="nav-card-img" alt="李煜">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">李煜</h3>
|
||||
<p class="nav-card-desc">雕栏玉砌成追忆，故国不堪月明中。小楼昨夜东风起，一江春水诉愁浓。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/tags/li-qing-zhao')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/liqingzhao.jpg" class="nav-card-img" alt="李清照">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">李清照</h3>
|
||||
<p class="nav-card-desc">漱玉词中藏婉绪，半生烟雨半生愁。雁字回时寻旧梦，黄花瘦尽女儿柔。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-card" onclick="pjaxNavigate('/tags/su-shi')">
|
||||
<div class="nav-card-img-container">
|
||||
<img src="/upload/sushi.jpg" class="nav-card-img" alt="苏轼">
|
||||
</div>
|
||||
<div class="nav-card-content">
|
||||
<h3 class="nav-card-title">苏轼</h3>
|
||||
<p class="nav-card-desc">大江东去豪情溢，竹杖芒鞋任平生。明月几时有把酒，豁达胸襟照汗青。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* PJAX 跳转核心函数
|
||||
* 兼容 pjax.js 和 jquery-pjax，无 PJAX 时降级为原生跳转
|
||||
*/
|
||||
function pjaxNavigate(url) {
|
||||
if (window.pjax) {
|
||||
// 适配 pjax.js 原生库
|
||||
pjax.loadUrl(url);
|
||||
} else if (window.$ && $.pjax) {
|
||||
// 适配 jquery-pjax 插件
|
||||
$.pjax({ url: url, container: '#pjax-container' }); // 请替换为你的 PJAX 容器选择器
|
||||
} else {
|
||||
// 降级方案：无 PJAX 时使用原生跳转
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tab 切换功能
|
||||
*/
|
||||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||||
tab.addEventListener('click', function () {
|
||||
// 移除所有 Tab 的 active 状态
|
||||
document.querySelectorAll('.nav-tab').forEach(item => item.classList.remove('active'));
|
||||
// 激活当前点击的 Tab
|
||||
this.classList.add('active');
|
||||
|
||||
// 切换内容区
|
||||
const target = this.getAttribute('data-target');
|
||||
document.querySelectorAll('.nav-content').forEach(content => {
|
||||
content.classList.remove('active');
|
||||
});
|
||||
document.getElementById(target).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 优化点击体验（防止300ms延迟，依赖 FastClick 库）
|
||||
*/
|
||||
if ('addEventListener' in document) {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof FastClick !== 'undefined') {
|
||||
FastClick.attach(document.body);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,281 @@
|
||||
<div
|
||||
style="max-width: 1200px; margin: 20px auto; padding: 0 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
|
||||
<!-- 链接卡片容器 - 桌面4列，平板/手机2列 -->
|
||||
<div class="link-container" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
|
||||
<!-- 媒体查询：桌面端（≥768px）显示4列 -->
|
||||
<style>
|
||||
/* 基础布局样式 */
|
||||
@media (min-width: 768px) {
|
||||
.link-container {
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ri-icon {
|
||||
color: white !important;
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
.link-container>a {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
height: 100% !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.link-container>a>div {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 25px 15px !important;
|
||||
text-align: center !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
transition: all 0.3s ease !important;
|
||||
/* 基础边框：无!important，靠类优先级控制 */
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
/* ========== CSS优先级顺序：默认 → 未读基础 → hover → 未读hover ========== */
|
||||
/* 1. 通用默认样式（初始无黑框） */
|
||||
.link-card-default {
|
||||
background: #f0f7f4 !important;
|
||||
transform: translateY(0) !important;
|
||||
box-shadow: none !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/* 2. 公告未读基础样式（红色调，优先级高于默认） */
|
||||
.notice-unread {
|
||||
background: #fff5f5 !important;
|
||||
/* 浅红背景 */
|
||||
}
|
||||
|
||||
.notice-unread .notice-icon-bg {
|
||||
background: #e53e3e !important;
|
||||
/* 红色图标背景 */
|
||||
}
|
||||
|
||||
.notice-unread .notice-title {
|
||||
color: #c53030 !important;
|
||||
/* 深红标题 */
|
||||
}
|
||||
|
||||
.notice-unread .notice-desc {
|
||||
color: #e53e3e !important;
|
||||
/* 红色描述 */
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* 3. 通用hover样式（绿色边框，必显） */
|
||||
.link-card-hover {
|
||||
transform: translateY(-5px) !important;
|
||||
box-shadow: 0 10px 20px rgba(72, 187, 120, 0.15) !important;
|
||||
border: 2px solid #74c69d !important;
|
||||
/* 绿色边框 */
|
||||
}
|
||||
|
||||
/* 4. 公告未读hover样式（红色边框，优先级最高） */
|
||||
.notice-unread-hover {
|
||||
transform: translateY(-5px) !important;
|
||||
box-shadow: 0 10px 20px rgba(229, 62, 62, 0.15) !important;
|
||||
border: 2px solid #fc8181 !important;
|
||||
/* 红色边框 */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- 公告模块 -->
|
||||
<a href="/notice">
|
||||
<div id="notice-card" class="link-card-default">
|
||||
<div
|
||||
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
|
||||
</div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div class="notice-icon-bg"
|
||||
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="ri-megaphone-line ri-icon" style="font-size: 30px;"></i>
|
||||
</div>
|
||||
<h4 id="notice-title" class="notice-title"
|
||||
style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通知书</h4>
|
||||
<p id="notice-desc" class="notice-desc"
|
||||
style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">最新通知与提醒</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 告知信链接 -->
|
||||
<a href="/about">
|
||||
<div class="link-card-default">
|
||||
<div
|
||||
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
|
||||
</div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div
|
||||
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="ri-mail-line ri-icon" style="font-size: 30px;"></i>
|
||||
</div>
|
||||
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">告知信</h4>
|
||||
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">翻阅日记前的须知</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 通讯录链接 -->
|
||||
<a href="/address">
|
||||
<div class="link-card-default">
|
||||
<div
|
||||
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
|
||||
</div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div
|
||||
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="ri-contacts-line ri-icon" style="font-size: 30px;"></i>
|
||||
</div>
|
||||
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">通讯录</h4>
|
||||
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">一些很喜欢的人物</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- 朋友圈链接 -->
|
||||
<a href="/friends">
|
||||
<div class="link-card-default">
|
||||
<div
|
||||
style="position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: #d8f3dc; border-radius: 50%; opacity: 0.3; transition: all 0.5s ease;">
|
||||
</div>
|
||||
<div style="position: relative; z-index: 1;">
|
||||
<div
|
||||
style="width: 60px; height: 60px; background: #40916c; border-radius: 10px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center;">
|
||||
<i class="ri-message-3-line ri-icon" style="font-size: 30px;"></i>
|
||||
</div>
|
||||
<h4 style="color: #2d6a4f; margin: 0 0 5px; font-size: 18px; font-weight: 500;">朋友圈</h4>
|
||||
<p style="color: #36A28E; font-size: 13px; margin: 0; opacity: 0.8;">一些有意思的内容</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 兼容PJAX的脚本（核心：保留未读类，仅重置hover/默认类） -->
|
||||
<script>
|
||||
|
||||
// 2. 公告状态初始化（保留未读类）
|
||||
async function initNoticeStatus() {
|
||||
const combinedDateStr = await getAllLatestNoticeDatesFromRSS();
|
||||
const noticeCard = document.getElementById('notice-card');
|
||||
const noticeTitle = document.getElementById('notice-title');
|
||||
const noticeDesc = document.getElementById('notice-desc');
|
||||
if (!noticeCard || !noticeTitle || !noticeDesc) return;
|
||||
|
||||
if (!combinedDateStr) {
|
||||
console.warn('获取最新版本失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 保存未读状态标记（避免重置类时丢失）
|
||||
const isUnreadBefore = noticeCard.classList.contains('notice-unread');
|
||||
|
||||
// 重置基础样式（保留未读类）
|
||||
noticeCard.classList.remove('link-card-hover', 'notice-unread-hover');
|
||||
noticeCard.classList.add('link-card-default');
|
||||
noticeTitle.textContent = '通知书';
|
||||
noticeDesc.textContent = '最新通知与提醒';
|
||||
const decorCircle = noticeCard.querySelector('div[style*="position: absolute; top: -20px"]');
|
||||
decorCircle && (decorCircle.style.background = '#d8f3dc');
|
||||
|
||||
// 判断未读状态（重新应用未读类）
|
||||
const local_notice = getCookie('latest_notice_date');
|
||||
const isUnread = !local_notice || local_notice !== combinedDateStr;
|
||||
|
||||
if (isUnread) {
|
||||
initNoticeTip();
|
||||
noticeTitle.textContent = `通知书`;
|
||||
noticeDesc.textContent = `有新通知待查看`;
|
||||
noticeCard.classList.add('notice-unread'); // 重新添加未读类
|
||||
decorCircle && (decorCircle.style.background = '#fed7d7');
|
||||
|
||||
// 绑定点击标记已读
|
||||
const noticeLink = noticeCard.closest('a');
|
||||
noticeLink.removeEventListener('click', markNoticeRead);
|
||||
noticeLink.addEventListener('click', markNoticeRead);
|
||||
|
||||
function markNoticeRead() {
|
||||
setLongCookie('latest_notice_date', combinedDateStr);
|
||||
markAsRead(combinedDateStr);
|
||||
// 标记已读：移除未读类，恢复默认
|
||||
noticeTitle.textContent = '通知书';
|
||||
noticeDesc.textContent = '最新通知与提醒';
|
||||
noticeCard.classList.remove('notice-unread');
|
||||
noticeCard.classList.add('link-card-default');
|
||||
decorCircle && (decorCircle.style.background = '#d8f3dc');
|
||||
}
|
||||
} else if (isUnreadBefore) {
|
||||
// 已读：移除未读类
|
||||
noticeCard.classList.remove('notice-unread');
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Hover事件绑定（核心：不删除notice-unread类）
|
||||
function initCardHover() {
|
||||
// 移除所有旧事件
|
||||
document.querySelectorAll('.link-container > a').forEach(card => {
|
||||
card.removeEventListener('mouseenter', handleMouseEnter);
|
||||
card.removeEventListener('mouseleave', handleMouseLeave);
|
||||
});
|
||||
|
||||
// 重置hover样式（保留未读类）
|
||||
document.querySelectorAll('.link-container > a > div').forEach(cardDiv => {
|
||||
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
|
||||
if (!cardDiv.classList.contains('link-card-default')) {
|
||||
cardDiv.classList.add('link-card-default');
|
||||
}
|
||||
});
|
||||
|
||||
// 重新绑定hover事件
|
||||
document.querySelectorAll('.link-container > a').forEach(card => {
|
||||
card.addEventListener('mouseenter', handleMouseEnter);
|
||||
card.addEventListener('mouseleave', handleMouseLeave);
|
||||
});
|
||||
|
||||
// Hover处理函数（仅切换hover类，保留未读/默认类）
|
||||
function handleMouseEnter() {
|
||||
const cardDiv = this.querySelector('div');
|
||||
const decorCircle = cardDiv.querySelector('div[style*="position: absolute; top: -20px"]');
|
||||
|
||||
// 移除默认hover，添加对应hover类
|
||||
cardDiv.classList.remove('link-card-default');
|
||||
if (cardDiv.id === 'notice-card' && cardDiv.classList.contains('notice-unread')) {
|
||||
cardDiv.classList.add('notice-unread-hover'); // 未读→红色hover
|
||||
} else {
|
||||
cardDiv.classList.add('link-card-hover'); // 其他→绿色hover
|
||||
}
|
||||
decorCircle && (decorCircle.style.transform = 'scale(1.5)');
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
const cardDiv = this.querySelector('div');
|
||||
const decorCircle = cardDiv.querySelector('div[style*="position: absolute; top: -20px"]');
|
||||
|
||||
// 移除hover类，恢复默认类（保留未读类）
|
||||
cardDiv.classList.remove('link-card-hover', 'notice-unread-hover');
|
||||
cardDiv.classList.add('link-card-default');
|
||||
decorCircle && (decorCircle.style.transform = 'scale(1)');
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 统一初始化入口
|
||||
function initAll() {
|
||||
initNoticeStatus();
|
||||
initCardHover();
|
||||
}
|
||||
|
||||
// 5. 绑定加载事件（初始+PJAX）
|
||||
document.addEventListener("DOMContentLoaded", initAll);
|
||||
document.addEventListener("pjax:complete", initAll);
|
||||
window.jQuery && jQuery(document).on('pjax:complete', initAll);
|
||||
</script>
|
||||
</div>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,187 @@
|
||||
<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-2026" style="width: 100%; height: auto; position: relative;">
|
||||
<div id="calendar-2026-global-blur"></div>
|
||||
<div id="calendar-2026-intro">
|
||||
<div id="calendar-2026-intro-mask"></div>
|
||||
<img id="calendar-2026-intro-img" src="/upload/2026-0.png">
|
||||
</div>
|
||||
<img id="calendar-2026-month"
|
||||
style="width:100%;height:auto;position:absolute;top:0;left:0;object-fit:contain;opacity:0;transition:opacity 1s ease-in-out;z-index:1;pointer-events:none;">
|
||||
<a id="calendar-2026-link" href="/calendar"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#calendar-2026-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-2026-intro {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#calendar-2026-intro-mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, .25);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
#calendar-2026-intro-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: .25;
|
||||
transform: scale(.50);
|
||||
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
|
||||
}
|
||||
|
||||
#calendar-2026-link {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
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 initializeCalendar2026() {
|
||||
const container = document.getElementById('calendar-img-container-2026');
|
||||
if (!container) return;
|
||||
|
||||
const intro = document.getElementById("calendar-2026-intro");
|
||||
const introImg = document.getElementById("calendar-2026-intro-img");
|
||||
const globalBlur = document.getElementById("calendar-2026-global-blur");
|
||||
const monthImg = document.getElementById('calendar-2026-month');
|
||||
|
||||
const month = new Date().getMonth() + 1;
|
||||
monthImg.src = `/upload/2026-${month}.png`;
|
||||
|
||||
container.style.height = "100vh";
|
||||
|
||||
const setHeight = img => {
|
||||
if (img.complete)
|
||||
container.style.height = img.offsetHeight + 'px';
|
||||
else
|
||||
img.onload = () => container.style.height = img.offsetHeight + '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 new Promise(r =>
|
||||
monthImg.complete ? r() : monthImg.onload = r
|
||||
);
|
||||
|
||||
setHeight(monthImg);
|
||||
|
||||
introImg.style.opacity = "1";
|
||||
introImg.style.transform = "scale(1)";
|
||||
|
||||
smoothScrollToContainer();
|
||||
|
||||
setTimeout(() => {
|
||||
intro.style.transition = "opacity .8s ease";
|
||||
intro.style.opacity = 0;
|
||||
|
||||
globalBlur.style.opacity = 0;
|
||||
|
||||
setTimeout(() => {
|
||||
intro.remove();
|
||||
globalBlur.remove();
|
||||
}, 800);
|
||||
|
||||
monthImg.style.opacity = 1;
|
||||
monthImg.style.zIndex = 3;
|
||||
setHeight(monthImg);
|
||||
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
init();
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initializeCalendar2026);
|
||||
document.addEventListener("pjax:complete", initializeCalendar2026);
|
||||
</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>
|
||||
@@ -0,0 +1,277 @@
|
||||
<div id="anian-update-wrapper-2026" class="anian-feed-root-container">
|
||||
<div class="anian-feed-grid">
|
||||
<div class="anian-feed-card" data-rss-url="https://git.anian.cc/anian/halo-plugin-photos/releases.rss">
|
||||
<h3 class="anian-feed-caption">图库插件更新</h3>
|
||||
<div class="anian-feed-list-box">
|
||||
<div class="anian-loading">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anian-feed-card" data-rss-url="https://git.anian.cc/anian/halo-plugin-friends/releases.rss">
|
||||
<h3 class="anian-feed-caption">朋友圈插件更新</h3>
|
||||
<div class="anian-feed-list-box">
|
||||
<div class="anian-loading">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="anian-feed-card" data-rss-url="https://git.anian.cc/anian/halo-theme-pix/releases.rss">
|
||||
<h3 class="anian-feed-caption">主题更新</h3>
|
||||
<div class="anian-feed-list-box">
|
||||
<div class="anian-loading">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 样式作用域锁定 */
|
||||
.anian-feed-root-container {
|
||||
padding: 20px;
|
||||
background-color: #f9fdf8;
|
||||
border-radius: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.anian-feed-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.anian-feed-card {
|
||||
flex: 1;
|
||||
min-width: 320px;
|
||||
/* 优化最小宽度 */
|
||||
background: #ffffff;
|
||||
border: 1px solid #e1f3d8;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.06);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
/* 防止内容溢出圆角 */
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.anian-feed-caption {
|
||||
margin: 0;
|
||||
padding: 12px 20px;
|
||||
background-color: #f0f9eb;
|
||||
color: #52c41a;
|
||||
/* 更清新的绿色 */
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #e1f3d8;
|
||||
letter-spacing: 0.2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.anian-feed-list-box {
|
||||
max-height: 380px;
|
||||
/* 优化高度 */
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 - 更精致 */
|
||||
.anian-feed-list-box::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.anian-feed-list-box::-webkit-scrollbar-track {
|
||||
background: #f8fff5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.anian-feed-list-box::-webkit-scrollbar-thumb {
|
||||
background: #b7eb8f;
|
||||
border-radius: 10px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.anian-feed-list-box::-webkit-scrollbar-thumb:hover {
|
||||
background: #95de64;
|
||||
}
|
||||
|
||||
/* 加载状态美化 */
|
||||
.anian-loading {
|
||||
padding: 20px;
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
animation: fade 1.2s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表项核心样式 - 无下划线 + 精致hover */
|
||||
.anian-feed-item {
|
||||
display: block;
|
||||
padding: 16px 20px;
|
||||
text-decoration: none !important;
|
||||
/* 强制移除下划线 */
|
||||
border-bottom: 1px dashed #f0f9eb;
|
||||
transition: all 0.3s ease;
|
||||
/* 统一过渡效果 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 移除所有状态下的下划线 */
|
||||
.anian-feed-item:link,
|
||||
.anian-feed-item:visited,
|
||||
.anian-feed-item:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 增强hover效果 */
|
||||
.anian-feed-item:hover {
|
||||
background-color: #f5fff0;
|
||||
border-color: #d1f0b5;
|
||||
}
|
||||
|
||||
/* 右侧小装饰 - 提升精致感 */
|
||||
.anian-feed-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: #67c23a;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.anian-feed-item:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.anian-feed-item-time {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.anian-feed-item-title {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.anian-feed-item:hover .anian-feed-item-title {
|
||||
color: #52c41a;
|
||||
/* hover时标题变色 */
|
||||
}
|
||||
|
||||
/* 空数据/错误状态样式统一 */
|
||||
.anian-feed-list-box>div {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 响应式优化 */
|
||||
@media (max-width: 768px) {
|
||||
.anian-feed-root-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.anian-feed-card {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.anian-feed-caption {
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.anian-feed-item {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
async function fetchRssContent(cardElement) {
|
||||
const url = cardElement.getAttribute('data-rss-url');
|
||||
const listBox = cardElement.querySelector('.anian-feed-list-box');
|
||||
|
||||
// 1. 如果你已经开启了服务器跨域，可以尝试直接请求 url
|
||||
// 2. 如果依然报错，请恢复使用代理：const targetUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(url)}`;
|
||||
const targetUrl = url;
|
||||
|
||||
try {
|
||||
const response = await fetch(targetUrl);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP 错误! 状态码: ${response.status}`);
|
||||
}
|
||||
|
||||
const xmlText = await response.text();
|
||||
|
||||
const parser = new DOMParser();
|
||||
const xmlDoc = parser.parseFromString(xmlText, "text/xml");
|
||||
|
||||
// 检查是否有解析错误
|
||||
const parseError = xmlDoc.getElementsByTagName("parsererror");
|
||||
if (parseError.length > 0) {
|
||||
console.error("[RSS Debug] XML 解析失败", parseError[0].textContent);
|
||||
listBox.innerHTML = '<div style="color:#f56c6c;">XML 解析错误</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const items = xmlDoc.querySelectorAll("item");
|
||||
|
||||
let htmlContent = "";
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const title = item.querySelector("title")?.textContent || "无标题";
|
||||
const link = item.querySelector("link")?.textContent || "#";
|
||||
const pubDateStr = item.querySelector("pubDate")?.textContent || "";
|
||||
|
||||
// 简单处理日期
|
||||
const dateObj = new Date(pubDateStr);
|
||||
const formattedTime = isNaN(dateObj) ? pubDateStr.split(' ').slice(0, 4).join(' ') :
|
||||
`${dateObj.getFullYear()}-${(dateObj.getMonth() + 1).toString().padStart(2, '0')}-${dateObj.getDate().toString().padStart(2, '0')}`;
|
||||
|
||||
htmlContent += `
|
||||
<a href="${link}" class="anian-feed-item" target="_blank" rel="noopener">
|
||||
<span class="anian-feed-item-time">${formattedTime}</span>
|
||||
<span class="anian-feed-item-title">${title}</span>
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
|
||||
listBox.innerHTML = htmlContent || '<div style="color:#999;">暂无更新内容</div>';
|
||||
} catch (error) {
|
||||
console.error('[RSS Debug] 请求发生异常:', error);
|
||||
listBox.innerHTML = `<div style="color:#f56c6c;font-size:14px;">请求失败: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('.anian-feed-card').forEach(card => {
|
||||
fetchRssContent(card);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,285 @@
|
||||
<style>
|
||||
.adventure-quest-show-wrap * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.adventure-quest-show-wrap {
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
--aq-show-g2: #E1E9E5;
|
||||
--aq-show-g3: #8fdbb5;
|
||||
--aq-show-g4: #22BB6D;
|
||||
--aq-show-text: #7aa1a1;
|
||||
--aq-mask-bg: rgba(143, 219, 181, 0.9);
|
||||
uk-width-2-3@m;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 20px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
margin-bottom: 20px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: var(--aq-show-text);
|
||||
background: var(--aq-show-g2);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab:hover {
|
||||
background: #22BB6D;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.adventure-quest-show-tab.adventure-quest-show-active {
|
||||
background: var(--aq-show-g4);
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.adventure-quest-show-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
margin: 0 auto;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card {
|
||||
--aq-hover-text: #fff;
|
||||
background: #f7f7f8;
|
||||
border-radius: 5px;
|
||||
/* 卡片基础圆角（遮罩可继承此值） */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1/1 !important;
|
||||
flex: 0 0 calc(50% - 8px) !important;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card__img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card__hover-text {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
color: var(--aq-hover-text);
|
||||
border-radius: 15px;
|
||||
background: var(--aq-mask-bg);
|
||||
font-weight: bold;
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: all 0.3s cubic-bezier(0.6, 0.4, 0, 1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.adventure-quest-show-card:hover .adventure-quest-show-card__hover-text {
|
||||
transform: scale(1);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.adventure-quest-show-card {
|
||||
flex: 0 0 100% !important;
|
||||
aspect-ratio: 1/1 !important;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-container {
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.adventure-quest-show-load {
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-load button {
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: #22BB6D;
|
||||
color: white;
|
||||
transition: 0.2s;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.adventure-quest-show-load button:hover {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="adventure-quest-show-wrap">
|
||||
<div class="adventure-quest-show-tabs" id="adventure-quest-show-tabs"></div>
|
||||
<div class="adventure-quest-show-container" id="adventure-quest-show-container"></div>
|
||||
<div class="adventure-quest-show-load">
|
||||
<button id="adventure-quest-show-load-btn">翻阅更多</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let globalAdventureQuestState = {
|
||||
adventureQuestCurrent: ''
|
||||
};
|
||||
|
||||
function initializeAdventureQuestEvents() {
|
||||
const wrap = document.querySelector(".adventure-quest-show-wrap");
|
||||
if (!wrap) return;
|
||||
|
||||
const container = document.getElementById("adventure-quest-show-container");
|
||||
const loadBtn = document.getElementById("adventure-quest-show-load-btn");
|
||||
container.innerHTML = "";
|
||||
loadBtn.style.display = "inline-block";
|
||||
|
||||
const adventureQuestData = {
|
||||
"山林奇遇": [
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿<br>aaa" },
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||
|
||||
],
|
||||
"都市秘境": [
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "偶遇小鹿" },
|
||||
{ src: "/upload/qiyu-jieqi-dahan.png", hoverText: "清凉沁心" }
|
||||
]
|
||||
};
|
||||
|
||||
const ALL_TAB = "全部";
|
||||
|
||||
function getTabFromUrl() {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get("tab");
|
||||
}
|
||||
|
||||
function setTabToUrl(tab) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("tab", tab);
|
||||
history.replaceState(null, "", url.toString());
|
||||
}
|
||||
|
||||
function getAllList() {
|
||||
let arr = [];
|
||||
Object.keys(adventureQuestData).forEach(k => arr = arr.concat(adventureQuestData[k]));
|
||||
return arr;
|
||||
}
|
||||
|
||||
function getCurrentList() {
|
||||
return globalAdventureQuestState.adventureQuestCurrent === ALL_TAB ? getAllList() : adventureQuestData[globalAdventureQuestState.adventureQuestCurrent];
|
||||
}
|
||||
|
||||
const tabNames = [ALL_TAB, ...Object.keys(adventureQuestData)];
|
||||
let initialTab = getTabFromUrl();
|
||||
|
||||
if (!globalAdventureQuestState.adventureQuestCurrent) {
|
||||
globalAdventureQuestState.adventureQuestCurrent = tabNames.includes(initialTab) ? initialTab : tabNames[0];
|
||||
}
|
||||
|
||||
let adventureQuestLoaded = 0;
|
||||
const adventureQuestPer = 6;
|
||||
|
||||
const tabs = document.getElementById("adventure-quest-show-tabs");
|
||||
tabs.innerHTML = "";
|
||||
tabNames.forEach(name => {
|
||||
const t = document.createElement("div");
|
||||
t.className = "adventure-quest-show-tab" + (name === globalAdventureQuestState.adventureQuestCurrent ? " adventure-quest-show-active" : "");
|
||||
t.innerText = name;
|
||||
t.onclick = () => switchTab(name);
|
||||
tabs.appendChild(t);
|
||||
});
|
||||
|
||||
function switchTab(name) {
|
||||
globalAdventureQuestState.adventureQuestCurrent = name;
|
||||
adventureQuestLoaded = 0;
|
||||
container.innerHTML = "";
|
||||
setTabToUrl(name);
|
||||
|
||||
document.querySelectorAll(".adventure-quest-show-tab").forEach(t => t.classList.remove("adventure-quest-show-active"));
|
||||
[...tabs.children].find(t => t.innerText === name).classList.add("adventure-quest-show-active");
|
||||
|
||||
loadMore();
|
||||
}
|
||||
|
||||
function createAdventureQuestCard(item) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "adventure-quest-show-card";
|
||||
|
||||
card.innerHTML = `
|
||||
<img class="adventure-quest-show-card__img" src="${item.src}" alt="奇遇图片">
|
||||
<span class="adventure-quest-show-card__hover-text">${item.hoverText}</span>
|
||||
`;
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
const list = getCurrentList();
|
||||
if (!list || list.length === 0) {
|
||||
loadBtn.style.display = "none";
|
||||
return;
|
||||
}
|
||||
const next = list.slice(adventureQuestLoaded, adventureQuestLoaded + adventureQuestPer);
|
||||
if (next.length === 0) {
|
||||
loadBtn.style.display = "none";
|
||||
return;
|
||||
}
|
||||
adventureQuestLoaded += next.length;
|
||||
|
||||
next.forEach(item => {
|
||||
const card = createAdventureQuestCard(item);
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
if (adventureQuestLoaded >= list.length) {
|
||||
loadBtn.style.display = "none";
|
||||
} else {
|
||||
loadBtn.style.display = "inline-block";
|
||||
}
|
||||
}
|
||||
|
||||
loadBtn.onclick = () => {
|
||||
loadMore();
|
||||
};
|
||||
|
||||
loadMore();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
requestAnimationFrame(() => {
|
||||
container.style.opacity = "1";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initializeAdventureQuestEvents);
|
||||
document.addEventListener("pjax:complete", initializeAdventureQuestEvents);
|
||||
</script>
|
||||
@@ -0,0 +1,315 @@
|
||||
<style>
|
||||
.store * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", "Microsoft YaHei", Arial;
|
||||
}
|
||||
|
||||
.store {
|
||||
--primary: #50C878;
|
||||
--primary-light: #90EE90;
|
||||
--primary-dark: #3A9156;
|
||||
--danger: #E74C3C;
|
||||
--bg: #F9FFFB;
|
||||
--shadow: 0 12px 30px rgba(80, 200, 120, .12);
|
||||
--radius: 18px;
|
||||
padding: 26px 14px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.store .container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.store .top-bar {
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
background: linear-gradient(90deg, #8ef5b4, #50C878, #3A9156);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.store .title {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #2C3E50;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* 搜索 */
|
||||
.store .tag-container {
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.store .tag-search-wrapper {
|
||||
position: relative;
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
#tag-search {
|
||||
width: 100%;
|
||||
padding: 7px 12px 7px 34px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #c9efd6;
|
||||
outline: none;
|
||||
background: #fafffb;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.store .search-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 标签居中 */
|
||||
.store .tag-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #c9efd6;
|
||||
background: rgba(144, 238, 144, .08);
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.store .tag-item {
|
||||
padding: 5px 7px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #90ee90;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
color: #2c6e49;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.store .tag-item:hover {
|
||||
background: linear-gradient(135deg, #90ee90, #50c878);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 无结果提示 */
|
||||
.store .no-result {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.store .input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
#file-path {
|
||||
flex: 1;
|
||||
padding: 8px 14px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e8f7ec;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, #50c878, #3a9156);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部提示（改成浅黄色系） */
|
||||
.store .tips {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #a97400;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 215, 0, .12);
|
||||
border: 1px solid rgba(243, 156, 18, .25);
|
||||
}
|
||||
|
||||
/* 手机端 */
|
||||
@media(max-width:520px) {
|
||||
.store {
|
||||
padding: 14px
|
||||
}
|
||||
|
||||
.store .container {
|
||||
padding: 22px 18px;
|
||||
max-width: 95%
|
||||
}
|
||||
|
||||
.store .title {
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
.store .input-group {
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#submit-btn {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.store .tag-list {
|
||||
max-height: 120px
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.custom-toast {
|
||||
position: fixed;
|
||||
top: 26px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-80px);
|
||||
background: #2ECC71;
|
||||
color: #fff;
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
transition: .4s;
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast-show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background: #E74C3C
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background: #F39C12
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="store">
|
||||
<div class="container">
|
||||
<div class="top-bar"></div>
|
||||
|
||||
<h1 class="title">Anian的储物柜</h1>
|
||||
|
||||
<div class="tag-container">
|
||||
<div class="tag-search-wrapper">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input id="tag-search" placeholder="搜索标签">
|
||||
</div>
|
||||
|
||||
<div class="tag-list">
|
||||
<div class="tag-item" data-value="test.zip">测试压缩包</div>
|
||||
<div class="tag-item" data-value="docs/report.pdf">示例报告</div>
|
||||
<div class="tag-item" data-value="images/banner.jpg">横幅图片</div>
|
||||
<div class="tag-item" data-value="software/setup.exe">安装程序</div>
|
||||
|
||||
<div class="no-result" id="noResult">没有匹配的结果</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="file-path" placeholder="请输入路径" autocomplete="off">
|
||||
<button id="submit-btn">访问 / 下载</button>
|
||||
</div>
|
||||
|
||||
<p class="tips">⚠️ 错误过多将可能被封禁</p>
|
||||
</div>
|
||||
|
||||
<div class="custom-toast" id="customToast"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initializeStoreEvents() {
|
||||
const container = document.querySelector(".store");
|
||||
if (!container || container.dataset.init === "1") return;
|
||||
container.dataset.init = "1";
|
||||
|
||||
const input = document.getElementById('file-path');
|
||||
const btn = document.getElementById('submit-btn');
|
||||
const toast = document.getElementById('customToast');
|
||||
const tagItems = document.querySelectorAll('.tag-item');
|
||||
const tagSearch = document.getElementById('tag-search');
|
||||
const noResult = document.getElementById('noResult');
|
||||
|
||||
function showToast(msg, type = 'warning') {
|
||||
toast.textContent = msg;
|
||||
toast.className = 'custom-toast toast-' + type + ' toast-show';
|
||||
setTimeout(() => toast.classList.remove('toast-show'), 2600);
|
||||
}
|
||||
|
||||
tagItems.forEach(t => {
|
||||
t.onclick = () => {
|
||||
input.value = t.dataset.value;
|
||||
showToast('已填入 ' + t.dataset.value, 'success');
|
||||
};
|
||||
});
|
||||
|
||||
tagSearch.oninput = () => {
|
||||
const k = tagSearch.value.toLowerCase();
|
||||
let visible = 0;
|
||||
|
||||
tagItems.forEach(t => {
|
||||
const show = t.textContent.toLowerCase().includes(k) ||
|
||||
t.dataset.value.toLowerCase().includes(k);
|
||||
t.style.display = show ? 'inline-flex' : 'none';
|
||||
if (show) visible++;
|
||||
});
|
||||
|
||||
noResult.style.display = visible === 0 ? 'block' : 'none';
|
||||
};
|
||||
|
||||
function check(url) {
|
||||
return new Promise(r => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('HEAD', url, true);
|
||||
xhr.timeout = 5000;
|
||||
xhr.onload = () => r(xhr.status === 200);
|
||||
xhr.onerror = () => r(false);
|
||||
xhr.ontimeout = () => r(false);
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
async function go() {
|
||||
const v = input.value.trim();
|
||||
if (!v) return showToast('请输入路径');
|
||||
const url = '/' + v;
|
||||
btn.textContent = '检测中...';
|
||||
btn.disabled = true;
|
||||
const ok = await check(url);
|
||||
if (ok) {
|
||||
showToast('资源存在，跳转中', 'success');
|
||||
setTimeout(() => location.href = url, 700);
|
||||
} else showToast('资源不存在', 'error');
|
||||
setTimeout(() => { btn.textContent = '访问 / 下载'; btn.disabled = false }, 700);
|
||||
}
|
||||
|
||||
btn.onclick = go;
|
||||
input.onkeydown = e => { if (e.key === 'Enter') go(); };
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initializeStoreEvents);
|
||||
document.addEventListener("pjax:complete", initializeStoreEvents);
|
||||
</script>
|
||||
Reference in New Issue
Block a user