You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1186 lines
41 KiB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>青核 Youthome - 校园公告</title>
<link rel="stylesheet" href="../colors_and_type.css">
<script src="https://cdn.tailwindcss.com"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
/* Traework 设计令牌 - 圆角/间距/阴影/高度 */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
--height-btn: 44px;
--height-input: 44px;
--height-nav: 64px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.06);
--shadow-btn: 0 2px 8px rgba(38, 194, 187, 0.25);
--shadow-btn-hover: 0 4px 16px rgba(38, 194, 187, 0.35);
--shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);
--shadow-float: 0 4px 24px rgba(0, 0, 0, 0.08);
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-blur: blur(20px);
--glass-border: rgba(255, 255, 255, 0.3);
}
html, body {
height: 100%;
overflow: hidden;
overflow-x: hidden;}
body {
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
background: var(--youth-bg-page);
color: var(--youth-text-primary);
}
/* ===== 手机容器 ===== */
.phone-container {
width: 375px;
height: 812px;
margin: 0 auto;
background: var(--youth-bg-page);
position: relative;
overflow: hidden;
}
@media (max-width: 375px) {
.phone-container {
width: 100%;
height: 100vh;
}
}
/* ===== iOS状态栏 ===== */
.status-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
font-size: 15px;
font-weight: 600;
color: var(--youth-text-primary);
position: relative;
z-index: 100;
background: var(--youth-bg-page);
padding-top: 8px;
}
.status-bar .time {
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
}
.status-bar .right-icons {
display: flex;
align-items: center;
gap: 5px;
}
/* ===== 顶部导航栏 ===== */
.top-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 16px 12px;
background: var(--youth-bg-page);
position: relative;
z-index: 99;
}
.nav-left, .nav-right {
width: 60px;
display: flex;
}
.nav-right {
justify-content: flex-end;
}
.nav-back-btn {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--youth-gradient-matte-card);
border: 1px solid var(--youth-border-light);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.06),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: var(--youth-text-primary);
}
.nav-back-btn:active {
transform: scale(0.93);
}
.nav-back-btn svg {
width: 20px;
height: 20px;
stroke-width: 2.2px;
}
.nav-title {
font-size: 18px;
font-weight: 700;
color: var(--youth-text-primary);
letter-spacing: -0.01em;
}
.nav-publish-btn {
width: 36px;
height: 36px;
border-radius: 12px;
background: var(--youth-gradient-primary);
box-shadow:
0 2px 8px rgba(38, 194, 187, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: #fff;
}
.nav-publish-btn:active {
transform: scale(0.93);
box-shadow: 0 1px 4px rgba(38, 194, 187, 0.25);
}
.nav-publish-btn svg {
width: 20px;
height: 20px;
stroke-width: 2.5px;
}
/* ===== 分类Tab ===== */
.tab-section {
padding: 0 16px;
background: var(--youth-bg-page);
position: relative;
z-index: 98;
}
.tab-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 12px;
}
.tab-scroll::-webkit-scrollbar {
display: none;
}
.tab-capsule {
flex-shrink: 0;
padding: 8px 18px;
border-radius: 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
background: var(--youth-bg-card);
color: var(--youth-text-secondary);
border: 1px solid var(--youth-border-light);
box-shadow:
0 1px 4px rgba(0, 0, 0, 0.03),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
}
.tab-capsule:active {
transform: scale(0.95);
}
.tab-capsule.active {
background: var(--youth-gradient-primary);
color: #fff;
border-color: transparent;
font-weight: 600;
box-shadow:
0 2px 10px rgba(38, 194, 187, 0.35),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
/* ===== 公告列表区域 ===== */
.announce-section {
padding: 4px 16px 0;
height: calc(812px - 44px - 54px - 50px - 70px);
overflow-y: auto;
overflow-x: hidden;
}
@media (max-width: 375px) {
.announce-section {
height: calc(100vh - 44px - 54px - 50px - 70px);
}
}
.announce-section::-webkit-scrollbar {
display: none;
}
.announce-section {
-ms-overflow-style: none;
scrollbar-width: none;
}
.announce-list {
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 20px;
}
/* ===== 置顶公告卡片 ===== */
.pinned-card {
position: relative;
background: var(--youth-gradient-matte-card);
border-radius: 18px;
padding: 16px;
box-shadow:
0 4px 20px rgba(38, 194, 187, 0.12),
0 2px 8px rgba(0, 0, 0, 0.04),
inset 0 1px 1px rgba(255, 255, 255, 0.9);
border: 1px solid var(--youth-primary-border);
cursor: pointer;
transition: all 0.25s ease;
overflow: hidden;
}
.pinned-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--youth-gradient-primary);
}
.pinned-card:active {
transform: scale(0.985);
}
.pinned-top-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.pinned-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
background: var(--youth-gradient-primary);
color: #fff;
box-shadow: 0 1px 4px rgba(38, 194, 187, 0.3);
}
.pinned-badge svg {
width: 11px;
height: 11px;
}
.category-tag {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 16px;
font-size: 11px;
font-weight: 600;
}
.tag-teal {
background: var(--youth-teal-50);
color: var(--youth-teal-700);
}
.tag-orange {
background: var(--youth-orange-50);
color: var(--youth-orange-700);
}
.tag-blue {
background: #EEF2F7;
color: #5A6B85;
}
.pinned-title {
font-size: 17px;
font-weight: 700;
color: var(--youth-text-primary);
line-height: 1.4;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.pinned-desc {
font-size: 13px;
color: var(--youth-text-secondary);
line-height: 1.55;
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pinned-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.pinned-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--youth-text-tertiary);
}
.pinned-meta .dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--youth-gray-400);
}
.pinned-pin-icon {
width: 28px;
height: 28px;
border-radius: 10px;
background: var(--youth-primary-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--youth-primary);
}
.pinned-pin-icon svg {
width: 14px;
height: 14px;
}
/* ===== 普通公告卡片 ===== */
.announce-card {
position: relative;
background: var(--youth-gradient-matte-card);
border-radius: 16px;
padding: 14px;
box-shadow:
0 2px 12px rgba(0, 0, 0, 0.04),
inset 0 1px 1px rgba(255, 255, 255, 0.8);
border: 1px solid var(--youth-border-light);
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
}
.announce-card:active {
transform: scale(0.98);
}
.announce-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.announce-title {
font-size: 15px;
font-weight: 600;
color: var(--youth-text-primary);
line-height: 1.4;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.announce-desc {
font-size: 13px;
color: var(--youth-text-secondary);
line-height: 1.5;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.announce-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.announce-time {
font-size: 12px;
color: var(--youth-text-tertiary);
}
.announce-views {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--youth-text-tertiary);
}
.announce-views svg {
width: 13px;
height: 13px;
}
/* ===== 底部Tab导航 ===== */
.bottom-tab {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: var(--youth-bg-glass);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid var(--youth-glass-border);
display: flex;
align-items: flex-start;
justify-content: space-around;
padding: 8px 0 20px;
z-index: 90;
}
.bottom-tab-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 2px 12px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
color: var(--youth-gray-400);
}
.bottom-tab-item.active {
color: var(--youth-primary);
}
.bottom-tab-item:active {
transform: scale(0.9);
}
.bottom-tab-item svg {
width: 22px;
height: 22px;
stroke-width: 1.8px;
}
.bottom-tab-label {
font-size: 10px;
font-weight: 500;
}
.bottom-tab-item.active .bottom-tab-label {
font-weight: 600;
}
.bottom-tab-dot {
position: absolute;
top: 0;
right: 6px;
width: 8px;
height: 8px;
background: #FF6B6B;
border-radius: 50%;
border: 2px solid var(--youth-bg-glass);
}
/* ===== 公告详情弹窗 ===== */
.announce-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 998;
display: none;
align-items: flex-end;
justify-content: center;
animation: fadeInOverlay 0.25s ease;
}
.announce-modal-overlay.show {
display: flex;
}
@keyframes fadeInOverlay {
from { opacity: 0; }
to { opacity: 1; }
}
.announce-modal {
width: 100%;
max-height: 85%;
background: var(--youth-bg-card);
border-radius: 20px 20px 0 0;
padding: 20px 20px 32px;
animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow-y: auto;
z-index: 999;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
position: relative;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-handle {
width: 36px;
height: 4px;
background: var(--youth-gray-300);
border-radius: 2px;
margin: 0 auto 16px;
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 14px;
}
.modal-title {
font-size: 18px;
font-weight: 700;
color: var(--youth-text-primary);
line-height: 1.4;
flex: 1;
padding-right: 12px;
}
.modal-close {
width: 30px;
height: 30px;
border-radius: 10px;
background: var(--youth-bg-input);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
color: var(--youth-text-secondary);
transition: all 0.2s ease;
}
.modal-close:active {
transform: scale(0.9);
}
.modal-close svg {
width: 16px;
height: 16px;
}
.modal-tags {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.modal-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--youth-text-tertiary);
padding-bottom: 14px;
border-bottom: 1px solid var(--youth-border-light);
margin-bottom: 16px;
}
.modal-meta .meta-item {
display: flex;
align-items: center;
gap: 4px;
}
.modal-meta .meta-item svg {
width: 14px;
height: 14px;
}
.modal-content {
font-size: 14px;
color: var(--youth-text-secondary);
line-height: 1.75;
}
.modal-content p {
margin-bottom: 12px;
}
.modal-content p:last-child {
margin-bottom: 0;
}
.modal-content strong {
color: var(--youth-text-primary);
font-weight: 600;
}
/* ===== 淡入动画 ===== */
.fade-in {
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* SVG 图标统一尺寸 */
.icon-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em;
height: 1em;
vertical-align: middle;
line-height: 1;
}
.icon-svg svg {
width: 100%;
height: 100%;
stroke: currentColor;
}
/* 侧栏图标 */
.sidebar-icon .icon-svg { width: 22px; height: 22px; font-size: 22px; }
/* 社团logo图标 */
.club-logo .icon-svg { width: 28px; height: 28px; font-size: 28px; color: #fff; }
/* 头图大图标 */
.hero-icon .icon-svg { width: 56px; height: 56px; font-size: 56px; opacity: 0.3; }
/* meta 小图标 */
.club-meta .icon-svg { width: 12px; height: 12px; font-size: 12px; }
/* 分类选择网格图标 */
.cat-option .icon-svg { width: 26px; height: 26px; font-size: 26px; }
/* logo预览图标 */
.logo-preview .icon-svg { width: 40px; height: 40px; font-size: 40px; color: #fff; }
/* 提示图标 */
.notice-icon .icon-svg { width: 18px; height: 18px; font-size: 18px; }
</style>
</head>
<body>
<div class="phone-container">
<!-- 状态栏 -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="right-icons">
<!-- 信号 -->
<svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
<rect x="0" y="8" width="3" height="4" rx="1" fill="currentColor"></rect>
<rect x="5" y="5" width="3" height="7" rx="1" fill="currentColor"></rect>
<rect x="10" y="2" width="3" height="10" rx="1" fill="currentColor"></rect>
<rect x="15" y="0" width="3" height="12" rx="1" fill="currentColor" opacity="0.3"></rect>
</svg>
<!-- WiFi -->
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor">
<path d="M8 2.5C10 2.5 11.5 3.5 13 5L14.5 3.5C12.5 1.5 10.5 0.5 8 0.5C5.5 0.5 3.5 1.5 1.5 3.5L3 5C4.5 3.5 6 2.5 8 2.5ZM8 6.5C9 6.5 10 7 10.5 8L12 6.5C11 5.5 9.5 4.5 8 4.5C6.5 4.5 5 5.5 4 6.5L5.5 8C6 7 7 6.5 8 6.5ZM8 10.5C8.5 10.5 9 10.7 9.25 11L8 12.5L6.75 11C7 10.7 7.5 10.5 8 10.5Z" fill="currentColor"></path>
</svg>
<!-- 电池 -->
<svg width="26" height="12" viewBox="0 0 26 12" fill="none">
<rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke="currentColor" opacity="0.4"></rect>
<rect x="2" y="2" width="17" height="8" rx="1.5" fill="currentColor"></rect>
<rect x="23.5" y="4" width="1.5" height="4" rx="0.75" fill="currentColor" opacity="0.4"></rect>
</svg>
</div>
</div>
<!-- 顶部导航栏 -->
<div class="top-nav">
<div class="nav-left">
<button class="nav-back-btn" data-dom-id="btn-back" id="btn-back" aria-label="返回">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
</div>
<h1 class="nav-title">校园公告</h1>
<div class="nav-right">
<!-- 普通用户视角,不显示发布按钮 -->
</div>
</div>
<!-- 分类Tab -->
<div class="tab-section">
<div class="tab-scroll" id="tab-scroll">
<div class="tab-capsule active" data-dom-id="tab-all" id="tab-all" data-category="all">
全部
</div>
<div class="tab-capsule" data-dom-id="tab-system" id="tab-system" data-category="system">
系统公告
</div>
<div class="tab-capsule" data-dom-id="tab-activity" id="tab-activity-cat" data-category="activity">
活动公告
</div>
<div class="tab-capsule" data-dom-id="tab-campus" id="tab-campus" data-category="campus">
校园通知
</div>
</div>
</div>
<!-- 公告列表区域 -->
<div class="announce-section" id="announce-section">
<div class="announce-list" id="announce-list">
<!-- 置顶公告 -->
<div class="pinned-card" data-dom-id="notice-pinned" id="notice-pinned" data-category="system">
<div class="pinned-top-row">
<span class="pinned-badge">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 17v5"></path>
<path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
</svg>
置顶
</span>
<span class="category-tag tag-teal">系统公告</span>
</div>
<div class="pinned-title">关于学信网实名认证系统升级通知</div>
<div class="pinned-desc">为提升认证效率,学信网认证系统将于本周六凌晨进行升级维护,届时认证服务将暂停约2小时。升级完成后,认证速度将提升50%,请同学们合理安排认证时间。</div>
<div class="pinned-footer">
<div class="pinned-meta">
<span>2024-06-15 10:00</span>
<span class="dot"></span>
<span>1.2万阅读</span>
</div>
<div class="pinned-pin-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 17v5"></path>
<path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"></path>
</svg>
</div>
</div>
</div>
<!-- 公告1 - 活动公告 -->
<div class="announce-card" data-dom-id="notice-item-1" id="notice-item-1" data-category="activity">
<div class="announce-top">
<span class="category-tag tag-orange">活动公告</span>
</div>
<div class="announce-title">校园音乐节报名通道开启<span class="icon-svg icon-music"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></span></div>
<div class="announce-desc">一年一度的青核校园音乐节开始报名啦,欢迎各位有才艺的同学踊跃参与,更有丰厚奖品等你来拿!</div>
<div class="announce-footer">
<span class="announce-time">2024-06-14 14:30</span>
<span class="announce-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
8,562
</span>
</div>
</div>
<!-- 公告2 - 系统公告 -->
<div class="announce-card" data-dom-id="notice-item-2" id="notice-item-2" data-category="system">
<div class="announce-top">
<span class="category-tag tag-teal">系统公告</span>
</div>
<div class="announce-title">青核 APP v2.1.0 版本更新说明</div>
<div class="announce-desc">新增校园雷达功能,优化匹配算法,修复已知问题,提升整体使用体验,请及时更新至最新版本。</div>
<div class="announce-footer">
<span class="announce-time">2024-06-12 09:00</span>
<span class="announce-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
6,234
</span>
</div>
</div>
<!-- 公告3 - 校园通知 -->
<div class="announce-card" data-dom-id="notice-item-3" id="notice-item-3" data-category="campus">
<div class="announce-top">
<span class="category-tag tag-blue">校园通知</span>
</div>
<div class="announce-title">期末季图书馆延长开放时间通知</div>
<div class="announce-desc">为满足同学们期末复习需求,图书馆即日起延长至23:00闭馆,周末正常开放,请大家合理安排学习时间。</div>
<div class="announce-footer">
<span class="announce-time">2024-06-10 16:45</span>
<span class="announce-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
4,891
</span>
</div>
</div>
</div>
</div>
<!-- 底部Tab导航 -->
<!-- 浮动主题切换按钮 -->
<!-- 公告详情弹窗 -->
<div class="announce-modal-overlay" id="announce-modal">
<div class="announce-modal">
<div class="modal-handle"></div>
<div class="modal-header">
<h2 class="modal-title" id="modal-title">公告标题</h2>
<button class="modal-close" id="modal-close" aria-label="关闭">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="modal-tags" id="modal-tags">
<span class="category-tag tag-teal">系统公告</span>
</div>
<div class="modal-meta">
<span class="meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span id="modal-date">2024-06-15</span>
</span>
<span class="meta-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<span id="modal-views">1.2万阅读</span>
</span>
</div>
<div class="modal-content" id="modal-content">
<p>公告详情内容...</p>
</div>
</div>
</div>
</div>
<script>// ===== 主题切换 =====
const html = document.documentElement;
// 初始化主题
}
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
`;
}
}
// ===== 返回按钮 =====
document.getElementById('btn-back').addEventListener('click', () => {
window.location.href = 'profile-home.html';
});
// ===== 分类Tab切换 =====
const tabCapsules = document.querySelectorAll('.tab-capsule');
const pinnedCard = document.getElementById('notice-pinned');
const announceCards = document.querySelectorAll('.announce-card');
tabCapsules.forEach(tab => {
tab.addEventListener('click', () => {
// 切换选中态
tabCapsules.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const category = tab.getAttribute('data-category');
// 过滤置顶公告
if (category === 'all' || pinnedCard.getAttribute('data-category') === category) {
pinnedCard.style.display = '';
pinnedCard.classList.add('fade-in');
setTimeout(() => pinnedCard.classList.remove('fade-in'), 300);
} else {
pinnedCard.style.display = 'none';
}
// 过滤普通公告
announceCards.forEach(card => {
const cat = card.getAttribute('data-category');
if (category === 'all' || cat === category) {
card.style.display = '';
card.classList.add('fade-in');
setTimeout(() => card.classList.remove('fade-in'), 300);
} else {
card.style.display = 'none';
}
});
});
});
// ===== 公告详情数据 =====
const announceData = {
'notice-pinned': {
title: '关于学信网实名认证系统升级通知',
category: '系统公告',
tagClass: 'tag-teal',
date: '2024-06-15 10:00',
views: '1.2万阅读',
content: `
<p>亲爱的青核同学们:</p>
<p>为进一步提升学信网实名认证的效率和稳定性,给大家带来更好的认证体验,<strong>学信网认证系统将于2024年6月17日(周六)凌晨02:00-04:00进行系统升级维护</strong>。</p>
<p><strong>升级期间影响:</strong></p>
<p>• 学信网实名认证通道将暂停服务约2小时<br>
• 已认证用户不受任何影响,可正常使用全部功能<br>
• 正在进行中的认证申请将自动顺延至升级完成后处理</p>
<p><strong>升级完成后优化:</strong></p>
<p>• 认证速度提升50%,平均等待时间缩短至30秒内<br>
• 新增认证失败原因智能提示,帮助同学们快速排查问题<br>
• 优化照片上传体验,支持批量上传和重试</p>
<p>请有认证需求的同学合理安排时间,避开维护时段。给您带来的不便,敬请谅解。</p>
<p>感谢大家对青核 Youthome 的支持与理解!</p>
<p style="text-align: right; color: var(--youth-text-tertiary);">—— 青核运营团队</p>
`
},
'notice-item-1': {
title: '校园音乐节报名通道开启<span class="icon-svg icon-music"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>',
category: '活动公告',
tagClass: 'tag-orange',
date: '2024-06-14 14:30',
views: '8,562 阅读',
content: `
<p>一年一度的青核校园音乐节来啦!🎸<span class="icon-svg icon-mic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="12" height="18" x="6" y="2" rx="6"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg></span>🎹</p>
<p>这是属于青春的舞台,这是展现自我的时刻。无论你是摇滚少年、民谣诗人,还是街舞达人、流行唱将,这里都有你的一席之地!</p>
<p><strong>活动信息:</strong></p>
<p>• 活动时间:2024年6月28日 18:00-21:30<br>
• 活动地点:学校大操场<br>
• 报名截止:2024年6月20日 23:59</p>
<p><strong>奖项设置:</strong></p>
<p>• 一等奖(1名):AirPods Pro + 青核年度VIP<br>
• 二等奖(2名):拍立得相机 + 青核半年VIP<br>
• 三等奖(3名):蓝牙音箱 + 青核季度VIP<br>
• 参与奖:所有参赛者均可获得青核定制周边一份</p>
<p><strong>报名方式:</strong>点击青核APP首页「校园音乐节」banner 即可报名。</p>
<p>期待在舞台上看到闪闪发光的你!<span class="icon-svg icon-sparkles"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg></span></p>
<p style="text-align: right; color: var(--youth-text-tertiary);">—— 青核校园活动部</p>
`
},
'notice-item-2': {
title: '青核 APP v2.1.0 版本更新说明',
category: '系统公告',
tagClass: 'tag-teal',
date: '2024-06-12 09:00',
views: '6,234 阅读',
content: `
<p>青核的同学们,v2.1.0 版本已正式上线!</p>
<p>本次更新带来了全新功能和多项优化,建议大家尽快升级体验。</p>
<p><strong><span class="icon-svg icon-sparkles"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg></span> 新功能</strong></p>
<p>• <strong>校园雷达</strong>:发现身边同校的有趣灵魂,基于兴趣标签智能推荐<br>
• <strong>动态话题</strong>:支持发布带话题的动态,参与热门讨论<br>
• <strong>我的收藏</strong>:一键收藏喜欢的动态和活动,随时回看</p>
<p><strong><span class="icon-svg icon-wrench"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span> 优化改进</strong></p>
<p>• 匹配算法全面升级,匹配精准度提升30%<br>
• 消息列表加载速度优化,滑动更流畅<br>
• 个人主页布局调整,信息展示更清晰<br>
• 优化暗色模式下的视觉体验</p>
<p><strong>🐛 问题修复</strong></p>
<p>• 修复部分机型上传图片失败的问题<br>
• 修复通知推送延迟的问题<br>
• 修复已知的稳定性问题</p>
<p>前往应用商店搜索「青核 Youthome」即可更新。如有任何问题,欢迎通过「我的-设置-意见反馈」告诉我们。</p>
<p style="text-align: right; color: var(--youth-text-tertiary);">—— 青核产品团队</p>
`
},
'notice-item-3': {
title: '期末季图书馆延长开放时间通知',
category: '校园通知',
tagClass: 'tag-blue',
date: '2024-06-10 16:45',
views: '4,891 阅读',
content: `
<p>各位同学:</p>
<p>期末考试临近,为满足同学们的复习备考需求,给大家提供更好的学习环境,<strong>图书馆自即日起至期末结束(7月5日)延长开放时间</strong>。</p>
<p><strong>开放时间调整如下:</strong></p>
<p>• 周一至周日:7:30 - 23:00(原22:00闭馆)<br>
• 自习区:全天开放(凭校园卡刷卡进入)<br>
• 借阅服务:8:00 - 21:00<br>
• 电子阅览室:8:00 - 22:00</p>
<p><strong>温馨提示:</strong></p>
<p>• 请同学们保持安静,共同维护良好的学习环境<br>
• 请勿用物品长时间占座,离开时请带好个人物品<br>
• 22:30后仅开放一楼自习区,二三楼将关闭<br>
• 注意劳逸结合,合理安排作息时间</p>
<p>祝同学们期末顺利,取得理想的成绩!<span class="icon-svg icon-book-open"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></span><span class="icon-svg icon-dumbbell"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6.5 6.5 11 11"/><path d="m21 21-1-1"/><path d="m3 3 1 1"/><path d="m18 22 4-4"/><path d="m2 6 4-4"/><path d="m3 10 7-7"/><path d="m14 21 7-7"/></svg></span></p>
<p style="text-align: right; color: var(--youth-text-tertiary);">—— 学校图书馆</p>
`
}
};
// ===== 公告点击查看详情 =====
const modal = document.getElementById('announce-modal');
const modalTitle = document.getElementById('modal-title');
const modalTags = document.getElementById('modal-tags');
const modalDate = document.getElementById('modal-date');
const modalViews = document.getElementById('modal-views');
const modalContent = document.getElementById('modal-content');
const modalClose = document.getElementById('modal-close');
function openAnnounceDetail(id) {
const data = announceData[id];
if (!data) return;
modalTitle.textContent = data.title;
modalTags.innerHTML = `<span class="category-tag ${data.tagClass}">${data.category}</span>`;
if (id === 'notice-pinned') {
modalTags.innerHTML = `
<span class="pinned-badge" style="font-size:11px;padding:2px 8px;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;">
<path d="M12 17v5"/>
<path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
</svg>
置顶
</span>
<span class="category-tag ${data.tagClass}">${data.category}</span>
`;
}
modalDate.textContent = data.date;
modalViews.textContent = data.views;
modalContent.innerHTML = data.content;
modal.classList.add('show');
}
function closeAnnounceDetail() {
modal.classList.remove('show');
}
// 置顶公告点击
document.getElementById('notice-pinned').addEventListener('click', () => {
openAnnounceDetail('notice-pinned');
});
// 普通公告点击
document.getElementById('notice-item-1').addEventListener('click', () => {
openAnnounceDetail('notice-item-1');
});
document.getElementById('notice-item-2').addEventListener('click', () => {
openAnnounceDetail('notice-item-2');
});
document.getElementById('notice-item-3').addEventListener('click', () => {
openAnnounceDetail('notice-item-3');
});
// 关闭弹窗
modalClose.addEventListener('click', closeAnnounceDetail);
modal.addEventListener('click', (e) => {
if (e.target === modal) {
closeAnnounceDetail();
}
});
// ===== 底部Tab切换 =====
const bottomTabItems = document.querySelectorAll('.bottom-tab-item');
bottomTabItems.forEach(tab => {
tab.addEventListener('click', () => {
bottomTabItems.forEach(t => t.classList.remove('active'));
tab.classList.add('active');
});
});
// 首页tab跳转
document.getElementById('tab-home').addEventListener('click', () => {
window.location.href = 'feed-home.html';
});
// 组局tab跳转
document.getElementById('tab-activity').addEventListener('click', () => {
window.location.href = 'activity-list.html';
});
// 消息tab跳转
document.getElementById('tab-message').addEventListener('click', () => {
window.location.href = 'message-list.html';
});
// 发现tab跳转
document.getElementById('tab-discover').addEventListener('click', () => {
window.location.href = 'campus-radar.html';
});
// 我的tab跳转
document.getElementById('tab-profile').addEventListener('click', () => {
window.location.href = 'profile-home.html';
});</script>
</body>
</html>