beb1ba38fa
- 将所有订单班文档从 doc/ 迁移到 data/ 目录 - 保持原有目录结构不变，仅改变顶层路径 - 包含所有12个订单班的完整文档资料 - 文旅、财经商贸、食品、智能开发、智能制造 - 视觉设计、交通物流、土木、大健康 - 能源、化工、环保 - 文件总数：2345个文件（包括文档、图片、Agent配置等）
1038 lines
50 KiB
HTML
Executable File
1038 lines
50 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>EduLearn - 智能教育平台</title>
|
||
<script src="../javascript/reload.js"></script>
|
||
<script src="./1970808971233067008/resource_1592110000.js"></script>
|
||
<link href="./1970808971233067008/all.min.css" rel="stylesheet">
|
||
<script>tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#4F9BDA',
|
||
// 淡蓝色主色调
|
||
secondary: '#58C9B9',
|
||
// 绿色辅助色
|
||
accent: '#FF9F43',
|
||
// 橙色强调色
|
||
dark: '#2D3436',
|
||
// 深色文本
|
||
light: '#F8F9FA' // 浅色背景
|
||
},
|
||
fontFamily: {
|
||
sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||
serif: ['Georgia', 'Cambria', 'serif']
|
||
},
|
||
spacing: {
|
||
'128': '32rem'
|
||
}
|
||
}
|
||
}
|
||
};</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
.transition-navbar {
|
||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.card-hover {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="font-sans bg-gray-50 text-dark">
|
||
<!-- [MODULE] a1b_导航栏 -->
|
||
<header id="navbar" class="fixed w-full top-0 z-50 transition-navbar bg-transparent">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center py-4">
|
||
<!-- [MODULE] c2d_导航栏:Logo区域 -->
|
||
<div class="flex items-center">
|
||
<a href="javascript:void(0);" class="flex items-center"> <i class="fas fa-graduation-cap text-primary text-2xl mr-2"> </i> <span class="text-xl font-bold text-white text-shadow"> EduLearn </span> </a>
|
||
</div>
|
||
<!-- [/MODULE] c2d_导航栏:Logo区域 -- 包含平台Logo和名称 -->
|
||
<!-- [MODULE] d3e_导航栏:桌面端导航 -->
|
||
<nav class="hidden md:flex space-x-8">
|
||
<a href="javascript:void(0);" class="text-white hover:text-primary transition-colors font-medium"> 首页 </a>
|
||
<a href="javascript:void(0);" class="text-white hover:text-primary transition-colors font-medium"> 课程 </a>
|
||
<a href="javascript:void(0);" class="text-white hover:text-primary transition-colors font-medium"> 直播 </a>
|
||
<a href="javascript:void(0);" class="text-white hover:text-primary transition-colors font-medium"> 作业 </a>
|
||
<a href="javascript:void(0);" class="text-white hover:text-primary transition-colors font-medium"> 关于我们 </a>
|
||
</nav>
|
||
<!-- [/MODULE] d3e_导航栏:桌面端导航 -- 包含主要导航链接 -->
|
||
<!-- [MODULE] e4f_导航栏:用户操作区 -->
|
||
<div class="flex items-center space-x-4">
|
||
<a href="javascript:void(0);" class="hidden md:block px-4 py-2 rounded-md text-sm font-medium text-primary bg-white hover:bg-gray-100 transition-colors"> 登录 </a>
|
||
<a href="javascript:void(0);" class="hidden md:block px-4 py-2 rounded-md text-sm font-medium text-white bg-primary hover:bg-primary/90 transition-colors"> 注册 </a>
|
||
<!-- [MODULE] f5g_导航栏:移动端菜单按钮 -->
|
||
<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> <i class="fas fa-bars text-xl"> </i> </button>
|
||
<!-- [/MODULE] f5g_导航栏:移动端菜单按钮 -- 点击展开移动端导航菜单 -->
|
||
</div>
|
||
<!-- [/MODULE] e4f_导航栏:用户操作区 -- 包含登录、注册按钮和移动端菜单按钮 -->
|
||
</div>
|
||
<!-- [MODULE] g6h_导航栏:移动端导航菜单 -->
|
||
<div id="mobile-menu" class="md:hidden hidden bg-white rounded-b-lg shadow-lg mt-2">
|
||
<div class="px-2 pt-2 pb-3 space-y-1">
|
||
<a href="javascript:void(0);" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-primary hover:text-white"> 首页 </a>
|
||
<a href="javascript:void(0);" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-primary hover:text-white"> 课程 </a>
|
||
<a href="javascript:void(0);" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-primary hover:text-white"> 直播 </a>
|
||
<a href="javascript:void(0);" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-primary hover:text-white"> 作业 </a>
|
||
<a href="javascript:void(0);" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:bg-primary hover:text-white"> 关于我们 </a>
|
||
<div class="pt-4 border-t border-gray-200 flex space-x-3 px-3">
|
||
<a href="javascript:void(0);" class="flex-1 text-center px-4 py-2 rounded-md text-sm font-medium text-primary border border-primary hover:bg-primary hover:text-white transition-colors"> 登录 </a>
|
||
<a href="javascript:void(0);" class="flex-1 text-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary hover:bg-primary/90 transition-colors"> 注册 </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] g6h_导航栏:移动端导航菜单 -- 移动端显示的导航链接和登录注册按钮 -->
|
||
</div>
|
||
</header>
|
||
<!-- [/MODULE] a1b_导航栏 -- 顶部固定导航栏，包含Logo、导航链接和用户操作区 -->
|
||
<!-- [MODULE] b2c_英雄区域 -->
|
||
<section class="relative h-screen flex items-center justify-center overflow-hidden">
|
||
<!-- 背景图片 -->
|
||
<div class="absolute inset-0 z-0">
|
||
<img src="./1970808971233067008/b04ff422a7cf9b688af4a88727ee7086.png" alt="教育平台背景" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 bg-gradient-to-r from-dark/70 to-dark/40">
|
||
</div>
|
||
</div>
|
||
<!-- 内容 -->
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
||
<h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight mb-6 animate-fade-in"> 智能教育， <br> 开启学习新体验 </h1>
|
||
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-100 max-w-2xl mx-auto mb-8"> EduLearn提供个性化学习体验，连接教师与学生，创造高效、互动的在线教育环境 </p>
|
||
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
||
<a href="javascript:void(0);" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 text-lg"> 开始学习 </a>
|
||
<a href="javascript:void(0);" class="px-8 py-3 bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white font-medium rounded-lg border border-white/30 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 text-lg"> 了解更多 <i class="fas fa-arrow-right ml-2"> </i> </a>
|
||
</div>
|
||
<!-- 滚动提示 -->
|
||
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||
<a href="#features" class="text-white opacity-80 hover:opacity-100"> <i class="fas fa-chevron-down text-2xl"> </i> </a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] b2c_英雄区域 -- 全屏展示区域，包含平台主标题、副标题和主要行动按钮 -->
|
||
<!-- [MODULE] c3d_平台特色 -->
|
||
<section id="features" class="py-20 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] h7i_平台特色:标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4"> 为什么选择 EduLearn </h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> 我们提供全方位的教育解决方案，满足教师、学生和教育机构的不同需求 </p>
|
||
</div>
|
||
<!-- [/MODULE] h7i_平台特色:标题区域 -- 包含特色介绍的标题和副标题 -->
|
||
<!-- [MODULE] i8j_平台特色:特色卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 特色卡片1 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-laptop-code text-primary text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 互动式学习体验 </h3>
|
||
<p class="text-gray-600"> 通过直播课堂、实时互动和多媒体内容，创造沉浸式学习环境，提高学习参与度和效果。 </p>
|
||
</div>
|
||
<!-- 特色卡片2 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-graduation-cap text-secondary text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 个性化学习路径 </h3>
|
||
<p class="text-gray-600"> 基于AI技术分析学习行为，为每位学生定制个性化学习计划和资源推荐，提升学习效率。 </p>
|
||
</div>
|
||
<!-- 特色卡片3 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-chart-line text-accent text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 学习数据分析 </h3>
|
||
<p class="text-gray-600"> 全面跟踪学习进度和表现，提供详细数据分析报告，帮助教师和学生了解学习状况和改进方向。 </p>
|
||
</div>
|
||
<!-- 特色卡片4 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-users text-primary text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 协作学习空间 </h3>
|
||
<p class="text-gray-600"> 提供小组讨论、协作作业和项目管理工具，培养学生的团队协作能力和沟通技巧。 </p>
|
||
</div>
|
||
<!-- 特色卡片5 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-secondary/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-file-alt text-secondary text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 智能作业管理 </h3>
|
||
<p class="text-gray-600"> 自动化作业批改、即时反馈和成绩跟踪，减轻教师负担，提高作业处理效率和反馈及时性。 </p>
|
||
</div>
|
||
<!-- 特色卡片6 -->
|
||
<div class="bg-gray-50 rounded-xl p-8 shadow-sm card-hover shadow-md">
|
||
<div class="w-14 h-14 bg-accent/10 rounded-lg flex items-center justify-center mb-6">
|
||
<i class="fas fa-mobile-alt text-accent text-2xl"> </i>
|
||
</div>
|
||
<h3 class="text-xl font-bold mb-3"> 多平台访问 </h3>
|
||
<p class="text-gray-600"> 随时随地通过电脑、平板或手机访问平台，实现无缝学习体验，不受时间和地点限制。 </p>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] i8j_平台特色:特色卡片 -- 展示平台的六大核心特色功能 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] c3d_平台特色 -- 介绍平台的主要功能和优势 -->
|
||
<!-- [MODULE] d4e_课程展示 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] j9k_课程展示:标题区域 -->
|
||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
|
||
<div>
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4"> 热门课程 </h2>
|
||
<p class="text-gray-600 max-w-2xl"> 探索我们精心设计的课程，涵盖各个学科领域，满足不同学习需求 </p>
|
||
</div>
|
||
<div class="mt-4 md:mt-0">
|
||
<a href="javascript:void(0);" class="inline-flex items-center text-primary font-medium hover:text-primary/80"> 查看全部课程 <i class="fas fa-arrow-right ml-2"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] j9k_课程展示:标题区域 -- 包含课程展示的标题、副标题和查看全部链接 -->
|
||
<!-- [MODULE] k1l_课程展示:课程卡片 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<!-- 课程卡片1 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover shadow-md">
|
||
<div class="relative">
|
||
<img src="./1970808971233067008/62e446c903817043e96c6c5ec021cbc8.png" alt="数学基础课程" class="w-full h-48 object-cover">
|
||
<div class="absolute top-3 right-3 bg-accent text-white text-xs font-bold px-2 py-1 rounded">
|
||
热门
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center text-sm text-gray-500 mb-2">
|
||
<i class="fas fa-user mr-1"> </i> 王老师
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-clock mr-1"> </i> 8周课程
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 line-clamp-2"> 数学基础：从概念到应用 </h3>
|
||
<p class="text-gray-600 text-sm mb-4 line-clamp-2"> 适合初中学生的数学基础课程，涵盖代数、几何等核心概念，培养数学思维能力。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<div class="flex text-yellow-400">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star-half-alt"> </i>
|
||
</div>
|
||
<span class="text-sm text-gray-500 ml-1"> (128) </span>
|
||
</div>
|
||
<span class="text-primary font-bold"> ¥199 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片2 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover shadow-md">
|
||
<div class="relative">
|
||
<img src="./1970808971233067008/0777a8e1fc01c1dfface1de9c01d7106.png" alt="英语听说训练" class="w-full h-48 object-cover">
|
||
<div class="absolute top-3 right-3 bg-primary text-white text-xs font-bold px-2 py-1 rounded">
|
||
新课
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center text-sm text-gray-500 mb-2">
|
||
<i class="fas fa-user mr-1"> </i> 李老师
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-clock mr-1"> </i> 10周课程
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 line-clamp-2"> 英语听说训练：流利口语 </h3>
|
||
<p class="text-gray-600 text-sm mb-4 line-clamp-2"> 专注提升英语听说能力，通过情景对话、听力训练和发音指导，培养流利口语表达。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<div class="flex text-yellow-400">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="far fa-star"> </i>
|
||
</div>
|
||
<span class="text-sm text-gray-500 ml-1"> (86) </span>
|
||
</div>
|
||
<span class="text-primary font-bold"> ¥249 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片3 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover shadow-md">
|
||
<div class="relative">
|
||
<img src="./1970808971233067008/a30686fe98861f28684bb6e5a42c839e.png" alt="科学实验课" class="w-full h-48 object-cover">
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center text-sm text-gray-500 mb-2">
|
||
<i class="fas fa-user mr-1"> </i> 张老师
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-clock mr-1"> </i> 6周课程
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 line-clamp-2"> 科学实验课：探索自然 </h3>
|
||
<p class="text-gray-600 text-sm mb-4 line-clamp-2"> 通过动手实验了解科学原理，培养科学探究精神和实验操作能力，适合小学高年级学生。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<div class="flex text-yellow-400">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
</div>
|
||
<span class="text-sm text-gray-500 ml-1"> (156) </span>
|
||
</div>
|
||
<span class="text-primary font-bold"> ¥179 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片4 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover shadow-md">
|
||
<div class="relative">
|
||
<img src="./1970808971233067008/4a67dc503690600c9ede59864c569fa7.png" alt="编程入门" class="w-full h-48 object-cover">
|
||
<div class="absolute top-3 right-3 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">
|
||
新课
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center text-sm text-gray-500 mb-2">
|
||
<i class="fas fa-user mr-1"> </i> 陈老师
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-clock mr-1"> </i> 12周课程
|
||
</div>
|
||
<h3 class="text-lg font-bold mb-2 line-clamp-2"> 编程入门：Scratch创意设计 </h3>
|
||
<p class="text-gray-600 text-sm mb-4 line-clamp-2"> 适合儿童的编程启蒙课程，通过Scratch可视化编程工具，培养逻辑思维和创造力。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<div class="flex text-yellow-400">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star-half-alt"> </i>
|
||
</div>
|
||
<span class="text-sm text-gray-500 ml-1"> (98) </span>
|
||
</div>
|
||
<span class="text-primary font-bold"> ¥229 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] k1l_课程展示:课程卡片 -- 展示四门热门课程，包含课程图片、标题、简介、教师信息、时长、评分和价格 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] d4e_课程展示 -- 展示平台的热门课程 -->
|
||
<!-- [MODULE] e5f_直播课堂 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] l2m_直播课堂:标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4"> 实时互动直播课堂 </h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> 与教师实时互动，体验沉浸式学习环境，解答疑惑，提高学习效率 </p>
|
||
</div>
|
||
<!-- [/MODULE] l2m_直播课堂:标题区域 -- 包含直播课堂的标题和副标题 -->
|
||
<!-- [MODULE] m3n_直播课堂:直播展示区 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- 主直播窗口 -->
|
||
<div class="lg:col-span-2 bg-gray-900 rounded-xl overflow-hidden shadow-lg relative group">
|
||
<img src="./1970808971233067008/eb1f88234c0eb6411d80258d80cb965f.png" alt="正在进行的直播课" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent flex flex-col justify-end p-6">
|
||
<div class="flex items-center bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full w-fit mb-3">
|
||
<i class="fas fa-circle animate-pulse mr-2"> </i> 正在直播
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-2"> 初中物理：力学基础与应用 </h3>
|
||
<div class="flex items-center text-white/90 mb-4">
|
||
<img src="./1970808971233067008/bd6e2f6456e3a8afe6b6497b60d88e89.png" alt="李老师" class="w-10 h-10 rounded-full object-cover mr-3">
|
||
<div>
|
||
<div class="font-medium">
|
||
李教授
|
||
</div>
|
||
<div class="text-sm text-white/70">
|
||
物理高级教师 | 15年教学经验
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center text-white/80 text-sm">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-user mr-2"> </i>
|
||
<span> 248人观看 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-clock mr-2"> </i>
|
||
<span> 已进行45分钟 </span>
|
||
</div>
|
||
</div>
|
||
<button class="bg-primary hover:bg-primary/90 text-white font-medium px-5 py-2 rounded-lg transition-colors flex items-center"> <i class="fas fa-play mr-2"> </i> 加入课堂 </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 即将开始的直播 -->
|
||
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
||
<div class="p-6 border-b border-gray-100">
|
||
<h3 class="font-bold text-lg"> 即将开始的直播 </h3>
|
||
</div>
|
||
<div class="divide-y divide-gray-100">
|
||
<!-- 直播项1 -->
|
||
<div class="p-5 hover:bg-gray-50 transition-colors cursor-pointer">
|
||
<div class="flex">
|
||
<div class="relative w-24 h-16 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0 mr-4">
|
||
<img src="./1970808971233067008/d72a566c0f2a474d7f41caa4835cd921.png" alt="英语语法课" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 flex items-center justify-center bg-black/30 text-white font-bold">
|
||
14:30
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="font-medium text-gray-900 truncate"> 英语语法：时态专项训练 </h4>
|
||
<div class="flex items-center text-sm text-gray-500 mt-1">
|
||
<img src="./1970808971233067008/ef3284943f5cfef56ce0022b6f747476.png" alt="王老师" class="w-6 h-6 rounded-full object-cover mr-2">
|
||
<span class="truncate"> 王老师 </span>
|
||
</div>
|
||
<div class="flex items-center text-xs text-gray-400 mt-2">
|
||
<i class="far fa-calendar-alt mr-1"> </i>
|
||
<span> 今天 </span>
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-user mr-1"> </i>
|
||
<span> 128人已预约 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 直播项2 -->
|
||
<div class="p-5 hover:bg-gray-50 transition-colors cursor-pointer">
|
||
<div class="flex">
|
||
<div class="relative w-24 h-16 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0 mr-4">
|
||
<img src="./1970808971233067008/7ba2becf67e16da336e3880e7db8dba0.png" alt="数学解题技巧" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 flex items-center justify-center bg-black/30 text-white font-bold">
|
||
16:00
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="font-medium text-gray-900 truncate"> 数学解题技巧：应用题突破 </h4>
|
||
<div class="flex items-center text-sm text-gray-500 mt-1">
|
||
<img src="./1970808971233067008/b7953fb1bad350a868142d2e01fb3f04.png" alt="张老师" class="w-6 h-6 rounded-full object-cover mr-2">
|
||
<span class="truncate"> 张老师 </span>
|
||
</div>
|
||
<div class="flex items-center text-xs text-gray-400 mt-2">
|
||
<i class="far fa-calendar-alt mr-1"> </i>
|
||
<span> 今天 </span>
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-user mr-1"> </i>
|
||
<span> 96人已预约 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 直播项3 -->
|
||
<div class="p-5 hover:bg-gray-50 transition-colors cursor-pointer">
|
||
<div class="flex">
|
||
<div class="relative w-24 h-16 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0 mr-4">
|
||
<img src="./1970808971233067008/c8c4623cde4db1b133631e4190880a17.png" alt="创意写作" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 flex items-center justify-center bg-black/30 text-white font-bold">
|
||
19:00
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="font-medium text-gray-900 truncate"> 创意写作：故事构思与表达 </h4>
|
||
<div class="flex items-center text-sm text-gray-500 mt-1">
|
||
<img src="./1970808971233067008/c8b37a1c85765f65e941c7868c3638dc.png" alt="刘老师" class="w-6 h-6 rounded-full object-cover mr-2">
|
||
<span class="truncate"> 刘老师 </span>
|
||
</div>
|
||
<div class="flex items-center text-xs text-gray-400 mt-2">
|
||
<i class="far fa-calendar-alt mr-1"> </i>
|
||
<span> 今天 </span>
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-user mr-1"> </i>
|
||
<span> 156人已预约 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 直播项4 -->
|
||
<div class="p-5 hover:bg-gray-50 transition-colors cursor-pointer">
|
||
<div class="flex">
|
||
<div class="relative w-24 h-16 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0 mr-4">
|
||
<img src="./1970808971233067008/8525b78b492baeea0c0d590a349a46e5.png" alt="生物实验" class="w-full h-full object-cover">
|
||
<div class="absolute inset-0 flex items-center justify-center bg-black/30 text-white font-bold">
|
||
10:00
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<h4 class="font-medium text-gray-900 truncate"> 生物实验：细胞结构观察 </h4>
|
||
<div class="flex items-center text-sm text-gray-500 mt-1">
|
||
<img src="./1970808971233067008/3611bad5adf1d92d0891f8ea081168cc.png" alt="赵老师" class="w-6 h-6 rounded-full object-cover mr-2">
|
||
<span class="truncate"> 赵老师 </span>
|
||
</div>
|
||
<div class="flex items-center text-xs text-gray-400 mt-2">
|
||
<i class="far fa-calendar-alt mr-1"> </i>
|
||
<span> 明天 </span>
|
||
<span class="mx-2"> • </span>
|
||
<i class="fas fa-user mr-1"> </i>
|
||
<span> 87人已预约 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 bg-gray-50">
|
||
<a href="javascript:void(0);" class="block text-center text-primary hover:text-primary/80 font-medium text-sm"> 查看全部直播日程 <i class="fas fa-chevron-right ml-1"> </i> </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] m3n_直播课堂:直播展示区 -- 包含主直播窗口和即将开始的直播列表 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] e5f_直播课堂 -- 展示实时直播课程和即将开始的直播安排 -->
|
||
<!-- [MODULE] f6g_学习数据展示 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] n4o_学习数据展示:标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4"> 智能学习数据分析 </h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> 通过数据可视化了解学习进度和表现，发现优势与不足，优化学习计划 </p>
|
||
</div>
|
||
<!-- [/MODULE] n4o_学习数据展示:标题区域 -- 包含学习数据分析的标题和副标题 -->
|
||
<!-- [MODULE] o5p_学习数据展示:数据卡片和图表 -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||
<!-- 数据概览卡片 -->
|
||
<div class="lg:col-span-1 space-y-6">
|
||
<!-- 学习时长 -->
|
||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-gray-700"> 本周学习时长 </h3>
|
||
<span class="text-green-500 text-sm font-medium flex items-center"> <i class="fas fa-arrow-up mr-1"> </i> 12% </span>
|
||
</div>
|
||
<div class="flex items-end">
|
||
<span class="text-3xl font-bold text-dark"> 18.5 </span>
|
||
<span class="text-gray-500 ml-2 mb-1"> 小时 </span>
|
||
</div>
|
||
<div class="mt-4 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div class="bg-primary h-full rounded-full" style="width: 75%">
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 text-xs text-gray-500 flex justify-between">
|
||
<span> 目标：25小时 </span>
|
||
<span> 完成74% </span>
|
||
</div>
|
||
</div>
|
||
<!-- 课程完成情况 -->
|
||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-gray-700"> 课程完成情况 </h3>
|
||
<span class="text-primary text-sm font-medium"> 本学期 </span>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-1">
|
||
<span class="text-gray-600"> 数学 </span>
|
||
<span class="font-medium"> 85% </span>
|
||
</div>
|
||
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div class="bg-primary h-full rounded-full" style="width: 85%">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-1">
|
||
<span class="text-gray-600"> 英语 </span>
|
||
<span class="font-medium"> 72% </span>
|
||
</div>
|
||
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div class="bg-secondary h-full rounded-full" style="width: 72%">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-1">
|
||
<span class="text-gray-600"> 物理 </span>
|
||
<span class="font-medium"> 68% </span>
|
||
</div>
|
||
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div class="bg-accent h-full rounded-full" style="width: 68%">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-1">
|
||
<span class="text-gray-600"> 化学 </span>
|
||
<span class="font-medium"> 90% </span>
|
||
</div>
|
||
<div class="h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div class="bg-green-500 h-full rounded-full" style="width: 90%">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 能力评估 -->
|
||
<div class="bg-white rounded-xl p-6 shadow-sm">
|
||
<div class="mb-4">
|
||
<h3 class="font-bold text-gray-700"> 能力评估 </h3>
|
||
</div>
|
||
<div class="space-y-3">
|
||
<div class="flex items-center">
|
||
<div class="w-20 text-sm text-gray-600">
|
||
逻辑思维
|
||
</div>
|
||
<div class="flex-1 flex justify-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="far fa-star text-gray-300"> </i>
|
||
</div>
|
||
</div>
|
||
<div class="w-10 text-sm font-medium text-right">
|
||
85分
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-20 text-sm text-gray-600">
|
||
创新能力
|
||
</div>
|
||
<div class="flex-1 flex justify-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="far fa-star text-gray-300"> </i>
|
||
<i class="far fa-star text-gray-300"> </i>
|
||
</div>
|
||
</div>
|
||
<div class="w-10 text-sm font-medium text-right">
|
||
65分
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-20 text-sm text-gray-600">
|
||
记忆力
|
||
</div>
|
||
<div class="flex-1 flex justify-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star-half-alt text-yellow-400"> </i>
|
||
</div>
|
||
</div>
|
||
<div class="w-10 text-sm font-medium text-right">
|
||
92分
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-20 text-sm text-gray-600">
|
||
表达能力
|
||
</div>
|
||
<div class="flex-1 flex justify-center">
|
||
<div class="flex">
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="fas fa-star text-yellow-400"> </i>
|
||
<i class="far fa-star text-gray-300"> </i>
|
||
<i class="far fa-star text-gray-300"> </i>
|
||
</div>
|
||
</div>
|
||
<div class="w-10 text-sm font-medium text-right">
|
||
70分
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 学习趋势图表 -->
|
||
<div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
|
||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
|
||
<h3 class="font-bold text-gray-700 text-lg mb-3 md:mb-0"> 学习趋势分析 </h3>
|
||
<div class="flex space-x-2">
|
||
<button class="px-3 py-1 text-sm bg-primary text-white rounded-md"> 周 </button>
|
||
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md"> 月 </button>
|
||
<button class="px-3 py-1 text-sm bg-gray-100 text-gray-600 hover:bg-gray-200 rounded-md"> 学期 </button>
|
||
</div>
|
||
</div>
|
||
<div id="learning-trend-chart" class="w-full h-80">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] o5p_学习数据展示:数据卡片和图表 -- 包含学习时长、课程完成情况、能力评估和学习趋势图表 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] f6g_学习数据展示 -- 展示学习数据分析和可视化图表 -->
|
||
<!-- [MODULE] g7h_用户评价 -->
|
||
<section class="py-20 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] p5q_用户评价:标题区域 -->
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-dark mb-4"> 用户怎么说 </h2>
|
||
<p class="text-gray-600 max-w-2xl mx-auto text-lg"> 来自教师、学生和家长的真实反馈，见证学习效果和平台价值 </p>
|
||
</div>
|
||
<!-- [/MODULE] p5q_用户评价:标题区域 -- 包含用户评价的标题和副标题 -->
|
||
<!-- [MODULE] q6r_用户评价:评价卡片 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 评价卡片1 -->
|
||
<div class="bg-gray-50 rounded-xl p-6 shadow-sm">
|
||
<div class="flex text-yellow-400 mb-4">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
</div>
|
||
<p class="text-gray-600 mb-6"> "EduLearn平台彻底改变了我孩子的学习方式。互动式课程和实时反馈让学习变得有趣，数学成绩从70分提升到了90分。作为家长，我可以随时查看学习进度和表现，非常方便！" </p>
|
||
<div class="flex items-center">
|
||
<img src="./1970808971233067008/faada1228303bc06ba454cc55053039d.png" alt="张妈妈" class="w-12 h-12 rounded-full object-cover mr-4">
|
||
<div>
|
||
<div class="font-medium">
|
||
张妈妈
|
||
</div>
|
||
<div class="text-sm text-gray-500">
|
||
学生家长 · 初中二年级
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 评价卡片2 -->
|
||
<div class="bg-gray-50 rounded-xl p-6 shadow-sm">
|
||
<div class="flex text-yellow-400 mb-4">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star-half-alt"> </i>
|
||
</div>
|
||
<p class="text-gray-600 mb-6"> "作为一名教师，EduLearn让我的教学工作效率大大提高。智能作业批改功能节省了我大量时间，数据分析工具帮助我了解每个学生的学习状况，实现个性化教学。学生参与度也明显提升。" </p>
|
||
<div class="flex items-center">
|
||
<img src="./1970808971233067008/b8dc2cc9c12a4a5cac4b39cf067298da.png" alt="李老师" class="w-12 h-12 rounded-full object-cover mr-4">
|
||
<div>
|
||
<div class="font-medium">
|
||
李老师
|
||
</div>
|
||
<div class="text-sm text-gray-500">
|
||
数学教师 · 重点中学
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 评价卡片3 -->
|
||
<div class="bg-gray-50 rounded-xl p-6 shadow-sm">
|
||
<div class="flex text-yellow-400 mb-4">
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="fas fa-star"> </i>
|
||
<i class="far fa-star"> </i>
|
||
</div>
|
||
<p class="text-gray-600 mb-6"> "直播课堂和互动讨论功能非常棒！我可以随时向老师提问，得到及时解答。学习数据分析让我清楚自己的优势和不足，AI推荐的学习资源也很有针对性。编程课程尤其有趣，已经完成了3个小项目！" </p>
|
||
<div class="flex items-center">
|
||
<img src="./1970808971233067008/8c62dcac293467c4b1f81ef024947202.png" alt="王明" class="w-12 h-12 rounded-full object-cover mr-4">
|
||
<div>
|
||
<div class="font-medium">
|
||
王明
|
||
</div>
|
||
<div class="text-sm text-gray-500">
|
||
学生 · 初中三年级
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] q6r_用户评价:评价卡片 -- 展示来自家长、教师和学生的真实评价 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] g7h_用户评价 -- 展示用户对平台的评价和反馈 -->
|
||
<!-- [MODULE] h8i_注册区域 -->
|
||
<section class="py-20 bg-primary relative overflow-hidden">
|
||
<div class="absolute inset-0 opacity-10">
|
||
<div class="absolute -top-10 -left-10 w-40 h-40 bg-white rounded-full">
|
||
</div>
|
||
<div class="absolute top-1/4 -right-20 w-60 h-60 bg-white rounded-full">
|
||
</div>
|
||
<div class="absolute bottom-0 left-1/3 w-32 h-32 bg-white rounded-full">
|
||
</div>
|
||
</div>
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||
<div class="max-w-3xl mx-auto text-center">
|
||
<h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-white mb-6"> 开始您的智能学习之旅 </h2>
|
||
<p class="text-white/90 text-lg mb-8"> 加入EduLearn，体验个性化、互动式的学习体验，提升学习效率，实现学习目标 </p>
|
||
<div class="flex flex-col sm:flex-row justify-center gap-4 max-w-md mx-auto">
|
||
<input type="email" placeholder="输入您的邮箱地址" class="flex-1 px-5 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-white">
|
||
<button class="bg-white text-primary hover:bg-gray-100 font-medium px-6 py-3 rounded-lg transition-colors"> 免费注册 </button>
|
||
</div>
|
||
<p class="text-white/70 text-sm mt-4"> 已有账号？ <a href="javascript:void(0);" class="text-white font-medium hover:underline"> 立即登录 </a> </p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] h8i_注册区域 -- 引导用户注册的区域，包含邮箱输入框和注册按钮 -->
|
||
<!-- [MODULE] i9j_页脚 -->
|
||
<footer class="bg-dark text-white pt-16 pb-8">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
||
<!-- 关于我们 -->
|
||
<div>
|
||
<div class="flex items-center mb-6">
|
||
<i class="fas fa-graduation-cap text-primary text-2xl mr-2"> </i>
|
||
<span class="text-xl font-bold"> EduLearn </span>
|
||
</div>
|
||
<p class="text-gray-400 mb-6"> EduLearn是领先的智能教育平台，致力于通过技术创新提供个性化、高效的学习体验，赋能教师和学生实现教育目标。 </p>
|
||
<div class="flex space-x-4">
|
||
<a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> <i class="fab fa-weixin text-xl"> </i> </a>
|
||
<a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> <i class="fab fa-weibo text-xl"> </i> </a>
|
||
<a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> <i class="fab fa-qq text-xl"> </i> </a>
|
||
<a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> <i class="fab fa-youtube text-xl"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<!-- 快速链接 -->
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-6"> 快速链接 </h3>
|
||
<ul class="space-y-3">
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 首页 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 课程中心 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 直播课堂 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 作业系统 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 教师招募 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 关于我们 </a> </li>
|
||
</ul>
|
||
</div>
|
||
<!-- 帮助中心 -->
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-6"> 帮助中心 </h3>
|
||
<ul class="space-y-3">
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 新手指南 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 常见问题 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 学习路径 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 技术支持 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 隐私政策 </a> </li>
|
||
<li> <a href="javascript:void(0);" class="text-gray-400 hover:text-primary transition-colors"> 用户协议 </a> </li>
|
||
</ul>
|
||
</div>
|
||
<!-- 联系我们 -->
|
||
<div>
|
||
<h3 class="text-lg font-bold mb-6"> 联系我们 </h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start"> <i class="fas fa-map-marker-alt text-primary mt-1 mr-3"> </i> <span class="text-gray-400"> 北京市海淀区中关村科技园区8号楼 </span> </li>
|
||
<li class="flex items-center"> <i class="fas fa-phone text-primary mr-3"> </i> <span class="text-gray-400"> 400-123-4567 </span> </li>
|
||
<li class="flex items-center"> <i class="fas fa-envelope text-primary mr-3"> </i> <span class="text-gray-400"> contact@edulearn.com </span> </li>
|
||
<li class="flex items-center"> <i class="fas fa-clock text-primary mr-3"> </i> <span class="text-gray-400"> 周一至周日 9:00-21:00 </span> </li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 版权信息 -->
|
||
<div class="border-t border-gray-800 pt-8">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<div class="text-gray-500 text-sm mb-4 md:mb-0">
|
||
© 2023 EduLearn教育科技. 保留所有权利.
|
||
</div>
|
||
<div class="flex space-x-6">
|
||
<a href="javascript:void(0);" class="text-gray-500 hover:text-gray-400 text-sm"> 隐私政策 </a>
|
||
<a href="javascript:void(0);" class="text-gray-500 hover:text-gray-400 text-sm"> 服务条款 </a>
|
||
<a href="javascript:void(0);" class="text-gray-500 hover:text-gray-400 text-sm"> Cookie政策 </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- [/MODULE] i9j_页脚 -- 包含平台信息、快速链接、帮助中心和联系信息 -->
|
||
<!-- [MODULE] j1k_回到顶部按钮 -->
|
||
<button id="back-to-top" class="fixed bottom-6 right-6 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all transform scale-0 z-50"> <i class="fas fa-chevron-up"> </i> </button>
|
||
<!-- [/MODULE] j1k_回到顶部按钮 -- 点击返回页面顶部的浮动按钮 -->
|
||
<!-- [JSMOD] k2l_导航栏交互 -->
|
||
<script id="navbar-script">// 导航栏滚动效果
|
||
var navbar = document.getElementById('navbar');
|
||
var backToTop = document.getElementById('back-to-top');
|
||
window.addEventListener('scroll', function () {
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.remove('bg-transparent');
|
||
navbar.classList.add('bg-white', 'shadow-md');
|
||
|
||
// 更改导航链接颜色
|
||
var navLinks = navbar.querySelectorAll('nav a');
|
||
navLinks.forEach(function (link) {
|
||
link.classList.remove('text-white');
|
||
link.classList.add('text-gray-700');
|
||
});
|
||
|
||
// 更改Logo文字颜色
|
||
var logoText = navbar.querySelector('.text-shadow');
|
||
if (logoText) {
|
||
logoText.classList.remove('text-white', 'text-shadow');
|
||
logoText.classList.add('text-dark');
|
||
}
|
||
|
||
// 显示回到顶部按钮
|
||
backToTop.classList.remove('scale-0');
|
||
backToTop.classList.add('scale-100');
|
||
} else {
|
||
navbar.classList.add('bg-transparent');
|
||
navbar.classList.remove('bg-white', 'shadow-md');
|
||
|
||
// 恢复导航链接颜色
|
||
var _navLinks = navbar.querySelectorAll('nav a');
|
||
_navLinks.forEach(function (link) {
|
||
link.classList.add('text-white');
|
||
link.classList.remove('text-gray-700');
|
||
});
|
||
|
||
// 恢复Logo文字颜色
|
||
var _logoText = navbar.querySelector('.font-bold');
|
||
if (_logoText) {
|
||
_logoText.classList.add('text-white', 'text-shadow');
|
||
_logoText.classList.remove('text-dark');
|
||
}
|
||
|
||
// 隐藏回到顶部按钮
|
||
backToTop.classList.add('scale-0');
|
||
backToTop.classList.remove('scale-100');
|
||
}
|
||
});
|
||
|
||
// 移动端菜单切换
|
||
var mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
var mobileMenu = document.getElementById('mobile-menu');
|
||
mobileMenuButton.addEventListener('click', function () {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 回到顶部功能
|
||
backToTop.addEventListener('click', function () {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});</script>
|
||
<!-- [/JSMOD] k2l_导航栏交互 -- 处理导航栏滚动效果、移动端菜单切换和回到顶部功能 -->
|
||
<!-- [JSMOD] l3m_学习趋势图表 -->
|
||
<script src="./1970808971233067008/echarts.min.js"></script>
|
||
<script id="chart-script">// 页面加载时初始化渲染
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
initLearningTrendChart();
|
||
});
|
||
|
||
// 初始化学习趋势图表
|
||
function initLearningTrendChart() {
|
||
var chartDom = document.getElementById('learning-trend-chart');
|
||
if (!chartDom) return;
|
||
var myChart = echarts.init(chartDom);
|
||
|
||
// 图表配置
|
||
var option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['学习时长(小时)', '测验分数']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '学习时长',
|
||
min: 0,
|
||
max: 6,
|
||
interval: 1,
|
||
axisLabel: {
|
||
formatter: '{value}h'
|
||
}
|
||
}, {
|
||
type: 'value',
|
||
name: '测验分数',
|
||
min: 0,
|
||
max: 100,
|
||
interval: 20,
|
||
axisLabel: {
|
||
formatter: '{value}分'
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '学习时长(小时)',
|
||
type: 'bar',
|
||
data: [2.5, 3.8, 1.2, 4.5, 2.0, 5.2, 3.0],
|
||
backgroundColor: '#4F9BDA',
|
||
borderRadius: 4
|
||
}, {
|
||
name: '测验分数',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: [78, 85, 65, 90, 75, 88, 82],
|
||
lineStyle: {
|
||
width: 3,
|
||
color: '#FF9F43'
|
||
},
|
||
symbol: 'circle',
|
||
symbolSize: 8,
|
||
itemStyle: {
|
||
color: '#FF9F43'
|
||
}
|
||
}]
|
||
};
|
||
|
||
// 渲染图表
|
||
option && myChart.setOption(option);
|
||
|
||
// 监听窗口大小变化，调整图表大小
|
||
window.addEventListener('resize', function () {
|
||
myChart.resize();
|
||
});
|
||
}</script>
|
||
<!-- [/JSMOD] l3m_学习趋势图表 -- 使用echarts初始化学习趋势图表，展示学习时长和测验分数的关系 -->
|
||
<!-- [JSMOD] m4n_页面交互效果 -->
|
||
<script id="interaction-script">// 页面加载时初始化渲染
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
initSmoothScroll();
|
||
initCardHoverEffects();
|
||
});
|
||
|
||
// 平滑滚动
|
||
function initSmoothScroll() {
|
||
document.querySelectorAll('a[href^="#"]').forEach(function (anchor) {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
var targetId = this.getAttribute('href');
|
||
if (targetId === '#') return;
|
||
var targetElement = document.querySelector(targetId);
|
||
if (targetElement) {
|
||
targetElement.scrollIntoView({
|
||
behavior: 'smooth'
|
||
});
|
||
|
||
// 如果是移动端，点击导航链接后关闭菜单
|
||
var mobileMenu = document.getElementById('mobile-menu');
|
||
if (!mobileMenu.classList.contains('hidden')) {
|
||
mobileMenu.classList.add('hidden');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 卡片悬停效果
|
||
function initCardHoverEffects() {
|
||
var cards = document.querySelectorAll('.card-hover');
|
||
cards.forEach(function (card) {
|
||
card.addEventListener('mouseenter', function () {
|
||
this.classList.add('shadow-lg');
|
||
});
|
||
card.addEventListener('mouseleave', function () {
|
||
this.classList.remove('shadow-lg');
|
||
});
|
||
});
|
||
}</script>
|
||
<!-- [/JSMOD] m4n_页面交互效果 -- 实现平滑滚动和卡片悬停效果 -->
|
||
</body>
|
||
</html> |