fix:教师端新增课程卡片中选择从课程创建的渲染错误问题（传递的是materials而不是courses）

Html/apps/static/css/teacherboard.css

@@ -60,6 +60,7 @@
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     cursor: pointer;
+    position: relative; /* 添加相对定位 */
 }
 
 .course-image {
@@ -81,6 +82,27 @@
 .course-description {
     font-size: 14px;
     color: #555;
+    margin-bottom: 10px;
+    display: -webkit-box; /* 使用-webkit-box实现文本截断 */
+    -webkit-line-clamp: 3; /* 限制显示3行 */
+    -webkit-box-orient: vertical; /* 垂直排列 */
+    overflow: hidden; /* 隐藏溢出内容 */
+    text-overflow: ellipsis; /* 用省略号表示截断 */
+}
+
+/* 课程日期信息 */
+.course-date {
+    position: absolute; /* 绝对定位到底部 */
+    bottom: 10px; /* 距离底部10px */
+    left: 0; /* 左对齐 */
+    right: 0; /* 右对齐 */
+    padding: 10px; /* 内边距 */
+    background-color: white; /* 白色背景 */
+    border-radius: 5px; /* 圆角 */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+    font-size: 12px; /* 字体大小 */
+    color: #666; /* 字体颜色 */
+    line-height: 1.5; /* 行高 */
 }
 
 /* 课程目录弹出框 */
@@ -159,7 +181,7 @@
 /* 浮窗内容 */
 .modal-content {
     background-color: #fff;
-    margin: 15% auto;
+    margin: 10% auto; /* 修改为10%以缩小顶部距离 */
     padding: 20px;
     border-radius: 10px;
     width: 80%; /* 修改为80%以适应小屏幕 */
@@ -208,7 +230,34 @@ label {
     margin-top: 20px; /* 上方间距 */
 }
 
+/* 选择课程或新建课程的下拉框 */
+.course-selection-container {
+    margin: 10px 0;
+    font-size: 16px;
+}
 
+#course-selection {
+    width: 100%; /* 占满一行 */
+    padding: 12px; /* 增加内边距 */
+    font-size: 16px; /* 调整字体大小 */
+    margin: 10px 0; /* 上下留间距 */
+    border: 2px solid #ccc; /* 边框 */
+    border-radius: 8px; /* 圆角边框 */
+    background-color: #f9f9f9; /* 背景色 */
+    transition: border 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
+}
+
+/* 鼠标悬停时下拉框的效果 */
+#course-selection:hover {
+    border-color: #4CAF50; /* 悬停时的边框颜色 */
+    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); /* 悬停时的阴影效果 */
+}
+
+/* 下拉框选中项的样式 */
+#course-selection option {
+    padding: 10px;
+    font-size: 16px;
+}
 
 /* 添加课程按钮样式 */
 .add-course-button {

Html/apps/static/js/teacherboard.js

@@ -298,7 +298,7 @@ document.getElementById('add-course-form').addEventListener('submit', function(e
     event.preventDefault();
 
     const courseName = document.getElementById('course-name').value;
-    const courseSelection = document.getElementById('course-selection').value;
+    const courseSelection = document.getElementById('course-selection').value; // 获取选择值
     const coverImage = document.getElementById('cover-preview').src;
     const courseDescription = document.getElementById('course-description').value;
     // 构建发送的数据
@@ -312,7 +312,7 @@ document.getElementById('add-course-form').addEventListener('submit', function(e
     // 如果选择了已有课程，可以通过 courseSelection 传递课程ID（根据需要修改）
     if (courseSelection !== 'new') {
         // 如果是修改已有课程，设置相关的章节信息或其他数据
-        data.chapters = ["Chapter 1", "Chapter 2"]; // 示例章节信息
+        data.chapters = ["Chapter 1", "Chapter 2"];
     }
 
     // 发送 POST 请求到 /create_material

Html/apps/templates/teacherboard.html

@@ -90,9 +90,9 @@
             <div class="cover-image-container">
                 <div id="cover-image" class="cover-image-placeholder">
                     <span class="plus-sign">+</span>
-                    <input type="file" id="cover-image-input" style="display: none;" accept="image/*" />
+                    <input type="file" id="cover-image-input" style="display: none;" accept="image/*" /> 
                 </div>
-                <img id="cover-preview" src="" alt="封面预览" style="display: none;" />
+                <img id="cover-preview" src="" alt="封面预览" style="display: none;" /> 
             </div>
             
             <form id="add-course-form">
@@ -100,8 +100,8 @@
                 <label for="course-selection">从课程创建或新建课程：</label>
                 <select id="course-selection">
                     <option value="new">新建课程</option>
-                    {% for course in courses %}
+                    {% for course in materials %}
-                        <option value="{{ course.id }}">{{ course.name }}</option>
+                        <option value="{{ course._id }}">{{ course.name }}</option>
                     {% endfor %}
                 </select>
                 <br><br>