OK much

2025-01-01 01:43:28 +08:00
parent 1280a978f5
commit eb67bcfb70
115 changed files with 989 additions and 535 deletions
--- a/Html/static/css/course.css
+++ b/Html/static/css/course.css
@@ -0,0 +1,158 @@
+/* Reset some default styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Body & Page Background */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f5f5f5;
+    padding: 20px;
+}
+
+/* 页眉导航栏 */
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #2575fc;
+    padding: 10px 30px;
+    color: white;
+    border-radius: 10px;
+    margin-bottom: 30px;
+}
+
+.navbar .logo h1 {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.navbar-links a {
+    color: white;
+    text-decoration: none;
+    margin: 0 15px;
+    font-size: 16px;
+    transition: color 0.3s;
+}
+
+.navbar-links a:hover {
+    color: #f1c40f;
+}
+
+.navbar .avatar img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid white;
+}
+
+/* 课程详情页面主体部分 */
+.course-details {
+    max-width: 1200px;
+    margin: 0 auto;
+
+}
+
+/* 上半部分：课程封面和课程详情 */
+.course-overview {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    max-height: 200px;
+    height: 30%;
+}
+
+.course-cover {
+    width: 40%;
+    text-align: center;
+}
+
+.cover-image {
+    
+    height: 100%;
+    width: auto;
+    border-radius: 10px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.course-info {
+    width: 55%;
+    padding-left: 20px;
+}
+
+.course-title {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.course-author {
+    font-size: 16px;
+    color: #777;
+    margin-bottom: 20px;
+}
+
+.course-description {
+    font-size: 16px;
+    color: #555;
+}
+
+/* 下半部分：课程教案列表 */
+.lesson-plans {
+    margin-top: 30px;
+}
+
+.lesson-plans h3 {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+/* 课程教案卡片容器 */
+.lesson-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: space-around;
+}
+
+/* 课程教案卡片 */
+.lesson-card {
+    width: 200px;
+    height: 300px;
+    background-color: white;
+    border-radius: 15px;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    transition: transform 0.3s;
+}
+
+.lesson-card:hover {
+    transform: translateY(-10px); /* 提升效果 */
+}
+
+.lesson-image {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+}
+
+.lesson-info {
+    padding: 15px;
+}
+
+.lesson-title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.lesson-description {
+    font-size: 14px;
+    color: #777;
+}