feat(移动端): 优化教师端上课记录筛选排版

- 筛选区改为可换行/移动端堆叠布局,避免按钮被挤压或横向溢出

Made-with: Cursor
This commit is contained in:
zhonghua 2026-03-04 14:14:15 +08:00
parent 63fcf36ce2
commit ca361d6d2b

View File

@ -8,11 +8,11 @@
<!-- 筛选区域 -->
<div class="filter-section">
<a-space :size="16">
<div class="filter-row">
<a-select
v-model:value="filters.status"
placeholder="课程状态"
style="width: 140px;"
class="filter-status"
allowClear
@change="loadLessons"
>
@ -23,11 +23,11 @@
</a-select>
<a-range-picker
v-model:value="filters.dateRange"
style="width: 260px;"
class="filter-range"
@change="loadLessons"
/>
<a-button @click="resetFilters">重置</a-button>
</a-space>
<a-button class="filter-reset" @click="resetFilters">重置</a-button>
</div>
</div>
<!-- 记录列表 -->
@ -367,6 +367,9 @@ onMounted(() => {
<style scoped lang="scss">
.lesson-list-view {
overflow-x: hidden;
min-width: 0;
.page-header {
margin-bottom: 24px;
@ -391,6 +394,51 @@ onMounted(() => {
border-radius: 8px;
}
.filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
min-width: 0;
}
.filter-status {
width: 140px;
min-width: 0;
}
.filter-range {
width: 260px;
min-width: 0;
max-width: 100%;
}
.filter-reset {
white-space: nowrap;
}
@media (max-width: 768px) {
.filter-row {
flex-direction: column;
align-items: stretch;
}
.filter-status,
.filter-range {
width: 100% !important;
}
.filter-reset {
width: 100%;
}
/* RangePicker 内部输入避免撑出容器 */
:deep(.ant-picker) {
width: 100%;
max-width: 100%;
}
}
.lesson-list {
display: flex;
flex-direction: column;