anian
281 lines
13 KiB
HTML
281 lines
13 KiB
HTML
<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> |