521 lines
32 KiB
HTML
521 lines
32 KiB
HTML
<!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>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; }
|
||
body { background-color: #f5f7fa; color: #333; line-height: 1.6; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||
header { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; border-radius: 10px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
|
||
h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
|
||
.subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 800px; margin: 0 auto; }
|
||
|
||
/* 导航栏样式 */
|
||
.navbar { background-color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 30px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
|
||
.navbar-brand { font-size: 1.5rem; font-weight: bold; color: #3498db; text-decoration: none; }
|
||
.navbar-links { display: flex; gap: 20px; }
|
||
.navbar-link { color: #333; text-decoration: none; padding: 8px 15px; border-radius: 6px; transition: background 0.3s; }
|
||
.navbar-link:hover { background-color: #f5f7fa; }
|
||
.navbar-link.active { background-color: #e8f4fd; color: #3498db; font-weight: 500; }
|
||
|
||
/* 案例展示区域 */
|
||
.cases-container { margin: 40px 0; }
|
||
.section-title { text-align: center; font-size: 2rem; margin-bottom: 30px; color: #2c3e50; position: relative; }
|
||
.section-title::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(90deg, #3498db, #8e44ad); margin: 15px auto 0; border-radius: 2px; }
|
||
.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px; }
|
||
.case-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; opacity: 0; transform: translateY(20px); }
|
||
.case-card.visible { opacity: 1; transform: translateY(0); }
|
||
.case-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
|
||
.case-thumbnail { height: 200px; overflow: hidden; position: relative; }
|
||
.case-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
|
||
.case-card:hover .case-thumbnail img { transform: scale(1.05); }
|
||
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background-color: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; opacity: 0; transition: opacity 0.3s; }
|
||
.case-card:hover .play-icon { opacity: 1; }
|
||
.case-content { padding: 20px; }
|
||
.case-title { font-size: 1.3rem; margin-bottom: 10px; color: #2c3e50; }
|
||
.case-meta { display: flex; justify-content: space-between; margin-bottom: 15px; color: #7f8c8d; font-size: 0.9rem; }
|
||
.case-description { color: #666; margin-bottom: 20px; }
|
||
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
|
||
.case-tag { background-color: #e8f4fd; color: #3498db; padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; }
|
||
.btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s; text-decoration: none; display: inline-block; }
|
||
.btn-primary { background-color: #3498db; color: white; }
|
||
.btn-primary:hover { background-color: #2980b9; }
|
||
.btn-outline { background-color: transparent; border: 1px solid #3498db; color: #3498db; margin-left: 10px; }
|
||
.btn-outline:hover { background-color: #e8f4fd; }
|
||
|
||
/* 案例详情模态框 */
|
||
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1000; overflow: auto; }
|
||
.modal-content { background-color: white; margin: 5% auto; padding: 30px; width: 90%; max-width: 1000px; border-radius: 10px; position: relative; box-shadow: 0 5px 30px rgba(0,0,0,0.2); animation: modalFadeIn 0.4s; }
|
||
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
|
||
.close-modal { position: absolute; top: 15px; right: 20px; font-size: 28px; cursor: pointer; color: #7f8c8d; }
|
||
.modal-header { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
|
||
.modal-title { font-size: 1.8rem; color: #2c3e50; }
|
||
.modal-body { margin-bottom: 20px; }
|
||
.modal-video-container { position: relative; padding-bottom: 56.25%; height: 0; margin-bottom: 20px; overflow: hidden; }
|
||
.modal-video-container iframe, .modal-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||
.case-details { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px; }
|
||
@media (max-width: 768px) { .case-details { grid-template-columns: 1fr; } }
|
||
.detail-section { margin-bottom: 20px; }
|
||
.detail-title { font-size: 1.2rem; margin-bottom: 10px; color: #2c3e50; display: flex; align-items: center; }
|
||
.detail-title i { margin-right: 10px; color: #3498db; }
|
||
.detail-content { color: #666; line-height: 1.7; }
|
||
.process-steps { margin-top: 30px; }
|
||
.step { margin-bottom: 25px; padding-left: 30px; position: relative; }
|
||
.step::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #3498db; }
|
||
.step-title { font-weight: bold; margin-bottom: 5px; color: #2c3e50; }
|
||
.step-description { color: #666; }
|
||
|
||
footer { text-align: center; padding: 30px 0; margin-top: 60px; color: #7f8c8d; border-top: 1px solid #eee; }
|
||
|
||
@media screen and (max-width: 768px) {
|
||
h1 { font-size: 2rem; }
|
||
.navbar { flex-direction: column; gap: 15px; }
|
||
.navbar-links { width: 100%; justify-content: center; }
|
||
.cases-grid { grid-template-columns: 1fr; }
|
||
.modal-content { margin: 10% auto; }
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>教学视频AI生成智能体</h1>
|
||
<p class="subtitle">轻松创建专业级教学视频，从提示词到完整视频，一站式AI生成解决方案</p>
|
||
</header>
|
||
|
||
<!-- 导航栏 -->
|
||
<nav class="navbar">
|
||
<a href="index.html" class="navbar-brand">教学视频AI</a>
|
||
<div class="navbar-links">
|
||
<a href="index.html" class="navbar-link">首页</a>
|
||
<a href="prompt_input.html" class="navbar-link">创建提示词</a>
|
||
<a href="history.html" class="navbar-link">历史记录</a>
|
||
<a href="cases.html" class="navbar-link active">推荐案例</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 案例展示区域 -->
|
||
<div class="cases-container">
|
||
<h2 class="section-title">优秀教学视频案例</h2>
|
||
<p style="text-align: center; color: #666; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto;">探索我们平台上生成的高质量教学视频案例，了解它们的制作过程和效果，为您的创作提供灵感。</p>
|
||
|
||
<div class="cases-grid">
|
||
<!-- 案例1 -->
|
||
<div class="case-card" data-case="case1">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=1" alt="数学公式教学视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">初中数学：完全平方公式</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 2.4k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.8/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">数学</span>
|
||
<span class="case-tag">初中</span>
|
||
<span class="case-tag">公式推导</span>
|
||
</div>
|
||
<p class="case-description">通过动画演示完全平方公式的几何意义和代数推导过程，帮助学生直观理解和记忆。</p>
|
||
<button class="btn btn-primary view-case" data-case="case1">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例2 -->
|
||
<div class="case-card" data-case="case2">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=2" alt="物理实验演示视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">高中物理：电磁感应实验</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 1.8k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.7/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">物理</span>
|
||
<span class="case-tag">高中</span>
|
||
<span class="case-tag">实验演示</span>
|
||
</div>
|
||
<p class="case-description">虚拟实验环境展示电磁感应现象，清晰演示磁通量变化与感应电流方向的关系。</p>
|
||
<button class="btn btn-primary view-case" data-case="case2">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例3 -->
|
||
<div class="case-card" data-case="case3">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=3" alt="化学分子结构视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">有机化学：甲烷分子结构</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 1.5k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.9/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">化学</span>
|
||
<span class="case-tag">高中</span>
|
||
<span class="case-tag">分子结构</span>
|
||
</div>
|
||
<p class="case-description">3D动画展示甲烷分子的立体结构，共价键的形成过程，帮助学生理解有机化合物的空间构型。</p>
|
||
<button class="btn btn-primary view-case" data-case="case3">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例4 -->
|
||
<div class="case-card" data-case="case4">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=4" alt="历史事件讲解视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">中国历史：丝绸之路</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 2.1k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.6/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">历史</span>
|
||
<span class="case-tag">初中</span>
|
||
<span class="case-tag">文化遗产</span>
|
||
</div>
|
||
<p class="case-description">动态地图展示丝绸之路的路线和重要节点，讲述中外文化交流的历史故事和影响。</p>
|
||
<button class="btn btn-primary view-case" data-case="case4">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例5 -->
|
||
<div class="case-card" data-case="case5">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=5" alt="生物细胞结构视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">生物学：动物细胞结构</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 1.7k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.8/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">生物</span>
|
||
<span class="case-tag">初中</span>
|
||
<span class="case-tag">细胞结构</span>
|
||
</div>
|
||
<p class="case-description">动画演示动物细胞的各个细胞器及其功能，通过微观视角展示生命活动的基本单位。</p>
|
||
<button class="btn btn-primary view-case" data-case="case5">查看详情</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 案例6 -->
|
||
<div class="case-card" data-case="case6">
|
||
<div class="case-thumbnail">
|
||
<img src="https://picsum.photos/640/360?random=6" alt="英语语法教学视频">
|
||
<div class="play-icon"><i class="fas fa-play"></i></div>
|
||
</div>
|
||
<div class="case-content">
|
||
<h3 class="case-title">英语语法：现在完成时</h3>
|
||
<div class="case-meta">
|
||
<span><i class="fas fa-eye"></i> 1.9k 观看</span>
|
||
<span><i class="fas fa-star"></i> 4.5/5 评分</span>
|
||
</div>
|
||
<div class="case-tags">
|
||
<span class="case-tag">英语</span>
|
||
<span class="case-tag">初中</span>
|
||
<span class="case-tag">语法教学</span>
|
||
</div>
|
||
<p class="case-description">通过生活化的场景和例句，讲解现在完成时的用法、标志词和常见误区，帮助学生准确掌握。</p>
|
||
<button class="btn btn-primary view-case" data-case="case6">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 教学视频AI生成智能体 | 让教育内容创作更简单</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 案例详情模态框 -->
|
||
<div id="caseModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</span>
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="modalTitle"></h2>
|
||
</div>
|
||
<div class="modal-body" id="modalBody">
|
||
<!-- 模态框内容将通过JavaScript动态填充 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 案例数据
|
||
const casesData = {
|
||
case1: {
|
||
title: "初中数学：完全平方公式",
|
||
thumbnail: "https://picsum.photos/640/360?random=1",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ", // 示例视频
|
||
views: "2.4k",
|
||
rating: "4.8/5",
|
||
tags: ["数学", "初中", "公式推导"],
|
||
description: "本视频通过动画演示完全平方公式的几何意义和代数推导过程，帮助学生直观理解和记忆。视频采用了生活中的例子和互动式练习，让抽象的数学公式变得生动易懂。",
|
||
creator: "李老师",
|
||
subject: "数学",
|
||
grade: "初中二年级",
|
||
duration: "5:30",
|
||
process: [
|
||
{ title: "提示词生成", description: "使用结构化提示词模板，输入课程主题、教学目标和风格要求，生成详细的首帧描述。" },
|
||
{ title: "首帧图片生成", description: "AI根据提示词生成公式推导的示意图，突出几何意义和代数表达式的关联。" },
|
||
{ title: "分镜头脚本", description: "系统自动生成包含讲解、动画演示和练习环节的分镜头脚本，确保教学逻辑清晰。" },
|
||
{ title: "视频生成", description: "AI根据分镜头脚本和首帧风格，生成完整的教学视频，包含动画效果和语音讲解。" }
|
||
],
|
||
keyPoints: ["完全平方公式的几何意义", "代数推导过程", "公式的变形应用", "常见错误分析"]
|
||
},
|
||
case2: {
|
||
title: "高中物理：电磁感应实验",
|
||
thumbnail: "https://picsum.photos/640/360?random=2",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
|
||
views: "1.8k",
|
||
rating: "4.7/5",
|
||
tags: ["物理", "高中", "实验演示"],
|
||
description: "本视频通过虚拟实验环境展示电磁感应现象，清晰演示磁通量变化与感应电流方向的关系。学生可以直观看到不同情况下的实验结果，加深对楞次定律的理解。",
|
||
creator: "王老师",
|
||
subject: "物理",
|
||
grade: "高中一年级",
|
||
duration: "7:15",
|
||
process: [
|
||
{ title: "提示词生成", description: "输入实验主题、核心概念和实验步骤要求，生成详细的实验场景描述。" },
|
||
{ title: "首帧图片生成", description: "AI生成电磁感应实验装置，突出磁铁、线圈和电流计等关键组件。" },
|
||
{ title: "分镜头脚本", description: "系统生成包含实验准备、操作步骤、现象观察和结论总结的分镜头脚本。" },
|
||
{ title: "视频生成", description: "AI根据脚本生成动态实验演示视频，展示不同操作下的实验现象和数据变化。" }
|
||
],
|
||
keyPoints: ["电磁感应现象", "楞次定律", "磁通量变化", "感应电流方向判断"]
|
||
},
|
||
case3: {
|
||
title: "有机化学：甲烷分子结构",
|
||
thumbnail: "https://picsum.photos/640/360?random=3",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
|
||
views: "1.5k",
|
||
rating: "4.9/5",
|
||
tags: ["化学", "高中", "分子结构"],
|
||
description: "本视频通过3D动画展示甲烷分子的立体结构，共价键的形成过程，帮助学生理解有机化合物的空间构型。视频还对比了不同视角下的分子模型，增强空间想象能力。",
|
||
creator: "张老师",
|
||
subject: "化学",
|
||
grade: "高中二年级",
|
||
duration: "6:40",
|
||
process: [
|
||
{ title: "提示词生成", description: "输入分子名称、展示重点和所需视角，生成详细的分子结构描述。" },
|
||
{ title: "首帧图片生成", description: "AI生成甲烷分子的3D模型图，展示正四面体结构和共价键夹角。" },
|
||
{ title: "分镜头脚本", description: "系统生成包含分子结构展示、共价键讲解和空间构型分析的分镜头脚本。" },
|
||
{ title: "视频生成", description: "AI根据脚本生成旋转的3D分子模型动画，配合讲解展示分子的各种特性。" }
|
||
],
|
||
keyPoints: ["正四面体结构", "共价键形成", "键角与键长", "空间构型与性质关系"]
|
||
},
|
||
case4: {
|
||
title: "中国历史：丝绸之路",
|
||
thumbnail: "https://picsum.photos/640/360?random=4",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
|
||
views: "2.1k",
|
||
rating: "4.6/5",
|
||
tags: ["历史", "初中", "文化遗产"],
|
||
description: "本视频通过动态地图展示丝绸之路的路线和重要节点，讲述中外文化交流的历史故事和影响。视频融入了丰富的历史图片和文物资料，让学生感受古代贸易和文化交流的繁荣。",
|
||
creator: "刘老师",
|
||
subject: "历史",
|
||
grade: "初中三年级",
|
||
duration: "8:25",
|
||
process: [
|
||
{ title: "提示词生成", description: "输入历史事件、时间范围和展示重点，生成详细的场景描述。" },
|
||
{ title: "首帧图片生成", description: "AI生成丝绸之路路线图，标注重要城市和贸易节点。" },
|
||
{ title: "分镜头脚本", description: "系统生成包含路线介绍、重要事件和文化交流成果展示的分镜头脚本。" },
|
||
{ title: "视频生成", description: "AI根据脚本生成动态地图动画和历史场景还原，配合讲解展示丝绸之路的历史意义。" }
|
||
],
|
||
keyPoints: ["路线与节点", "贸易商品", "文化交流", "历史意义"]
|
||
},
|
||
case5: {
|
||
title: "生物学：动物细胞结构",
|
||
thumbnail: "https://picsum.photos/640/360?random=5",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
|
||
views: "1.7k",
|
||
rating: "4.8/5",
|
||
tags: ["生物", "初中", "细胞结构"],
|
||
description: "本视频通过动画演示动物细胞的各个细胞器及其功能，通过微观视角展示生命活动的基本单位。视频采用了拟人化的讲解方式，让抽象的细胞结构变得生动有趣。",
|
||
creator: "陈老师",
|
||
subject: "生物",
|
||
grade: "初中一年级",
|
||
duration: "6:10",
|
||
process: [
|
||
{ title: "提示词生成", description: "输入细胞类型、展示重点和讲解风格，生成详细的细胞结构描述。" },
|
||
{ title: "首帧图片生成", description: "AI生成动物细胞的结构图，标注各个细胞器的位置和形态。" },
|
||
{ title: "分镜头脚本", description: "系统生成包含整体结构介绍、各细胞器功能讲解和生命活动展示的分镜头脚本。" },
|
||
{ title: "视频生成", description: "AI根据脚本生成动态细胞模型动画，展示各细胞器的功能和相互协作。" }
|
||
],
|
||
keyPoints: ["细胞膜结构", "细胞核功能", "细胞器分工", "细胞生命活动"]
|
||
},
|
||
case6: {
|
||
title: "英语语法：现在完成时",
|
||
thumbnail: "https://picsum.photos/640/360?random=6",
|
||
video: "https://www.youtube.com/embed/dQw4w9WgXcQ",
|
||
views: "1.9k",
|
||
rating: "4.5/5",
|
||
tags: ["英语", "初中", "语法教学"],
|
||
description: "本视频通过生活化的场景和例句，讲解现在完成时的用法、标志词和常见误区，帮助学生准确掌握。视频包含互动练习和对比分析，加深学生对时态的理解和应用能力。",
|
||
creator: "赵老师",
|
||
subject: "英语",
|
||
grade: "初中二年级",
|
||
duration: "5:50",
|
||
process: [
|
||
{ title: "提示词生成", description: "输入语法点、教学目标和学生水平，生成详细的教学场景描述。" },
|
||
{ title: "首帧图片生成", description: "AI生成展示现在完成时应用场景的图片，突出时间关系和动作影响。" },
|
||
{ title: "分镜头脚本", description: "系统生成包含概念讲解、例句分析、练习巩固和误区提醒的分镜头脚本。" },
|
||
{ title: "视频生成", description: "AI根据脚本生成情景对话动画和语法讲解视频，配合互动练习提升学习效果。" }
|
||
],
|
||
keyPoints: ["基本结构", "用法区别", "标志词", "常见错误"]
|
||
}
|
||
};
|
||
|
||
// 模态框相关元素
|
||
const modal = document.getElementById('caseModal');
|
||
const closeModal = document.querySelector('.close-modal');
|
||
const modalTitle = document.getElementById('modalTitle');
|
||
const modalBody = document.getElementById('modalBody');
|
||
const viewButtons = document.querySelectorAll('.view-case');
|
||
|
||
// 打开模态框
|
||
viewButtons.forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const caseId = this.getAttribute('data-case');
|
||
const caseData = casesData[caseId];
|
||
|
||
// 填充模态框内容
|
||
modalTitle.textContent = caseData.title;
|
||
|
||
let tagsHtml = '';
|
||
caseData.tags.forEach(tag => {
|
||
tagsHtml += `<span class="case-tag">${tag}</span>`;
|
||
});
|
||
|
||
let processHtml = '';
|
||
caseData.process.forEach((step, index) => {
|
||
processHtml += `
|
||
<div class="step">
|
||
<div class="step-title">步骤 ${index + 1}: ${step.title}</div>
|
||
<div class="step-description">${step.description}</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
let keyPointsHtml = '';
|
||
caseData.keyPoints.forEach(point => {
|
||
keyPointsHtml += `<li>${point}</li>`;
|
||
});
|
||
|
||
modalBody.innerHTML = `
|
||
<div class="modal-video-container">
|
||
<iframe src="${caseData.video}" frameborder="0" allowfullscreen></iframe>
|
||
</div>
|
||
|
||
<div class="case-details">
|
||
<div>
|
||
<div class="detail-section">
|
||
<h3 class="detail-title"><i class="fas fa-info-circle"></i> 案例信息</h3>
|
||
<div class="detail-content">
|
||
<p><strong>创作者:</strong> ${caseData.creator}</p>
|
||
<p><strong>学科:</strong> ${caseData.subject}</p>
|
||
<p><strong>年级:</strong> ${caseData.grade}</p>
|
||
<p><strong>时长:</strong> ${caseData.duration}</p>
|
||
<p><strong>观看次数:</strong> ${caseData.views}</p>
|
||
<p><strong>评分:</strong> ${caseData.rating}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3 class="detail-title"><i class="fas fa-tags"></i> 标签</h3>
|
||
<div class="case-tags">
|
||
${tagsHtml}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="detail-section">
|
||
<h3 class="detail-title"><i class="fas fa-book-open"></i> 案例描述</h3>
|
||
<div class="detail-content">
|
||
${caseData.description}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section">
|
||
<h3 class="detail-title"><i class="fas fa-list-check"></i> 知识点</h3>
|
||
<div class="detail-content">
|
||
<ul>
|
||
${keyPointsHtml}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="detail-section process-steps">
|
||
<h3 class="detail-title"><i class="fas fa-route"></i> 制作过程</h3>
|
||
${processHtml}
|
||
</div>
|
||
|
||
<div style="text-align: center; margin-top: 30px;">
|
||
<button class="btn btn-primary" onclick="window.location.href='prompt_input.html'">创建类似案例</button>
|
||
<button class="btn btn-outline close-modal-btn">关闭</button>
|
||
</div>
|
||
`;
|
||
|
||
// 显示模态框
|
||
modal.style.display = 'block';
|
||
|
||
// 为动态添加的关闭按钮绑定事件
|
||
document.querySelector('.close-modal-btn').addEventListener('click', function() {
|
||
modal.style.display = 'none';
|
||
});
|
||
});
|
||
});
|
||
|
||
// 关闭模态框
|
||
closeModal.addEventListener('click', function() {
|
||
modal.style.display = 'none';
|
||
});
|
||
|
||
// 点击模态框外部关闭
|
||
window.addEventListener('click', function(event) {
|
||
if (event.target === modal) {
|
||
modal.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 滚动动画效果
|
||
const caseCards = document.querySelectorAll('.case-card');
|
||
|
||
function checkVisibility() {
|
||
const triggerBottom = window.innerHeight * 0.8;
|
||
|
||
caseCards.forEach(card => {
|
||
const cardTop = card.getBoundingClientRect().top;
|
||
if (cardTop < triggerBottom) {
|
||
card.classList.add('visible');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始检查
|
||
checkVisibility();
|
||
|
||
// 滚动时检查
|
||
window.addEventListener('scroll', checkVisibility);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |