698 lines
30 KiB
HTML
698 lines
30 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实验室解决方案 - 东师理想AI教育云平台</title>
|
||
<!-- 引入基础CSS框架 -->
|
||
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/css/layui.min.css">
|
||
<script src="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/layui.min.js"></script>
|
||
<!-- 引入Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<!-- 引入Chart.js -->
|
||
<script src="https://gcore.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
<!-- 引入外部CSS -->
|
||
<link rel="stylesheet" href="../css/style.css">
|
||
<style>
|
||
/* 页面标题区样式 */
|
||
.page-header {
|
||
padding: 80px 0 60px;
|
||
background-color: #0066FF;
|
||
color: white;
|
||
text-align: center;
|
||
margin-top: 70px;
|
||
}
|
||
|
||
.page-header h1 {
|
||
font-size: 36px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.page-header p {
|
||
font-size: 18px;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 内容区域样式 */
|
||
.solution-content {
|
||
padding: 40px 0;
|
||
background-color: #f5f7fa;
|
||
}
|
||
|
||
.solution-section {
|
||
background-color: white;
|
||
border-radius: 10px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 4px 20px rgba(0, 102, 255, 0.1);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #0066FF;
|
||
margin-bottom: 25px;
|
||
position: relative;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 60px;
|
||
height: 3px;
|
||
background-color: #00C389;
|
||
}
|
||
|
||
/* 硬件展示样式 */
|
||
.hardware-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 25px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.hardware-card {
|
||
border: 1px solid #eee;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
background-color: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.hardware-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.hardware-icon {
|
||
font-size: 48px;
|
||
color: #0066FF;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.hardware-name {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
.hardware-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
padding: 0 15px 20px;
|
||
}
|
||
|
||
/* 软件部署样式 */
|
||
.software-tabs {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.tab-header {
|
||
display: flex;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
color: #666;
|
||
position: relative;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #0066FF;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background-color: #0066FF;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
.deployment-steps {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.step-number {
|
||
width: 30px;
|
||
height: 30px;
|
||
background-color: #0066FF;
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 15px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.step-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.step-title {
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
color: #333;
|
||
}
|
||
|
||
.step-desc {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 课程案例样式 */
|
||
.course-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 25px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.course-card {
|
||
border: 1px solid #eee;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
background-color: white;
|
||
}
|
||
|
||
.course-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.course-image {
|
||
height: 160px;
|
||
background-color: #f5f7fa;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #0066FF;
|
||
font-size: 48px;
|
||
}
|
||
|
||
.course-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.course-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
.course-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.course-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.course-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.course-tags span {
|
||
padding: 3px 8px;
|
||
background-color: #f5f7fa;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 解决方案优势样式 */
|
||
.advantage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 25px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.advantage-card {
|
||
background-color: #f5f7fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.advantage-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.advantage-icon {
|
||
font-size: 36px;
|
||
color: #00C389;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.advantage-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #333;
|
||
}
|
||
|
||
.advantage-desc {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 页脚样式 */
|
||
.footer {
|
||
background-color: #333;
|
||
color: white;
|
||
padding: 60px 0 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 -->
|
||
<header class="header">
|
||
<div class="logo">
|
||
<i class="fas fa-graduation-cap"></i>
|
||
<span>东师理想</span>
|
||
</div>
|
||
<nav class="nav-menu">
|
||
<div class="nav-item"><a href="index.html" style="text-decoration: none; color: inherit;">首页</a></div>
|
||
<div class="nav-item"><a href="ai-resource-workshop.html" style="text-decoration: none; color: inherit;">AI资源工坊</a></div>
|
||
<div class="nav-item"><a href="ai-resource-library.html" style="text-decoration: none; color: inherit;">AI资源库</a></div>
|
||
<div class="nav-item"><a href="cloud-classroom.html" style="text-decoration: none; color: inherit;">名师云课</a></div>
|
||
<div class="nav-item"><a href="student-learning-center.html" style="text-decoration: none; color: inherit;">学情中心</a></div>
|
||
<div class="nav-item"><a href="ai-education-alliance.html" style="text-decoration: none; color: inherit;">AI教育创新联盟</a></div>
|
||
<div class="nav-item"><a href="teacher-ai-video-tutorials.html" style="text-decoration: none; color: inherit;">教师AI视频教程</a></div>
|
||
<div class="nav-item active"><a href="ai-lab-solution.html" style="text-decoration: none; color: inherit;">AI实验室解决方案</a></div>
|
||
</nav>
|
||
<div class="header-actions">
|
||
<button class="btn btn-outline">登录</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 页面标题区 -->
|
||
<section class="page-header">
|
||
<h1>中小学AI实验室解决方案</h1>
|
||
<p>提供ESP32、树莓派、机器臂、垃圾回收等硬件安装和软件部署，打造学校AI特色课程</p>
|
||
</section>
|
||
|
||
<!-- 内容区域 -->
|
||
<section class="solution-content">
|
||
<div class="container">
|
||
<!-- 硬件展示 -->
|
||
<div class="solution-section">
|
||
<h2 class="section-title">硬件设备</h2>
|
||
<div class="hardware-grid">
|
||
<div class="hardware-card">
|
||
<div class="hardware-icon">
|
||
<i class="fas fa-microchip"></i>
|
||
</div>
|
||
<h3 class="hardware-name">ESP32开发板</h3>
|
||
<p class="hardware-desc">低成本、低功耗的Wi-Fi和蓝牙双模芯片，适合物联网和AI应用开发</p>
|
||
</div>
|
||
<div class="hardware-card">
|
||
<div class="hardware-icon">
|
||
<i class="fas fa-desktop"></i>
|
||
</div>
|
||
<h3 class="hardware-name">树莓派</h3>
|
||
<p class="hardware-desc">小型计算机，支持多种操作系统，适合AI学习和项目开发</p>
|
||
</div>
|
||
<div class="hardware-card">
|
||
<div class="hardware-icon">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
<h3 class="hardware-name">机器臂</h3>
|
||
<p class="hardware-desc">多自由度机械臂，支持AI视觉识别和动作控制，适合机器人教学</p>
|
||
</div>
|
||
<div class="hardware-card">
|
||
<div class="hardware-icon">
|
||
<i class="fas fa-recycle"></i>
|
||
</div>
|
||
<h3 class="hardware-name">智能垃圾回收</h3>
|
||
<p class="hardware-desc">AI图像识别垃圾分类系统，培养环保意识和AI应用能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 软件部署 -->
|
||
<div class="solution-section">
|
||
<h2 class="section-title">软件部署</h2>
|
||
<div class="software-tabs">
|
||
<div class="tab-header">
|
||
<div class="tab-item active" data-tab="ai-platform">AI平台</div>
|
||
<div class="tab-item" data-tab="development">开发环境</div>
|
||
<div class="tab-item" data-tab="courseware">教学课件</div>
|
||
</div>
|
||
<div class="tab-content active" id="ai-platform">
|
||
<div class="deployment-steps">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">AI平台安装</div>
|
||
<div class="step-desc">根据学校硬件配置，安装适合的AI平台，支持Windows、Linux等多种系统</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">模型部署</div>
|
||
<div class="step-desc">预置多种AI模型，包括图像识别、语音识别、自然语言处理等</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">接口配置</div>
|
||
<div class="step-desc">配置硬件与AI平台的接口，确保数据传输和控制命令正常执行</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">测试验证</div>
|
||
<div class="step-desc">进行全面测试，确保软硬件协同工作，AI功能正常运行</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-content" id="development">
|
||
<div class="deployment-steps">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">编程环境配置</div>
|
||
<div class="step-desc">安装Python、TensorFlow、PyTorch等AI开发环境和库</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">IDE安装</div>
|
||
<div class="step-desc">配置适合初学者的IDE，如Jupyter Notebook、VS Code等</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">示例项目导入</div>
|
||
<div class="step-desc">导入多个示例项目，涵盖图像识别、语音处理等领域</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">调试工具配置</div>
|
||
<div class="step-desc">配置调试工具，方便学生进行代码调试和问题排查</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-content" id="courseware">
|
||
<div class="deployment-steps">
|
||
<div class="step-item">
|
||
<div class="step-number">1</div>
|
||
<div class="step-content">
|
||
<div class="step-title">教学资源导入</div>
|
||
<div class="step-desc">导入AI教学课件、视频教程、实验指导书等教学资源</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">2</div>
|
||
<div class="step-content">
|
||
<div class="step-title">实验平台配置</div>
|
||
<div class="step-desc">配置在线实验平台，支持学生远程访问和实验操作</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">3</div>
|
||
<div class="step-content">
|
||
<div class="step-title">评估系统部署</div>
|
||
<div class="step-desc">部署学习评估系统，支持对学生学习效果进行自动评估</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-number">4</div>
|
||
<div class="step-content">
|
||
<div class="step-title">管理系统配置</div>
|
||
<div class="step-desc">配置教学管理系统，支持教师管理学生、课程和实验内容</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 特色课程 -->
|
||
<div class="solution-section">
|
||
<h2 class="section-title">特色课程</h2>
|
||
<div class="course-grid">
|
||
<div class="course-card">
|
||
<div class="course-image">
|
||
<i class="fas fa-brain"></i>
|
||
</div>
|
||
<div class="course-content">
|
||
<h3 class="course-title">AI图像识别入门</h3>
|
||
<p class="course-desc">通过ESP32和摄像头，学习图像采集、处理和识别的基本原理和应用</p>
|
||
<div class="course-meta">
|
||
<span><i class="fas fa-clock"></i> 16课时</span>
|
||
<span><i class="fas fa-signal"></i> 初级</span>
|
||
</div>
|
||
<div class="course-tags">
|
||
<span>图像识别</span>
|
||
<span>ESP32</span>
|
||
<span>Python</span>
|
||
</div>
|
||
<button class="btn btn-primary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-image">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
<div class="course-content">
|
||
<h3 class="course-title">机器臂控制与编程</h3>
|
||
<p class="course-desc">学习机器臂的运动学原理、编程控制方法，实现简单抓取和放置任务</p>
|
||
<div class="course-meta">
|
||
<span><i class="fas fa-clock"></i> 24课时</span>
|
||
<span><i class="fas fa-signal"></i> 中级</span>
|
||
</div>
|
||
<div class="course-tags">
|
||
<span>机器人</span>
|
||
<span>运动控制</span>
|
||
<span>C++</span>
|
||
</div>
|
||
<button class="btn btn-primary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-image">
|
||
<i class="fas fa-microchip"></i>
|
||
</div>
|
||
<div class="course-content">
|
||
<h3 class="course-title">树莓派AI项目开发</h3>
|
||
<p class="course-desc">基于树莓派平台，开发智能家居、环境监测等AI应用项目</p>
|
||
<div class="course-meta">
|
||
<span><i class="fas fa-clock"></i> 32课时</span>
|
||
<span><i class="fas fa-signal"></i> 中级</span>
|
||
</div>
|
||
<div class="course-tags">
|
||
<span>树莓派</span>
|
||
<span>物联网</span>
|
||
<span>Python</span>
|
||
</div>
|
||
<button class="btn btn-primary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-image">
|
||
<i class="fas fa-recycle"></i>
|
||
</div>
|
||
<div class="course-content">
|
||
<h3 class="course-title">智能垃圾分类系统</h3>
|
||
<p class="course-desc">设计并实现基于AI图像识别的垃圾分类系统，培养环保意识和AI应用能力</p>
|
||
<div class="course-meta">
|
||
<span><i class="fas fa-clock"></i> 20课时</span>
|
||
<span><i class="fas fa-signal"></i> 中级</span>
|
||
</div>
|
||
<div class="course-tags">
|
||
<span>图像识别</span>
|
||
<span>环保</span>
|
||
<span>项目实践</span>
|
||
</div>
|
||
<button class="btn btn-primary">查看详情</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 解决方案优势 -->
|
||
<div class="solution-section">
|
||
<h2 class="section-title">解决方案优势</h2>
|
||
<div class="advantage-grid">
|
||
<div class="advantage-card">
|
||
<div class="advantage-icon">
|
||
<i class="fas fa-graduation-cap"></i>
|
||
</div>
|
||
<h3 class="advantage-title">教学体系完善</h3>
|
||
<p class="advantage-desc">提供从基础到进阶的完整AI课程体系，适合不同年级学生学习</p>
|
||
</div>
|
||
<div class="advantage-card">
|
||
<div class="advantage-icon">
|
||
<i class="fas fa-tools"></i>
|
||
</div>
|
||
<h3 class="advantage-title">硬件设备齐全</h3>
|
||
<p class="advantage-desc">提供多种AI硬件设备，满足不同教学场景和实验需求</p>
|
||
</div>
|
||
<div class="advantage-card">
|
||
<div class="advantage-icon">
|
||
<i class="fas fa-laptop-code"></i>
|
||
</div>
|
||
<h3 class="advantage-title">软件平台易用</h3>
|
||
<p class="advantage-desc">提供图形化界面和代码编程两种方式，降低学习门槛</p>
|
||
</div>
|
||
<div class="advantage-card">
|
||
<div class="advantage-icon">
|
||
<i class="fas fa-users"></i>
|
||
</div>
|
||
<h3 class="advantage-title">师资培训支持</h3>
|
||
<p class="advantage-desc">提供教师培训服务，帮助学校快速建立AI教学能力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<!-- 使用内联base64图片避免路径问题 -->
|
||
<div class="logo-placeholder">东师理想AI教育云平台</div>
|
||
<p>东师理想AI教育云平台 © 2025 版权所有</p>
|
||
</div>
|
||
<div class="footer-links">
|
||
<div class="link-group">
|
||
<h3>平台服务</h3>
|
||
<ul>
|
||
<li><a href="ai-resource-workshop.html">AI资源工坊</a></li>
|
||
<li><a href="ai-resource-library.html">AI资源库</a></li>
|
||
<li><a href="cloud-classroom.html">名师云课</a></li>
|
||
<li><a href="student-learning-center.html">学情中心</a></li>
|
||
<li><a href="ai-education-alliance.html">AI教育创新联盟</a></li>
|
||
<li><a href="teacher-ai-video-tutorials.html">教师AI视频教程</a></li>
|
||
<li><a href="ai-lab-solution.html">AI实验室解决方案</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="link-group">
|
||
<h3>资源中心</h3>
|
||
<ul>
|
||
<li><a href="#">教案库</a></li>
|
||
<li><a href="#">课件库</a></li>
|
||
<li><a href="#">习题库</a></li>
|
||
<li><a href="#">视频课程</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="link-group">
|
||
<h3>技术支持</h3>
|
||
<ul>
|
||
<li><a href="#">API文档</a></li>
|
||
<li><a href="#">开发者社区</a></li>
|
||
<li><a href="#">技术博客</a></li>
|
||
<li><a href="#">常见问题</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="contact-info">
|
||
<p><i class="fas fa-phone"></i> 400-123-4567</p>
|
||
<p><i class="fas fa-envelope"></i> support@dsideal.edu.cn</p>
|
||
<div class="social-links">
|
||
<a href="#"><i class="fab fa-weixin"></i></a>
|
||
<a href="#"><i class="fab fa-weibo"></i></a>
|
||
<a href="#"><i class="fab fa-qq"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
<p>© 2025 东师理想科技有限公司 版权所有 | 吉ICP备12345678号</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 引入外部JS -->
|
||
<script src="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/layui.min.js"></script>
|
||
<!-- 页面专属JS -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 初始化Layui组件
|
||
layui.use(['element'], function() {
|
||
var element = layui.element;
|
||
});
|
||
|
||
// 标签页切换
|
||
document.querySelectorAll('.tab-item').forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
// 移除所有active类
|
||
document.querySelectorAll('.tab-item').forEach(i => {
|
||
i.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.tab-content').forEach(i => {
|
||
i.classList.remove('active');
|
||
});
|
||
|
||
// 添加active类到当前点击的项
|
||
this.classList.add('active');
|
||
const tabId = this.getAttribute('data-tab');
|
||
document.getElementById(tabId).classList.add('active');
|
||
});
|
||
});
|
||
|
||
// 查看详情按钮点击事件
|
||
document.querySelectorAll('.btn-primary').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
if (this.textContent === '查看详情') {
|
||
alert('课程详情功能将在后续版本中实现');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |