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"> <div class="filter-section">
<a-space :size="16"> <div class="filter-row">
<a-select <a-select
v-model:value="filters.status" v-model:value="filters.status"
placeholder="课程状态" placeholder="课程状态"
style="width: 140px;" class="filter-status"
allowClear allowClear
@change="loadLessons" @change="loadLessons"
> >
@ -23,11 +23,11 @@
</a-select> </a-select>
<a-range-picker <a-range-picker
v-model:value="filters.dateRange" v-model:value="filters.dateRange"
style="width: 260px;" class="filter-range"
@change="loadLessons" @change="loadLessons"
/> />
<a-button @click="resetFilters">重置</a-button> <a-button class="filter-reset" @click="resetFilters">重置</a-button>
</a-space> </div>
</div> </div>
<!-- 记录列表 --> <!-- 记录列表 -->
@ -367,6 +367,9 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.lesson-list-view { .lesson-list-view {
overflow-x: hidden;
min-width: 0;
.page-header { .page-header {
margin-bottom: 24px; margin-bottom: 24px;
@ -391,6 +394,51 @@ onMounted(() => {
border-radius: 8px; 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 { .lesson-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;