1092 lines
66 KiB
HTML
Executable File
1092 lines
66 KiB
HTML
Executable File
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||
<title>EduLearn - 在线教育平台</title>
|
||
<script src="../javascript/reload.js"></script>
|
||
<script src="./1970803702457434112/resource_7407310000.js"></script>
|
||
<link href="./1970803702457434112/all.min.css" rel="stylesheet">
|
||
<script>tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#165DFF',
|
||
secondary: '#36CFC9',
|
||
accent: '#FF7D00',
|
||
dark: '#1D2129',
|
||
'dark-2': '#4E5969',
|
||
'light-1': '#F2F3F5',
|
||
'light-2': '#E5E6EB',
|
||
'light-3': '#C9CDD4'
|
||
},
|
||
fontFamily: {
|
||
inter: ['Inter', 'system-ui', 'sans-serif']
|
||
},
|
||
spacing: {
|
||
'18': '4.5rem',
|
||
'22': '5.5rem',
|
||
'26': '6.5rem',
|
||
'72': '18rem',
|
||
'80': '20rem',
|
||
'88': '22rem',
|
||
'96': '24rem'
|
||
},
|
||
boxShadow: {
|
||
'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
|
||
'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)'
|
||
}
|
||
}
|
||
}
|
||
};</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.text-balance {
|
||
text-wrap: balance;
|
||
}
|
||
.text-shadow {
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.transition-custom {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="font-inter bg-gray-50 text-dark">
|
||
<!-- [MODULE] a1b_页面容器 -->
|
||
<div class="min-h-screen flex flex-col">
|
||
<!-- [MODULE] c3d_导航栏 -->
|
||
<header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300" id="navbar">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-between items-center h-16 md:h-20">
|
||
<!-- [MODULE] e5f_导航栏:Logo区域 -->
|
||
<div class="flex items-center">
|
||
<a class="flex items-center" href="javascript:void(0);">
|
||
<div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white mr-3">
|
||
<i class="fas fa-graduation-cap text-xl"> </i>
|
||
</div> <span class="text-xl font-bold text-primary"> EduLearn </span> </a>
|
||
<!-- 桌面端导航菜单 -->
|
||
<nav class="hidden md:ml-10 md:flex md:space-x-8" data-ytextravalue="extra-uhq9nv94x">
|
||
<a class="text-primary border-b-2 border-primary px-1 pt-1 font-medium" data-ytparentvalue="extra-uhq9nv94x" data-ytoriginindex="0" data-ytindex="0" style="opacity: 1; color: rgb(22, 93, 255); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px; cursor: move;" href="javascript:void(0);"> 首页 </a>
|
||
<a class="text-dark-2 hover:text-primary px-1 pt-1 font-medium transition-colors" href="javascript:void(0);" data-ytoriginindex="1" data-ytindex="1"> 课程 </a>
|
||
<a class="text-dark-2 hover:text-primary px-1 pt-1 font-medium transition-colors" href="javascript:void(0);" data-ytoriginindex="2" data-ytindex="2"> 讲师 </a>
|
||
<a class="text-dark-2 hover:text-primary px-1 pt-1 font-medium transition-colors" href="javascript:void(0);" data-ytoriginindex="3" data-ytindex="3"> 学习路径 </a>
|
||
<a class="text-dark-2 hover:text-primary px-1 pt-1 font-medium transition-colors" href="javascript:void(0);" data-ytoriginindex="4" data-ytindex="4"> 社区 </a>
|
||
<a class="text-dark-2 hover:text-primary px-1 pt-1 font-medium transition-colors" data-page="live-classroom" href="javascript:void(0);" data-ytoriginindex="5" data-ytindex="5"> 直播课堂 </a>
|
||
</nav>
|
||
</div>
|
||
<!-- [/MODULE] e5f_导航栏:Logo区域 -- 包含网站Logo和桌面端导航菜单 -->
|
||
<!-- [MODULE] g7h_导航栏:功能区域 -->
|
||
<div class="flex items-center space-x-4">
|
||
<!-- 搜索框 -->
|
||
<div class="hidden md:flex items-center relative">
|
||
<input class="pl-10 pr-4 py-2 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64 transition-all" placeholder="搜索课程、讲师..." type="text">
|
||
<i class="fas fa-search absolute left-4 text-light-3"> </i>
|
||
</div>
|
||
<!-- 通知按钮 -->
|
||
<button class="relative p-2 rounded-full hover:bg-light-1 transition-colors"> <i class="fas fa-bell text-dark-2 text-lg"> </i> <span class="absolute top-1 right-1 w-2 h-2 bg-accent rounded-full"> </span> </button>
|
||
<!-- 购物车 -->
|
||
<button class="relative p-2 rounded-full hover:bg-light-1 transition-colors hidden md:block"> <i class="fas fa-shopping-cart text-dark-2 text-lg"> </i> <span class="absolute -top-1 -right-1 w-5 h-5 bg-primary text-white text-xs rounded-full flex items-center justify-center"> 3 </span> </button>
|
||
<!-- 用户菜单 -->
|
||
<div class="relative group">
|
||
<button class="flex items-center space-x-2 focus:outline-none"> <img alt="用户头像" class="w-9 h-9 rounded-full object-cover border-2 border-white shadow-sm" src="./1970803702457434112/d5b213d5a6ed1103faf1b19608ca9984.png"> <span class="hidden md:inline-block font-medium"> 张明 </span> <i class="fas fa-chevron-down text-xs text-light-3 hidden md:block"> </i> </button>
|
||
<!-- 用户下拉菜单 -->
|
||
<div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-card opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
|
||
<div class="py-2">
|
||
<a class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary" href="javascript:void(0);"> <i class="fas fa-user mr-2"> </i> 个人中心 </a>
|
||
<a class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary" href="javascript:void(0);"> <i class="fas fa-book mr-2"> </i> 我的课程 </a>
|
||
<a class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary" href="javascript:void(0);"> <i class="fas fa-cog mr-2"> </i> 设置 </a>
|
||
<div class="border-t border-light-2 my-1">
|
||
</div>
|
||
<a class="block px-4 py-2 text-sm text-red-500 hover:bg-light-1" href="javascript:void(0);"> <i class="fas fa-sign-out-alt mr-2"> </i> 退出登录 </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端菜单按钮 -->
|
||
<button class="md:hidden p-2 rounded-lg hover:bg-light-1" id="mobile-menu-button"> <i class="fas fa-bars text-dark-2 text-xl"> </i> </button>
|
||
</div>
|
||
<!-- [/MODULE] g7h_导航栏:功能区域 -- 包含搜索框、通知按钮、购物车、用户菜单和移动端菜单按钮 -->
|
||
</div>
|
||
<!-- 移动端导航菜单 -->
|
||
<div class="md:hidden hidden pb-4" id="mobile-menu">
|
||
<div class="relative mb-4">
|
||
<input class="pl-10 pr-4 py-2 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-full" placeholder="搜索课程、讲师..." type="text">
|
||
<i class="fas fa-search absolute left-4 top-3 text-light-3"> </i>
|
||
</div>
|
||
<nav class="flex flex-col space-y-3">
|
||
<a class="text-primary px-3 py-2 rounded-lg bg-primary/5 font-medium" href="javascript:void(0);"> 首页 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1" href="javascript:void(0);"> 课程 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1" href="javascript:void(0);"> 讲师 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1" href="javascript:void(0);"> 学习路径 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1" href="javascript:void(0);"> 社区 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1" data-page="live-classroom" href="javascript:void(0);"> 直播课堂 </a>
|
||
<a class="text-dark-2 hover:text-primary px-3 py-2 rounded-lg hover:bg-light-1 flex items-center" href="javascript:void(0);"> <i class="fas fa-shopping-cart mr-2"> </i> 购物车 (3) </a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- [/MODULE] c3d_导航栏 -- 包含Logo区域、导航菜单和功能区域，支持响应式设计 -->
|
||
<!-- [MODULE] i9j_主内容区域 -->
|
||
<main class="flex-grow">
|
||
<!-- [MODULE] k0l_首页:英雄区域 -->
|
||
<section class="bg-gradient-to-r from-primary to-primary/80 text-white py-12 md:py-20">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex flex-col md:flex-row items-center">
|
||
<div class="md:w-1/2 mb-8 md:mb-0">
|
||
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-shadow mb-4"> 释放你的 <br> 学习潜能 </h1>
|
||
<p class="text-white/90 text-lg md:text-xl mb-8 max-w-lg text-balance"> 探索超过10,000+优质课程，由行业专家精心打造，助你实现职业目标和个人成长。 </p>
|
||
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||
<a class="bg-white text-primary hover:bg-light-1 font-medium py-3 px-8 rounded-full text-center transition-custom shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" href="javascript:void(0);"> 立即开始学习 </a>
|
||
<a class="bg-transparent border-2 border-white text-white hover:bg-white/10 font-medium py-3 px-8 rounded-full text-center transition-custom flex items-center justify-center" href="javascript:void(0);"> <i class="fas fa-play-circle mr-2"> </i> 观看介绍视频 </a>
|
||
</div>
|
||
<!-- 统计数据 -->
|
||
<div class="flex flex-wrap mt-12 gap-8">
|
||
<div>
|
||
<p class="text-3xl md:text-4xl font-bold"> 10,000+ </p>
|
||
<p class="text-white/80"> 在线课程 </p>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl md:text-4xl font-bold"> 500+ </p>
|
||
<p class="text-white/80"> 专业讲师 </p>
|
||
</div>
|
||
<div>
|
||
<p class="text-3xl md:text-4xl font-bold"> 200万+ </p>
|
||
<p class="text-white/80"> 注册学员 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="md:w-1/2 relative">
|
||
<div class="relative z-10 rounded-2xl overflow-hidden shadow-2xl transform md:rotate-2 transition-transform hover:rotate-0 duration-500">
|
||
<img alt="在线学习" class="w-full h-auto" src="./1970803702457434112/9236c1344837a369a37bd0124d30a020.png">
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end" data-ytextravalue="extra-80jgjpcce">
|
||
<div class="p-6" data-ytparentvalue="extra-80jgjpcce" data-ytoriginindex="0" data-ytindex="0">
|
||
<span class="bg-accent text-white text-xs font-bold px-3 py-1 rounded-full"> 热门推荐 </span>
|
||
<h3 class="text-white text-xl font-bold mt-2"> Web前端开发实战 </h3>
|
||
<div class="flex items-center mt-1">
|
||
<div class="flex -space-x-2">
|
||
<img alt="学员" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/954690927815f6fb331ccf1d42ea1924.png">
|
||
<img alt="学员" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/853546d8be76096c8d700baf4b6e4326.png">
|
||
<img alt="学员" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/cd9b14480bb7bd0a5c8f5163a0690ce6.png">
|
||
</div>
|
||
<span class="text-white/90 text-sm ml-3"> 已有 2,541 人学习 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 装饰元素 -->
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-accent/30 rounded-full blur-3xl -z-10">
|
||
</div>
|
||
<div class="absolute -bottom-6 -left-6 w-24 h-24 bg-secondary rounded-full opacity-70 -z-10">
|
||
</div>
|
||
<div class="absolute -top-6 -right-6 w-32 h-32 bg-accent rounded-full opacity-70 -z-10">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] k0l_首页:英雄区域 -- 包含主标题、副标题、行动按钮、统计数据和主视觉图片 -->
|
||
<!-- [MODULE] m2n_首页:品牌合作 -->
|
||
<section class="py-10 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<p class="text-center text-dark-2 mb-8"> 受到全球领先企业的信任 </p>
|
||
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
|
||
<img alt="合作伙伴" class="h-8 md:h-10 grayscale hover:grayscale-0 transition-all duration-300" src="./1970803702457434112/18faf1c27897551327e7a02155f6c849.png">
|
||
<img alt="合作伙伴" class="h-8 md:h-10 grayscale hover:grayscale-0 transition-all duration-300" src="./1970803702457434112/18faf1c27897551327e7a02155f6c849.png">
|
||
<img alt="合作伙伴" class="h-8 md:h-10 grayscale hover:grayscale-0 transition-all duration-300" src="./1970803702457434112/18faf1c27897551327e7a02155f6c849.png">
|
||
<img alt="合作伙伴" class="h-8 md:h-10 grayscale hover:grayscale-0 transition-all duration-300" src="./1970803702457434112/18faf1c27897551327e7a02155f6c849.png">
|
||
<img alt="合作伙伴" class="h-8 md:h-10 grayscale hover:grayscale-0 transition-all duration-300" src="./1970803702457434112/18faf1c27897551327e7a02155f6c849.png">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] m2n_首页:品牌合作 -- 展示合作企业品牌Logo -->
|
||
<!-- [MODULE] o4p_首页:热门课程 -->
|
||
<section class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] q6r_首页:热门课程:标题区域 -->
|
||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-12">
|
||
<div>
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3"> 热门推荐课程 </h2>
|
||
<p class="text-dark-2 max-w-2xl"> 精选最受欢迎的优质课程，帮助你快速掌握实用技能，提升职业竞争力 </p>
|
||
</div>
|
||
<div class="mt-4 md:mt-0">
|
||
<a class="text-primary font-medium flex items-center hover:text-primary/80 transition-colors" href="javascript:void(0);"> 查看全部课程 <i class="fas fa-arrow-right ml-2"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] q6r_首页:热门课程:标题区域 -- 包含区域标题、描述和查看全部链接 -->
|
||
<!-- [MODULE] s8t_首页:热门课程:课程分类 -->
|
||
<div class="flex overflow-x-auto pb-4 mb-8 scrollbar-hide space-x-2 md:space-x-4" id="course-categories">
|
||
<button class="bg-primary text-white px-5 py-2 rounded-full whitespace-nowrap font-medium"> 全部课程 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> Web开发 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 移动应用开发 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 数据科学 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 人工智能 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 设计创意 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 商业管理 </button>
|
||
<button class="bg-white text-dark-2 hover:bg-light-1 px-5 py-2 rounded-full whitespace-nowrap font-medium transition-colors"> 职业发展 </button>
|
||
</div>
|
||
<!-- [/MODULE] s8t_首页:热门课程:课程分类 -- 包含课程分类筛选按钮，支持横向滚动 -->
|
||
<!-- [MODULE] u0v_首页:热门课程:课程列表 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
<!-- 课程卡片 1 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom group">
|
||
<div class="relative">
|
||
<img alt="Web前端开发实战" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500" src="./1970803702457434112/016326c1ebef3f709f209ab733c096be.png">
|
||
<div class="absolute top-3 left-3">
|
||
<span class="bg-primary/90 text-white text-xs font-bold px-2 py-1 rounded"> 热门 </span>
|
||
</div>
|
||
<div class="absolute top-3 right-3">
|
||
<button class="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-dark-2 hover:text-red-500 transition-colors"> <i class="far fa-heart"> </i> </button>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||
<div class="flex items-center">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/6612d75f95297f8231571da01343cb2f.png">
|
||
<span class="text-white text-sm ml-2"> 李明哲 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<span class="text-xs font-medium text-primary bg-primary/10 px-2.5 py-1 rounded"> Web开发 </span>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-star text-yellow-400 text-xs"> </i>
|
||
<span class="text-sm font-medium ml-1"> 4.9 </span>
|
||
<span class="text-light-3 text-xs ml-1"> (1.2k) </span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-primary transition-colors"> Web前端开发实战：从入门到精通 </h3>
|
||
<p class="text-dark-2 text-sm mb-4 line-clamp-2"> 掌握HTML、CSS和JavaScript核心技术，构建响应式、交互式的现代网站。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-primary font-bold text-xl"> ¥299 </span>
|
||
<span class="text-light-3 text-sm line-through ml-2"> ¥499 </span>
|
||
</div>
|
||
<button class="bg-primary/10 text-primary hover:bg-primary/20 p-2 rounded-full transition-colors"> <i class="fas fa-shopping-cart"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片 2 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom group">
|
||
<div class="relative">
|
||
<img alt="数据科学与机器学习" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500" src="./1970803702457434112/20f2502b937395223be2114953306f04.png">
|
||
<div class="absolute top-3 left-3">
|
||
<span class="bg-accent text-white text-xs font-bold px-2 py-1 rounded"> 新课 </span>
|
||
</div>
|
||
<div class="absolute top-3 right-3">
|
||
<button class="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-dark-2 hover:text-red-500 transition-colors"> <i class="far fa-heart"> </i> </button>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||
<div class="flex items-center">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/531eca4e741451ab0367c57c9f66db50.png">
|
||
<span class="text-white text-sm ml-2"> 张晓华 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<span class="text-xs font-medium text-secondary bg-secondary/10 px-2.5 py-1 rounded"> 数据科学 </span>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-star text-yellow-400 text-xs"> </i>
|
||
<span class="text-sm font-medium ml-1"> 4.8 </span>
|
||
<span class="text-light-3 text-xs ml-1"> (856) </span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-primary transition-colors"> 数据科学与机器学习实战 </h3>
|
||
<p class="text-dark-2 text-sm mb-4 line-clamp-2"> 使用Python进行数据分析、可视化和机器学习模型构建，解决实际业务问题。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-primary font-bold text-xl"> ¥399 </span>
|
||
<span class="text-light-3 text-sm line-through ml-2"> ¥599 </span>
|
||
</div>
|
||
<button class="bg-primary/10 text-primary hover:bg-primary/20 p-2 rounded-full transition-colors"> <i class="fas fa-shopping-cart"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片 3 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom group">
|
||
<div class="relative">
|
||
<img alt="React Native移动应用开发" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500" src="./1970803702457434112/679ef588f33efc67412b28f3604cd716.png">
|
||
<div class="absolute top-3 right-3">
|
||
<button class="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-dark-2 hover:text-red-500 transition-colors"> <i class="far fa-heart"> </i> </button>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||
<div class="flex items-center">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/11ad34dffdc4bf9ee4b8649f38aee7f5.png">
|
||
<span class="text-white text-sm ml-2"> 王建国 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<span class="text-xs font-medium text-purple-500 bg-purple-100 px-2.5 py-1 rounded"> 移动开发 </span>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-star text-yellow-400 text-xs"> </i>
|
||
<span class="text-sm font-medium ml-1"> 4.7 </span>
|
||
<span class="text-light-3 text-xs ml-1"> (986) </span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-primary transition-colors"> React Native移动应用开发 </h3>
|
||
<p class="text-dark-2 text-sm mb-4 line-clamp-2"> 学习使用React Native构建跨平台移动应用，一次开发，同时运行于iOS和Android。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-primary font-bold text-xl"> ¥349 </span>
|
||
<span class="text-light-3 text-sm line-through ml-2"> ¥549 </span>
|
||
</div>
|
||
<button class="bg-primary/10 text-primary hover:bg-primary/20 p-2 rounded-full transition-colors"> <i class="fas fa-shopping-cart"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 课程卡片 4 -->
|
||
<div class="bg-white rounded-xl overflow-hidden shadow-card hover:shadow-card-hover transition-custom group">
|
||
<div class="relative">
|
||
<img alt="UI/UX设计实战" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500" src="./1970803702457434112/65a8c1b90f3508394b013cb29254b699.png">
|
||
<div class="absolute top-3 left-3">
|
||
<span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded"> 畅销 </span>
|
||
</div>
|
||
<div class="absolute top-3 right-3">
|
||
<button class="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center text-dark-2 hover:text-red-500 transition-colors"> <i class="far fa-heart"> </i> </button>
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
|
||
<div class="flex items-center">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full border-2 border-white" src="./1970803702457434112/5139bce1e31da79dc9200a7f3dc732d5.png">
|
||
<span class="text-white text-sm ml-2"> 陈思雨 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-5">
|
||
<div class="flex justify-between items-start mb-2">
|
||
<span class="text-xs font-medium text-pink-500 bg-pink-100 px-2.5 py-1 rounded"> 设计创意 </span>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-star text-yellow-400 text-xs"> </i>
|
||
<span class="text-sm font-medium ml-1"> 4.9 </span>
|
||
<span class="text-light-3 text-xs ml-1"> (2.1k) </span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-2 group-hover:text-primary transition-colors"> UI/UX设计实战：从概念到原型 </h3>
|
||
<p class="text-dark-2 text-sm mb-4 line-clamp-2"> 学习用户体验设计流程、交互设计原则和视觉设计技巧，打造令人惊艳的产品。 </p>
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<span class="text-primary font-bold text-xl"> ¥249 </span>
|
||
<span class="text-light-3 text-sm line-through ml-2"> ¥399 </span>
|
||
</div>
|
||
<button class="bg-primary/10 text-primary hover:bg-primary/20 p-2 rounded-full transition-colors"> <i class="fas fa-shopping-cart"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] u0v_首页:热门课程:课程列表 -- 展示4个热门课程卡片，包含课程图片、讲师信息、评分、价格等 -->
|
||
<!-- [MODULE] w2x_首页:热门课程:加载更多 -->
|
||
<div class="text-center mt-10">
|
||
<button class="border border-light-2 hover:border-primary text-dark-2 hover:text-primary font-medium py-3 px-8 rounded-full transition-colors"> 加载更多课程 </button>
|
||
</div>
|
||
<!-- [/MODULE] w2x_首页:热门课程:加载更多 -- 包含加载更多课程按钮 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] o4p_首页:热门课程 -- 包含课程分类、课程列表和加载更多功能 -->
|
||
<!-- [MODULE] y4z_首页:学习路径 -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] a6b_首页:学习路径:标题区域 -->
|
||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3"> 专业学习路径 </h2>
|
||
<p class="text-dark-2"> 系统化的学习路径，帮助你从入门到专业，高效掌握特定领域技能 </p>
|
||
</div>
|
||
<!-- [/MODULE] a6b_首页:学习路径:标题区域 -- 包含区域标题和描述 -->
|
||
<!-- [MODULE] c8d_首页:学习路径:路径列表 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 学习路径 1 -->
|
||
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-100 hover:shadow-lg transition-shadow group">
|
||
<div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-5 group-hover:bg-primary group-hover:text-white transition-colors">
|
||
<i class="fas fa-code text-2xl"> </i>
|
||
</div>
|
||
<h3 class="font-bold text-xl mb-2"> 全栈Web开发工程师 </h3>
|
||
<p class="text-dark-2 mb-5"> 掌握前端和后端开发技能，成为能够独立构建完整Web应用的全栈工程师。 </p>
|
||
<div class="flex items-center text-sm text-dark-2 mb-6">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-2"> </i>
|
||
<span> 12门课程 </span>
|
||
</div>
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-clock mr-2"> </i>
|
||
<span> 6个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-user-graduate mr-2"> </i>
|
||
<span> 8.5k人 </span>
|
||
</div>
|
||
</div>
|
||
<a class="inline-flex items-center font-medium text-primary group-hover:text-primary/80" href="javascript:void(0);"> 查看学习路径 <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"> </i> </a>
|
||
</div>
|
||
<!-- 学习路径 2 -->
|
||
<div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-2xl p-6 border border-green-100 hover:shadow-lg transition-shadow group">
|
||
<div class="w-14 h-14 bg-secondary/10 rounded-xl flex items-center justify-center text-secondary mb-5 group-hover:bg-secondary group-hover:text-white transition-colors">
|
||
<i class="fas fa-chart-line text-2xl"> </i>
|
||
</div>
|
||
<h3 class="font-bold text-xl mb-2"> 数据科学家 </h3>
|
||
<p class="text-dark-2 mb-5"> 从数据分析基础到机器学习高级应用，全面培养解决复杂数据问题的能力。 </p>
|
||
<div class="flex items-center text-sm text-dark-2 mb-6">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-2"> </i>
|
||
<span> 15门课程 </span>
|
||
</div>
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-clock mr-2"> </i>
|
||
<span> 8个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-user-graduate mr-2"> </i>
|
||
<span> 5.2k人 </span>
|
||
</div>
|
||
</div>
|
||
<a class="inline-flex items-center font-medium text-secondary group-hover:text-secondary/80" href="javascript:void(0);"> 查看学习路径 <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"> </i> </a>
|
||
</div>
|
||
<!-- 学习路径 3 -->
|
||
<div class="bg-gradient-to-br from-orange-50 to-amber-50 rounded-2xl p-6 border border-orange-100 hover:shadow-lg transition-shadow group">
|
||
<div class="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center text-accent mb-5 group-hover:bg-accent group-hover:text-white transition-colors">
|
||
<i class="fas fa-mobile-alt text-2xl"> </i>
|
||
</div>
|
||
<h3 class="font-bold text-xl mb-2"> 移动应用开发者 </h3>
|
||
<p class="text-dark-2 mb-5"> 学习iOS和Android应用开发，掌握跨平台开发技术，打造高质量移动应用。 </p>
|
||
<div class="flex items-center text-sm text-dark-2 mb-6">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-2"> </i>
|
||
<span> 10门课程 </span>
|
||
</div>
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-clock mr-2"> </i>
|
||
<span> 5个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-user-graduate mr-2"> </i>
|
||
<span> 6.3k人 </span>
|
||
</div>
|
||
</div>
|
||
<a class="inline-flex items-center font-medium text-accent group-hover:text-accent/80" href="javascript:void(0);"> 查看学习路径 <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] c8d_首页:学习路径:路径列表 -- 展示3个学习路径卡片，包含路径名称、描述、课程数量等信息 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] y4z_首页:学习路径 -- 展示系统化的学习路径，帮助用户规划学习方向 -->
|
||
<!-- [MODULE] e0f_首页:名师推荐 -->
|
||
<section class="py-16 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] g2h_首页:名师推荐:标题区域 -->
|
||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3"> 行业名师推荐 </h2>
|
||
<p class="text-dark-2"> 来自一线企业的技术专家和行业领袖，分享实战经验和前沿知识 </p>
|
||
</div>
|
||
<!-- [/MODULE] g2h_首页:名师推荐:标题区域 -- 包含区域标题和描述 -->
|
||
<!-- [MODULE] i4j_首页:名师推荐:讲师列表 -->
|
||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
|
||
<!-- 讲师 1 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/7d93522b8be2ff80e455c0ef8b34ac58.png">
|
||
<div class="absolute inset-0 bg-primary/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-primary p-2 rounded-full mx-1 hover:bg-primary hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-primary p-2 rounded-full mx-1 hover:bg-primary hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-primary transition-colors"> 李明哲 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> 前端技术专家 </p>
|
||
<p class="text-primary text-sm"> 12门课程 </p>
|
||
</div>
|
||
<!-- 讲师 2 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/ba072e7beb79fb65f580d2ce87b46c66.png">
|
||
<div class="absolute inset-0 bg-secondary/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-secondary p-2 rounded-full mx-1 hover:bg-secondary hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-secondary p-2 rounded-full mx-1 hover:bg-secondary hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-secondary transition-colors"> 张晓华 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> 数据科学专家 </p>
|
||
<p class="text-secondary text-sm"> 8门课程 </p>
|
||
</div>
|
||
<!-- 讲师 3 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/95fa52b72fd6e3edd9cdeec6acfb82b3.png">
|
||
<div class="absolute inset-0 bg-accent/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-accent p-2 rounded-full mx-1 hover:bg-accent hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-accent p-2 rounded-full mx-1 hover:bg-accent hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-accent transition-colors"> 王建国 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> 移动开发专家 </p>
|
||
<p class="text-accent text-sm"> 10门课程 </p>
|
||
</div>
|
||
<!-- 讲师 4 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/45172e26158f794b8f4dc9844065e48a.png">
|
||
<div class="absolute inset-0 bg-pink-500/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-pink-500 p-2 rounded-full mx-1 hover:bg-pink-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-pink-500 p-2 rounded-full mx-1 hover:bg-pink-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-pink-500 transition-colors"> 陈思雨 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> UI/UX设计专家 </p>
|
||
<p class="text-pink-500 text-sm"> 15门课程 </p>
|
||
</div>
|
||
<!-- 讲师 5 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/6e5fb4d12d9bfe7343844c65c5e2a0be.png">
|
||
<div class="absolute inset-0 bg-purple-500/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-purple-500 p-2 rounded-full mx-1 hover:bg-purple-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-purple-500 p-2 rounded-full mx-1 hover:bg-purple-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-purple-500 transition-colors"> 赵文博 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> AI研究专家 </p>
|
||
<p class="text-purple-500 text-sm"> 7门课程 </p>
|
||
</div>
|
||
<!-- 讲师 6 -->
|
||
<div class="text-center group">
|
||
<div class="relative mb-4">
|
||
<img alt="讲师头像" class="w-24 h-24 rounded-full object-cover mx-auto border-4 border-white shadow-md group-hover:shadow-lg transition-all" src="./1970803702457434112/94b26f4a9c8a6e7274073e7c01ac3ca6.png">
|
||
<div class="absolute inset-0 bg-amber-500/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
||
<a class="bg-white text-amber-500 p-2 rounded-full mx-1 hover:bg-amber-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fab fa-linkedin"> </i> </a>
|
||
<a class="bg-white text-amber-500 p-2 rounded-full mx-1 hover:bg-amber-500 hover:text-white transition-colors" href="javascript:void(0);"> <i class="fas fa-globe"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-bold text-lg mb-1 group-hover:text-amber-500 transition-colors"> 林美玲 </h3>
|
||
<p class="text-dark-2 text-sm mb-1"> 商业管理专家 </p>
|
||
<p class="text-amber-500 text-sm"> 9门课程 </p>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] i4j_首页:名师推荐:讲师列表 -- 展示6位讲师信息，包含头像、姓名、专业领域和课程数量 -->
|
||
<!-- [MODULE] k6l_首页:名师推荐:查看更多 -->
|
||
<div class="text-center mt-12">
|
||
<a class="inline-flex items-center justify-center border border-light-2 hover:border-primary text-dark-2 hover:text-primary font-medium py-3 px-8 rounded-full transition-colors" href="javascript:void(0);"> 查看全部讲师 <i class="fas fa-arrow-right ml-2"> </i> </a>
|
||
</div>
|
||
<!-- [/MODULE] k6l_首页:名师推荐:查看更多 -- 包含查看全部讲师按钮 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] e0f_首页:名师推荐 -- 展示平台优质讲师信息 -->
|
||
<!-- [MODULE] m8n_首页:学习成果展示 -->
|
||
<section class="py-16 bg-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<!-- [MODULE] o0p_首页:学习成果展示:标题区域 -->
|
||
<div class="text-center max-w-3xl mx-auto mb-12">
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3"> 学员成功故事 </h2>
|
||
<p class="text-dark-2"> 看看我们的学员如何通过学习改变职业生涯，实现职业目标 </p>
|
||
</div>
|
||
<!-- [/MODULE] o0p_首页:学习成果展示:标题区域 -- 包含区域标题和描述 -->
|
||
<!-- [MODULE] q2r_首页:学习成果展示:成功案例 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 成功案例 1 -->
|
||
<div class="bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||
<div class="flex items-start mb-4">
|
||
<img alt="学员头像" class="w-14 h-14 rounded-full object-cover mr-4" src="./1970803702457434112/ca4ea4da79fad231ee8d64f40776a242.png">
|
||
<div>
|
||
<h3 class="font-bold text-lg"> 张伟 </h3>
|
||
<p class="text-dark-2 text-sm"> 前端开发工程师 @ 阿里巴巴 </p>
|
||
<div class="flex items-center mt-1">
|
||
<span class="text-xs font-medium bg-primary/10 text-primary px-2.5 py-0.5 rounded"> Web开发路径 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-dark-2 mb-4"> "通过EduLearn的全栈Web开发路径，我从零基础成长为一名合格的前端开发工程师，现在在阿里巴巴担任前端开发岗位，薪资提升了150%。" </p>
|
||
<div class="flex items-center text-sm text-dark-2">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-1"> </i>
|
||
<span> 学习时长: 6个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-calendar-check mr-1"> </i>
|
||
<span> 毕业于2023年3月 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 成功案例 2 -->
|
||
<div class="bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||
<div class="flex items-start mb-4">
|
||
<img alt="学员头像" class="w-14 h-14 rounded-full object-cover mr-4" src="./1970803702457434112/d9ea4d4469aa20a37c96f03f8d5bdb71.png">
|
||
<div>
|
||
<h3 class="font-bold text-lg"> 刘婷 </h3>
|
||
<p class="text-dark-2 text-sm"> 数据分析师 @ 腾讯 </p>
|
||
<div class="flex items-center mt-1">
|
||
<span class="text-xs font-medium bg-secondary/10 text-secondary px-2.5 py-0.5 rounded"> 数据科学路径 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-dark-2 mb-4"> "作为一名市场营销专员，我通过EduLearn的数据科学路径学习，成功转型为数据分析师，薪资提升了80%，工作更有成就感。" </p>
|
||
<div class="flex items-center text-sm text-dark-2">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-1"> </i>
|
||
<span> 学习时长: 4个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-calendar-check mr-1"> </i>
|
||
<span> 毕业于2023年5月 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 成功案例 3 -->
|
||
<div class="bg-gray-50 rounded-2xl p-6 hover:shadow-lg transition-shadow">
|
||
<div class="flex items-start mb-4">
|
||
<img alt="学员头像" class="w-14 h-14 rounded-full object-cover mr-4" src="./1970803702457434112/ca4ea4da79fad231ee8d64f40776a242.png">
|
||
<div>
|
||
<h3 class="font-bold text-lg"> 王浩 </h3>
|
||
<p class="text-dark-2 text-sm"> 独立开发者 @ 自由职业 </p>
|
||
<div class="flex items-center mt-1">
|
||
<span class="text-xs font-medium bg-accent/10 text-accent px-2.5 py-0.5 rounded"> 移动开发路径 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-dark-2 mb-4"> "学习移动应用开发后，我开发了两款付费应用，现在月收入稳定在3万元以上，实现了工作自由，感谢EduLearn的优质课程！" </p>
|
||
<div class="flex items-center text-sm text-dark-2">
|
||
<div class="flex items-center mr-4">
|
||
<i class="fas fa-graduation-cap mr-1"> </i>
|
||
<span> 学习时长: 8个月 </span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fas fa-calendar-check mr-1"> </i>
|
||
<span> 毕业于2022年11月 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] q2r_首页:学习成果展示:成功案例 -- 展示3个学员成功案例，包含学员信息、学习路径和职业转变 -->
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] m8n_首页:学习成果展示 -- 展示学员学习成果和职业转变案例 -->
|
||
<!-- [MODULE] s4t_首页:学习数据统计 -->
|
||
<section class="py-16 bg-primary text-white">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||
<div class="transform transition-transform hover:-translate-y-2 duration-300">
|
||
<div class="text-4xl md:text-5xl font-bold mb-2" id="counter-students">
|
||
200,000+
|
||
</div>
|
||
<p class="text-white/80"> 注册学员 </p>
|
||
</div>
|
||
<div class="transform transition-transform hover:-translate-y-2 duration-300">
|
||
<div class="text-4xl md:text-5xl font-bold mb-2" id="counter-courses">
|
||
10,000+
|
||
</div>
|
||
<p class="text-white/80"> 精品课程 </p>
|
||
</div>
|
||
<div class="transform transition-transform hover:-translate-y-2 duration-300">
|
||
<div class="text-4xl md:text-5xl font-bold mb-2" id="counter-instructors">
|
||
500+
|
||
</div>
|
||
<p class="text-white/80"> 行业专家 </p>
|
||
</div>
|
||
<div class="transform transition-transform hover:-translate-y-2 duration-300">
|
||
<div class="text-4xl md:text-5xl font-bold mb-2" id="counter-companies">
|
||
2,000+
|
||
</div>
|
||
<p class="text-white/80"> 合作企业 </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] s4t_首页:学习数据统计 -- 展示平台关键数据指标 -->
|
||
<!-- [MODULE] u6v_首页:注册区域 -->
|
||
<section class="py-20 bg-gray-50">
|
||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="bg-gradient-to-r from-primary to-primary/90 rounded-3xl overflow-hidden shadow-xl">
|
||
<div class="grid md:grid-cols-2">
|
||
<div class="p-8 md:p-12 lg:p-16 flex flex-col justify-center">
|
||
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-4"> 准备好开始你的学习之旅了吗？ </h2>
|
||
<p class="text-white/90 text-lg mb-8 max-w-lg"> 注册EduLearn账号，即可免费试学所有课程的前3节，开启你的技能提升之路。 </p>
|
||
<form class="space-y-4">
|
||
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
|
||
<input class="px-4 py-3 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-white/30" placeholder="输入你的姓名" type="text">
|
||
<input class="px-4 py-3 rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-white/30" placeholder="输入你的邮箱" type="email">
|
||
</div>
|
||
<button class="bg-white text-primary hover:bg-light-1 font-bold py-3 px-6 rounded-lg w-full sm:w-auto transition-colors shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all" type="button"> 免费注册 </button>
|
||
</form>
|
||
<p class="text-white/80 text-sm mt-4"> 已有账号？ <a class="text-white font-medium hover:underline" href="javascript:void(0);"> 立即登录 </a> </p>
|
||
</div>
|
||
<div class="hidden md:block relative">
|
||
<img alt="学习场景" class="absolute inset-0 w-full h-full object-cover" src="./1970803702457434112/601e2f17afee5286731dbbef1b367e0f.png">
|
||
<div class="absolute inset-0 bg-gradient-to-l from-primary/80 to-transparent">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- [/MODULE] u6v_首页:注册区域 -- 包含注册表单，鼓励用户注册平台 -->
|
||
<!-- [MODULE] z1x_直播课堂页面 -->
|
||
<div class="hidden" id="live-classroom-page">
|
||
<div class="container mx-auto px-4 py-8">
|
||
<div class="flex flex-col lg:flex-row gap-6">
|
||
<!-- 视频区域 -->
|
||
<div class="lg:w-2/3 bg-dark rounded-xl overflow-hidden shadow-lg">
|
||
<div class="relative pb-[56.25%]">
|
||
<img alt="直播课堂" class="absolute inset-0 w-full h-full object-cover" src="./1970803702457434112/bb8eebc5f2c443239c502dc808f40cd3.png">
|
||
<div class="absolute top-4 left-4 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center">
|
||
<i class="fas fa-circle animate-pulse mr-2"> </i> 直播中
|
||
</div>
|
||
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
|
||
<h2 class="text-white text-xl font-bold"> Web前端开发实战 - 第15课：响应式设计 </h2>
|
||
<div class="flex items-center mt-2 text-white/80 text-sm">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full mr-2" src="./1970803702457434112/6612d75f95297f8231571da01343cb2f.png">
|
||
<span> 李明哲 讲师 </span>
|
||
<span class="mx-3"> • </span>
|
||
<span> 观看人数: 1,245 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 视频控制栏 -->
|
||
<div class="bg-gray-900 text-white p-4 flex items-center justify-between">
|
||
<div class="flex items-center space-x-4">
|
||
<button class="hover:text-primary transition-colors"> <i class="fas fa-play text-lg"> </i> </button>
|
||
<button class="hover:text-primary transition-colors"> <i class="fas fa-volume-up text-lg"> </i> </button>
|
||
<div class="w-48 bg-gray-700 h-1 rounded-full overflow-hidden">
|
||
<div class="bg-primary h-full rounded-full" style="width: 35%">
|
||
</div>
|
||
</div>
|
||
<span class="text-sm"> 35:20 / 1:45:00 </span>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<button class="hover:text-primary transition-colors"> <i class="fas fa-expand text-lg"> </i> </button>
|
||
<button class="hover:text-primary transition-colors"> <i class="fas fa-cog text-lg"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 互动区域 -->
|
||
<div class="lg:w-1/3 space-y-6">
|
||
<!-- 互动按钮区 -->
|
||
<div class="bg-white rounded-xl shadow-card p-4">
|
||
<h3 class="font-bold text-lg mb-4"> 课堂互动 </h3>
|
||
<div class="grid grid-cols-4 gap-3">
|
||
<button class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-colors" id="raise-hand-btn">
|
||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
|
||
<i class="fas fa-hand-paper"> </i>
|
||
</div> <span class="text-sm"> 举手 </span> </button>
|
||
<button class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-colors">
|
||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
|
||
<i class="fas fa-comment"> </i>
|
||
</div> <span class="text-sm"> 提问 </span> </button>
|
||
<button class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-colors">
|
||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
|
||
<i class="fas fa-microphone"> </i>
|
||
</div> <span class="text-sm"> 连麦 </span> </button>
|
||
<button class="flex flex-col items-center p-3 rounded-lg hover:bg-light-1 transition-colors">
|
||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-2">
|
||
<i class="fas fa-star"> </i>
|
||
</div> <span class="text-sm"> 收藏 </span> </button>
|
||
</div>
|
||
</div>
|
||
<!-- 聊天窗口 -->
|
||
<div class="bg-white rounded-xl shadow-card overflow-hidden flex flex-col h-96">
|
||
<div class="p-4 border-b border-light-2">
|
||
<h3 class="font-bold text-lg"> 课堂聊天 </h3>
|
||
</div>
|
||
<div class="flex-grow overflow-y-auto p-4 space-y-4" id="chat-messages">
|
||
<div class="flex items-start">
|
||
<img alt="用户头像" class="w-8 h-8 rounded-full mr-2" src="./1970803702457434112/954690927815f6fb331ccf1d42ea1924.png">
|
||
<div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium text-sm"> 王小华 </span>
|
||
<span class="text-xs text-light-3 ml-2"> 10:25 </span>
|
||
</div>
|
||
<p class="text-sm mt-1"> 老师，这个问题我不太明白，可以再讲一遍吗？ </p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<img alt="用户头像" class="w-8 h-8 rounded-full mr-2" src="./1970803702457434112/853546d8be76096c8d700baf4b6e4326.png">
|
||
<div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium text-sm"> 张伟 </span>
|
||
<span class="text-xs text-light-3 ml-2"> 10:26 </span>
|
||
</div>
|
||
<p class="text-sm mt-1"> 这个案例很实用，谢谢老师！ </p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<img alt="讲师头像" class="w-8 h-8 rounded-full mr-2" src="./1970803702457434112/6612d75f95297f8231571da01343cb2f.png">
|
||
<div>
|
||
<div class="flex items-center">
|
||
<span class="font-medium text-sm text-primary"> 李明哲 讲师 </span>
|
||
<span class="text-xs text-light-3 ml-2"> 10:28 </span>
|
||
</div>
|
||
<p class="text-sm mt-1"> 好的，我再详细讲解一下这个概念... </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 border-t border-light-2">
|
||
<div class="flex items-center">
|
||
<input class="flex-grow px-4 py-2 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" placeholder="输入问题或评论..." type="text">
|
||
<button class="ml-2 bg-primary text-white p-2 rounded-full hover:bg-primary/90 transition-colors"> <i class="fas fa-paper-plane"> </i> </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- [/MODULE] z1x_直播课堂页面 -- 包含视频窗口、互动区域和聊天窗口，实现直播观看与互动功能 -->
|
||
</main>
|
||
<!-- [/MODULE] i9j_主内容区域 -- 包含首页所有主要内容模块 -->
|
||
<!-- [MODULE] w8x_页脚 -->
|
||
<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-5 gap-8 mb-12">
|
||
<!-- 品牌信息 -->
|
||
<div class="lg:col-span-2">
|
||
<div class="flex items-center mb-4">
|
||
<div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center text-primary mr-3">
|
||
<i class="fas fa-graduation-cap text-xl"> </i>
|
||
</div>
|
||
<span class="text-xl font-bold text-white"> EduLearn </span>
|
||
</div>
|
||
<p class="text-gray-400 mb-6 max-w-md"> EduLearn是中国领先的在线教育平台，致力于提供高质量的技能培训课程，帮助学习者实现职业目标和个人成长。 </p>
|
||
<div class="flex space-x-4">
|
||
<a class="bg-dark-2 hover:bg-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors" href="javascript:void(0);"> <i class="fab fa-weixin"> </i> </a>
|
||
<a class="bg-dark-2 hover:bg-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors" href="javascript:void(0);"> <i class="fab fa-weibo"> </i> </a>
|
||
<a class="bg-dark-2 hover:bg-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors" href="javascript:void(0);"> <i class="fab fa-zhihu"> </i> </a>
|
||
<a class="bg-dark-2 hover:bg-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors" href="javascript:void(0);"> <i class="fab fa-bilibili"> </i> </a>
|
||
</div>
|
||
</div>
|
||
<!-- 快速链接 -->
|
||
<div>
|
||
<h3 class="font-bold text-lg mb-4"> 快速链接 </h3>
|
||
<ul class="space-y-2">
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 首页 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 全部课程 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 学习路径 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 讲师团队 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 企业培训 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 关于我们 </a> </li>
|
||
</ul>
|
||
</div>
|
||
<!-- 课程分类 -->
|
||
<div>
|
||
<h3 class="font-bold text-lg mb-4"> 课程分类 </h3>
|
||
<ul class="space-y-2">
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> Web开发 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 移动应用开发 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 数据科学 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 人工智能 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 设计创意 </a> </li>
|
||
<li> <a class="text-gray-400 hover:text-white transition-colors" href="javascript:void(0);"> 商业管理 </a> </li>
|
||
</ul>
|
||
</div>
|
||
<!-- 联系我们 -->
|
||
<div>
|
||
<h3 class="font-bold text-lg mb-4"> 联系我们 </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>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- 版权信息 -->
|
||
<div class="border-t border-gray-800 pt-8 mt-8">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<p class="text-gray-400 text-sm mb-4 md:mb-0"> © 2023 EduLearn在线教育平台. 保留所有权利. </p>
|
||
<div class="flex space-x-6">
|
||
<a class="text-gray-400 hover:text-white text-sm transition-colors" href="javascript:void(0);"> 隐私政策 </a>
|
||
<a class="text-gray-400 hover:text-white text-sm transition-colors" href="javascript:void(0);"> 服务条款 </a>
|
||
<a class="text-gray-400 hover:text-white text-sm transition-colors" href="javascript:void(0);"> Cookie政策 </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- [/MODULE] w8x_页脚 -- 包含网站导航、联系信息和版权声明 -->
|
||
<!-- 回到顶部按钮 -->
|
||
<button class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90" id="back-to-top"> <i class="fas fa-arrow-up"> </i> </button>
|
||
</div>
|
||
<!-- [/MODULE] a1b_页面容器 -- 包含网站所有内容 -->
|
||
<!-- [JSMOD] z1y_导航栏交互 -->
|
||
<script id="navbar-script">// 页面加载时初始化渲染
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 移动端菜单切换
|
||
var mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
var mobileMenu = document.getElementById('mobile-menu');
|
||
mobileMenuButton.addEventListener('click', function () {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 导航栏滚动效果
|
||
var navbar = document.getElementById('navbar');
|
||
var lastScrollTop = 0;
|
||
window.addEventListener('scroll', function () {
|
||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
if (scrollTop > 50) {
|
||
navbar.classList.add('shadow-md');
|
||
navbar.classList.add('bg-white/95');
|
||
navbar.classList.add('backdrop-blur-sm');
|
||
} else {
|
||
navbar.classList.remove('shadow-md');
|
||
navbar.classList.remove('bg-white/95');
|
||
navbar.classList.remove('backdrop-blur-sm');
|
||
}
|
||
lastScrollTop = scrollTop;
|
||
});
|
||
|
||
// 回到顶部按钮
|
||
var backToTopButton = document.getElementById('back-to-top');
|
||
window.addEventListener('scroll', function () {
|
||
if (window.pageYOffset > 300) {
|
||
backToTopButton.classList.remove('opacity-0', 'invisible');
|
||
backToTopButton.classList.add('opacity-100', 'visible');
|
||
} else {
|
||
backToTopButton.classList.add('opacity-0', 'invisible');
|
||
backToTopButton.classList.remove('opacity-100', 'visible');
|
||
}
|
||
});
|
||
backToTopButton.addEventListener('click', function () {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// 课程分类横向滚动
|
||
var courseCategories = document.getElementById('course-categories');
|
||
var isDown = false;
|
||
var startX;
|
||
var scrollLeft;
|
||
courseCategories.addEventListener('mousedown', function (e) {
|
||
isDown = true;
|
||
courseCategories.classList.add('cursor-grabbing');
|
||
startX = e.pageX - courseCategories.offsetLeft;
|
||
scrollLeft = courseCategories.scrollLeft;
|
||
});
|
||
courseCategories.addEventListener('mouseleave', function () {
|
||
isDown = false;
|
||
courseCategories.classList.remove('cursor-grabbing');
|
||
});
|
||
courseCategories.addEventListener('mouseup', function () {
|
||
isDown = false;
|
||
courseCategories.classList.remove('cursor-grabbing');
|
||
});
|
||
courseCategories.addEventListener('mousemove', function (e) {
|
||
if (!isDown) return;
|
||
e.preventDefault();
|
||
var x = e.pageX - courseCategories.offsetLeft;
|
||
var walk = (x - startX) * 2;
|
||
courseCategories.scrollLeft = scrollLeft - walk;
|
||
});
|
||
|
||
// 课程分类按钮点击效果
|
||
var categoryButtons = courseCategories.querySelectorAll('button');
|
||
categoryButtons.forEach(function (button) {
|
||
button.addEventListener('click', function () {
|
||
// 移除所有按钮的选中状态
|
||
categoryButtons.forEach(function (btn) {
|
||
btn.classList.remove('bg-primary', 'text-white');
|
||
btn.classList.add('bg-white', 'text-dark-2', 'hover:bg-light-1');
|
||
});
|
||
|
||
// 添加当前按钮的选中状态
|
||
button.classList.remove('bg-white', 'text-dark-2', 'hover:bg-light-1');
|
||
button.classList.add('bg-primary', 'text-white');
|
||
});
|
||
});
|
||
});</script>
|
||
<!-- [/JSMOD] z1y_导航栏交互 -- 处理移动端菜单切换、导航栏滚动效果、回到顶部按钮、课程分类横向滚动和分类按钮点击效果 -->
|
||
<!-- [JSMOD] x3w_数据统计动画 -->
|
||
<script id="counter-script">// 页面加载时初始化渲染
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// 数字增长动画
|
||
var animateCounter = function animateCounter(element, target) {
|
||
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2000;
|
||
var start = 0;
|
||
var increment = target / (duration / 16);
|
||
var current = start;
|
||
var timer = setInterval(function () {
|
||
current += increment;
|
||
if (current >= target) {
|
||
clearInterval(timer);
|
||
element.textContent = target.toLocaleString() + '+';
|
||
} else {
|
||
element.textContent = Math.floor(current).toLocaleString() + '+';
|
||
}
|
||
}, 16);
|
||
};
|
||
|
||
// 监听元素是否进入视口
|
||
var observer = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (entry) {
|
||
if (entry.isIntersecting) {
|
||
// 开始动画
|
||
animateCounter(document.getElementById('counter-students'), 200000);
|
||
animateCounter(document.getElementById('counter-courses'), 10000);
|
||
animateCounter(document.getElementById('counter-instructors'), 500);
|
||
animateCounter(document.getElementById('counter-companies'), 2000);
|
||
|
||
// 只观察一次
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.5
|
||
});
|
||
|
||
// 观察统计区域
|
||
var statsSection = document.getElementById('counter-students').parentElement.parentElement.parentElement;
|
||
observer.observe(statsSection);
|
||
});</script>
|
||
<!-- [/JSMOD] x3w_数据统计动画 -- 实现数据统计数字增长动画效果 -->
|
||
<!-- [JSMOD] 2a3_导航菜单切换 -->
|
||
<script id="nav-menu-switch">document.addEventListener('DOMContentLoaded', function () {
|
||
// 获取所有导航菜单项和页面
|
||
var navItems = document.querySelectorAll('nav a[data-page]');
|
||
var pages = {
|
||
'home': document.getElementById('home-page'),
|
||
'live-classroom': document.getElementById('live-classroom-page')
|
||
};
|
||
|
||
// 初始化显示首页，隐藏其他页面
|
||
for (var pageId in pages) {
|
||
if (pageId !== 'home' && pages[pageId]) {
|
||
pages[pageId].classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 为导航菜单项添加点击事件
|
||
navItems.forEach(function (item) {
|
||
item.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
|
||
// 移除所有菜单项的活跃状态
|
||
document.querySelectorAll('nav a').forEach(function (nav) {
|
||
nav.classList.remove('text-primary', 'border-b-2', 'border-primary', 'bg-primary/5');
|
||
nav.classList.add('text-dark-2');
|
||
});
|
||
|
||
// 设置当前菜单项为活跃状态
|
||
item.classList.remove('text-dark-2');
|
||
item.classList.add('text-primary', 'border-b-2', 'border-primary');
|
||
|
||
// 在移动端菜单中设置活跃状态
|
||
var mobileItem = document.querySelector("#mobile-menu a[data-page=\"".concat(item.dataset.page, "\"]"));
|
||
if (mobileItem) {
|
||
mobileItem.classList.remove('text-dark-2', 'hover:bg-light-1');
|
||
mobileItem.classList.add('text-primary', 'bg-primary/5');
|
||
}
|
||
|
||
// 隐藏所有页面
|
||
for (var _pageId in pages) {
|
||
if (pages[_pageId]) {
|
||
pages[_pageId].classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 显示对应的页面
|
||
var targetPage = pages[item.dataset.page];
|
||
if (targetPage) {
|
||
targetPage.classList.remove('hidden');
|
||
}
|
||
});
|
||
});
|
||
});</script>
|
||
<!-- [/JSMOD] 2a3_导航菜单切换 -- 实现导航菜单切换功能，控制不同页面的显示与隐藏 -->
|
||
</body>
|
||
</html> |