`).join('');
-
- grid.innerHTML = cardsHTML;
},
- // 渲染轮播
+ // 轮播渲染（带高优先级橙色边框）
renderCarousel() {
const carousel = document.getElementById('announcementCarousel');
- if (!carousel) return;
-
- const announcement = announcements[this.currentAnnouncementIndex];
+ if (!carousel || announcements.length === 0) {
+ console.log('❌ 没有公告或找不到轮播容器');
+ return;
+ }
+
+ const item = announcements[this.currentAnnouncementIndex];
+ const priorityStyle = item.priority === 'high' ? 'border-left: 3px solid #ff9800; padding-left: 15px;' : '';
+
carousel.innerHTML = `
-
-
📢 ${announcement.title}
-
${announcement.content}
-
${announcement.date}
+
+
+ ${getTypeLabel(item.type)}
+
+
${item.title}
+
${item.content}
+
${item.date}
+
+ ${dataSource === 'M22-live' ? '🔗 M22 实时数据' : '📋 本地数据'}
+
`;
+
+ console.log('✅ 轮播已渲染，当前索引：', this.currentAnnouncementIndex);
},
- // 启动轮播（自动4秒切换）
startCarousel() {
if (this.carouselInterval) clearInterval(this.carouselInterval);
- this.carouselInterval = setInterval(() => {
- this.nextAnnouncement();
- }, 4000);
+ this.carouselInterval = setInterval(() => this.nextAnnouncement(), 4000);
console.log('🔄 轮播已启动，4秒自动切换');
},
- // 下一条公告
nextAnnouncement() {
+ if (announcements.length === 0) return;
this.currentAnnouncementIndex = (this.currentAnnouncementIndex + 1) % announcements.length;
this.renderCarousel();
},
- // 上一条公告
prevAnnouncement() {
+ if (announcements.length === 0) return;
this.currentAnnouncementIndex = (this.currentAnnouncementIndex - 1 + announcements.length) % announcements.length;
this.renderCarousel();
},
- // 模块跳转
- navigateTo(moduleId) {
- const module = moduleCards.find(m => m.id === moduleId);
- if (module) {
- console.log(`🧭 跳转到模块: ${module.name} | 路径: ${module.path}`);
- } else {
- console.log(`⚠️ 未找到模块: ${moduleId}`);
- }
- },
-
- // 绑定事件
bindEvents() {
- // 卡片点击事件
document.querySelectorAll('.card').forEach(card => {
- card.addEventListener('click', (e) => {
+ card.addEventListener('click', () => {
const moduleId = card.dataset.moduleId;
const modulePath = card.dataset.modulePath;
console.log(`🖱️ 点击卡片: ${moduleId} | 路径: ${modulePath}`);
- this.navigateTo(moduleId);
- // 未来这里会实现实际跳转：window.location.href = modulePath;
});
});
- // 轮播箭头点击
- document.getElementById('carouselPrev')?.addEventListener('click', () => {
- console.log('◀️ 点击左箭头');
- this.prevAnnouncement();
- });
-
- document.getElementById('carouselNext')?.addEventListener('click', () => {
- console.log('▶️ 点击右箭头');
- this.nextAnnouncement();
- });
-
- // 键盘事件
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
console.log('⌨️ 键盘左箭头');
this.prevAnnouncement();
- } else if (e.key === 'ArrowRight') {
+ }
+ if (e.key === 'ArrowRight') {
console.log('⌨️ 键盘右箭头');
this.nextAnnouncement();
}
});
- },
-
- // 更新状态栏
- updateStatusBar() {
- const onlineCount = moduleCards.filter(c => c.status === 'online').length;
- const totalCount = moduleCards.length;
- console.log(`📊 系统状态: ${onlineCount}/${totalCount} 模块在线`);
}
};
-// 页面加载时自动初始化
-document.addEventListener('DOMContentLoaded', () => {
- window.HomepageApp.init();
-});
\ No newline at end of file
+// 启动
+document.addEventListener('DOMContentLoaded', () => window.HomepageApp.init());
+
+// 确保函数全局可用（配合 HTML onclick）
+window.prevAnnouncement = function() {
+ window.HomepageApp.prevAnnouncement();
+};
+
+window.nextAnnouncement = function() {
+ window.HomepageApp.nextAnnouncement();
+};
\ No newline at end of file
diff --git a/homepage/develop.md b/homepage/develop.md
index b29eb166..02dbb16b 100644
--- a/homepage/develop.md
+++ b/homepage/develop.md
@@ -18,4 +18,17 @@
- 建设中模块：2个
### 备注
-✅ 环节0 验收通过，准备进入环节1
\ No newline at end of file
+✅ 环节0 验收通过，准备进入环节1
+## 环节1 · 公告轮播 + 卡片交互 + 状态动态化
+- 完成时间：2026-03-13
+- 开发者：DEV-012 Awen
+
+### 完成内容
+- [x] 公告轮播区：自动4秒切换 + 左右箭头手动切换
+- [x] 卡片悬停：放大 + 阴影效果（很明显很好很棒）
+- [x] 状态动态化：online脉冲、building闪烁
+- [x] 键盘左右箭头支持
+- [x] 点击卡片控制台输出路径
+
+### 当前状态
+✅ 环节1 验收通过，准备进入环节2
\ No newline at end of file
diff --git a/homepage/index.html b/homepage/index.html
index 90dcded3..92338475 100644
--- a/homepage/index.html
+++ b/homepage/index.html
@@ -14,14 +14,16 @@
探索未来之域 · 零点原核频道
进入系统
-
+
+
+
核心模块
@@ -42,7 +44,7 @@
版本 HoloLake Era · M23 首页中心