first
This commit is contained in:
85
Html/apps/static/css/footer.css
Normal file
85
Html/apps/static/css/footer.css
Normal file
@@ -0,0 +1,85 @@
|
||||
/* === 同款页脚 === */
|
||||
.hs-footer {
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
color: #4b5563;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
padding: 48px 20px 24px;
|
||||
}
|
||||
|
||||
.footer-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 48px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-col {
|
||||
flex: 1 1 240px;
|
||||
}
|
||||
|
||||
.footer-col h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.footer-col ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer-col li {
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.footer-col a {
|
||||
color: #4b5563;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
max-width: 1200px;
|
||||
margin: 40px auto 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 24px;
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.footer-bottom-left a,
|
||||
.footer-bottom-right a {
|
||||
color: #9ca3af;
|
||||
margin-right: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-bottom-left a:hover,
|
||||
.footer-bottom-right a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 移动端 */
|
||||
@media (max-width: 768px) {
|
||||
.footer-main {
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>快速链接</h3>
|
||||
<link rel="stylesheet" href="/static/css/footer.css">
|
||||
<footer class="hs-footer">
|
||||
<div class="footer-main">
|
||||
<div class="footer-col">
|
||||
<h4>华实学伴</h4>
|
||||
<ul>
|
||||
<li><a href="/">首页</a></li>
|
||||
<li><a href="/guide">学习指南</a></li>
|
||||
@@ -10,8 +11,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>课程分类</h3>
|
||||
<div class="footer-col">
|
||||
<h4>课程分类</h4>
|
||||
<ul>
|
||||
<li><a href="/courses/popular">热门课程</a></li>
|
||||
<li><a href="/courses/latest">最新课程</a></li>
|
||||
@@ -20,19 +21,30 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h3>联系我们</h3>
|
||||
<div class="footer-col">
|
||||
<h4>联系我们</h4>
|
||||
<p>邮箱：huashi@ecnu.com</p>
|
||||
<p>致力于为全球学习者提供高质量的在线教育资源和学习体验，帮助每个人实现自我提升和职业发展。</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-col">
|
||||
<h4>华东师范大学</h4>
|
||||
<p>热门课程</p>
|
||||
<p>学习社区</p>
|
||||
<p>联系我们</p>
|
||||
<p>最新课程</p>
|
||||
<p>学习资源库</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>版权所有 © 2025 华实学伴 教学练评一体的虚拟助教</p>
|
||||
<p>
|
||||
<a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">
|
||||
沪ICP备2025142149号
|
||||
</a>
|
||||
</p>
|
||||
<div class="footer-bottom-left">
|
||||
<a href="/privacy">隐私政策</a>
|
||||
<a href="/terms">使用条款</a>
|
||||
</div>
|
||||
<div class="footer-bottom-right">
|
||||
<span>© 2025 华实学伴. 保留所有权利</span>
|
||||
<a href="https://beian.miit.gov.cn" target="_blank">沪ICP备2025142149号</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
@@ -1,42 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>课程选择主页</title>
|
||||
<link rel="stylesheet" href="/static/css/index.css">
|
||||
<meta charset="UTF-8">
|
||||
<title>课程选择主页</title>
|
||||
<link rel="stylesheet" href="/static/css/navbar.css">
|
||||
<link rel="stylesheet" href="/static/css/footer.css">
|
||||
</head>
|
||||
<body >
|
||||
{% include 'navbar.html' %} <!-- 引入navbar.html -->
|
||||
<main>
|
||||
<div class="course-selection">
|
||||
<h2>课程列表</h2>
|
||||
<div class="course-list">
|
||||
{% for course in courses_data %}
|
||||
<div class="course-card" onclick="show_course_details('{{ course._id }}')">
|
||||
<img src="{{ course.image_url }}" alt="{{ course.course_name }}">
|
||||
<h3>{{ course.name }}</h3>
|
||||
<p>{{ course.description }}</p>
|
||||
{% if course._id in selected_courses %}
|
||||
<button class="selected-button">已选择</button>
|
||||
{% else %}
|
||||
<button class="select-button" data-course-id="{{course._id}}">选择课程</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<body>
|
||||
<header class="navbar">
|
||||
<!-- 原有导航内容保留 -->
|
||||
{% include 'navbar.html' %}
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- 原有主体内容保留 -->
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% include 'foot.html' %}
|
||||
{% include 'foot.html' %}
|
||||
</body>
|
||||
<script>
|
||||
window.appData = {
|
||||
user_selected_courses: JSON.parse(`{{selected_courses}}`.replace(/"/g, "\""))
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="/static/js/index.js"></script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user