diff --git a/public/images/teacher/分组76.png b/public/images/teacher/分组76.png new file mode 100644 index 0000000..458f7a2 Binary files /dev/null and b/public/images/teacher/分组76.png differ diff --git a/public/images/teacher/切片_58.png b/public/images/teacher/切片_58.png new file mode 100644 index 0000000..9d4f924 Binary files /dev/null and b/public/images/teacher/切片_58.png differ diff --git a/public/images/teacher/加号(2).png b/public/images/teacher/加号(2).png new file mode 100644 index 0000000..159d332 Binary files /dev/null and b/public/images/teacher/加号(2).png differ diff --git a/public/images/teacher/加号(3).png b/public/images/teacher/加号(3).png new file mode 100644 index 0000000..997793d Binary files /dev/null and b/public/images/teacher/加号(3).png differ diff --git a/public/images/teacher/加号_4.png b/public/images/teacher/加号_4.png new file mode 100644 index 0000000..02df121 Binary files /dev/null and b/public/images/teacher/加号_4.png differ diff --git a/public/images/teacher/路径18.png b/public/images/teacher/路径18.png new file mode 100644 index 0000000..994dac2 Binary files /dev/null and b/public/images/teacher/路径18.png differ diff --git a/public/images/teacher/路径4.png b/public/images/teacher/路径4.png new file mode 100644 index 0000000..5cb70ed Binary files /dev/null and b/public/images/teacher/路径4.png differ diff --git a/public/images/teacher/路径5.png b/public/images/teacher/路径5.png new file mode 100644 index 0000000..8c4375f Binary files /dev/null and b/public/images/teacher/路径5.png differ diff --git a/public/images/teacher/路径_2.png b/public/images/teacher/路径_2.png new file mode 100644 index 0000000..c5fbdf3 Binary files /dev/null and b/public/images/teacher/路径_2.png differ diff --git a/src/components/admin/CourseComponents/CourseCategory.vue b/src/components/admin/CourseComponents/CourseCategory.vue index bd3e562..ff9f7c4 100644 --- a/src/components/admin/CourseComponents/CourseCategory.vue +++ b/src/components/admin/CourseComponents/CourseCategory.vue @@ -114,14 +114,15 @@ const navigateToCreateCourse = () => { max-width: 100%; height: auto; min-height: 1181px; - margin-right: 28px; + margin: 0; /* 移除所有边距 */ box-sizing: border-box; - padding: 10px; /* 添加内边距以便更好地观察布局 */ + padding: 5px; /* 减少内边距 */ position: relative; /* 添加相对定位,使分页按钮的绝对定位基于此容器 */ + overflow-x: hidden; /* 防止水平滚动 */ } .top { white-space: nowrap; /* 防止链接换行 */ - padding: 0 20px; + padding: 0 8px; /* 进一步减少左右padding */ height: 60px; display: flex; align-items: center; @@ -219,9 +220,13 @@ const navigateToCreateCourse = () => { .course-grid { display: grid; - grid-template-columns: repeat(6, 1fr); - gap: 20px; + grid-template-columns: repeat(4, 1fr); /* 默认4列,确保100%缩放下不被截断 */ + gap: 12px; /* 进一步减少间距 */ margin-bottom: 20px; + width: 100%; + max-width: 100%; + box-sizing: border-box; + padding: 0 3px; /* 减少内边距 */ } .course-card { @@ -374,9 +379,11 @@ const navigateToCreateCourse = () => { aspect-ratio: 150 / 105; /* 居中 */ display: block; - margin: 5px auto 10px; + margin: 5px auto 20px; /* 增加图片下方间距从10px到20px */ position: relative; top: -10px; + object-fit: cover; + object-position: center; } .course-name{ width: 80%; @@ -391,21 +398,24 @@ const navigateToCreateCourse = () => { white-space: nowrap; /* 强制文本在一行显示 */ overflow: hidden; /* 隐藏超出容器的文本 */ text-overflow: ellipsis; /* 溢出部分用省略号表示 */ - margin-top: -5px; + margin-top: 0; /* 移除负边距,让文字与图片保持正常距离 */ + margin-bottom: 15px; /* 添加底部边距,让文字不挨着底部 */ } /* 分页样式 */ .pagination { display: flex; justify-content: center; - position: absolute; - bottom: 61px; + position: relative; + margin-top: 40px; + margin-bottom: 40px; left: 0; right: 0; } .pagination-content { - width: 703px; + width: 100%; + max-width: 703px; height: 38px; display: flex; justify-content: center; @@ -413,6 +423,7 @@ const navigateToCreateCourse = () => { margin: 0 auto; border-radius: 4px; padding: 0 10px; + box-sizing: border-box; } .page-numbers { @@ -472,4 +483,304 @@ const navigateToCreateCourse = () => { border-color: #1890ff; } +/* 响应式设计 - 让卡片图片和文字响应式放大 */ + +/* 超大屏幕 (≥1920px) - 图片和文字放大 */ +@media (min-width: 1920px) { + .course-category { + max-width: 1800px; + margin: 0 auto; + padding: 20px; + background: #f5f5f5; + border-radius: 8px; + } + + .course-grid { + grid-template-columns: repeat(6, 1fr); + gap: 30px; + } + + .course-card { + aspect-ratio: 200 / 220; + } + + .course-info img { + width: 85%; + margin: 8px auto 25px; + } + + .course-name { + font-size: 16px; + height: 24px; + line-height: 24px; + width: 85%; + margin-bottom: 18px; + } + + .section-title { + width: 60px; + height: 24px; + font-size: 14px; + } + + .more-icon { + font-size: 20px; + } +} + +/* 超大屏幕 (1600px+) */ +@media (min-width: 1600px) { + .course-category { + max-width: 1500px; + margin: 0 auto; + padding: 15px; + } + + .course-grid { + grid-template-columns: repeat(6, 1fr); + gap: 20px; + } + + .course-info img { + width: 82%; + margin: 6px auto 22px; + } + + .course-name { + font-size: 15px; + height: 22px; + line-height: 22px; + width: 82%; + margin-bottom: 16px; + } + + .section-title { + width: 55px; + height: 22px; + font-size: 13px; + } +} + +/* 大屏幕 (1400px-1599px) */ +@media (max-width: 1599px) and (min-width: 1400px) { + .course-grid { + grid-template-columns: repeat(5, 1fr); + gap: 15px; + } +} + +/* 标准屏幕 (1300px-1399px) */ +@media (max-width: 1399px) and (min-width: 1300px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 15px; + } +} + +/* 中等屏幕 (1200px-1299px) */ +@media (max-width: 1299px) and (min-width: 1200px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 15px; + } + + .course-card { + aspect-ratio: 190 / 210; + } + + .course-info img { + width: 80%; + } + + .course-name { + font-size: 14px; + width: 80%; + margin-bottom: 15px; + } +} + +/* 小屏幕 (900px-1199px) */ +@media (max-width: 1199px) and (min-width: 900px) { + .course-grid { + grid-template-columns: repeat(4, 1fr); + gap: 18px; + } + + .course-card { + aspect-ratio: 180 / 200; + } + + .course-info img { + width: 78%; + margin: 5px auto 18px; + } + + .course-name { + font-size: 13px; + height: 18px; + line-height: 18px; + width: 78%; + margin-bottom: 14px; + } + + .section-title { + width: 48px; + height: 18px; + font-size: 11px; + } +} + +/* 平板 (600px-899px) */ +@media (max-width: 899px) and (min-width: 600px) { + .course-category { + padding: 10px; + } + + .course-grid { + grid-template-columns: repeat(3, 1fr); + gap: 15px; + } + + .course-card { + aspect-ratio: 170 / 190; + } + + .course-info img { + width: 75%; + margin: 4px auto 15px; + } + + .course-name { + font-size: 12px; + height: 16px; + line-height: 16px; + width: 75%; + margin-bottom: 12px; + } + + .section-title { + width: 45px; + height: 16px; + font-size: 10px; + } + + .more-icon { + font-size: 16px; + } + + /* 调整顶部操作区域 */ + .top { + flex-direction: column; + gap: 15px; + } + + .actions { + flex-direction: column; + gap: 10px; + } + + .search-container { + width: 100%; + } + + .search-container input { + width: 70%; + } +} + +/* 移动端 (≤599px) */ +@media (max-width: 599px) { + .course-category { + padding: 8px; + } + + .course-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .course-card { + aspect-ratio: 160 / 180; + } + + .course-info img { + width: 70%; + margin: 3px auto 12px; + } + + .course-name { + font-size: 11px; + height: 14px; + line-height: 14px; + width: 70%; + margin-bottom: 10px; + } + + .section-title { + width: 40px; + height: 14px; + font-size: 9px; + } + + .more-icon { + font-size: 14px; + } + + /* 顶部区域移动端优化 */ + .top { + flex-direction: column; + gap: 10px; + padding: 10px 0; + } + + .nav-links { + justify-content: center; + } + + .nav-links a { + padding: 8px 12px; + font-size: 14px; + } + + .actions { + flex-direction: column; + gap: 8px; + width: 100%; + } + + .create-btn { + width: 100%; + padding: 10px; + } + + .search-container { + width: 100%; + } + + .search-container input { + width: 70%; + padding: 8px; + } + + .search-btn { + padding: 8px 12px; + } + + /* 分页区域移动端优化 */ + .pagination-content { + width: 100%; + padding: 0 5px; + } + + .page-numbers { + flex-wrap: wrap; + gap: 5px; + } + + .page-number { + padding: 5px 8px; + font-size: 12px; + } +} + diff --git a/src/components/admin/CourseComponents/CourseCreate.vue b/src/components/admin/CourseComponents/CourseCreate.vue index fc5109a..dc7cac0 100644 --- a/src/components/admin/CourseComponents/CourseCreate.vue +++ b/src/components/admin/CourseComponents/CourseCreate.vue @@ -49,23 +49,21 @@ :render-tag="renderInstructorTag" /> -