1278 lines
31 KiB
Vue
1278 lines
31 KiB
Vue
<template>
|
||
<div class="homework-view">
|
||
<!-- 背景动画 -->
|
||
<div class="background-animation">
|
||
<div class="floating-shape" v-for="i in 6" :key="i" :style="{
|
||
left: Math.random() * 100 + '%',
|
||
top: Math.random() * 100 + '%',
|
||
animationDelay: Math.random() * 2 + 's'
|
||
}"></div>
|
||
</div>
|
||
|
||
<div class="homework-container">
|
||
<!-- 页面头部 -->
|
||
<div class="page-header">
|
||
<div class="header-content">
|
||
<h1 class="page-title">📝 作业管理</h1>
|
||
<p class="page-subtitle">管理和完成您的学习作业</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="btn btn-primary" @click="showCreateModal = true">
|
||
<i class="icon">➕</i>
|
||
创建作业
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作业导航 -->
|
||
<div class="homework-nav">
|
||
<button class="nav-btn" :class="{ active: activeTab === 'pending' }" @click="activeTab = 'pending'">
|
||
<i class="nav-icon">⏳</i>
|
||
待完成 ({{ pendingHomework.length }})
|
||
</button>
|
||
<button class="nav-btn" :class="{ active: activeTab === 'submitted' }" @click="activeTab = 'submitted'">
|
||
<i class="nav-icon">✅</i>
|
||
已提交 ({{ submittedHomework.length }})
|
||
</button>
|
||
<button class="nav-btn" :class="{ active: activeTab === 'graded' }" @click="activeTab = 'graded'">
|
||
<i class="nav-icon">📊</i>
|
||
已批改 ({{ gradedHomework.length }})
|
||
</button>
|
||
<button class="nav-btn" :class="{ active: activeTab === 'overdue' }" @click="activeTab = 'overdue'">
|
||
<i class="nav-icon">⚠️</i>
|
||
已逾期 ({{ overdueHomework.length }})
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 搜索和筛选 -->
|
||
<div class="search-filter">
|
||
<div class="search-box">
|
||
<i class="search-icon">🔍</i>
|
||
<input type="text" v-model="searchQuery" placeholder="搜索作业...">
|
||
</div>
|
||
<div class="filter-options">
|
||
<select v-model="selectedSubject">
|
||
<option value="">所有科目</option>
|
||
<option v-for="subject in subjects" :key="subject" :value="subject">{{ subject }}</option>
|
||
</select>
|
||
<select v-model="selectedPriority">
|
||
<option value="">所有优先级</option>
|
||
<option value="高">高优先级</option>
|
||
<option value="中">中优先级</option>
|
||
<option value="低">低优先级</option>
|
||
</select>
|
||
<select v-model="sortBy">
|
||
<option value="dueDate">按截止时间</option>
|
||
<option value="createDate">按创建时间</option>
|
||
<option value="priority">按优先级</option>
|
||
<option value="subject">按科目</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作业统计 -->
|
||
<div class="homework-stats">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📋</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number">{{ totalHomework }}</span>
|
||
<span class="stat-label">总作业数</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">✅</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number">{{ completionRate }}%</span>
|
||
<span class="stat-label">完成率</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⭐</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number">{{ averageScore }}</span>
|
||
<span class="stat-label">平均分</span>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">⏰</div>
|
||
<div class="stat-info">
|
||
<span class="stat-number">{{ urgentCount }}</span>
|
||
<span class="stat-label">紧急作业</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作业列表 -->
|
||
<div class="homework-list">
|
||
<div class="homework-item" v-for="homework in filteredHomework" :key="homework.id"
|
||
:class="{ urgent: isUrgent(homework.dueDate), overdue: isOverdue(homework.dueDate) }">
|
||
<div class="homework-header">
|
||
<div class="homework-info">
|
||
<h3 class="homework-title">{{ homework.title }}</h3>
|
||
<div class="homework-meta">
|
||
<span class="subject-tag" :style="{ backgroundColor: getSubjectColor(homework.subject) }">
|
||
{{ homework.subject }}
|
||
</span>
|
||
<span class="priority-tag" :class="homework.priority">
|
||
{{ homework.priority }}优先级
|
||
</span>
|
||
<span class="due-date">
|
||
📅 {{ formatDate(homework.dueDate) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="homework-actions">
|
||
<button class="action-btn" @click="goToHomeworkDetail(homework)" title="查看详情">
|
||
👁️
|
||
</button>
|
||
<button class="action-btn" @click="editHomework(homework)" title="编辑">
|
||
✏️
|
||
</button>
|
||
<button class="action-btn delete" @click="deleteHomework(homework.id)" title="删除">
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="homework-content">
|
||
<p class="homework-description">{{ homework.description }}</p>
|
||
<div class="homework-details">
|
||
<div class="detail-item">
|
||
<span class="detail-label">创建时间:</span>
|
||
<span class="detail-value">{{ formatDate(homework.createDate) }}</span>
|
||
</div>
|
||
<div class="detail-item" v-if="homework.teacher">
|
||
<span class="detail-label">布置老师:</span>
|
||
<span class="detail-value">{{ homework.teacher }}</span>
|
||
</div>
|
||
<div class="detail-item" v-if="homework.estimatedTime">
|
||
<span class="detail-label">预计时长:</span>
|
||
<span class="detail-value">{{ homework.estimatedTime }}分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="homework-footer">
|
||
<div class="progress-info" v-if="homework.status === 'pending'">
|
||
<span class="progress-label">进度:</span>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" :style="{ width: homework.progress + '%' }"></div>
|
||
</div>
|
||
<span class="progress-text">{{ homework.progress }}%</span>
|
||
</div>
|
||
<div class="score-info" v-if="homework.score !== null">
|
||
<span class="score-label">得分:</span>
|
||
<span class="score-value" :class="getScoreClass(homework.score)">{{ homework.score }}/100</span>
|
||
</div>
|
||
<div class="homework-buttons">
|
||
<button class="btn btn-primary" v-if="homework.status === 'pending'" @click="startHomework(homework)">
|
||
{{ homework.progress > 0 ? '继续完成' : '开始作业' }}
|
||
</button>
|
||
<button class="btn btn-success" v-if="homework.status === 'submitted'" disabled>
|
||
已提交
|
||
</button>
|
||
<button class="btn btn-info" v-if="homework.status === 'graded'" @click="viewFeedback(homework)">
|
||
查看反馈
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div class="empty-state" v-if="filteredHomework.length === 0">
|
||
<div class="empty-icon">📝</div>
|
||
<h3 class="empty-title">暂无作业</h3>
|
||
<p class="empty-description">当前筛选条件下没有找到作业</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 创建作业模态框 -->
|
||
<div class="modal-overlay" v-if="showCreateModal" @click="closeCreateModal">
|
||
<div class="modal-content" @click.stop>
|
||
<div class="modal-header">
|
||
<h3>创建新作业</h3>
|
||
<button class="close-btn" @click="closeCreateModal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form @submit.prevent="createHomework">
|
||
<div class="form-group">
|
||
<label>作业标题</label>
|
||
<input type="text" v-model="newHomework.title" required placeholder="请输入作业标题">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>作业描述</label>
|
||
<textarea v-model="newHomework.description" rows="3" placeholder="请输入作业描述"></textarea>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>科目</label>
|
||
<select v-model="newHomework.subject" required>
|
||
<option value="">选择科目</option>
|
||
<option v-for="subject in subjects" :key="subject" :value="subject">{{ subject }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>优先级</label>
|
||
<select v-model="newHomework.priority" required>
|
||
<option value="低">低优先级</option>
|
||
<option value="中">中优先级</option>
|
||
<option value="高">高优先级</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>截止时间</label>
|
||
<input type="datetime-local" v-model="newHomework.dueDate" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>预计时长(分钟)</label>
|
||
<input type="number" v-model="newHomework.estimatedTime" min="1" placeholder="60">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>布置老师</label>
|
||
<input type="text" v-model="newHomework.teacher" placeholder="请输入老师姓名">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-outline" @click="closeCreateModal">取消</button>
|
||
<button type="submit" class="btn btn-primary">创建作业</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 作业详情模态框 -->
|
||
<div class="modal-overlay" v-if="showDetailModal" @click="closeDetailModal">
|
||
<div class="modal-content large" @click.stop>
|
||
<div class="modal-header">
|
||
<h3>{{ selectedHomework?.title }}</h3>
|
||
<button class="close-btn" @click="closeDetailModal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="homework-detail" v-if="selectedHomework">
|
||
<div class="detail-section">
|
||
<h4>作业信息</h4>
|
||
<div class="detail-grid">
|
||
<div class="detail-item">
|
||
<span class="detail-label">科目:</span>
|
||
<span class="detail-value">{{ selectedHomework.subject }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">优先级:</span>
|
||
<span class="detail-value">{{ selectedHomework.priority }}优先级</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">截止时间:</span>
|
||
<span class="detail-value">{{ formatDate(selectedHomework.dueDate) }}</span>
|
||
</div>
|
||
<div class="detail-item">
|
||
<span class="detail-label">预计时长:</span>
|
||
<span class="detail-value">{{ selectedHomework.estimatedTime }}分钟</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-section">
|
||
<h4>作业描述</h4>
|
||
<p class="homework-description">{{ selectedHomework.description }}</p>
|
||
</div>
|
||
<div class="detail-section" v-if="selectedHomework.feedback">
|
||
<h4>老师反馈</h4>
|
||
<div class="feedback-content">
|
||
<p>{{ selectedHomework.feedback }}</p>
|
||
<div class="feedback-score">
|
||
<span>得分: {{ selectedHomework.score }}/100</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
|
||
// 响应式数据
|
||
const activeTab = ref('pending')
|
||
const searchQuery = ref('')
|
||
const selectedSubject = ref('')
|
||
const selectedPriority = ref('')
|
||
const sortBy = ref('dueDate')
|
||
const showCreateModal = ref(false)
|
||
const showDetailModal = ref(false)
|
||
const selectedHomework = ref(null)
|
||
|
||
const subjects = ['数学', '物理', '化学', '生物', '语文', '英语', '历史', '地理', '政治']
|
||
|
||
const newHomework = reactive({
|
||
title: '',
|
||
description: '',
|
||
subject: '',
|
||
priority: '中',
|
||
dueDate: '',
|
||
estimatedTime: 60,
|
||
teacher: ''
|
||
})
|
||
|
||
const homeworkList = ref([
|
||
{
|
||
id: 1,
|
||
title: '数学函数练习题',
|
||
description: '完成教材第5章函数相关的练习题，包括一次函数、二次函数和反比例函数的综合应用。',
|
||
subject: '数学',
|
||
priority: '高',
|
||
status: 'pending',
|
||
progress: 60,
|
||
dueDate: '2024-01-20T23:59',
|
||
createDate: '2024-01-15T10:00',
|
||
teacher: '李老师',
|
||
estimatedTime: 90,
|
||
score: null,
|
||
feedback: null
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '物理力学实验报告',
|
||
description: '根据课堂实验，完成关于牛顿第二定律的实验报告，包括实验过程、数据分析和结论。',
|
||
subject: '物理',
|
||
priority: '中',
|
||
status: 'submitted',
|
||
progress: 100,
|
||
dueDate: '2024-01-18T23:59',
|
||
createDate: '2024-01-12T14:30',
|
||
teacher: '王老师',
|
||
estimatedTime: 120,
|
||
score: null,
|
||
feedback: null
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '英语阅读理解练习',
|
||
description: '完成Unit 3的阅读理解练习，包括词汇理解、段落大意和主旨归纳。',
|
||
subject: '英语',
|
||
priority: '中',
|
||
status: 'graded',
|
||
progress: 100,
|
||
dueDate: '2024-01-15T23:59',
|
||
createDate: '2024-01-10T09:00',
|
||
teacher: '张老师',
|
||
estimatedTime: 45,
|
||
score: 85,
|
||
feedback: '阅读理解能力有所提升，但在词汇理解方面还需要加强练习。'
|
||
},
|
||
{
|
||
id: 4,
|
||
title: '化学方程式配平练习',
|
||
description: '练习化学方程式的配平方法，完成课后练习题1-20题。',
|
||
subject: '化学',
|
||
priority: '低',
|
||
status: 'overdue',
|
||
progress: 30,
|
||
dueDate: '2024-01-12T23:59',
|
||
createDate: '2024-01-08T16:00',
|
||
teacher: '陈老师',
|
||
estimatedTime: 60,
|
||
score: null,
|
||
feedback: null
|
||
},
|
||
{
|
||
id: 5,
|
||
title: '语文古诗词背诵',
|
||
description: '背诵《静夜思》、《春晓》、《登鹳雀楼》三首古诗，并理解其意境。',
|
||
subject: '语文',
|
||
priority: '高',
|
||
status: 'pending',
|
||
progress: 0,
|
||
dueDate: '2024-01-22T23:59',
|
||
createDate: '2024-01-16T11:00',
|
||
teacher: '刘老师',
|
||
estimatedTime: 30,
|
||
score: null,
|
||
feedback: null
|
||
}
|
||
])
|
||
|
||
// 计算属性
|
||
const pendingHomework = computed(() => homeworkList.value.filter(h => h.status === 'pending'))
|
||
const submittedHomework = computed(() => homeworkList.value.filter(h => h.status === 'submitted'))
|
||
const gradedHomework = computed(() => homeworkList.value.filter(h => h.status === 'graded'))
|
||
const overdueHomework = computed(() => homeworkList.value.filter(h => h.status === 'overdue'))
|
||
|
||
const currentHomework = computed(() => {
|
||
switch (activeTab.value) {
|
||
case 'pending': return pendingHomework.value
|
||
case 'submitted': return submittedHomework.value
|
||
case 'graded': return gradedHomework.value
|
||
case 'overdue': return overdueHomework.value
|
||
default: return []
|
||
}
|
||
})
|
||
|
||
const filteredHomework = computed(() => {
|
||
let filtered = currentHomework.value
|
||
|
||
// 搜索过滤
|
||
if (searchQuery.value) {
|
||
filtered = filtered.filter(h =>
|
||
h.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||
h.description.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
)
|
||
}
|
||
|
||
// 科目过滤
|
||
if (selectedSubject.value) {
|
||
filtered = filtered.filter(h => h.subject === selectedSubject.value)
|
||
}
|
||
|
||
// 优先级过滤
|
||
if (selectedPriority.value) {
|
||
filtered = filtered.filter(h => h.priority === selectedPriority.value)
|
||
}
|
||
|
||
// 排序
|
||
filtered.sort((a, b) => {
|
||
switch (sortBy.value) {
|
||
case 'dueDate':
|
||
return new Date(a.dueDate) - new Date(b.dueDate)
|
||
case 'createDate':
|
||
return new Date(b.createDate) - new Date(a.createDate)
|
||
case 'priority':
|
||
const priorityOrder = { '高': 3, '中': 2, '低': 1 }
|
||
return priorityOrder[b.priority] - priorityOrder[a.priority]
|
||
case 'subject':
|
||
return a.subject.localeCompare(b.subject)
|
||
default:
|
||
return 0
|
||
}
|
||
})
|
||
|
||
return filtered
|
||
})
|
||
|
||
const totalHomework = computed(() => homeworkList.value.length)
|
||
const completionRate = computed(() => {
|
||
const completed = homeworkList.value.filter(h => h.status === 'graded' || h.status === 'submitted').length
|
||
return totalHomework.value > 0 ? Math.round((completed / totalHomework.value) * 100) : 0
|
||
})
|
||
const averageScore = computed(() => {
|
||
const gradedItems = homeworkList.value.filter(h => h.score !== null)
|
||
if (gradedItems.length === 0) return 0
|
||
const total = gradedItems.reduce((sum, h) => sum + h.score, 0)
|
||
return Math.round(total / gradedItems.length)
|
||
})
|
||
const urgentCount = computed(() => {
|
||
return homeworkList.value.filter(h => isUrgent(h.dueDate) && h.status === 'pending').length
|
||
})
|
||
|
||
// 方法
|
||
const isUrgent = (dueDate) => {
|
||
const now = new Date()
|
||
const due = new Date(dueDate)
|
||
const diffHours = (due - now) / (1000 * 60 * 60)
|
||
return diffHours <= 24 && diffHours > 0
|
||
}
|
||
|
||
const isOverdue = (dueDate) => {
|
||
const now = new Date()
|
||
const due = new Date(dueDate)
|
||
return due < now
|
||
}
|
||
|
||
const formatDate = (dateString) => {
|
||
const date = new Date(dateString)
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})
|
||
}
|
||
|
||
const getSubjectColor = (subject) => {
|
||
const colors = {
|
||
'数学': '#FF6B6B',
|
||
'物理': '#4ECDC4',
|
||
'化学': '#45B7D1',
|
||
'生物': '#96CEB4',
|
||
'语文': '#FFEAA7',
|
||
'英语': '#DDA0DD',
|
||
'历史': '#98D8C8',
|
||
'地理': '#F7DC6F',
|
||
'政治': '#BB8FCE'
|
||
}
|
||
return colors[subject] || '#95A5A6'
|
||
}
|
||
|
||
const getScoreClass = (score) => {
|
||
if (score >= 90) return 'excellent'
|
||
if (score >= 80) return 'good'
|
||
if (score >= 70) return 'average'
|
||
return 'poor'
|
||
}
|
||
|
||
const viewHomework = (homework) => {
|
||
selectedHomework.value = homework
|
||
showDetailModal.value = true
|
||
}
|
||
|
||
const goToHomeworkDetail = (homework) => {
|
||
// 跳转到作业详情页面
|
||
router.push(`/homework/${homework.id}`)
|
||
}
|
||
|
||
const editHomework = (homework) => {
|
||
// 编辑作业逻辑
|
||
console.log('编辑作业:', homework)
|
||
}
|
||
|
||
const deleteHomework = (id) => {
|
||
if (confirm('确定要删除这个作业吗？')) {
|
||
const index = homeworkList.value.findIndex(h => h.id === id)
|
||
if (index > -1) {
|
||
homeworkList.value.splice(index, 1)
|
||
}
|
||
}
|
||
}
|
||
|
||
const startHomework = (homework) => {
|
||
// 跳转到作业详情页面
|
||
router.push(`/homework/${homework.id}`)
|
||
}
|
||
|
||
const viewFeedback = (homework) => {
|
||
viewHomework(homework)
|
||
}
|
||
|
||
const createHomework = () => {
|
||
const homework = {
|
||
id: Date.now(),
|
||
...newHomework,
|
||
status: 'pending',
|
||
progress: 0,
|
||
createDate: new Date().toISOString(),
|
||
score: null,
|
||
feedback: null
|
||
}
|
||
|
||
homeworkList.value.push(homework)
|
||
closeCreateModal()
|
||
|
||
// 重置表单
|
||
Object.keys(newHomework).forEach(key => {
|
||
if (key === 'priority') {
|
||
newHomework[key] = '中'
|
||
} else if (key === 'estimatedTime') {
|
||
newHomework[key] = 60
|
||
} else {
|
||
newHomework[key] = ''
|
||
}
|
||
})
|
||
}
|
||
|
||
const closeCreateModal = () => {
|
||
showCreateModal.value = false
|
||
}
|
||
|
||
const closeDetailModal = () => {
|
||
showDetailModal.value = false
|
||
selectedHomework.value = null
|
||
}
|
||
|
||
// 页面加载动画
|
||
onMounted(() => {
|
||
const cards = document.querySelectorAll('.homework-item, .stat-card')
|
||
cards.forEach((card, index) => {
|
||
setTimeout(() => {
|
||
card.style.opacity = '1'
|
||
card.style.transform = 'translateY(0)'
|
||
}, index * 100)
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.homework-view {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.background-animation {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.floating-shape {
|
||
position: absolute;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 50%;
|
||
animation: float 8s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||
50% { transform: translateY(-30px) rotate(180deg); }
|
||
}
|
||
|
||
.homework-container {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 2rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header-content h1 {
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.header-content p {
|
||
color: #666;
|
||
margin: 0;
|
||
}
|
||
|
||
.header-actions .btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.homework-nav {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.nav-btn {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.5rem;
|
||
padding: 1rem;
|
||
background: transparent;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
color: #666;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
background: #f8f9fa;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.nav-btn.active {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-color: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.search-filter {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.search-box {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.search-icon {
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: #666;
|
||
}
|
||
|
||
.search-box input {
|
||
width: 100%;
|
||
padding: 0.75rem 1rem 0.75rem 3rem;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.search-box input:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.filter-options {
|
||
display: flex;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.filter-options select {
|
||
padding: 0.75rem;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 10px;
|
||
background: white;
|
||
font-size: 1rem;
|
||
cursor: pointer;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.filter-options select:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.homework-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.stat-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
color: white;
|
||
}
|
||
|
||
.stat-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-number {
|
||
display: block;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.stat-label {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.homework-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.homework-item {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
padding: 1.5rem;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
transition: all 0.5s ease;
|
||
border-left: 4px solid #e0e0e0;
|
||
}
|
||
|
||
.homework-item.urgent {
|
||
border-left-color: #FF6B6B;
|
||
background: rgba(255, 107, 107, 0.05);
|
||
}
|
||
|
||
.homework-item.overdue {
|
||
border-left-color: #FF4757;
|
||
background: rgba(255, 71, 87, 0.05);
|
||
}
|
||
|
||
.homework-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.homework-title {
|
||
font-size: 1.2rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 0 0 0.5rem 0;
|
||
}
|
||
|
||
.homework-meta {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.subject-tag {
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 15px;
|
||
color: white;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.priority-tag {
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 15px;
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.priority-tag.高 {
|
||
background: #FF6B6B;
|
||
color: white;
|
||
}
|
||
|
||
.priority-tag.中 {
|
||
background: #FFD93D;
|
||
color: #333;
|
||
}
|
||
|
||
.priority-tag.低 {
|
||
background: #6BCF7F;
|
||
color: white;
|
||
}
|
||
|
||
.due-date {
|
||
color: #666;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.homework-actions {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 35px;
|
||
height: 35px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: #f8f9fa;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
background: #e9ecef;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.action-btn.delete:hover {
|
||
background: #FF6B6B;
|
||
color: white;
|
||
}
|
||
|
||
.homework-description {
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.homework-details {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 0.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.detail-label {
|
||
font-weight: 600;
|
||
color: #666;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.detail-value {
|
||
color: #333;
|
||
}
|
||
|
||
.homework-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
flex: 1;
|
||
}
|
||
|
||
.progress-label {
|
||
font-weight: 600;
|
||
color: #666;
|
||
}
|
||
|
||
.progress-bar {
|
||
flex: 1;
|
||
height: 8px;
|
||
background: #e0e0e0;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 4px;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.progress-text {
|
||
font-weight: 600;
|
||
color: #667eea;
|
||
}
|
||
|
||
.score-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.score-label {
|
||
font-weight: 600;
|
||
color: #666;
|
||
}
|
||
|
||
.score-value {
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.score-value.excellent {
|
||
color: #4CAF50;
|
||
}
|
||
|
||
.score-value.good {
|
||
color: #2196F3;
|
||
}
|
||
|
||
.score-value.average {
|
||
color: #FF9800;
|
||
}
|
||
|
||
.score-value.poor {
|
||
color: #F44336;
|
||
}
|
||
|
||
.homework-buttons {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn {
|
||
padding: 0.5rem 1rem;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
.btn-success {
|
||
background: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.btn-info {
|
||
background: #2196F3;
|
||
color: white;
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: #667eea;
|
||
border: 2px solid #667eea;
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: #667eea;
|
||
color: white;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 3rem;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border-radius: 15px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 4rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.empty-description {
|
||
color: #666;
|
||
}
|
||
|
||
/* 模态框样式 */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 15px;
|
||
width: 90%;
|
||
max-width: 600px;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.modal-content.large {
|
||
max-width: 800px;
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 1.5rem;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
}
|
||
|
||
.modal-header h3 {
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 1.5rem;
|
||
cursor: pointer;
|
||
color: #666;
|
||
padding: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 0.5rem;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea,
|
||
.form-group select {
|
||
width: 100%;
|
||
padding: 0.75rem;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
font-size: 1rem;
|
||
transition: border-color 0.3s ease;
|
||
}
|
||
|
||
.form-group input:focus,
|
||
.form-group textarea:focus,
|
||
.form-group select:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 1rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.homework-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.detail-section h4 {
|
||
margin: 0 0 1rem 0;
|
||
color: #333;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.detail-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.feedback-content {
|
||
background: #f8f9fa;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #667eea;
|
||
}
|
||
|
||
.feedback-score {
|
||
margin-top: 1rem;
|
||
font-weight: 600;
|
||
color: #667eea;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.homework-container {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.page-header {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.homework-nav {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.search-filter {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.homework-stats {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.homework-header {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.homework-footer {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.detail-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style> |