新增嵌入式代码块；优化通知书推送时机
This commit is contained in:
anian
@@ -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>
|
||||
Reference in New Issue
Block a user