From 12021fa836b32828fd685bfd489443096df790cc Mon Sep 17 00:00:00 2001 From: Awen <644405261@qq.com> Date: Fri, 13 Mar 2026 12:44:46 +0800 Subject: [PATCH] =?UTF-8?q?M23=E7=8E=AF=E8=8A=820=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=8E=E5=9F=BA=E7=A1=80=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- homepage/app.js | 90 +++++++++++++++ homepage/index.html | 41 +++++++ homepage/style.css | 263 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 394 insertions(+) create mode 100644 homepage/app.js create mode 100644 homepage/index.html create mode 100644 homepage/style.css diff --git a/homepage/app.js b/homepage/app.js new file mode 100644 index 00000000..6d5395d9 --- /dev/null +++ b/homepage/app.js @@ -0,0 +1,90 @@ +/** + * app.js - 光湖首页导航中心 + * M23 环节0 · 模块卡片渲染 + 状态指示 + */ + +// 模块卡片数据 +const moduleCards = [ + { + id: "M09", + name: "消息通知中心", + icon: "🔔", + status: "online", + path: "../notification-center/" + }, + { + id: "M22", + name: "主域公告栏", + icon: "📢", + status: "online", + path: "../announcement/" + }, + { + id: "M06", + name: "工单管理", + icon: "🎫", + status: "online", + path: "../ticket-system/" + }, + { + id: "M16", + name: "码字工作台", + icon: "✍️", + status: "building", + path: "../writing-workspace/" + }, + { + id: "M11", + name: "风格组件库", + icon: "🎨", + status: "online", + path: "../ui-components/" + }, + { + id: "M05", + name: "用户中心", + icon: "👤", + status: "building", + path: "../user-center/" + } +]; + +// 首页应用对象 +window.HomepageApp = { + init() { + this.renderCards(); + this.updateStatusBar(); + console.log('✅ 首页初始化完成'); + }, + + // 渲染卡片 + renderCards() { + const grid = document.getElementById('moduleGrid'); + if (!grid) return; + + const cardsHTML = moduleCards.map(card => ` +
+
+
${card.icon}
+ ${card.name} + ${card.status === 'online' ? '在线' : '建设中'} +
+ 进入模块 → +
+ `).join(''); + + grid.innerHTML = cardsHTML; + }, + + // 更新状态栏（后续可对接真实API） + 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 diff --git a/homepage/index.html b/homepage/index.html new file mode 100644 index 00000000..dc19cd0c --- /dev/null +++ b/homepage/index.html @@ -0,0 +1,41 @@ + + + + + + 光湖实验室 · HoloLake 首页 + + + +
+ +
+

光湖实验室HoloLake Lab

+

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

+ 进入系统 +
+ + +
+

核心模块

+
+ +
+
+ + +
+ 系统状态： + 在线 +
+ + + +
+ + + + \ No newline at end of file diff --git a/homepage/style.css b/homepage/style.css new file mode 100644 index 00000000..dd38070f --- /dev/null +++ b/homepage/style.css @@ -0,0 +1,263 @@ +/* ===== 全局变量 ===== */ +:root { + --bg-primary: #0a0c14; + --bg-secondary: #141822; + --bg-card: #1e2430; + --text-primary: #ffffff; + --text-secondary: #a0a8b8; + --accent: #3b82f6; + --accent-hover: #60a5fa; + --online: #10b981; + --building: #f59e0b; + --border: #2a3142; +} + +/* ===== 基础样式 ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; +} + +.app { + max-width: 1200px; + margin: 0 auto; + padding: 2rem; +} + +/* ===== Hero 区 ===== */ +.hero { + text-align: center; + padding: 4rem 1rem; + background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary)); + border-radius: 2rem; + margin-bottom: 3rem; + border: 1px solid var(--border); + animation: fadeIn 1s ease; +} + +.hero-title { + font-size: 3rem; + font-weight: 700; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, #fff, #94a3b8); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-subtitle { + display: block; + font-size: 1.2rem; + color: var(--text-secondary); + margin-top: 0.5rem; +} + +.hero-description { + font-size: 1.2rem; + color: var(--text-secondary); + margin-bottom: 2rem; +} + +.hero-btn { + display: inline-block; + padding: 0.8rem 2rem; + background: var(--accent); + color: white; + text-decoration: none; + border-radius: 2rem; + font-weight: 500; + transition: all 0.3s ease; +} + +.hero-btn:hover { + background: var(--accent-hover); + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); +} + +/* ===== 模块网格 ===== */ +.section-title { + font-size: 1.8rem; + margin-bottom: 2rem; + color: var(--text-primary); +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; + margin-bottom: 3rem; +} + +/* 卡片样式 */ +.card { + background: var(--bg-card); + border-radius: 1.5rem; + padding: 1.5rem; + border: 1px solid var(--border); + transition: all 0.3s ease; + animation: cardFadeIn 0.5s ease forwards; + opacity: 0; +} + +.card:hover { + transform: translateY(-4px); + border-color: var(--accent); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} + +.card-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.card-icon { + width: 40px; + height: 40px; + background: var(--bg-secondary); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; +} + +.card-name { + font-size: 1.2rem; + font-weight: 600; + flex: 1; +} + +.card-status { + font-size: 0.8rem; + padding: 0.2rem 0.8rem; + border-radius: 1rem; + background: var(--bg-secondary); +} + +.card-status.online { + background: rgba(16, 185, 129, 0.2); + color: var(--online); +} + +.card-status.building { + background: rgba(245, 158, 11, 0.2); + color: var(--building); +} + +.card-link { + display: inline-block; + margin-top: 1rem; + color: var(--accent); + text-decoration: none; + font-size: 0.9rem; +} + +.card-link:hover { + text-decoration: underline; +} + +/* 卡片动画延迟 */ +.card:nth-child(1) { animation-delay: 0.1s; } +.card:nth-child(2) { animation-delay: 0.2s; } +.card:nth-child(3) { animation-delay: 0.3s; } +.card:nth-child(4) { animation-delay: 0.4s; } +.card:nth-child(5) { animation-delay: 0.5s; } +.card:nth-child(6) { animation-delay: 0.6s; } + +@keyframes cardFadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== 状态栏 ===== */ +.status-bar { + background: var(--bg-secondary); + padding: 1rem; + border-radius: 2rem; + margin-bottom: 2rem; + display: flex; + align-items: center; + gap: 1rem; + border: 1px solid var(--border); +} + +.status-dot { + width: 10px; + height: 10px; + border-radius: 50%; + display: inline-block; +} + +.status-dot.online { + background: var(--online); + box-shadow: 0 0 10px var(--online); +} + +/* ===== Footer ===== */ +.footer { + text-align: center; + padding: 2rem; + color: var(--text-secondary); + border-top: 1px solid var(--border); +} + +.footer p { + margin: 0.5rem 0; +} + +/* ===== 响应式设计 ===== */ +/* 桌面默认已经是3列 (min-width: 1024px) */ + +/* 平板 (768px - 1023px) 2列 */ +@media (max-width: 1023px) { + .grid { + grid-template-columns: repeat(2, 1fr); + } + + .hero-title { + font-size: 2.5rem; + } +} + +/* 手机 (小于 768px) 1列 */ +@media (max-width: 767px) { + .grid { + grid-template-columns: 1fr; + } + + .hero-title { + font-size: 2rem; + } + + .app { + padding: 1rem; + } +} + +/* ===== 全局淡入动画 ===== */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file