890 lines
32 KiB
HTML
890 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>名师云课 - 东师理想AI教育云平台</title>
|
|
<!-- 引入外部资源 -->
|
|
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/css/layui.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<!-- 引入自定义样式 -->
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<style>
|
|
/* 临时样式：解决图片缺失问题 */
|
|
.logo-placeholder {
|
|
width: 160px;
|
|
height: 40px;
|
|
background-color: #1E88E5;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 页面标题区样式 */
|
|
.page-header {
|
|
padding: 80px 0 60px;
|
|
background: linear-gradient(135deg, #0066FF, #00C389);
|
|
color: white;
|
|
text-align: center;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 36px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* 内容区域样式 */
|
|
.classroom-content {
|
|
padding: 40px 0;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.course-section,
|
|
.teacher-section,
|
|
.hot-courses {
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 20px rgba(0, 102, 255, 0.1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #0066FF;
|
|
margin-bottom: 25px;
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 60px;
|
|
height: 3px;
|
|
background-color: #00C389;
|
|
}
|
|
|
|
/* 课程分类样式 */
|
|
.course-categories {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.category-item {
|
|
padding: 10px 20px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-item:hover,
|
|
.category-item.active {
|
|
background-color: #0066FF;
|
|
color: white;
|
|
}
|
|
|
|
/* 课程卡片样式 */
|
|
.courses-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.course-card {
|
|
border: 1px solid #eee;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
background-color: white;
|
|
}
|
|
|
|
.course-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.course-image {
|
|
height: 180px;
|
|
background-color: #f0f2f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
position: relative;
|
|
}
|
|
|
|
.course-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
padding: 5px 10px;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.course-badge.live {
|
|
background-color: #ff4d4f;
|
|
color: white;
|
|
}
|
|
|
|
.course-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
|
|
.course-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.course-meta span {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.course-meta i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.course-teacher {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.teacher-avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
background-color: #e6f7ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10px;
|
|
color: #0066FF;
|
|
}
|
|
|
|
.teacher-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.course-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.course-tags span {
|
|
padding: 3px 8px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 教师卡片样式 */
|
|
.teachers-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 25px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.teacher-card {
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.teacher-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.teacher-avatar-large {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background-color: #e6f7ff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 15px;
|
|
color: #0066FF;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.teacher-info h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.teacher-info p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.teacher-stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #0066FF;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* 热度榜样式 */
|
|
.hot-list {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hot-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.hot-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rank {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #f5f7fa;
|
|
border-radius: 50%;
|
|
margin-right: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.top1 .rank {
|
|
background-color: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.top2 .rank {
|
|
background-color: #607d8b;
|
|
color: white;
|
|
}
|
|
|
|
.top3 .rank {
|
|
background-color: #795548;
|
|
color: white;
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
}
|
|
|
|
.info h4 {
|
|
font-size: 16px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.info p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.trend {
|
|
font-weight: bold;
|
|
color: #4caf50;
|
|
}
|
|
|
|
/* 分页样式 */
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* 页脚样式 */
|
|
.footer {
|
|
background-color: #333;
|
|
color: white;
|
|
padding: 60px 0 20px;
|
|
}
|
|
|
|
.footer-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 30px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer-logo {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.footer-links {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 30px;
|
|
}
|
|
|
|
.link-group {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.link-group h3 {
|
|
font-size: 18px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.link-group ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.link-group li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.link-group a {
|
|
color: #ccc;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.link-group a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.contact-info {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
}
|
|
|
|
.contact-info p {
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-info i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.copyright {
|
|
text-align: center;
|
|
padding-top: 20px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 8px 15px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #0066FF;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0052cc;
|
|
}
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 1px solid #0066FF;
|
|
color: #0066FF;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: #0066FF;
|
|
color: white;
|
|
}
|
|
|
|
.view-btn {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 顶部导航 -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<!-- 使用内联base64图片避免路径问题 -->
|
|
<div class="logo-placeholder">东师理想AI教育云平台</div>
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<div class="nav-item">
|
|
<a href="index.html" style="color: var(--text-dark); text-decoration: none;">首页</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="ai-resource-workshop.html" style="color: var(--text-dark); text-decoration: none;">AI资源工坊</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="cloud-classroom.html" style="color: var(--primary-blue); text-decoration: none;">名师云课</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="ai-resource-library.html" style="color: var(--text-dark); text-decoration: none;">AI资源库</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="ai-homework.html" style="color: var(--text-dark); text-decoration: none;">AI作业与阅卷</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="learning-analytics.html" style="color: var(--text-dark); text-decoration: none;">学情中心</a>
|
|
</div>
|
|
<div class="nav-item">
|
|
<a href="alliance.html" style="color: var(--text-dark); text-decoration: none;">联盟与学科工坊</a>
|
|
</div>
|
|
</nav>
|
|
<div class="header-actions">
|
|
<button class="btn btn-outline login-btn">登录</button>
|
|
<button class="btn btn-primary register-btn">注册</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 页面标题区 -->
|
|
<section class="page-header">
|
|
<div class="container">
|
|
<h1>名师云课</h1>
|
|
<p>汇聚全国名师精品课程，打造优质在线教育资源</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 主要内容区 -->
|
|
<section class="classroom-content">
|
|
<div class="container">
|
|
<!-- 课程分类区 -->
|
|
<div class="course-section">
|
|
<h2 class="section-title">课程分类</h2>
|
|
<div class="course-categories">
|
|
<div class="category-item active">全部课程</div>
|
|
<div class="category-item">小学课程</div>
|
|
<div class="category-item">初中课程</div>
|
|
<div class="category-item">高中课程</div>
|
|
<div class="category-item">语文</div>
|
|
<div class="category-item">数学</div>
|
|
<div class="category-item">英语</div>
|
|
<div class="category-item">物理</div>
|
|
<div class="category-item">化学</div>
|
|
<div class="category-item">生物</div>
|
|
<div class="category-item">历史</div>
|
|
<div class="category-item">地理</div>
|
|
<div class="category-item">政治</div>
|
|
</div>
|
|
|
|
<!-- 课程列表 -->
|
|
<div class="courses-grid">
|
|
<!-- 课程卡片示例 -->
|
|
<div class="course-card">
|
|
<div class="course-image">
|
|
<i class="fas fa-play-circle fa-3x"></i>
|
|
<div class="course-badge live">直播中</div>
|
|
</div>
|
|
<div class="course-content">
|
|
<h3 class="course-title">小学数学：分数的初步认识</h3>
|
|
<div class="course-meta">
|
|
<span><i class="fas fa-clock"></i> 45分钟</span>
|
|
<span><i class="fas fa-users"></i> 1,234人学习</span>
|
|
<span><i class="fas fa-star"></i> 4.8分</span>
|
|
</div>
|
|
<div class="course-teacher">
|
|
<div class="teacher-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-name">王老师</div>
|
|
</div>
|
|
<div class="course-tags">
|
|
<span>小学数学</span>
|
|
<span>三年级</span>
|
|
<span>数与代数</span>
|
|
</div>
|
|
<button class="btn btn-primary view-btn">立即学习</button>
|
|
</div>
|
|
</div>
|
|
<div class="course-card">
|
|
<div class="course-image">
|
|
<i class="fas fa-play-circle fa-3x"></i>
|
|
<div class="course-badge">录播</div>
|
|
</div>
|
|
<div class="course-content">
|
|
<h3 class="course-title">初中物理：牛顿第一定律</h3>
|
|
<div class="course-meta">
|
|
<span><i class="fas fa-clock"></i> 50分钟</span>
|
|
<span><i class="fas fa-users"></i> 986人学习</span>
|
|
<span><i class="fas fa-star"></i> 4.9分</span>
|
|
</div>
|
|
<div class="course-teacher">
|
|
<div class="teacher-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-name">李老师</div>
|
|
</div>
|
|
<div class="course-tags">
|
|
<span>初中物理</span>
|
|
<span>八年级</span>
|
|
<span>力学</span>
|
|
</div>
|
|
<button class="btn btn-primary view-btn">立即学习</button>
|
|
</div>
|
|
</div>
|
|
<div class="course-card">
|
|
<div class="course-image">
|
|
<i class="fas fa-play-circle fa-3x"></i>
|
|
<div class="course-badge">系列课</div>
|
|
</div>
|
|
<div class="course-content">
|
|
<h3 class="course-title">高中数学：函数的单调性</h3>
|
|
<div class="course-meta">
|
|
<span><i class="fas fa-clock"></i> 60分钟</span>
|
|
<span><i class="fas fa-users"></i> 753人学习</span>
|
|
<span><i class="fas fa-star"></i> 4.7分</span>
|
|
</div>
|
|
<div class="course-teacher">
|
|
<div class="teacher-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-name">张老师</div>
|
|
</div>
|
|
<div class="course-tags">
|
|
<span>高中数学</span>
|
|
<span>一年级</span>
|
|
<span>函数</span>
|
|
</div>
|
|
<button class="btn btn-primary view-btn">立即学习</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pagination">
|
|
<div class="layui-box layui-laypage layui-laypage-default">
|
|
<a href="" class="layui-laypage-prev">上一页</a>
|
|
<span class="layui-laypage-curr"><em class="layui-laypage-em"></em><i>1</i></span>
|
|
<a href="">2</a>
|
|
<a href="">3</a>
|
|
<a href="">4</a>
|
|
<a href="">5</a>
|
|
<a href="" class="layui-laypage-next">下一页</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 名师展示区 -->
|
|
<div class="teacher-section">
|
|
<h2 class="section-title">明星教师</h2>
|
|
<div class="teachers-grid">
|
|
<!-- 教师卡片示例 -->
|
|
<div class="teacher-card">
|
|
<div class="teacher-avatar-large">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-info">
|
|
<h3>王老师</h3>
|
|
<p>小学数学特级教师</p>
|
|
</div>
|
|
<div class="teacher-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">128</div>
|
|
<div class="stat-label">课程</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">12.5k</div>
|
|
<div class="stat-label">学生</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.9</div>
|
|
<div class="stat-label">评分</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline">查看详情</button>
|
|
</div>
|
|
<div class="teacher-card">
|
|
<div class="teacher-avatar-large">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-info">
|
|
<h3>李老师</h3>
|
|
<p>初中物理高级教师</p>
|
|
</div>
|
|
<div class="teacher-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">96</div>
|
|
<div class="stat-label">课程</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">9.8k</div>
|
|
<div class="stat-label">学生</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.8</div>
|
|
<div class="stat-label">评分</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline">查看详情</button>
|
|
</div>
|
|
<div class="teacher-card">
|
|
<div class="teacher-avatar-large">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-info">
|
|
<h3>张老师</h3>
|
|
<p>高中数学骨干教师</p>
|
|
</div>
|
|
<div class="teacher-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">87</div>
|
|
<div class="stat-label">课程</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">8.2k</div>
|
|
<div class="stat-label">学生</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.7</div>
|
|
<div class="stat-label">评分</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline">查看详情</button>
|
|
</div>
|
|
<div class="teacher-card">
|
|
<div class="teacher-avatar-large">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<div class="teacher-info">
|
|
<h3>刘老师</h3>
|
|
<p>初中英语优秀教师</p>
|
|
</div>
|
|
<div class="teacher-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">105</div>
|
|
<div class="stat-label">课程</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">10.3k</div>
|
|
<div class="stat-label">学生</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">4.9</div>
|
|
<div class="stat-label">评分</div>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-outline">查看详情</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 热门课程榜 -->
|
|
<div class="hot-courses">
|
|
<h2 class="section-title">热门课程榜</h2>
|
|
<div class="hot-list">
|
|
<div class="hot-item top1">
|
|
<div class="rank">1</div>
|
|
<div class="info">
|
|
<h4>小学数学：分数的初步认识</h4>
|
|
<p>王老师 · 小学三年级</p>
|
|
</div>
|
|
<div class="trend"><i class="fas fa-arrow-up"></i> 248</div>
|
|
</div>
|
|
<div class="hot-item top2">
|
|
<div class="rank">2</div>
|
|
<div class="info">
|
|
<h4>初中物理：牛顿第一定律</h4>
|
|
<p>李老师 · 初中八年级</p>
|
|
</div>
|
|
<div class="trend"><i class="fas fa-arrow-up"></i> 186</div>
|
|
</div>
|
|
<div class="hot-item top3">
|
|
<div class="rank">3</div>
|
|
<div class="info">
|
|
<h4>高中数学：函数的单调性</h4>
|
|
<p>张老师 · 高中一年级</p>
|
|
</div>
|
|
<div class="trend"><i class="fas fa-arrow-down"></i> 42</div>
|
|
</div>
|
|
<div class="hot-item">
|
|
<div class="rank">4</div>
|
|
<div class="info">
|
|
<h4>初中化学：化学方程式配平</h4>
|
|
<p>赵老师 · 初中九年级</p>
|
|
</div>
|
|
<div class="trend"><i class="fas fa-arrow-up"></i> 129</div>
|
|
</div>
|
|
<div class="hot-item">
|
|
<div class="rank">5</div>
|
|
<div class="info">
|
|
<h4>高中英语：英语时态专项训练</h4>
|
|
<p>刘老师 · 高中一年级</p>
|
|
</div>
|
|
<div class="trend"><i class="fas fa-arrow-up"></i> 95</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-logo">
|
|
<!-- 使用内联base64图片避免路径问题 -->
|
|
<div class="logo-placeholder">东师理想AI教育云平台</div>
|
|
<p>东师理想AI教育云平台 © 2023 版权所有</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<div class="link-group">
|
|
<h3>平台服务</h3>
|
|
<ul>
|
|
<li><a href="#">关于我们</a></li>
|
|
<li><a href="#">联系我们</a></li>
|
|
<li><a href="#">帮助中心</a></li>
|
|
<li><a href="#">用户协议</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="link-group">
|
|
<h3>资源中心</h3>
|
|
<ul>
|
|
<li><a href="#">教案库</a></li>
|
|
<li><a href="#">课件库</a></li>
|
|
<li><a href="#">习题库</a></li>
|
|
<li><a href="#">视频课程</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="link-group">
|
|
<h3>技术支持</h3>
|
|
<ul>
|
|
<li><a href="#">API文档</a></li>
|
|
<li><a href="#">开发者社区</a></li>
|
|
<li><a href="#">技术博客</a></li>
|
|
<li><a href="#">常见问题</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info">
|
|
<p><i class="fas fa-phone"></i> 400-123-4567</p>
|
|
<p><i class="fas fa-envelope"></i> support@dsideal.edu.cn</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-weixin"></i></a>
|
|
<a href="#"><i class="fab fa-weibo"></i></a>
|
|
<a href="#"><i class="fab fa-qq"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="copyright">
|
|
<p>© 2023 东师理想科技有限公司 版权所有 | 吉ICP备12345678号</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- 引入外部JS -->
|
|
<script src="https://gcore.jsdelivr.net/npm/layui@2.9.12/dist/layui.min.js"></script>
|
|
<!-- 仅引入页面所需的JS -->
|
|
<script src="../js/cloud-classroom.js"></script>
|
|
<script>
|
|
// 页面专属JS代码
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化Layui组件
|
|
layui.use(['form', 'element'], function() {
|
|
var form = layui.form;
|
|
var element = layui.element;
|
|
// 表单渲染
|
|
form.render();
|
|
});
|
|
|
|
// 课程分类点击事件
|
|
document.querySelectorAll('.category-item').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
// 移除所有active类
|
|
document.querySelectorAll('.category-item').forEach(i => {
|
|
i.classList.remove('active');
|
|
});
|
|
// 添加active类到当前点击的项
|
|
this.classList.add('active');
|
|
|
|
// 这里可以添加筛选逻辑
|
|
console.log('选择了分类：' + this.textContent);
|
|
});
|
|
});
|
|
|
|
// 立即学习按钮点击事件
|
|
document.querySelectorAll('.view-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
alert('课程学习功能将在后续版本中实现');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |