Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9ffb5a11 1 parent f244c2b9

feat(teacher): 改进教师表单页面布局和样式 

重构教师表单页面，优化布局和样式，提升用户体验
- 添加作业说明文本区域
- 使用van-stepper组件替代数字输入
- 重新组织表单结构为清晰的部分
- 增强移动端响应式设计
- 更新样式和交互元素
Inline Side-by-side
Showing 4 changed files with 303 additions and 69 deletions
......@@ -62,6 +62,7 @@ declare module 'vue' {
VanRate: typeof import('vant/es')['Rate']
VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
VanStepper: typeof import('vant/es')['Stepper']
VanSticky: typeof import('vant/es')['Sticky']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-20 10:56:22
* @LastEditTime: 2025-06-20 13:38:10
* @FilePath: /mlaj/src/views/teacher/checkinPage.vue
* @Description: 文件描述
-->
......@@ -67,7 +67,7 @@
</div>
</div>
<div style="padding: 0 1rem; color: #4caf50;">
<div class="text-wrapper" style="padding: 0 1rem; color: #4caf50;">
<div class="text-header">学生动态</div>
<van-list
v-if="checkinDataList.length"
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-20 10:58:03
* @LastEditTime: 2025-06-20 15:43:37
* @FilePath: /mlaj/src/views/teacher/formPage.vue
* @Description: 教师作业新增表单页面
-->
......@@ -11,71 +11,133 @@
<div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
<div class="px-4 py-6">
<FrostedGlass class="rounded-xl overflow-hidden">
<div class="py-4">
<div class="p-6">
<van-form @submit="handleSubmit">
<van-cell-group inset>
<!-- 作业名称 -->
<van-field v-model="formData.homework_name" name="homework_name" label="作业名称" placeholder="请输入作业名称"
required :border="false" :rules="[{ required: true, message: '请输入作业名称' }]" />
<!-- 类型 -->
<!-- <van-field
v-model="formData.type"
is-link
readonly
name="type"
label="类型"
placeholder="请选择类型"
:border="false"
@click="showTypePicker = true"
/> -->
<!-- 频次 -->
<van-field v-model="formData.frequency" is-link readonly name="frequency" label="频次" placeholder="请选择频次"
:border="false" @click="showFrequencyPicker = true" />
<!-- 目标总数 -->
<van-field v-model="formData.target_count" type="number" name="target_count" label="目标总数"
:border="false" placeholder="请输入目标数量" />
<!-- 开始时间 -->
<van-field v-model="startTimeDisplay" is-link readonly name="start_time" label="开始时间"
placeholder="请选择开始时间" :border="false" @click="showStartTimePicker = true" />
<!-- 结束时间 -->
<van-field v-model="endTimeDisplay" is-link readonly name="end_time" label="结束时间" placeholder="请选择结束时间"
:border="false" @click="showEndTimePicker = true" />
<!-- 课程 -->
<van-field v-model="formData.course" is-link readonly name="course" label="课程" placeholder="请选择课程"
:border="false" @click="showCoursePicker = true" />
<!-- 活动 -->
<van-field v-model="formData.activity" is-link readonly name="activity" label="活动" placeholder="请选择活动"
:border="false" @click="showActivityPicker = true" />
<!-- 年级 -->
<van-field v-model="formData.grade" is-link readonly name="grade" label="年级" placeholder="请选择年级"
:border="false" @click="showGradePicker = true" />
<!-- 班级 -->
<van-field v-model="formData.class_name" is-link readonly name="class_name" label="班级"
placeholder="请选择班级" :border="false" @click="showClassPicker = true" />
<!-- 小组 -->
<van-field v-model="formData.group_name" is-link readonly name="group_name" label="小组"
placeholder="请选择小组" :border="false" @click="showGroupPicker = true" />
</van-cell-group>
<!-- 作业名称输入框 -->
<div class="mb-6">
<van-field
v-model="formData.homework_name"
name="homework_name"
placeholder="请输入作业名称"
required
:border="false"
class="homework-name-field"
/>
</div>
<!-- 作业要求说明 -->
<div class="mb-6">
<van-field
v-model="formData.description"
name="description"
type="textarea"
placeholder="请输入作业要求和说明"
:border="false"
rows="4"
class="description-field"
/>
</div>
<!-- 作业设置 -->
<div class="mb-6">
<h3 class="section-title">作业设置</h3>
<van-row>
<van-col span="12">
<label class="setting-label">作业频次</label>
<van-field
v-model="formData.frequency"
is-link
readonly
name="frequency"
placeholder="每天"
:border="false"
@click="showFrequencyPicker = true"
class="frequency-field"
/>
</van-col>
<van-col span="12">
<label class="setting-label">目标总数</label>
<div class="target-count-container">
<van-stepper
v-model="formData.target_count"
min="1"
max="100"
integer
button-size="24px"
input-width="60px"
/>
<span class="target-unit">次</span>
</div>
</van-col>
</van-row>
</div>
<!-- 时间设置 -->
<div class="mb-6">
<div class="time-row">
<div class="time-item">
<van-icon name="calendar-o" class="time-icon" />
<span class="time-label">开始日期：</span>
<span class="time-value" @click="showStartTimePicker = true">
{{ startTimeDisplay || '2025-05-13' }}
</span>
<van-icon name="arrow" class="arrow-icon" />
</div>
</div>
<div class="time-row">
<div class="time-item">
<van-icon name="calendar-o" class="time-icon" />
<span class="time-label">结束日期：</span>
<span class="time-value" @click="showEndTimePicker = true">
{{ endTimeDisplay || '2025-06-13' }}
</span>
<van-icon name="arrow" class="arrow-icon" />
</div>
</div>
</div>
<!-- 选择项目 -->
<div class="mb-6">
<div class="select-row">
<div class="select-item">
<van-icon name="calendar-o" class="select-icon" />
<span class="select-label">所在年级：</span>
<van-icon name="arrow" class="arrow-icon" @click="showGradePicker = true" />
</div>
</div>
<div class="select-row">
<div class="select-item">
<van-icon name="calendar-o" class="select-icon" />
<span class="select-label">所在班级：</span>
<van-icon name="arrow" class="arrow-icon" @click="showClassPicker = true" />
</div>
</div>
<div class="select-row">
<div class="select-item">
<van-icon name="calendar-o" class="select-icon" />
<span class="select-label">所在课程：</span>
<van-icon name="arrow" class="arrow-icon" @click="showCoursePicker = true" />
</div>
</div>
</div>
<!-- 提交按钮 -->
<div style="margin: 16px;">
<van-button native-type="submit" type="primary" block round :loading="loading">
确认并保存
<div class="submit-container">
<van-button
native-type="submit"
type="primary"
block
round
:loading="loading"
class="submit-btn"
>
确认发布
</van-button>
</div>
</van-form>
</div>
</FrostedGlass>
<div style="height: 4rem;"></div>
</div>
</div>
......@@ -175,9 +237,10 @@ const type = ref('');
// 表单数据
const formData = ref({
homework_name: '',
description: '',
type: $route.query.type === 'homework' ? '上传附件' : '签到',
frequency: '',
target_count: '',
target_count: 10,
start_time: new Date(),
end_time: new Date(),
course: '',
......@@ -496,18 +559,175 @@ onMounted(() => {
<style scoped>
/* 自定义样式 */
:deep(.van-field__label) {
/* 作业名称输入框 */
.homework-name-field {
background: #f5f5f5;
border-radius: 12px;
padding: 0.5rem;
}
:deep(.homework-name-field .van-field__control) {
font-size: 16px;
font-weight: 500;
padding: 12px 16px;
}
/* 作业要求说明 */
.description-field {
background: #f5f5f5;
border-radius: 12px;
padding: 4px 0;
}
:deep(.description-field .van-field__control) {
padding: 12px 16px;
min-height: 100px;
}
/* 作业设置标题 */
.section-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 16px;
}
/* 设置行 */
.setting-row {
display: flex;
gap: 20px;
align-items: flex-start;
}
.setting-item {
flex: 1;
}
.setting-label {
display: block;
font-size: 14px;
color: #666;
margin-bottom: 8px;
}
/* 频次选择 */
.frequency-field {
background: #f5f5f5;
border-radius: 8px;
padding: 2px 0;
}
:deep(.frequency-field .van-field__control) {
/* padding: 2px; */
text-align: center;
}
/* 目标总数容器 */
.target-count-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.target-unit {
font-size: 14px;
color: #666;
}
:deep(.van-stepper) {
background: #f5f5f5;
border-radius: 8px;
}
/* 时间设置 */
.time-row {
margin-bottom: 12px;
}
.time-item {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
}
.time-icon {
color: #666;
margin-right: 12px;
}
.time-label {
font-size: 14px;
color: #333;
margin-right: auto;
}
.time-value {
font-size: 14px;
color: #333;
font-weight: 500;
}
:deep(.van-field--required .van-field__label::before) {
color: #ee0a24;
.arrow-icon {
color: #999;
margin-left: 8px;
cursor: pointer;
}
/* 选择项目 */
.select-row {
margin-bottom: 12px;
}
.select-item {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 8px;
cursor: pointer;
}
.select-icon {
color: #666;
margin-right: 12px;
}
.select-label {
font-size: 14px;
color: #333;
margin-right: auto;
}
/* 提交按钮 */
.submit-container {
margin-top: 32px;
}
.submit-btn {
height: 48px;
font-size: 16px;
font-weight: 600;
}
:deep(.van-button--primary) {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
:deep(.submit-btn.van-button--primary) {
background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
border: none;
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
/* 通用样式 */
:deep(.van-field__label) {
color: #333;
font-weight: 500;
}
:deep(.van-field--required .van-field__label::before) {
color: #ee0a24;
}
:deep(.van-popup) {
......@@ -517,4 +737,17 @@ onMounted(() => {
:deep(.van-picker__toolbar) {
border-radius: 16px 16px 0 0;
}
/* 响应式设计 */
@media (max-width: 480px) {
.setting-row {
flex-direction: column;
gap: 16px;
}
.time-item,
.select-item {
padding: 10px 12px;
}
}
</style>
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-20 10:17:50
* @LastEditTime: 2025-06-20 11:47:35
* @FilePath: /mlaj/src/views/teacher/myClassPage.vue
* @Description: 我的班级页面
-->
......@@ -30,7 +30,7 @@
<!-- 筛选器 -->
<div>
<van-sticky>
<van-dropdown-menu active-color="#10b981">
<van-dropdown-menu active-color="#10b981" swipe-threshold="3">
<van-dropdown-item v-model="gradeFilter" :options="gradeOptions" @change="handleGradeChange" />
<van-dropdown-item v-model="classFilter" :options="classOptions" @change="handleClassChange" />
<van-dropdown-item v-model="courseFilter" :options="courseOptions" @change="handleCourseChange" />
......@@ -190,7 +190,7 @@ const gradeOptions = ref([
const classOptions = ref([
{ text: '全部班级', value: '全部班级' },
{ text: '高一(1)班', value: '高一(1)班' },
{ text: '高一(1)班高一(1)班', value: '高一(1)班高一(1)班' },
{ text: '高一(2)班', value: '高一(2)班' },
{ text: '高一(3)班', value: '高一(3)班' }
])
......