feat: 优化课程列表显示,双列布局展示更多课程
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
yuliang_guo
2026-01-30 16:34:40 +08:00
parent b2e1ed02d1
commit 14e2e948f5

View File

@@ -1099,17 +1099,24 @@ onMounted(() => {
} }
} }
.course-library, .course-library {
flex: 2; // 课程库占更多空间
display: flex;
flex-direction: column;
min-height: 300px;
border-bottom: 1px solid #ebeef5;
}
.selected-courses { .selected-courses {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 200px;
border-bottom: 1px solid #ebeef5; border-bottom: none;
}
&:last-child { .course-library,
border-bottom: none; .selected-courses {
}
.library-header { .library-header {
display: flex; display: flex;
@@ -1132,7 +1139,17 @@ onMounted(() => {
} }
} }
.library-content, .library-content {
flex: 1;
overflow-y: auto;
padding: 8px;
max-height: 450px;
display: grid;
grid-template-columns: repeat(2, 1fr); // 双列布局
gap: 4px;
align-content: start;
}
.selected-content { .selected-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@@ -1168,17 +1185,16 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px 12px; padding: 6px 8px;
margin-bottom: 8px;
background: #f5f7fa; background: #f5f7fa;
border-radius: 6px; border-radius: 4px;
cursor: grab; cursor: grab;
transition: all 0.2s; transition: all 0.15s;
border: 2px solid transparent; border: 1px solid #e4e7ed;
height: fit-content;
&:hover { &:hover {
background: #e6e8eb; background: #e6e8eb;
transform: translateX(4px);
border-color: #667eea; border-color: #667eea;
} }
@@ -1195,6 +1211,7 @@ onMounted(() => {
background: #f0f9eb; background: #f0f9eb;
border-color: #67c23a; border-color: #67c23a;
cursor: default; cursor: default;
opacity: 0.7;
} }
.course-info { .course-info {
@@ -1203,7 +1220,7 @@ onMounted(() => {
.course-name { .course-name {
display: block; display: block;
font-size: 14px; font-size: 13px;
color: #333; color: #333;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;