From e00171e073898ab8a1068f0c3e3373889b6af1be Mon Sep 17 00:00:00 2001 From: Awen <644405261@qq.com> Date: Fri, 13 Mar 2026 14:49:13 +0800 Subject: [PATCH] =?UTF-8?q?M23=E7=8E=AF=E8=8A=821=E5=85=AC=E5=91=8A?= =?UTF-8?q?=E8=BD=AE=E6=92=AD+=E5=8D=A1=E7=89=87=E4=BA=A4=E4=BA=92+?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=8A=A8=E6=80=81=E5=8C=96=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 0 homepage/app.js | 123 +++++++++++++++++++++++++++++-- homepage/index.html | 9 ++- homepage/style.css | 174 ++++++++++++++++++++++++++++++++++++++++++++ index.html | 0 style.css | 0 6 files changed, 300 insertions(+), 6 deletions(-) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 00000000..e69de29b diff --git a/homepage/app.js b/homepage/app.js index 6d5395d9..f8c1138b 100644 --- a/homepage/app.js +++ b/homepage/app.js @@ -1,8 +1,33 @@ /** * app.js - 光湖首页导航中心 - * M23 环节0 · 模块卡片渲染 + 状态指示 + * M23 环节1 · 公告轮播 + 卡片交互 + 状态动态化 */ +// 公告轮播数据（Mock数据，未来对接M22真实API） +const announcements = [ + { + id: 1, + title: "光湖实验室v1.0开发中", + content: "全团队并行推进，多模块同步建设", + date: "2026-03-13", + type: "update" + }, + { + id: 2, + title: "模块进度总览", + content: "4个模块在线 · 2个建设中", + date: "2026-03-13", + type: "status" + }, + { + id: 3, + title: "欢迎新开发者", + content: "零点原核频道持续壮大", + date: "2026-03-13", + type: "welcome" + } +]; + // 模块卡片数据 const moduleCards = [ { @@ -51,10 +76,16 @@ const moduleCards = [ // 首页应用对象 window.HomepageApp = { + currentAnnouncementIndex: 0, + carouselInterval: null, + init() { this.renderCards(); + this.renderCarousel(); + this.startCarousel(); + this.bindEvents(); this.updateStatusBar(); - console.log('✅ 首页初始化完成'); + console.log('✅ 首页初始化完成 · 15连胜版'); }, // 渲染卡片 @@ -63,20 +94,102 @@ window.HomepageApp = { if (!grid) return; const cardsHTML = moduleCards.map(card => ` -
+
${card.icon}
${card.name} ${card.status === 'online' ? '在线' : '建设中'}
- 进入模块 → + 进入模块 →
`).join(''); grid.innerHTML = cardsHTML; }, - // 更新状态栏（后续可对接真实API） + // 渲染轮播 + renderCarousel() { + const carousel = document.getElementById('announcementCarousel'); + if (!carousel) return; + + const announcement = announcements[this.currentAnnouncementIndex]; + carousel.innerHTML = ` +
+
📢 ${announcement.title}
+
${announcement.content}
+
${announcement.date}
+
+ `; + }, + + // 启动轮播（自动4秒切换） + startCarousel() { + if (this.carouselInterval) clearInterval(this.carouselInterval); + this.carouselInterval = setInterval(() => { + this.nextAnnouncement(); + }, 4000); + console.log('🔄 轮播已启动，4秒自动切换'); + }, + + // 下一条公告 + nextAnnouncement() { + this.currentAnnouncementIndex = (this.currentAnnouncementIndex + 1) % announcements.length; + this.renderCarousel(); + }, + + // 上一条公告 + prevAnnouncement() { + 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) => { + 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') { + console.log('⌨️ 键盘右箭头'); + this.nextAnnouncement(); + } + }); + }, + + // 更新状态栏 updateStatusBar() { const onlineCount = moduleCards.filter(c => c.status === 'online').length; const totalCount = moduleCards.length; diff --git a/homepage/index.html b/homepage/index.html index dc19cd0c..90dcded3 100644 --- a/homepage/index.html +++ b/homepage/index.html @@ -14,7 +14,14 @@

探索未来之域 · 零点原核频道

进入系统 - + +
+ + + +

核心模块

diff --git a/homepage/style.css b/homepage/style.css index dd38070f..3668c249 100644 --- a/homepage/style.css +++ b/homepage/style.css @@ -105,6 +105,7 @@ body { transition: all 0.3s ease; animation: cardFadeIn 0.5s ease forwards; opacity: 0; + cursor: pointer; } .card:hover { @@ -260,4 +261,177 @@ body { opacity: 1; transform: translateY(0); } +} + +/* ===== 公告轮播区样式 ===== */ +.carousel-container { + position: relative; + background: var(--bg-secondary); + border-radius: 2rem; + padding: 2rem; + margin: 2rem 0 3rem; + border: 1px solid var(--border); + animation: fadeIn 0.5s ease; +} + +.carousel { + min-height: 100px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.carousel-item { + width: 100%; +} + +.carousel-title { + font-size: 1.3rem; + color: var(--accent); + margin-bottom: 0.5rem; +} + +.carousel-content { + color: var(--text-secondary); + margin-bottom: 0.5rem; + line-height: 1.6; +} + +.carousel-date { + font-size: 0.8rem; + color: var(--text-tertiary); +} + +.carousel-arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + height: 40px; + border-radius: 50%; + background: var(--bg-card); + border: 1px solid var(--border); + color: var(--text-primary); + font-size: 1.2rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.carousel-arrow:hover { + background: var(--accent); + color: white; + border-color: var(--accent); +} + +.carousel-arrow.left { + left: -20px; +} + +.carousel-arrow.right { + right: -20px; +} + +/* ===== 卡片悬停效果增强 ===== */ +.card { + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.card:hover { + transform: translateY(-8px) scale(1.02); + border-color: var(--accent); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); +} + +/* ===== 状态标签动态化 ===== */ +.card-status.online { + animation: pulse 2s infinite; +} + +.card-status.building { + animation: flicker 1.5s infinite; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); + } + 70% { + box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); + } + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} + +@keyframes flicker { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.6; + box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); + } +} + +/* ===== 响应式调整 ===== */ +@media (max-width: 767px) { + .carousel-container { + padding: 1.5rem; + } + + .carousel-arrow.left { + left: -10px; + } + + .carousel-arrow.right { + right: -10px; + } +} + +/* ===== 暴力增强版（确保生效）===== */ +.card { + cursor: pointer !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; +} + +.card:hover { + transform: translateY(-10px) scale(1.05) !important; + border-color: var(--accent) !important; + box-shadow: 0 30px 50px rgba(59, 130, 246, 0.5) !important; +} + +.card-status.online { + animation: pulse 1.5s infinite !important; +} + +.card-status.building { + animation: flicker 1s infinite !important; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); + } + 50% { + box-shadow: 0 0 20px 10px rgba(16, 185, 129, 0.3); + } + 100% { + box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); + } +} + +@keyframes flicker { + 0%, 100% { + opacity: 1; + text-shadow: 0 0 5px rgba(245, 158, 11, 0.5); + } + 50% { + opacity: 0.5; + text-shadow: 0 0 15px rgba(245, 158, 11, 0.8); + } } \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/style.css b/style.css new file mode 100644 index 00000000..e69de29b