some chage
This commit is contained in:
145
Html/apps/templates/learning-path.html
Normal file
145
Html/apps/templates/learning-path.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<link rel="stylesheet" href="/static/css/learning-path.css">
|
||||
<!-- 学习路径区域 -->
|
||||
<section class="learning-path-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">学习路径</h2>
|
||||
|
||||
<!-- 专业选择器 -->
|
||||
<div class="major-selector">
|
||||
<label for="majorSelect">选择专业方向：</label>
|
||||
<select class="form-select" id="majorSelect">
|
||||
<option value="computer">计算机科学与技术</option>
|
||||
<option value="data">数据科学与大数据</option>
|
||||
<option value="business">工商管理</option>
|
||||
<option value="design">艺术设计</option>
|
||||
<option value="language">语言文学</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 学习路径流程图 -->
|
||||
<div class="path-flow">
|
||||
<div class="path-container">
|
||||
<!-- 阶段1：已完成 -->
|
||||
<div class="path-step step-completed">
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-node">
|
||||
<i class="fas fa-code step-icon"></i>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">编程基础</div>
|
||||
<div class="step-courses">3门课程</div>
|
||||
<div class="step-progress">
|
||||
<div class="step-progress-bar" style="width: 100%"></div>
|
||||
</div>
|
||||
<div class="step-status">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 阶段2：已完成 -->
|
||||
<div class="path-step step-completed">
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-node">
|
||||
<i class="fas fa-project-diagram step-icon"></i>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">数据结构</div>
|
||||
<div class="step-courses">2门课程</div>
|
||||
<div class="step-progress">
|
||||
<div class="step-progress-bar" style="width: 100%"></div>
|
||||
</div>
|
||||
<div class="step-status">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 阶段3：进行中 -->
|
||||
<div class="path-step step-active">
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-node">
|
||||
<i class="fas fa-brain step-icon"></i>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">算法设计</div>
|
||||
<div class="step-courses">3门课程</div>
|
||||
<div class="step-progress">
|
||||
<div class="step-progress-bar" style="width: 67%"></div>
|
||||
</div>
|
||||
<div class="step-status">进行中</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 阶段4：未开始 -->
|
||||
<div class="path-step">
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-node">
|
||||
<i class="fas fa-database step-icon"></i>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">数据库原理</div>
|
||||
<div class="step-courses">2门课程</div>
|
||||
<div class="step-progress">
|
||||
<div class="step-progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="step-status">未开始</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 阶段5：未开始 -->
|
||||
<div class="path-step">
|
||||
<div class="step-connector"></div>
|
||||
<div class="step-node">
|
||||
<i class="fas fa-laptop-code step-icon"></i>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">Web开发</div>
|
||||
<div class="step-courses">5门课程</div>
|
||||
<div class="step-progress">
|
||||
<div class="step-progress-bar" style="width: 0%"></div>
|
||||
</div>
|
||||
<div class="step-status">未开始</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 课程详情面板（默认隐藏，点击阶段显示） -->
|
||||
<div class="course-panel" id="algorithm-panel">
|
||||
<div class="panel-header">
|
||||
<h3 class="panel-title">算法设计 - 课程列表</h3>
|
||||
<button class="close-panel"><i class="fas fa-times"></i></button>
|
||||
</div>
|
||||
<div class="course-list">
|
||||
<div class="course-item">
|
||||
<i class="fas fa-check-circle course-check"></i>
|
||||
<div class="course-info">
|
||||
<div class="course-name">算法基础与复杂度分析</div>
|
||||
<div class="course-duration">12课时</div>
|
||||
</div>
|
||||
<div class="course-action">
|
||||
<button class="btn btn-sm btn-primary">继续学习</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="fas fa-check-circle course-check"></i>
|
||||
<div class="course-info">
|
||||
<div class="course-name">排序与搜索算法</div>
|
||||
<div class="course-duration">15课时</div>
|
||||
</div>
|
||||
<div class="course-action">
|
||||
<button class="btn btn-sm btn-primary">继续学习</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-item">
|
||||
<i class="far fa-circle course-check"></i>
|
||||
<div class="course-info">
|
||||
<div class="course-name">动态规划与贪心算法</div>
|
||||
<div class="course-duration">18课时</div>
|
||||
</div>
|
||||
<div class="course-action">
|
||||
<button class="btn btn-sm btn-outline-primary">开始学习</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/js/learning-path.js"></script>
|
||||
</section>
|
||||
Reference in New Issue
Block a user