修改教师课程侧滑显示动画

Html/static/css/teacherboard.css

@@ -48,16 +48,23 @@
 }
 
 /* 课程目录弹出框 */
+
 .course-details {
     position: fixed;
     top: 0;
-    right: 0;
+    right: -400px;
     width: 300px;
     height: 100%;
     background-color: #fff;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
-    display: none;
+    transition: right 0.3s ease;
+    z-index: 9999;
+    border-radius: 15px;  /* 添加圆角 */
+}
+
+.course-details.open {
+    right: 0;  /* 打开时显示 */
 }
 
 .details-header {

Html/static/js/teacherboard.js

@@ -21,14 +21,15 @@ function openCourseDetails(courseId) {
     const courseDetails = document.getElementById('courseDetails');
     const courseTitle = document.getElementById('course-title');
     courseTitle.textContent = "课程名称: " + courseId; // 假设这里显示课程ID，实际情况应该是课程名称
-    courseDetails.style.display = 'block';
+    
+    courseDetails.classList.add('open');
 
     // 获取章节数据并渲染
     renderChapters(courseId);
 }
 
 function closeCourseDetails() {
-    document.getElementById('courseDetails').style.display = 'none';
+    document.getElementById('courseDetails').classList.remove('open');
 }
 
 function renderChapters(courseId) {