d8dfun/ai-tutor-template-244
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e352fdcd3d335880d2dfb6c0941eefb9989298e0
ai-tutor-template-244/prototype/admin-index.html
yourname a86e33498b feat: 添加移动端原型系统和容器配置 
- 添加移动端平铺入口页面 (mobile-index.html)
- 添加6个移动端功能页面
- 更新统一入口页面，支持桌面端和移动端双端入口
- 更新桌面端平铺页面为单列布局
- 添加开发容器配置文件]
2026-03-29 02:22:07 +00:00

182 lines
7.5 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 智能抽背助手 - 原型系统（平铺展示）</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-blue: #1890FF;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
/* 平铺网格布局 */
.prototype-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
.prototype-iframe {
width: 100%;
height: 900px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: white;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.3s ease;
}
.prototype-iframe:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.page-label {
position: absolute;
top: 8px;
left: 8px;
background: rgba(24, 144, 255, 0.9);
color: white;
padding: 4px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
z-index: 10;
backdrop-filter: blur(4px);
}
.iframe-container {
position: relative;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-100">
<!-- 顶部标题栏 -->
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 px-6 sticky top-0 z-50 shadow-lg">
<div class="flex items-center justify-between">
<div>
<div class="flex items-center gap-3">
<i class="fas fa-robot text-2xl"></i>
<div>
<h1 class="text-2xl font-bold">AI 智能抽背助手 - 原型系统</h1>
<p class="text-blue-100 text-sm mt-1">
<i class="fas fa-th mr-1"></i>平铺展示模式 - 所有页面同时显示，一目了然
</p>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<a href="index.html" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm transition">
<i class="fas fa-home mr-2"></i>统一入口
</a>
<a href="docs-index.html" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm transition">
<i class="fas fa-book mr-2"></i>文档中心
</a>
<div class="bg-white/20 rounded-lg px-3 py-2 text-sm">
<i class="fas fa-calendar mr-2"></i>2026-03-28
</div>
</div>
</div>
</header>
<!-- 页面说明 -->
<div class="bg-white border-b px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-6 text-sm">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-blue-500 rounded-full"></span>
<span class="text-gray-600">共 <strong>6</strong> 个页面</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
<span class="text-gray-600">桌面端模式</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-purple-500 rounded-full"></span>
<span class="text-gray-600">后台管理系统</span>
</div>
</div>
<div class="text-sm text-gray-500">
<i class="fas fa-info-circle mr-1"></i>提示：每个 iframe 可独立滚动查看完整内容
</div>
</div>
</div>
<!-- 平铺网格容器 -->
<div class="prototype-grid">
<!-- 页面 1: 数据概览 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-chart-line mr-1"></i>数据概览</span>
<iframe src="pages/admin/dashboard.html" class="prototype-iframe" title="数据概览"></iframe>
</div>
<!-- 页面 2: 抽背记录查询 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-list-alt mr-1"></i>抽背记录查询</span>
<iframe src="pages/admin/quiz-records.html" class="prototype-iframe" title="抽背记录查询"></iframe>
</div>
<!-- 页面 3: 学生管理 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-user-graduate mr-1"></i>学生管理</span>
<iframe src="pages/admin/student-management.html" class="prototype-iframe" title="学生管理"></iframe>
</div>
<!-- 页面 4: 知识点管理 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-book mr-1"></i>知识点管理</span>
<iframe src="pages/admin/knowledge-management.html" class="prototype-iframe" title="知识点管理"></iframe>
</div>
<!-- 页面 5: 学习任务管理 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-tasks mr-1"></i>学习任务管理</span>
<iframe src="pages/admin/task-management.html" class="prototype-iframe" title="学习任务管理"></iframe>
</div>
<!-- 页面 6: 系统设置 -->
<div class="iframe-container">
<span class="page-label"><i class="fas fa-cog mr-1"></i>系统设置</span>
<iframe src="pages/admin/settings.html" class="prototype-iframe" title="系统设置"></iframe>
</div>
</div>
<!-- 页脚 -->
<footer class="bg-white border-t py-4 px-6 mt-6">
<div class="flex items-center justify-between text-sm text-gray-500">
<div>
<span>AI 智能抽背助手原型系统</span>
<span class="mx-2">|</span>
<span>基于 PRD 和 UX 设计规范生成</span>
</div>
<div class="flex items-center gap-4">
<a href="../{output_folder}/planning-artifacts/prd.md" target="_blank" class="hover:text-blue-600">
<i class="fas fa-file-alt mr-1"></i>PRD 文档
</a>
<a href="../{output_folder}/planning-artifacts/ux-design-specification.md" target="_blank" class="hover:text-blue-600">
<i class="fas fa-palette mr-1"></i>UX 设计规范
</a>
<a href="../ai-tutor-requirements.md" target="_blank" class="hover:text-blue-600">
<i class="fas fa-list mr-1"></i>需求文档
</a>
</div>
</div>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink