M23环节0项目初始化与基础布局完成
This commit is contained in:
Awen
parent
3916547f29
commit
12021fa836
|
|
@ -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 => `
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">${card.icon}</div>
|
||||
<span class="card-name">${card.name}</span>
|
||||
<span class="card-status ${card.status}">${card.status === 'online' ? '在线' : '建设中'}</span>
|
||||
</div>
|
||||
<a href="${card.path}" class="card-link">进入模块 →</a>
|
||||
</div>
|
||||
`).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();
|
||||
});
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>光湖实验室 · HoloLake 首页</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- Hero 区 -->
|
||||
<header class="hero">
|
||||
<h1 class="hero-title">光湖实验室<span class="hero-subtitle">HoloLake Lab</span></h1>
|
||||
<p class="hero-description">探索未来之域 · 零点原核频道</p>
|
||||
<a href="#" class="hero-btn">进入系统</a>
|
||||
</header>
|
||||
|
||||
<!-- 模块导航网格 -->
|
||||
<section class="modules">
|
||||
<h2 class="section-title">核心模块</h2>
|
||||
<div class="grid" id="moduleGrid">
|
||||
<!-- 卡片会由 JavaScript 动态生成 -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 系统状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>系统状态：</span>
|
||||
<span class="status-dot online"></span> 在线
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<p>© 2026 光湖实验室 · 零点原核频道</p>
|
||||
<p>版本 HoloLake Era · M23 首页中心</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue