diff --git a/Html/apps/static/css/teacherboard.css b/Html/apps/static/css/teacherboard.css index 0c46bea..7cb97b1 100644 --- a/Html/apps/static/css/teacherboard.css +++ b/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 { diff --git a/Html/apps/static/js/teacherboard.js b/Html/apps/static/js/teacherboard.js index 0c07dd4..69b7f59 100644 --- a/Html/apps/static/js/teacherboard.js +++ b/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 diff --git a/Html/apps/templates/teacherboard.html b/Html/apps/templates/teacherboard.html index 46ccc65..dae415b 100644 --- a/Html/apps/templates/teacherboard.html +++ b/Html/apps/templates/teacherboard.html @@ -90,9 +90,9 @@
+ - +
- +
@@ -100,8 +100,8 @@