CakeCN/hsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

copy dashboard

Browse Source
This commit is contained in:
Caikecheng
2025-10-22 19:45:56 +08:00
parent 7d861e3401
commit 02b1279185
5 changed files with 579 additions and 4484 deletions
Download Patch File Download Diff File Expand all files Collapse all files

534
Html/apps/static/css/dashboard.css
View File

@@ -47,155 +47,483 @@ body {
}
/* Dashboard 主体部分 */
.dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
:root {
--primary-blue: #6A9FB5;
--secondary-blue: #8BB4C5;
--light-blue: #E1F0F7;
--accent-blue: #4A7B9D;
--text-dark: #2C3E50;
--text-light: #7F8C8D;
--card-shadow: 0 4px 12px rgba(106, 159, 181, 0.15);
}
.dashboard-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #F9FBFD;
color: var(--text-dark);
line-height: 1.6;
}
/* 课程卡片容器 */
.course-cards {
display: flex;
flex-wrap: nowrap;
gap: 20px;
justify-content: flex-start;
padding: 10px 0;
overflow: hidden;
position: relative;
/* 导航栏样式 */
.navbar {
background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 0.8rem 1rem;
}
/* 课程卡片 */
.course-card {
width: 300px;
height: 500px;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s;
.navbar-brand {
font-weight: 700;
font-size: 1.5rem;
color: white !important;
}
.select-button {
display: block;
width: 100%;
padding: 10px;
background-color: #2575fc;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: auto; /* 将按钮推到父元素的底部 */
.nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: all 0.3s ease;
border-radius: 4px;
}
.course-card:hover {
transform: translateY(-10px); /* 提升效果 */
.nav-link:hover,
.nav-link.active {
color: white !important;
background-color: rgba(255, 255, 255, 0.15);
}
.course-image {
width: 100%;
height: 200px;
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
object-fit: cover;
}
.course-info {
padding: 20px;
/* 学习路径区域 */
.learning-path-section {
background: linear-gradient(135deg, var(--light-blue), #D4E9F2);
padding: 2rem 0;
border-radius: 0 0 20px 20px;
margin-bottom: 2rem;
}
.course-name {
font-size: 22px;
font-weight: bold;
color: #333;
.section-title {
color: var(--accent-blue);
font-weight: 600;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
font-size: 28px;
}
.course-description {
font-size: 14px;
color: #777;
margin-top: 10px;
.section-title:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--primary-blue);
border-radius: 2px;
}
/* 右侧滑出进度卡片样式 */
.course-progress {
position: fixed;
top: 0;
right: -400px; /* 初始时在屏幕外 */
width: 400px;
/* 专业选择器样式优化 */
.major-selector {
position: relative;
margin-bottom: 2rem;
}
.major-selector label {
font-weight: 600;
color: var(--accent-blue);
margin-bottom: 0.5rem;
display: block;
}
.major-selector select {
appearance: none;
background-color: white;
border: 2px solid var(--primary-blue);
border-radius: 8px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: var(--text-dark);
width: 100%;
max-width: 300px;
cursor: pointer;
transition: all 0.3s ease;
}
.major-selector select:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(106, 159, 181, 0.3);
border-color: var(--accent-blue);
}
.major-selector::after {
content: '\f078';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
pointer-events: none;
color: var(--primary-blue);
}
/* 学习路径图样式 - 横向流程图 */
.path-flow {
background-color: white;
border-radius: 12px;
padding: 2rem;
box-shadow: var(--card-shadow);
overflow-x: auto;
position: relative;
}
.path-container {
display: flex;
min-width: 900px;
position: relative;
}
.path-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0 1rem;
}
.step-connector {
position: absolute;
top: 40px;
left: -50%;
width: 100%;
height: 2px;
background-color: var(--primary-blue);
z-index: 1;
}
.step-node {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: var(--light-blue);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
position: relative;
z-index: 2;
transition: all 0.3s ease;
cursor: pointer;
}
.step-node:hover {
transform: scale(1.05);
background-color: var(--primary-blue);
}
.step-node:hover .step-icon {
color: white;
}
.step-icon {
font-size: 1.8rem;
color: var(--accent-blue);
}
.step-content {
text-align: center;
width: 100%;
}
.step-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--accent-blue);
}
.step-courses {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 0.5rem;
}
.step-progress {
height: 6px;
background-color: #e9ecef;
border-radius: 3px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.step-progress-bar {
height: 100%;
background-color: #fff;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
padding: 30px;
transition: right 0.3s ease;
z-index: 9999;
border-radius: 15px; /* 添加圆角 */
background-color: var(--primary-blue);
border-radius: 3px;
transition: width 0.5s ease;
}
.course-progress.open {
right: 0; /* 打开时显示 */
.step-status {
font-size: 0.8rem;
color: var(--text-light);
}
.progress-header {
.step-completed .step-node {
background-color: var(--primary-blue);
}
.step-completed .step-icon {
color: white;
}
.step-active .step-node {
background-color: var(--accent-blue);
box-shadow: 0 0 0 4px rgba(74, 123, 157, 0.3);
}
.step-active .step-icon {
color: white;
}
/* 课程详情面板 */
.course-panel {
display: none;
background-color: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
margin-top: 1.5rem;
}
.course-panel.active {
display: block;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
margin-bottom: 20px;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e9ecef;
}
.close-btn {
.panel-title {
font-weight: 600;
color: var(--accent-blue);
margin: 0;
}
.close-panel {
background: none;
border: none;
font-size: 24px;
font-size: 1.2rem;
color: var(--text-light);
cursor: pointer;
}
/* 章节和子章节样式 */
.chapter-list {
list-style-type: none;
padding-left: 0;
.course-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
.chapter-item {
margin: 5px 0;
padding: 5px;
cursor: pointer;
.course-item {
display: flex;
align-items: center;
padding: 0.75rem;
border-radius: 8px;
border: 1px solid #e9ecef;
transition: all 0.3s ease;
}
.chapter-item .chapter-title {
font-size: 16px;
font-weight: bold;
.course-item:hover {
border-color: var(--primary-blue);
box-shadow: 0 2px 8px rgba(106, 159, 181, 0.15);
}
.chapter-item .sub-chapter-list {
display: none; /* 初始状态下子章节隐藏 */
padding-left: 20px;
.course-check {
margin-right: 0.75rem;
color: #28a745;
}
.chapter-item.open .sub-chapter-list {
display: block; /* 展开时显示子章节 */
.course-info {
flex: 1;
}
.chapter-item:hover {
background-color: #f1f1f1;
border-radius: 5px;
.course-name {
font-weight: 500;
margin-bottom: 0.25rem;
}
/* 子章节的样式 */
.sub-chapter-item {
margin: 3px 0;
padding: 3px;
font-size: 14px;
.course-duration {
font-size: 0.8rem;
color: var(--text-light);
}
.sub-chapter-item:hover {
background-color: #e8e8e8;
}
.course-action {
margin-left: 0.75rem;
}
/* 搜索区域 */
.search-section {
padding: 2rem 0;
}
.search-container {
background-color: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
}
/* 课程卡片样式 */
.course-card {
border: none;
border-radius: 12px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
margin-bottom: 1.5rem;
overflow: hidden;
background-color: white;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(106, 159, 181, 0.2);
}
.course-img {
height: 160px;
object-fit: cover;
width: 100%;
}
.course-category {
display: inline-block;
background-color: var(--light-blue);
color: var(--accent-blue);
font-size: 0.8rem;
padding: 0.3rem 0.8rem;
border-radius: 20px;
margin-bottom: 0.8rem;
}
.course-title {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
font-size: 1.1rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-instructor {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.course-meta {
display: flex;
justify-content: space-between;
color: var(--text-light);
font-size: 0.85rem;
margin-bottom: 1rem;
}
.course-rating {
color: #FFC107;
}
.btn-view {
background-color: white;
color: var(--primary-blue);
border: 1px solid var(--primary-blue);
font-weight: 500;
transition: all 0.3s ease;
}
.btn-view:hover {
background-color: var(--light-blue);
color: var(--accent-blue);
}
.btn-enroll {
background-color: var(--primary-blue);
color: white;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-enroll:hover {
background-color: var(--accent-blue);
color: white;
}
/* 页脚样式 */
.footer {
background-color: var(--text-dark);
color: white;
padding: 2.5rem 0 1.5rem;
margin-top: 3rem;
}
.footer-heading {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.2rem;
color: white;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: #BDC3C7;
text-decoration: none;
transition: color 0.2s;
}
.footer-links a:hover {
color: white;
}
/* 响应式调整 */
@media (max-width: 768px) {
.path-container {
min-width: 700px;
}
.step-node {
width: 60px;
height: 60px;
}
.step-icon {
font-size: 1.4rem;
}
.step-title {
font-size: 0.9rem;
}
.course-list {
grid-template-columns: 1fr;
}
}

94
Html/apps/templates/dashboard copy.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华实学伴 - 专业的在线学习平台</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<body>
{% include 'navbar.html' %} <!-- 引入navbar.html -->
<section class="search-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="search-container">
<div class="input-group">
<input type="text" class="form-control form-control-lg" placeholder="搜索您感兴趣的课程...">
<button class="btn btn-primary btn-lg" type="button">
<i class="fas fa-search me-1"></i> 搜索
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="dashboard">
<h2 class="dashboard-title">—— 我的选课 ——</h2>
<div class="course-cards" id="course-cards">
<!-- 循环生成课程卡片 -->
{% for course in user_selected_course %}
<!-- <div class="course-card" onclick="openCourseProgress('{{course._id}}')">
<img src="{{course.image_url}}" alt="课程封面" class="course-image">
<div class="course-info">
<h3 class="course-name">{{course.name}}</h3>
<p class="course-description">{{course.description}}</p>
</div>
</div> -->
<div class="col-md-6 col-lg-4">
<div class="course-card card h-100" onclick="openCourseProgress('{{course._id}}')">
<img src="{{course.image_url}}"
class="course-img" alt="课程封面">
<div class="card-body d-flex flex-column">
<span class="course-category">艺术设计</span>
<h5 class="course-title">{{course.name}}</h5>
<p class="course-instructor">{{course.description}}</p>
<div class="course-meta">
<span><i class="far fa-user me-1"></i> 初级</span>
<span class="course-rating"><i class="fas fa-star"></i> 4.7</span>
</div>
<div class="mt-auto d-grid gap-2 d-md-flex">
<button class="btn btn-view flex-fill"><i class="far fa-eye me-1"></i> 查看课程</button>
<button class="btn btn-enroll flex-fill"><i class="fas fa-plus me-1"></i> 选课</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- 右侧滑出的学习进度卡片 -->
<div id="courseProgress" class="course-progress">
<div class="progress-header">
<span id="course-title"></span>
<button class="close-btn" onclick="closeCourseProgress()">×</button>
</div>
<div class="progress-content">
<p>当前学习进度: <span id="progress"></span></p>
<hr/>
<h3>章节列表：</h3>
<ul id="chapter-list">
<!-- 章节列表会在点击课程时动态生成 -->
</ul>
</div>
</div>
<script src="/static/js/dashboard.js"></script>
<script>
// 解析用户数据和课程数据
console.log(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
console.log(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
let user_data = JSON.parse(`{{user_data}}`.replaceAll("&#39;", "\"").replaceAll("True", "true").replaceAll("False", "false"));
let user_course_data = JSON.parse(`{{user_course_data}}`.replaceAll("&#34;", "\"").replaceAll("True", "true").replaceAll("False", "false"))
console.log(user_data)
console.log(user_course_data)
show_user_data(user_data, user_course_data)
</script>
</body>
</html>

48
Html/apps/templates/dashboard.html
View File

@@ -3,24 +3,62 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生个人主页</title>
<title>华实学伴 - 专业的在线学习平台</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="/static/css/dashboard.css">
</head>
<body>
{% include 'navbar.html' %} <!-- 引入navbar.html -->
<section class="search-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="search-container">
<div class="input-group">
<input type="text" class="form-control form-control-lg" placeholder="搜索您感兴趣的课程...">
<button class="btn btn-primary btn-lg" type="button">
<i class="fas fa-search me-1"></i> 搜索
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="dashboard">
<h2 class="dashboard-title">—— 我的选课 ——</h2>
<div class="course-cards" id="course-cards">
<!-- 循环生成课程卡片 -->
{% for course in user_selected_course %}
<div class="course-card" onclick="openCourseProgress('{{course._id}}')">
<!-- <div class="course-card" onclick="openCourseProgress('{{course._id}}')">
<img src="{{course.image_url}}" alt="课程封面" class="course-image">
<div class="course-info">
<h3 class="course-name">{{course.name}}</h3>
<p class="course-description">{{course.description}}</p>
</div> <!-- 补充闭合标签 -->
</div> <!-- 补充闭合标签 -->
</div>
</div> -->
<div class="col-md-6 col-lg-4">
<div class="course-card card h-100" onclick="openCourseProgress('{{course._id}}')">
<img src="{{course.image_url}}"
class="course-img" alt="课程封面">
<div class="card-body d-flex flex-column">
<span class="course-category">艺术设计</span>
<h5 class="course-title">{{course.name}}</h5>
<p class="course-instructor">{{course.description}}</p>
<div class="course-meta">
<span><i class="far fa-user me-1"></i> 初级</span>
<span class="course-rating"><i class="fas fa-star"></i> 4.7</span>
</div>
<div class="mt-auto d-grid gap-2 d-md-flex">
<button class="btn btn-view flex-fill"><i class="far fa-eye me-1"></i> 查看课程</button>
<button class="btn btn-enroll flex-fill"><i class="fas fa-plus me-1"></i> 选课</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>