feat: 优化课程列表显示,双列布局展示更多课程
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user